@tap-payments/auth-jsconnect

v2.12.4

Published

10 hours ago

connect library, auth

0High
0Medium
0Low

Auth-JsConnect

Handling user authentication and identification

Install

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

npm install @tap-payments/auth-jsconnect

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

yarn add @tap-payments/auth-jsconnect

Features

Connect - Create a new account with Tap Payments
ConnectExpress - Simplified connect flow
Business - Business entity onboarding and verification
Individual - Individual entity onboarding and verification
Entity - Entity management and verification
Password - Password management and recovery
Bank - Bank account management
Tax - Tax information management
Terminal - Terminal kit for point-of-sale operations
Auth - Authentication module
KYC - Know Your Customer verification

Examples

ES6

import { ConnectLib } from '@tap-payments/auth-jsconnect'

const App = () => {
	return (
		<ConnectLib
			open={true}
			merchantDomain={'https://www.example.com'}
			publicKey={'pk_test_xxxxxx'}
			appInfo={{
				identifier: 'tap_connect_demo',
				name: 'Tap Connect Demo',
				version: 'V2.0.0'
			}}
			businessCountryCode='SA'
			language='en'
			onError={(error) => {
				alert(JSON.stringify({ error }))
			}}
			onFlowCompleted={(data) => {
				console.log(data)
			}}
			onReady={() => {
				console.log('ready!')
			}}
			onStepCompleted={(name, data) => {
				console.log(name, data)
			}}
			onStepStarted={(name) => {
				console.log(name)
			}}
			scope={[]}
		/>
	)
}

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/auth-jsconnect/build-2.0.0/main.js"></script>
    <link href="https://cdn.tap.company/tap-sdks/auth-jsconnect/build-2.0.0/main.css" rel="stylesheet" />
  </head>
  <body>
    <div id="root"></div>
    <script>
      const { renderConnectLib, unmountConnectLib } = window.TapAuth
      const startConnect = () => {
       const {unmount}= renderConnectLib(
                      {
                        open: true,
                        merchantDomain: window.location.origin,
                        publicKey: "pk_test_lat64TEDSvHrUOYAxVRe28PQ",
                        appInfo: {
                          identifier: "tap_connect_demo",
                          name: "Tap Connect Demo",
                          version: "V2.0.0"
                        },
                        businessCountryCode: "SA",
                        language: "en",
                        onError: (error) => {
                          alert(JSON.stringify({ error }))
                        },
                        onFlowCompleted: (data) => {
                          console.log(data)
                        },
                        onReady: () => {
                          console.log("ready!")
                        },
                        onStepCompleted: (name, data) => {
                          console.log(name, data)
                        },
                        onStepError: (name, error) => {
                          console.log(name, error)
                        },
                        onStepStarted: (name) => {
                          console.log(name)
                        },
                        scope: []
                      },

          "root"
        )
      }
      const stopConnect = () => {
        unmount("root")
      }

    </script>
    <button onclick="startConnect()">Start</button>
    <button onclick="stopConnect()">Stop</button>
  </body>
</html>


## Connect
- Help merchants create an account with Tap Payments

## ConnectExpress
- Streamlined onboarding flow with simplified user experience

## Business
- Business entity registration and verification
- License number validation
- Support for creating new sessions after expiry

## Individual
- Individual entity registration and verification
- Arabic name validation (English names only accepted)
- Support for creating new sessions after expiry

## Entity
- Entity information management
- Frontend-editable fields even when non-editable from backend
- Entity verification workflows

## Password
- Password management and recovery
- Session expiry handling with new session creation support

## Bank
- Bank account information management and verification

## Tax
- Tax identification and information management
- Support for creating new sessions after expiry
- UNN Collection logic improvements

## Terminal
- Point-of-sale terminal operations
- Session expiry management with new session creation support
- Hotfix for improved session handling

## Auth
- Core authentication module for the library

## KYC
- Know Your Customer verification processes

Properties

| name | description | | ----------------------------------------- | ----------------------------------------------------------------------- | | open required - boolean | open/close the library | | merchantDomain required - string | domain name https://expamle.com | | publicKey required - string | merchant public key | | appInfo required | it's an object from type AppInfo | | businessCountryCode required - string | merchant country code and it should be the ISO2 of the country | | scope required - string | it's an string | | language required - string | it can be enor ar | | onError required - function | callback function will call in case of any error happened | | onFlowCompleted required - function | callback function will called after completing the flow | | onReady required - function | callback function will call after loading library configuration | | onStepError required - function | callback function will call in case if any error happened in the screen | | onStepCompleted optional - function | callback function will call after completing each step | | onStepStarted required - function | callback function will call in the beginning of each step |

Branch Information

This repository maintains multiple branches for different environments and stages:

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

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme