@tap-payments/onboarding-core 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-base-package.b-cdn.net/build-v2.0.0/css/main.css" />
    <script type="text/javascript" src="https://onboarding-base-package.b-cdn.net/build-v2.0.0/js/main.js.map"></script>
    <script type="text/javascript" src="https://onboarding-base-package.b-cdn.net/build-v2.0.0/js/main.js"></script>
    <script>
      let Connect = window.TapConnect;
      Connect.renderConnectElement({
          publicKey: 'pk_test_OxCj0DhX9EyTLpGqsu2wHMon',
          pageMode: Connect.PageMode.SIGNUP,
          dialogMode: Connect.DialogMode.POPUP,
          animationDuration: 500,
          enableBackdropClick: false,
          liveMode: false,
          hideInitialLoader: false,
          onSuccess: (res) => console.log('onSuccess', res),
          legacyResponse: (res) => console.log('legacyResponse', res),
          onSignInSuccess: (res: any) => {
            console.log('onSignInSuccess', res);
          },
          onDashboardURL: (res: any) => {
            console.log(res);
          },
          onStepDone: (stepName: string, extraData: any) => {
            console.log(stepName, extraData);
          },
          appInfo: {
            identifier: 'tap_dashboard_sandbox',
            name: 'Tap Connect Demo Sandbox',
            version: 'V2.0.0',
            sdk_version: '2.0.0',
          },
          appLocale: {
            language: 'en',
            direction: 'ltr',
          },
          onSignUpSuccess: (res: any) => {
            console.log(res);
          },
      });
    </script>
  </body>
</html>

React integration

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

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

function Connect() {
  return (
    <Fragment>
      <div
        style={{
          width: '100%',
          height: '100%',
          background: '#F3F4F7',
        }}
      />
      <ConnectPackage
        publicKey={'pk_test_OxCj0DhX9EyTLpGqsu2wHMon'}
        pageMode={PageMode.SIGNUP}
        dialogMode={DialogMode.POPUP}
        animationDuration={500}
        enableBackdropClick={false}
        liveMode={false}
        hideInitialLoader={false}
        onSuccess={(res) => console.log('onSuccess', res)}
        legacyResponse={(res) => console.log('legacyResponse', res)}
        onSignInSuccess={(res: any) => {
          console.log('onSignInSuccess', res);
        }}
        onDashboardURL={(res: any) => {
          console.log(res);
        }}
        onStepDone={(stepName: string, extraData: any) => {
          console.log(stepName, extraData);
        }}
        appInfo={{
          identifier: 'tap_dashboard_sandbox',
          name: 'Tap Connect Demo Sandbox',
          version: 'V2.0.0',
          sdk_version: '2.0.0',
        }}
        appLocale={{
          language: 'en',
          direction: 'ltr',
        }}
        onSignUpSuccess={(res: any) => {
          console.log(res);
        }}
      />
    </Fragment>
  );
}