@tap-payments/click-to-pay-web

v1.6.3

Published

16 days ago

just for wrapping click to pay button to be used in react

0High
0Medium
0Low

@tap-payments/click-to-pay-web

A web SDK for integrating the Tap Click-to-Pay button into React applications or plain HTML pages.

Installation

npm install @tap-payments/click-to-pay-web
# or
yarn add @tap-payments/click-to-pay-web

NPM / React Integration

import {
  ClickToPayButton,
  Locale,
  ThemeMode,
  Edges,
  ColorStyle,
  Scope,
} from "@tap-payments/click-to-pay-web";

function App() {
  return (
    <ClickToPayButton
      scope={Scope.CHARGE}
      operator={{
        publicKey: "pk_test_YOUR_KEY",
        hashstring: "",
      }}
      merchant={{ id: "YOUR_MERCHANT_ID" }}
      order={{ amount: 100, currency: "SAR" }}
      customer={{
        id: "cus_XXXXX",
        name: [{ lang: Locale.EN, first: "John", last: "Doe", middle: "" }],
        contact: {
          email: "[email protected]",
          phone: { countryCode: "+966", number: "500000000" },
        },
      }}
      interface={{
        locale: Locale.EN,
        edges: Edges.CURVED,
        theme: ThemeMode.LIGHT,
        colorStyle: ColorStyle.COLORED,
        loader: true,
      }}
      redirect={{ url: window.location.origin }}
      onReady={() => console.log("Ready")}
      onSuccess={(data) => console.log("Success", data)}
      onError={(err) => console.error("Error", err)}
    />
  );
}

Vanilla JS Integration

Include the built main.js and main.css from the standalone bundle and use the window.TapSDKs global.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Click To Pay</title>
    <link
      rel="stylesheet"
      href="https://cdn.tap.company/tap-sdks/click-to-pay/build-1.6.0/main.css"
    />
  </head>
  <body>
    <div id="click-to-pay-button"></div>

    <script
      type="module"
      src="https://cdn.tap.company/tap-sdks/click-to-pay/build-1.6.0/main.js"
    ></script>
    <script type="module">
      const { renderClickToPayButton } = window.TapSDKs;

      renderClickToPayButton(
        {
          scope: "CHARGE",
          operator: {
            publicKey: "pk_test_YOUR_KEY",
            hashstring: "",
          },
          merchant: { id: "YOUR_MERCHANT_ID" },
          order: { amount: 100, currency: "SAR" },
          customer: {
            id: "cus_XXXXX",
            name: [{ lang: "EN", first: "John", last: "Doe", middle: "" }],
            contact: {
              email: "[email protected]",
              phone: { countryCode: "+966", number: "500000000" },
            },
          },
          interface: {
            locale: "EN",
            edges: "CURVED",
            theme: "LIGHT",
            colorStyle: "COLORED",
            loader: true,
          },
          redirect: { url: window.location.origin },
          onReady: () => console.log("Ready"),
          onSuccess: (data) => console.log("Success", data),
          onError: (err) => console.error("Error", err),
        },
        "click-to-pay-button",
      );
    </script>
  </body>
</html>

Note: Must be served over HTTP. ES modules do not work when opened directly via file://.

renderClickToPayButton

const instance = window.TapSDKs.renderClickToPayButton(config, elementId);

// Unmount when done
instance.unmount();

| Parameter | Type | Description | | ----------- | -------- | ----------------------------------- | | config | object | Same props as the React component | | elementId | string | ID of the DOM element to mount into |

Configuration

Required Props

| Prop | Type | Description | | ---------- | -------- | -------------------------------------------------------------------------------- | | scope | Scope | Transaction scope (Scope.CHARGE, Scope.TOKEN, or Scope.CLICK_TO_PAY_TOKEN) | | operator | object | { publicKey: string, hashstring: string } | | merchant | object | { id: string } | | order | object | { amount: number, currency: string } | | customer | object | Customer details (see below) | | redirect | object | { url: string } — redirect URL after payment |

Customer Object

{
  id: string;
  name: Array<{
    lang: Locale;
    first: string;
    last: string;
    middle: string;
  }>;
  contact: {
    email: string;
    phone: {
      countryCode: string; // e.g. '+966'
      number: string;
    }
  }
}

Optional Props

| Prop | Type | Description | | ------------- | --------- | ------------------------------------------------------------------------------------ | | acceptance | object | { supportedSchemes?: string[] } — filter schemes (e.g. ['VISA']) | | features | object | Feature flags (see below) | | interface | object | UI configuration (see below) | | transaction | object | { amount: number, currency: string } — overrides order amount/currency for display | | styles | object | { layoutBackgroundColor?: string } | | debug | boolean | Enable debug logging in the console |

Features Object

{
  acceptanceBadge: boolean; // show accepted card schemes badge
  customerCards: {
    saveCard: boolean; // allow saving card for future use
    autoSaveCard: boolean; // auto-save card after successful payment
  }
}

Interface Object

{
  locale: Locale; // language
  edges: Edges; // button corner style
  theme: ThemeMode; // light or dark
  colorStyle: ColorStyle; // colored or monochrome
  loader: boolean; // show loading spinner
}

Callbacks

| Callback | Signature | Description | | ----------- | ---------------------- | ------------------------------------ | | onReady | () => void | Fired when the SDK is ready | | onClick | () => void | Fired when the pay button is clicked | | onSuccess | (data: any) => void | Fired on successful payment | | onError | (error: any) => void | Fired on payment error |

Enums

All enums are exported from the package and also available on window.TapSDKs in vanilla JS.

`Scope`

| Value | Description | | -------------------------- | ------------------------- | | Scope.CHARGE | Charge the card | | Scope.TOKEN | Tokenize the card | | Scope.CLICK_TO_PAY_TOKEN | Tokenize via Click to Pay |

`Locale`

| Value | Description | | ----------- | ----------- | | Locale.EN | English | | Locale.AR | Arabic |

`ThemeMode`

| Value | Description | | ----------------- | ----------- | | ThemeMode.LIGHT | Light theme | | ThemeMode.DARK | Dark theme |

`Edges`

| Value | Description | | -------------- | --------------- | | Edges.CURVED | Rounded corners | | Edges.SHARP | Sharp corners |

`ColorStyle`

| Value | Description | | ----------------------- | ----------- | | ColorStyle.COLORED | Full color | | ColorStyle.MONOCHROME | Monochrome |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@tap-payments/click-to-pay-web

Table of Contents

Installation

NPM / React Integration

Vanilla JS Integration

renderClickToPayButton

Configuration

Required Props

Customer Object

Optional Props

Features Object

Interface Object

Callbacks

Enums

Scope

Locale

ThemeMode

Edges

ColorStyle

`Scope`

`Locale`

`ThemeMode`

`Edges`

`ColorStyle`