@tap-payments/connect-v2

v0.0.35-test

Published

17 days ago

A React SDK that allows merchants to easily integrate with Tap Connect in their applications, handling identification and authentication seamlessly.

Downloads

132

0High
0Medium
0Low

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 | ----------------------- | open | publicKey | merchantDomain | scope | onReady | onClose | onError | onSuccess | theme | language | businessCountryCode | leadId | showBoard | boardEditable | platforms | features | paymentProvider | postUrl | redirectUrl | data | mode | notification | flow | token | boardId | configToken | region | Type | Required | Description | | ------------------------------------------------------ | -------- | ---------------------------------------------------------------------------------------------- | | boolean | ✅ | Controls whether the Connect element is open or closed. | | string | ✅ | Your public API key provided by Tap Payments. | | string | ✅ | Merchant's domain (e.g. https://example.com). | | ConnectScope | ✅ | Defines the integration scope. | | () => void | ❌ | Called when the app configurations are loaded successfully. | | () => void | ❌ | Triggered when the Connect element is closed. | | (error: CustomError) => void | ❌ | Triggered when an error occurs. | | (response: Record<string, string \| number>) => void | ❌ | Triggered when the flow completes successfully. | | ConnectTheme | ❌ | UI theme configuration. | | ConnectLanguage | ❌ | Localization language. | | string | ❌ | ISO2 country code of the merchant. | | string | ❌ | ID to Load an existing lead. | | boolean | ❌ | Show merchant board UI. | | boolean | ❌ | Allow merchant board editing. | | string[] | ❌ | List of merchant platforms. | | ConnectAppFeatures | ❌ | UI and behavior customization options. | | ConnectPaymentProvider | ❌ | Payment provider configuration. | | string | ❌ | Endpoint to post collected data to your backend. | | string | ❌ | Redirect URL after success. | | string[] | ❌ | Data modules to collect (e.g. brand, entity). | | ConnectMode | ❌ | Controls display behavior (page, popup, content). | | ConnectNotification | ❌ | Notification configuration. | | ConnectFlows | ❌ | Specifies a predefined flow to open directly (e.g., brand, entity, kyc, etc.). | | string | ❌ | Connect session token. Required when flow is provided and the flow is not board or auth. | | string | ❌ | Identifier of the board to load. Required when flow is set to board. | | string | ❌ | Pre-generated configuration token from backend. | | ConnectRegions | ❌ | Region code determining middleware domain. |

`ConnectAppFeatures`

| Field | Type | Description | | --------------------- | ------------------------- | ------------------------------ | | poweredBy | boolean | Show or hide “Powered by Tap”. | | embedded | boolean | Enable embedded layout mode. | | merchantLogo | boolean | Show or hide merchant logo. | | closeButton | boolean | Display close button. | | dialogStartTransition | ConnectDialogTransition | Dialog opening animation. | | dialogEndTransition | ConnectDialogTransition | Dialog closing animation. | | dialogEdgeFormat | ConnectDialogEdgeFormat | Dialog edge style. |

`ConnectPaymentProvider`

| Field | Type | Required | Description | | ------------- | -------- | -------- | --------------------------------- | | technologyId | string | ✅ | Payment technology identifier. | | institutionId | string | ✅ | Financial institution identifier. |

`ConnectNotification`

| Field | Type | Required | Description | | ----- | --------- | -------- | --------------------------- | | email | boolean | ✅ | Enable email notifications. | | sms | boolean | ❌ | Enable SMS notifications. |

Developed by Tap Payments
🌐 Website · 💬 Support · 💼 LinkedIn

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme