@tap-payments/connect

v2.12.11

Published

7 days ago

Tap Connect

0High
0Medium
0Low

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://cdn.tap.company/tap-sdks/connect/build-2.12.11/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 | ----------------------------------------- | publicKey required | domain required | language required | country required | scope required | data optional | lead optional | mode required | mature required | board optional | open required | features.dialogStartTransition | features.dialogEndTransition | features.emailAuth | features object | loaderColor optional | notification optional | boardMaturity optional | settingData optional | postURL optional | | redirectUrl optional | | onReady optional | onCreated optional | | onSuccess optional | onError optional | onClose optional | onBoardCompleted optional | onSettingFetched optional | type | description | | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | string | Public key of the merchant account provided by Tap Payments | | string | Domain of the merchant | | Languages | language flag to control the language of the connect element and only accept [ar,en] | | string | Country ISO2 of the merchant | | string | the scope of the merchant available values [merchant, auth] | | Array<string> | Merchant data array ex: [operator] | | string | Lead Id can be passed in case of you already created a lead using our API | | 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 | | boolean | Decide the mode of connect normal or express | | string | Show/Hide board screens | | boolean | Open/Close the connect library | optional | left or right or up or down | Used to handle auth slide animation direction when open popup for auth kit | optional | left or right or up or down | Used to handle auth slide animation direction when close popup for auth kit | | boolean | Used to enable Qatar email verification. This feature is only applicable for the express flow (mature={false}). When set to true, it enables email-based authentication for Qatar onboarding | | 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) | | string | Used to change loader color and it can be used only for board kit | | object: {email: boolean, mobile?: boolean} | Express flow decide to send notification to email or mobile after finish create account | | boolean | Decide the board maturity | | boolean | This is to get settings information. It is used board kit and other kits open from board | | 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 | | string | This redirect url after verify authentication go to merchant website | | | It is required if scope is auth and mode is page | | function | Callback function to handle the ready state of the TapConnect | | function | Callback function to called the the account created successfully | | | it calls only if mature is false | | function | Callback function to handle the success response, it will run after the user finish the flow | | function | Callback function to handle the error response, it will run if the user face any error | | function | Callback function to called when TapConnect get close | | function | Callback function to called when you complete all flows | | function | Callback function to called after fetch settings information. It is used board kit and other kits open from board |

Branch Information

This repository maintains multiple branches for different environments and stages:

| Branch | Purpose | Environment | | ------------- | ------------------------------ | ----------- | | main | Production releases | Production | | development | Development features and fixes | Development | | beta | Beta features and testing | Beta | | sandbox | Sandbox environment testing | Sandbox |

Workflow: development → sandbox → beta → main (production)

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme