@tap-payments/connect-auth NPM

ConnectAuth

Handling user authentication using tap auth library. This library makes it easy.

Installs

This is a React module available through the npm registry. Installation is done using the npm install command:

npm install @tap-payments/connect-auth

---------------------------- OR -------------------------

yarn add @tap-payments/connect-auth

Examples

Auth Library

ES6

import { ConnectAuth } from '@tap-payments/connect-auth'

const App = () => {
	return (
		<ConnectAuth
			publicKey='pk_xxxxxxxxxxxxxxxxx'
			country='SA'
			language='en'
			leadId='lead_xxxxxxxxxxxxxxxxxxx'
			open={true}
			scope={['API_ACCESS_KEY']}
			postURL='https://example.com/xxxxx'
			onReady={() => console.log('onReady')}
			onError={(err) => console.log('onError', err)}
			onSuccess={(res) => console.log('onSuccess', res)}
		/>
	)
}

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://connect-auth.b-cdn.net/build-1.0.9-test/main.js"></script>
  <link href="https://connect-auth.b-cdn.net/build-1.0.9-test/main.css" rel="stylesheet" />
 </head>
 <body>
  <div id="root"></div>
  <script>
    const { renderConnectAuth, unmountConnectAuth } = window.Connect
   const startConnectAuth = () => {
    renderConnectAuth('root', {
     publicKey: 'pk_xxxxxxxxxxxxxxxxx',
     country: 'SA',
     language: 'en',
     leadId: 'lead_xxxxxxxxxxxxxxxxxx',
     scope: ['API_ACCESS_KEY'],
     open: true,
     postURL:'https://example.com/xxxxx',
     onReady: () => console.log('onReady'),
     onError: (err) => console.log('onError', err),
     onSuccess: (res) => console.log('onSuccess', res)
    })
   }

   const stopConnectAuth = () => {
    unmountConnectAuth('root')
   }
  </script>
  <button onclick="startConnectAuth()">Start</button>
  <button onclick="stopConnectAuth()">Stop</button>
 </body>
</html>

Connect Library

ES6

import { Connect } from '@tap-payments/connect-auth'

const App = () => {
	return (
		<Connect
			open={true}
			publicKey='pk_test_xxxxxxxxxxxxxxxxxxxxxx'
			country='US'
			language='en'
			scope={['API_ACCESS_KEY']}
			merchantDomain='https://example.com'
			onSuccess={(data) => console.log('onSuccess', data)}
			onError={(err) => console.log('onError', err)}
			onReady={() => console.log('onReady')}
		/>
	)
}

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://connect-auth.b-cdn.net/build-1.0.16-test/main.js"></script>
  <link href="https://connect-auth.b-cdn.net/build-1.0.16-test/main.css" rel="stylesheet" />
 </head>
 <body>
  <div id="root"></div>
  <script>
    const { renderConnect, unmountConnect } = window.Connect
   const startConnect = () => {
    renderConnect('root', {
    open:true,
    publicKey:'pk_test_xxxxxxxxxxxxxxxxxxxx',
    country:'US',
    language:'en',
    scope:['API_ACCESS_KEY'],
    merchantDomain:'https://example.com',
    onSuccess:(data) => console.log('onSuccess', data),
    onError:(err) => console.log('onError', err),
    onReady:() => console.log('onReady'),
    })
   }

   const stopConnect = () => {
    unmountConnect('root')
   }
  </script>
  <button onclick="startConnect()">Start</button>
  <button onclick="stopConnect()">Stop</button>
 </body>
</html>

Properties

name	description
open `required` - `boolean`	open/close the library
publicKey `required` - `string`	merchant public key
country `required` - `string`	merchant country code and it should be the ISO2 of the country
postURL `required` - `string`	merchant post url to push all the data
leadId `required` - `string`	merchant lead id
language `required` - `string`	it can be `en`or `ar`
onError `required` - `function`	callback function will call in case of any error happened
onSuccess `required` - `function`	callback function will called after completing the flow
onReady `required` - `function`	callback function will call after loading library configuration
scope `required` - `array`	it's an array include merchant scope