@tap-payments/connect
v2.7.6
Published
Tap Connect
Downloads
2,338
Maintainers
sherifashraftap
mostafaabobakr.tap
i.mousa
mahmoudallam
aya_tap
mud_fahmi
ahmedkaram-tap
haitham-tap
muhammadazhar007
elsharkawy
waqast
hala.q
reham_alsabbagh
kalpanatap
sadbarkhattakKeywords
Readme
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/connectExamples
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.7.6/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 |