@tap-payments/onboarding-core-package NPM

onboarding-base-react-package

vanilla integration

<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>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="TapConnect"></div>
    <link rel="stylesheet" href="https://onboarding-core-package.b-cdn.net/build-v2.1.10/css/main.css" />
    <script type="text/javascript" src="https://onboarding-core-package.b-cdn.net/build-v2.1.10/js/main.js"></script>

    <script>
        const targetContainerId = "TapConnect"
        const Connect = window.OnBoardingCorePackage
        Connect.renderConnectElement(targetContainerId, {
        publicKey: "pk_test_OxCj0DhX9EyTLpGqsu2wHMon",
        pageMode: Connect.PageMode.CONNECT,
        dialogMode: Connect.DialogMode.POPUP,
        animationDuration: 500,
        enableBackdropClick: false,
        isOpen: true,
        // it's important to know environment type
        liveMode: false,
        hideInitialLoader: false,
        onSuccess: (res) => {
          console.log("onSuccess", res)
        },
        legacyResponse: (res) => console.log("legacyResponse", res),
        onSignInSuccess: (res) => {
          console.log("onSignInSuccess", res)
        },
        onDashboardURL: (res) => {
          console.log(res)
        },
        onStepDone: (stepName, extraData) => {
          console.log(stepName, extraData)
        },
        appInfo: {
          identifier: "tap_dashboard_sandbox",
          projectName: "Tap Connect Demo Sandbox",
          version: "V2.1.0"
        },
        appLocale: {
          language: "en",
          direction: "ltr"
        },
        onSignUpSuccess: (res) => {
          console.log(res)
        }
      });
    </script>
  </body>
</html>

vanilla integration with button

<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>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="TapConnect"></div>
    <link rel="stylesheet" href="https://onboarding-core-package.b-cdn.net/build-v2.1.10/css/main.css" />
    <script type="text/javascript" src="https://onboarding-core-package.b-cdn.net/build-v2.1.10/js/main.js"></script>

    <script>
      const targetContainerId = 'TapConnect';
      const Connect = window.OnBoardingCorePackage;
      function fireConnect() {
        Connect.renderConnectElement(targetContainerId, {
          publicKey: 'pk_test_OxCj0DhX9EyTLpGqsu2wHMon',
          pageMode: Connect.PageMode.CONNECT,
          dialogMode: Connect.DialogMode.POPUP,
          animationDuration: 500,
          enableBackdropClick: false,
          isOpen: true,
          // it's important to know environment type
          liveMode: false,
          hideInitialLoader: false,
          onSuccess: (res) => {
            console.log('onSuccess', res);
          },
          legacyResponse: (res) => console.log('legacyResponse', res),
          onSignInSuccess: (res) => {
            console.log('onSignInSuccess', res);
          },
          onDashboardURL: (res) => {
            console.log(res);
          },
          onStepDone: (stepName, extraData) => {
            console.log(stepName, extraData);
          },
          appInfo: {
            identifier: 'tap_dashboard_sandbox',
            projectName: 'Tap Connect Demo Sandbox',
            version: 'V2.1.0',
          },
          appLocale: {
            language: 'en',
            direction: 'ltr',
          },
          onSignUpSuccess: (res) => {
            console.log(res);
          },
        });
      }
    </script>
    <button onclick="fireConnect()">test connect</button>
  </body>
</html>

React integration Connect

install our package npm install @tap-payments/onboarding-core-package@2.1.10
es example

import React, { Fragment } from 'react';
import { ConnectPackage, DialogMode, PageMode } from '@tap-payments/onboarding-core-package';

function App() {
  return (
    <Fragment>
      <div
        style={{
          width: '100%',
          height: '100%',
          background: '#F3F4F7',
        }}
      />
      <ConnectPackage
        publicKey={'pk_test_OxCj0DhX9EyTLpGqsu2wHMon'}
        pageMode={PageMode.CONNECT}
        dialogMode={DialogMode.POPUP}
        animationDuration={500}
        enableBackdropClick={false}
        liveMode={false}
        isOpen={true}
        hideInitialLoader={false}
        onSuccess={(res: any) => {
          alert('success');
          console.log('onSuccess', res);
        }}
        onSignInSuccess={(res: any) => {
          alert('successfully signed in');
          console.log('onSignInSuccess', res);
        }}
        onDashboardURL={(res: any) => {
          alert('dashboard redirection');
          console.log(res);
          if (res.redirect_url) window.location.href = res.redirect_url;
        }}
        onStepDone={(stepName: string, extraData: any) => {
          console.log(stepName, extraData);
        }}
        appInfo={{
          identifier: 'tap_dashboard_sandbox',
          projectName: 'Tap Connect Demo Sandbox',
          version: 'V2.0.0',
        }}
        appLocale={{
          language: 'en',
          direction: 'ltr',
        }}
        onSignUpSuccess={(res: any) => {
          console.log(res);
        }}
      />
    </Fragment>
  );
}

React integration verification

install our package npm install @tap-payments/onboarding-core-package@2.1.0
es example

import React, { Fragment } from 'react';
import { ConnectPackage, DialogMode, PageMode } from '@tap-payments/onboarding-core-package';

function Verification() {
  // eslint-disable-next-line no-restricted-globals
  const token = new URLSearchParams(location?.search)?.get('token') || '';

  return (
    <Fragment>
      <div style={{ width: '100%', height: '100%', background: '#F3F4F7' }} />
      <ConnectPackage
        publicKey={'pk_test_OxCj0DhX9EyTLpGqsu2wHMon'}
        pageMode={PageMode.VERIFICATION}
        token={token}
        dialogMode={DialogMode.POPUP}
        animationDuration={500}
        enableBackdropClick={false}
        // it's important to know environment type
        liveMode={false}
        isOpen={true}
        hideInitialLoader={false}
        onSuccess={(res) => {
          // redirect him to login
          location.href = 'https://businesses.tap.company/';
        }}
        appInfo={{
          identifier: 'tap_dashboard_sandbox',
          projectName: 'Tap Connect Demo Sandbox',
          version: 'V2.1.0',
        }}
        appLocale={{
          language: 'en',
          direction: 'ltr',
        }}
      />
    </Fragment>
  );
}