@tap-payments/connect v2.5.5
Connect Package
Handling user onboarding and authentication for Tap Payments.
Installs
This is a React module available through the
npm registry. Installation is done using the
npm install
command:
npm install @tap-payments/connect
---------------------------- OR -------------------------
yarn add @tap-payments/connect
Examples
Connect Library
ES6
import { TapConnect, Language } from '@tap-payments/connect'
const ConnectComponent = () => {
return (
<TapConnect
// required (the public key of the merchant account provided by Tap Payments)
publicKey={'pk_test_XXXXXXXXXXXXXXXXXXXXXXX'}
// required (the domain of the merchant)
domain={'https://example.com'}
// required (Language flag to control the language of the connect element and only we support [en,ar])
language={Language.EN}
// required (the country ISO2 of the merchant)
country={'SA'}
// required (the scope of the merchant)
scope={'merchant'}
// merchant data array `ex: [operator]`
data={[]}
// optional (Lead Id can be passed in case of you already created a lead using our API )
lead={'led_xxxxxxxxxxxxxxxxxxxxxx'}
// required (Decide the mode of connect `normal` or `express`)
mature={false}
// optional (show/hide board screen after creating an account)
board={true}
// optional ( Decide the board maturity )
boardMaturity={false}
// optional ( Decide to show connect as a `popup` or `page` to our connect domain. Default value is `popup` )
mode={'popup'}
// required (boolean to open/close the connect element)
open={true}
// optional (The POST Method URL used to push te data from our server to the merchant server)
postURL={'https://api.example.com/post'}
// This redirect url after verify authentication go to merchant website
redirectUrl={''}
//optional (Callback function to handle the ready state of the TapConnect )
onReady={() => console.log('onReady')}
// optional (Callback function runs after creating an account)
onCreated={(data) => console.log('onCreated', data)}
// optional (Callback function runs when the user close TaConnect)
onClose={() => console.log('onClose')}
// optional (Callback function to handle the error)
onError={(err) => console.log('onError', err)}
// optional (Callback function runs after finishing all the flows)
onBoardCompleted={() => console.log('onBoardCompleted')}
/>
)
}
Vanilla JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no"
/>
<title>Auth-JsConnect</title>
<script src="https://tap-sdks.b-cdn.net/connect/build-1.0.0-beta/main.js"></script>
</head>
<body>
<div id="root"></div>
<script>
// once our cdn script is loaded we can use the window.TapPayments object
const { renderTapConnect, Language } = window.TapPayments
let unmountConnect = null
const startConnectAuth = () => {
const { unmount } = renderTapConnect(
{
publicKey: 'pk_test_xxxxxxxxxxxxxxxxxxxxxxxx',
language: Language.EN,
domain: 'https://example.com',
country: 'SA',
scope: 'merchant',
data: [],
lead: 'led_xxxxxxxxxxxxxxxxxxxxxx',
mature: false,
board: true,
boardMaturity: false,
mode: "popup",
open: true,
postURL: 'https://api.example.com/post',
redirectUrl: '',
onReady: () => console.log('onReady'),
onCreated: (data) => console.log('onCreated', data),
onError: (err) => console.log('onError', err),
onClose: () => console.log('onClose'),
onBoardCompleted: () => console.log('onBoardCompleted'),
},
'root'
)
// save the unmount function to be able to unmount the component
unmountConnect = unmount
}
const stopConnectAuth = () => {
unmountConnect && unmountConnect()
}
</script>
<button onclick="startConnectAuth()">Start</button>
<button onclick="stopConnectAuth()">Stop</button>
</body>
</html>
Properties
name | type | description |
---|---|---|
publicKey required | string | Public key of the merchant account provided by Tap Payments |
domain required | string | Domain of the merchant |
language required | Languages | language flag to control the language of the connect element and only accept ar,en |
country required | string | Country ISO2 of the merchant |
scope required | string | the scope of the merchant available values merchant, auth |
data optional | Array<string> | Merchant data array ex: [operator] |
lead optional | string | Lead Id can be passed in case of you already created a lead using our API |
mode required | string | Decide to show connect as a popup or page to our connect domain. Default value is popup |
mature required | boolean | Decide the mode of connect normal or express |
board optional | string | Show/Hide board screens |
open required | boolean | Open/Close the connect library |
boardMaturity optional | boolean | Decide the board maturity |
postURL optional | string | The POST Method URL used to push te data from our server to the merchant server and |
it's required only if mature is false | ||
redirectUrl optional | string | This redirect url after verify authentication go to merchant website |
It is required if scope is auth and mode is page | ||
onReady optional | function | Callback function to handle the ready state of the TapConnect |
onCreated optional | function | Callback function to called the the account created successfully |
it calls only if mature is false | ||
onSuccess optional | function | Callback function to handle the success response, it will run after the user finish the flow |
onError optional | function | Callback function to handle the error response, it will run if the user face any error |
onClose optional | function | Callback function to called when TapConnect get close |
onBoardCompleted optional | function | Callback function to called when you complete all flows |
11 days ago
11 days ago
15 days ago
15 days ago
15 days ago
15 days ago
15 days ago
15 days ago
15 days ago
15 days ago
16 days ago
16 days ago
16 days ago
16 days ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
8 months ago
10 months ago
7 months ago
9 months ago
8 months ago
8 months ago
9 months ago
6 months ago
8 months ago
8 months ago
7 months ago
8 months ago
7 months ago
6 months ago
7 months ago
8 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
8 months ago
8 months ago
9 months ago
8 months ago
8 months ago
6 months ago
8 months ago
8 months ago
7 months ago
10 months ago
8 months ago
8 months ago
9 months ago
8 months ago
8 months ago
6 months ago
9 months ago
8 months ago
8 months ago
8 months ago
7 months ago
6 months ago
8 months ago
8 months ago
10 months ago
11 months ago
11 months ago
12 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
12 months ago
12 months ago
12 months ago
1 year ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago