@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

2 months ago

2 months ago

2 months ago

2 months ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

3 months ago

3 months ago

2 months ago

3 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

6 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

7 months ago

7 months ago

8 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

7 months ago

7 months ago

8 months ago

9 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

9 months ago

9 months ago

9 months ago

12 months ago

10 months ago

12 months ago

10 months ago

10 months 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

10 months ago

1 year ago

1 year ago

11 months ago

1 year ago

11 months ago

10 months ago

10 months ago

1 year ago

10 months ago

10 months ago

11 months ago

1 year ago

1 year ago

10 months ago

1 year ago

12 months ago

1 year ago

1 year ago

1 year ago

10 months ago

12 months ago

12 months ago

1 year ago

10 months ago

10 months ago

10 months ago

1 year ago

10 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

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

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