@tap-payments/connect NPM

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

@fingerprintjs/fingerprintjs axios react react-dom

@infinitebrahmanuniverse/nolb-_tap @everything-registry/sub-chunk-895 @zalastax/nolb-_tap

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

5 months ago

5 months ago

3 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

7 months ago

6 months ago

6 months ago

7 months ago

6 months ago

6 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

9 months ago

9 months ago

10 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

9 months ago

10 months ago

9 months ago

9 months ago

8 months ago

9 months ago

9 months ago

10 months ago

9 months ago

10 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

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

1 year ago

11 months ago

1 year ago

11 months ago

12 months ago

1 year ago

1 year ago

1 year ago

12 months ago

1 year 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

1 year ago

1 year ago

12 months ago

11 months ago

1 year ago

11 months ago

12 months ago

1 year 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

12 months ago

1 year ago

1 year ago

1 year ago

11 months ago

12 months ago

11 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

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

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

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

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago