Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/20scoops-cnx/fanz-payments-demo
Example website help your easier for integration your website with fanz.io services
https://github.com/20scoops-cnx/fanz-payments-demo
palyo payment-integration payments strip
Last synced: about 11 hours ago
JSON representation
Example website help your easier for integration your website with fanz.io services
- Host: GitHub
- URL: https://github.com/20scoops-cnx/fanz-payments-demo
- Owner: 20Scoops-CNX
- Created: 2020-02-27T04:02:33.000Z (over 4 years ago)
- Default Branch: develop
- Last Pushed: 2022-09-20T08:05:31.000Z (about 2 years ago)
- Last Synced: 2024-05-20T21:51:27.334Z (6 months ago)
- Topics: palyo, payment-integration, payments, strip
- Language: JavaScript
- Homepage: https://demo.fanz.io/
- Size: 4.01 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# 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](https://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](https://developer.fanz.io)
## 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](https://reactjs.org)
## How to run locally
**Clone and Install project**
you can clone and configure following this steps
clone fanz sample project locally
```bash
git clone [email protected]:20Scoops-CNX/fanz-payments-demo.git
```
Install project denpendencies
```bash
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
```js
{
pbkey: '{{PUBLIC_KEY}}',
pvkey: '{{PRIVATE_KEY}}',
amount: 100,
name: 'Markus Müller',
email: '[email protected]',
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](https://developer.fanz.io/#/api-payment?id=payment-api)
**Run project locally**
you can run the example project following command
```js
yarn start
```
so now you and enter and getting start with the example project now.