@tap-payments/js-connect NPM

Purpose
Demo
Installation
Usage
Usage as js library
Usage as npm package
Example Login
Example Signup
Example Connect
Example TapAuthButton
Technical Overview
TapAuthButton Properties
ConnectPackage Properties
Connect Demo Page
Theme
Author

Purpose

Connect is Tap's Auth Package which gives user the ability to Sign up, Sign in and Forgot Password.
It is exported as npm package and also as js library.
It is shipped with two built-in themes dark/light which can be overridden by user.
It can be used for single purpose (Sign up, Sign in, Forgot Password) or with full functionality (Connect).

Demo

Demonstrating different modes with multiple animation types and languages.

Installation

NPM

npm i @tap-payments/js-connect

JS

<link rel="stylesheet" href="https://tap-connecet.b-cdn.net/build/css/Connect.css" />
<script type="text/javascript" src="https://tap-connecet.b-cdn.net/build/js/Connect.js.map"></script>
<script type="text/javascript" src="https://tap-connecet.b-cdn.net/build/js/Connect.js"></script>

Usage

After installing the package by cmd/terminal, add the following line to your project to import the required files. The package includes ConnectPackage, TapAuthButton, DialogMode, AnimationType, PageMode. (you can import one or all components based on your target).

DialogMode used to change the dialog mode (POPUP, FULLPAGE). AnimationType used to change the dialog animation (FADE, SLIDEUP, SLIDEDOWN, SLIDELEFT, SLIDERIGHT). PageMode used to changes the page Languages used to the change the direction of the dialog (EN, AR).

Usage as js library

<html>
  <head>
    <title>Tap Connect Demo JS Element</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  </head>
  <body>
    <div id="TapConnect"></div>
    <link rel="stylesheet" href="https://tap-connecet.b-cdn.net/build/css/Connect.css" />
    <script type="text/javascript" src="https://tap-connecet.b-cdn.net/build/js/Connect.js"></script>
    <script>
      Connect.renderConnectElement({
        publicKey: 'pk_test_OxCj0DhX9EyTLpGqsu2wHMon',
        scopes: ['API_ACCESS_KEY'],
        liveMode: false,
        buttonText: 'Login',
        pageMode: Connect.PageMode.LOGIN,
        language: 'en',
        containerID: 'TapConnect',
        dialogMode: Connect.DialogMode.POPUP,
        animationType: Connect.AnimationType.SLIDEDOWN,
        animationDuration: 500,
        enableBackdropClick: false,
        theme: {
          direction: 'ltr',
        },
        onSuccess: (data) => {
          alert(JSON.stringify(data));
        },
      });
    </script>
  </body>
</html>

Usage as npm package

If you want to use connect or login or signup need to import below one.

import { ConnectPackage, DialogMode, AnimationType } from '@tap-payments/js-connect';

Example Login

import React, { Fragment } from 'react';
import { useVm, useAppCtx } from '../../hooks';
import LoginVM from './LoginVM';
import { observer } from 'mobx-react-lite';
import { ConnectPackage, DialogMode, AnimationType } from '@tap-payments/js-connect';

function Login(props) {
  if (props.isAuthorized) return <Fragment />;
  const vm = useVm(LoginVM, [useAppCtx(), props]);
  return (
    <ConnectPackage
      publicKey="pk_test_OxCj0DhX9EyTLpGqsu2wHMon"
      scopes={['API_ACCESS_KEY']}
      onSuccess={vm.onSuccess}
      initialAuthType={vm.initialAuthType}
      dialogMode={DialogMode.POPUP}
      countryCode={'965'}
      pageMode={PageMode.LOGIN}
      animationType={AnimationType.SLIDEDOWN}
      animationDuration={500}
      enableBackdropClick={false}
      defaultEmailOrMobile={null}
      hideInitialLoader={props.hideInitialLoader}
      theme={{
        direction: vm.appDirection,
      }}
      moveToSignup={vm.moveToSignup}
    />
  );
}

export default Login;

Example Signup

import React, { Fragment } from 'react';
import { useVm, useAppCtx } from '../../hooks';
import SignupVM from './SignupVM';
import { observer } from 'mobx-react-lite';
import { ConnectPackage, DialogMode, AnimationType, PageMode } from '@tap-payments/js-connect';

function Signup(props) {
  const vm = useVm(SignupVM, [useAppCtx(), props]);
  return (
    <ConnectPackage
      publicKey="pk_test_OxCj0DhX9EyTLpGqsu2wHMon"
      scopes={['API_ACCESS_KEY']}
      onSuccess={vm.onSuccess}
      pageMode={PageMode.SIGNUP}
      initialAuthType={vm.initialAuthType}
      dialogMode={DialogMode.POPUP}
      countryCode={'965'}
      removeAuthType={removeAuthType}
      animationType={AnimationType.SLIDEDOWN}
      animationDuration={500}
      enableBackdropClick={false}
      defaultEmailOrMobile={null}
      hideInitialLoader={props.hideInitialLoader}
      theme={{
        direction: vm.appDirection,
      }}
    />
  );
}

export default Signup;

Example Connect

import React, { Fragment } from 'react';
import { useVm, useAppCtx } from '../../hooks';
import ConnectVM from './ConnectVM';
import { observer } from 'mobx-react-lite';
import { removeAuthType } from '../../utils/LocalStorage/authType';
import { ConnectPackage, DialogMode, AnimationType } from '@tap-payments/js-connect';

function Connect(props) {
  if (props.isAuthorized) return <Fragment />;
  const vm = useVm(ConnectVM, [useAppCtx(), props]);
  return (
    <ConnectPackage
      publicKey="pk_test_OxCj0DhX9EyTLpGqsu2wHMon"
      scopes={['API_ACCESS_KEY']}
      onSuccess={vm.onSuccess}
      pageMode={PageMode.CONNECT}
      initialAuthType={vm.initialAuthType}
      dialogMode={DialogMode.POPUP}
      countryCode={'965'}
      removeAuthType={removeAuthType}
      animationType={AnimationType.SLIDEDOWN}
      animationDuration={500}
      enableBackdropClick={false}
      defaultEmailOrMobile={null}
      hideInitialLoader={props.hideInitialLoader}
      theme={{
        direction: vm.appDirection,
      }}
    />
  );
}

export default Connect;

If you want to use TapAuthButton need to import below one.

import { TapAuthButton, DialogMode, AnimationType, PageMode } from '../../src/index';

Example TapAuthButton

TapAuthButton will automatically control open and close functionality inside.

We have another option user can control open/close popup outside also,

import { ConnectPackage } from '@tap-payments/js-connect';

To open popup => ConnectPackage.open(params);

To close popup => ConnectPackage.close();

import { TapAuthButton, DialogMode, AnimationType } from '@tap-payments/js-connect';

<TapAuthButton
  publicKey="pk_test_OxCj0DhX9EyTLpGqsu2wHMon"
  scopes={['API_ACCESS_KEY']}
  dialogMode={DialogMode.POPUP}
  pageMode={PageMode.CONNECT}
  buttonText={'Connect'}
  countryCode={'965'}
  animationType={AnimationType.SLIDEUP}
  animationDuration={500}
  enableBackdropClick={true}
  hideInitialLoader={props.hideInitialLoader}
  onSuccess={props.handleSuccess}
  theme={{
    direction: 'ltr',
  }}
/>

Technical Overview

TapAuthButton Properties

property name	Type	Default value	Description
publicKey	string		public key.
scopes	Array of strings		api access key.
buttonText	string	login	button text.
pageMode	PageMode	PageMode.LOGIN	button text.
language	string	en	language ar or en.
variant	string	contained	button variant.
showLogo	bool	true	to show the button logo.
liveMode	bool	false	it will decide live/sandbox mode.
signinDirectory	string	login	to set directory for login incase of show connect through url.
signupDirectory	string	signup	to set directory for signup incase of show connect through url.
forgotDirectory	string	forgot	to set directory for forgot incase of show connect through url.
footer	string	signup_powered_by	footer text by default its key it will take the text through key from firebase.
companyName	string	signup_tap_payments	company name.
showHeaderLogo	string	true	to show/hide header logo.
direction	string	ltr	direction of the dialog.
pageMode	PageMode	PageMode.LOGIN	dialog page mode.
hideInitialLoader	bool	false	to open dailog drirectly instead of show loader.
dialogMode	DialogMode	DialogMode.FULLPAGE	how to show the dialog popup or fullpage.
animationType	AnimationType	AnimationType.SLIDEUP	to change the animation behaviour .
animationDuration	int	500	animation duaration.
enableBackdropClick	bool	false	this is enabled only for dialogmode is popup to restrict close popup on outside click.
theme	object	`theme: {direction: 'ltr'}`	theme of the package.
openPopup	bool	true	show or hide the popup .
onSuccess	Function		on successfull case will trigger that function.
onFailure	Function		on any failure case will trigger that function.
onCancel	Function		if we cancel the process will trigger this function.
onUpdate	Function		every on update will trigger this function.
moveToLogin	Function		to move to login will trigger it.
moveToSignup	Function		to move to signup will trigger it.
initialAuthType	any		to know the initial auth type.
removeAuthType	Function		to remove authtype.
countryCode	string	'965'	initial country code.
defaultEmailOrMobile	string		to know the initial username.
to show or hide the signup section.

ConnectPackage Properties

property name	Type	Default value	Description
publicKey	string		public key.
scopes	Array of strings		api access key.
liveMode	bool	false	it will decide live/sandbox mode.
signinDirectory	string	login	to set directory for login incase of show connect through url.
signupDirectory	string	signup	to set directory for signup incase of show connect through url.
forgotDirectory	string	forgot	to set directory for forgot incase of show connect through url.
footer	string	signup_powered_by	footer text by default its key it will take the text through key from firebase.
companyName	string	signup_tap_payments	company name.
showHeaderLogo	string	true	to show/hide header logo.
direction	string	ltr	direction of the dialog.
pageMode	PageMode	PageMode.LOGIN	dialog page mode.
hideInitialLoader	bool	false	to open dailog drirectly instead of show loader.
dialogMode	DialogMode	DialogMode.FULLPAGE	how to show the dialog popup or fullpage.
animationType	AnimationType	AnimationType.SLIDEUP	to change the animation behaviour .
animationDuration	int	500	animation duaration.
enableBackdropClick	bool	false	this is enabled only for dialogmode is popup to restrict close popup on outside click.
theme	object	`theme: {direction: 'ltr'}`	theme of the package.
openPopup	bool	true	show or hide the popup .
onSuccess	Function		on successfull case will trigger that function.
onFailure	Function		on any failure case will trigger that function.
onCancel	Function		if we cancel the process will trigger this function.
onUpdate	Function		every on update will trigger this function.
moveToLogin	Function		to move to login will trigger it.
moveToSignup	Function		to move to signup will trigger it.
initialAuthType	any		to know the initial auth type.
removeAuthType	Function		to remove authtype.
countryCode	string	'965'	initial country code.
defaultEmailOrMobile	string		to know the initial username.
to show or hide the signup section.

Theme

Create Custom Theme

To override the theme, create customized theme using createMuiTheme() then wrap Connect with a <ThemeProvider/> that is using the customized theme.