@tap-payments/onboarding-core-package
v2.1.16
Published
connect package, onboarding connect, signup connect, verification
Downloads
26
Maintainers
Keywords
Readme
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/[email protected]
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/[email protected]
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>
);
}