@tap-payments/js-connect

v3.0.12

Published

a month ago

Auth Component, used to Connect Merchants with Tap Payments

Downloads

0High
0Medium
0Low

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

ConnectPackage Properties

| property name | Type | Status | 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.

Theme Overriding Demo

Sample implementation from the demo project:

Default Theme Properties

The following objects are used in the package and can be overridden:

Author

Kalpana D.