fanz Payments Demo
The fanz API offers a wealth of data, which can be visualised in many different ways. Based on our experiences, we have assembled a set of example layouts for you to explore. They cover the basic views typically encountered on a hotel booking website. Take these as additional inspiration for your own visualization, and explore the source code to understand how to process an API response to get the most out of our service.
You can see this demo app running in test mode on demo.fanz.io.
Overview
Payments Integration
The frontend code for the demo is in the src/
directory.
The code logic of the fanz integration contained within src/pages/Room/index.js
file for creates the payment experience on the frontend using fanz API.
Prerequisite
- API key request from merchant dashboard Documentation
Quick Start
In this case we used fetch in client side to request to fanz server but not recomended the flow should be request from server side in case for you api key security. this project are based on Reactjs framework
How to run locally
Clone and Install project
you can clone and configure following this steps
clone fanz sample project locally
git clone git@github.com:20Scoops-CNX/fanz-payments-demo.git
Install project denpendencies
cd fanz-payments-demo && yarn install
Configuration api key
in this sample you gonna use api key directly from source code you can go to src/pages/Room/index.js
in section
{
pbkey: '{{PUBLIC_KEY}}',
pvkey: '{{PRIVATE_KEY}}',
amount: 100,
name: 'Markus Müller',
email: 'fanzmerchant1@gmail.com',
success_url: '{{YOUR_SUCCESS_URL: http://localhost:3000/results}}',
fail_url: '{{YOUR_FAIL_URL: http://localhost:3000/failed}}',
back_url: '{{YOUR_BACK_URL: http://localhost:3000/home}}'
}
Recomended : secret keys use in your server side environment should be more securely.
change pbkey
and pvkey
from your api key that you get from fanz dashboard
and change success_url
, fail_url
, back_url
to locally url as example in above.
to see full documentation Document
Run project locally
you can run the example project following command
yarn start
so now you and enter and getting start with the example project now.