2.0.1 • Published 2 years ago
@tap-payments/onboarding-base-package v2.0.1
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-base-package
es example
import React, { Fragment } from 'react';
import { ConnectPackage, DialogMode, PageMode } from '@tap-payments/onboarding-base-package';
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>
);
}