@tap-payments/connect v2.8.1
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-2.8.1/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 or content to our connect domain. Default value is popup . content mode only used for board kit |
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 |
features.dialogStartTransition optional | left or right or up or down | Used to handle auth slide animation direction when open popup for auth kit |
features.dialogEndTransition optional | left or right or up or down | Used to handle auth slide animation direction when close popup for auth kit |
features object | all values true | Used to show or hide some fields (poweredBy, merchantLogo - Used to hide the merchant logo and it can be used only for auth kit, switchLanguage, overlay - Used to disable the background color and it can be used only for auth kit, loaderOverlay - Used to disable the loader background color and it can be used only for auth kit, tapTextLogo, closeButton - Used enable to close dialog, disableNafath - Used to hide nafath login button in auth kit, disablePaci - Used to hide paci login button in auth kit) |
loaderColor optional | string | Used to change loader color and it can be used only for board kit |
notification optional | object: {email: boolean, mobile?: boolean} | Express flow decide to send notification to email or mobile after finish create account |
boardMaturity optional | boolean | Decide the board maturity |
settingData optional | boolean | This is to get settings information. It is used board kit and other kits open from board |
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 |
onSettingFetched optional | function | Callback function to called after fetch settings information. It is used board kit and other kits open from board |
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
4 months ago
4 months ago
2 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 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
9 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
8 months ago
9 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
1 year ago
11 months ago
1 year ago
11 months ago
11 months ago
1 year ago
12 months ago
1 year ago
11 months ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
11 months ago
1 year ago
1 year ago
12 months ago
1 year ago
12 months ago
11 months ago
11 months ago
1 year ago
11 months ago
11 months ago
12 months ago
1 year ago
1 year ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
11 months ago
1 year ago
1 year ago
1 year ago
11 months ago
11 months ago
10 months ago
1 year ago
11 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
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
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
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
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
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
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
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
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
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
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
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago