@tap-payments/connect-v2
v0.0.33-test
Published
A React SDK that allows merchants to easily integrate with Tap Connect in their applications, handling identification and authentication seamlessly.
Maintainers
elsharkawy
waqast
kalpanatap
sherifashraftap
sadbarkhattak
muhammadazhar007
mud_fahmi
haitham-tap
mostafaabobakr.tap
aya_tap
mahmoudallam
a.safwat-tap
ali-sanad-tap
omar_saber
madel-tapKeywords
Readme
Connect SDK V2
A React SDK that allows merchants to easily integrate with Tap Connect in their applications, handling identification and authentication seamlessly.
This package provides:
ConnectElement: a React component that can be embedded directly in your app to enable secure, localized, and customizable connections.
renderTapConnect: a UMD helper function (available on the global TapConnectSDK object) that lets you render the widget in plain JavaScript environments without a React build setup.
📦 Installation
- Using
npm:npm install @tap-payments/connect-v2 - Using
yarn:yarn add @tap-payments/connect-v2
⚡ Quick Start
import React, { useState } from 'react';
import { ConnectElement, ConnectScope, ConnectTheme, ConnectMode } from '@tap-payments/connect-v2';
const App = () => {
const [open, setOpen] = useState(false);
return (
<div>
<button onClick={() => setOpen(true)}>Open Connect Element</button>
<ConnectElement
open={open}
publicKey="pk_test_XXXXXXXXXXXXXXXXXXXXXXX"
merchantDomain="https://example.com"
theme={ConnectTheme.DARK}
scope={ConnectScope.MERCHANT}
onClose={() => setOpen(false)}
features={{ poweredBy: true, closeButton: true }}
mode={ConnectMode.POPUP}
/>
</div>
);
};
export default App;🌐 Vanilla JS Demo
You can also use the SDK without a React build setup by including the UMD bundle directly in your HTML file. The global TapConnectSDK object provides a helper method to render the widget into any container element.
<!doctype html>
<html>
<head>
<title>Tap Connect SDK Demo</title>
</head>
<body>
<div id="connect-container"></div>
<button onclick="openConnect()">Open Connect</button>
<!-- React and ReactDOM (required for the widget to work) -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<!-- Tap Connect SDK UMD bundle -->
<script src="https://cdn.tap.company/tap-sdks/connect-v2/build-0.0.28-test/index.js"></script>
<script>
function openConnect() {
TapConnectSDK.renderConnectElement('connect-container', {
open: true,
publicKey: 'pk_test_lat64TEDSvHrUOYAxVRe28PQ',
merchantDomain: 'https://connect.dev.tap.company',
language: TapConnectSDK.ConnectLanguage.EN,
theme: TapConnectSDK.ConnectTheme.DARK,
scope: TapConnectSDK.ConnectScope.MERCHANT,
data: ['brand', 'entity'],
showBoard: true,
mode: TapConnectSDK.ConnectMode.PAGE,
});
}
</script>
</body>
</html>🧠 Props
| Prop | Type | Required | Description |
| ----------------------- | ------------------------------------------------------ | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| open | boolean | ✅ | Controls whether Connect element is open or closed. |
| publicKey | string | ✅ | Your public API key provided by Tap Payments. |
| merchantDomain | string | ✅ | Merchant's domain (e.g. https://expamle.com). |
| scope | ConnectScope | ✅ | Defines the integration scope [auth, merchant]. |
| onReady | () => void | ❌ | Called when the app configurations are loaded successfully initializing. |
| onClose | () => void | ❌ | Triggered when the Connect element is closed by the user. |
| onError | (eror: CustomError) => void | ❌ | Triggered on any error. |
| onSuccess | (response: Record<string, string \| number>) => void | ❌ | Callback triggered when the flow completes successfully. |
| theme | ConnectTheme | ❌ | Customize the app theme [light, dark]. |
| language | ConnectLanguage | ❌ | Language code for localization [en, ar]. |
| businessCountryCode | string | ❌ | Country ISO2 code of the merchant country. |
| showBoard | boolean | ❌ | Show the merchant board UI. |
| leadId | string | ❌ | Optional lead ID for loading lead data. |
| platforms | string | ❌ | - |
| paymentProvider | ConnectPaymentProvider | ❌ | Information about the payment provider configuration. |
| — technologyId | string | ✅ | - |
| — institutionId | string | ✅ | - |
| features | ConnectAppFeatures | ❌ | Additional configuration options for appearance and UI. |
| — poweredBy | boolean | ❌ | Show or hide the “Powered by Tap” logo. |
| — merchantLogo | boolean | ❌ | Show or hide the merchant’s logo in the widget. |
| — closeButton | boolean | ❌ | Display a close button on the widget. |
| — dialogStartTransition | ConnectDialogTransition | ❌ | Transition animation when the dialog opens [left,right,up,down]. |
| — dialogEndTransition | ConnectDialogTransition | ❌ | Transition animation when the dialog closes [left,right,up,down]. |
| — dialogEdgeFormat | ConnectDialogEdgeFormat | ❌ | Controls the shape/format of the dialog edges [curved, straight]. |
| postUrl | string | ❌ | Endpoint to post our data to merchant's server. |
| redirectUrl | string | ❌ | Redirect URL after success. |
| data | string[] | ❌ | Merchant data array (e.g. operator, brand, entity, etc.). |
| mode | ConnectMode | ❌ | Controls the display behavior of the Connect Element, using the ConnectMode enum to specify whether it appears as a full page, popup, or display content only. |
| notification | ConnectNotification | ❌ | Notification configuration to notify the user after account creation. |
| — email | boolean | ✅ | Enable or disable email notifications. |
| — sms | boolean | ❌ | Enable or disable mobile SMS notifications. |
| boardEditable | boolean | ❌ | Allow merchant board to be editable. |
| loginMode | boolean | ❌ | Opens Connect in login/auth mode. |
| region | string | ❌ | Region code that changes the target middlware (e.g., sa for Saudi). |