GoTab Wallet

Embed the GoTab Wallet into your website to give customers a complete payment management experience — view, add, and delete saved cards, and pay with digital wallets like Apple Pay and Google Pay.

The GoTab Wallet is an embeddable payment interface that gives customers a complete payment management experience within your website. It supports saving and managing payment methods, paying with digital wallets (Apple Pay, Google Pay), and handles phone verification and session management automatically.

The wallet is loaded via the Payment SDK and mounted with initWallet.

Installation

Include the SDK bundle in your page:

<script src="https://sdk.gotab.io/payments-sdk.umd.js"></script>

This exposes a global PaymentsSDK object on window.

Mounting the Wallet

`initWallet(container, config)`

Mounts the GoTab Wallet interface into the specified container.

Parameters

Parameter	Type	Description
`container`	`HTMLElement \| string`	DOM element or CSS selector for rendering the wallet.
`config`	`WalletConfig`	Configuration object (see Wallet Configuration).

Behavior

Creates an embedded iframe containing the GoTab Wallet interface.
Establishes secure communication with the wallet using the provided credentials.
Allows customers to view, add, delete, and manage their saved payment methods.
Supports payment processing with saved cards and digital wallets (Apple Pay, Google Pay).
Handles phone verification and session management automatically.

Configuration

`WalletConfig`

Property	Type	Required	Description
`clientApiAccessId`	`string`	Yes	Your client-side API access ID.
`clientApiAccessSecret`	`string`	Yes	Your client-side API access secret.
`tabUuid`	`string`	Yes	UUID of the tab associated with this wallet session.
`paymentSessionId`	`string`	Yes	Payment session ID for authenticating wallet operations.
`domainName`	`string`	Yes	Domain name of the website that contains the iframe.
`onPaymentSuccess`	`(data) => void`	Yes	Called on successful payment. See Payment Success Data for details.
`paymentSessionToken?`	`string`	No	Payment session token (if customer is already verified).
`customerId?`	`string`	No	Customer ID (if customer is already verified).
`theme?`	`string`	No	Theme identifier for styling the wallet interface.

Example

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My Wallet</title>
    <style>
      #wallet-container {
        width: 100%;
        max-width: 600px;
        height: 600px;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div id="wallet-container"></div>
    <script src="https://sdk.gotab.io/payments-sdk.umd.js"></script>
    <script>
      const walletConfig = {
        clientApiAccessId:     'YOUR_CLIENT_API_ACCESS_ID',
        clientApiAccessSecret: 'YOUR_CLIENT_API_ACCESS_SECRET',
        tabUuid:               'TAB_UUID',
        paymentSessionId:      'PAYMENT_SESSION_ID',
        domainName:            'example.com',
        onPaymentSuccess: (data) => {
          console.log('Payment successful:', data);
          // Handle successful payment (e.g., redirect, show confirmation)
        },
        // Optional: if customer is already verified
        // paymentSessionToken: 'PAYMENT_SESSION_TOKEN',
        // customerId: 'CUSTOMER_ID',
        // Optional: custom theme
        // theme: 'green'
      };

      PaymentsSDK.initWallet('#wallet-container', walletConfig);
    </script>
  </body>
</html>

Payment Success Data

When a payment is successfully processed, the onPaymentSuccess callback receives a data object with the following structure:

{
  payments: Array<{
    amount:       number;   // Tab total amount in cents (e.g., 690 = $6.90)
    customer_fee: number;   // Customer fee in cents (e.g., 32 = $0.32)
    gateway:      string;   // Payment gateway used (e.g., "ADYEN")
    payment_id:   string;   // Unique payment identifier
    payment_type: string;   // Card type (e.g., "VISA", "MASTERCARD")
    processor_id: string;   // Processor identifier
  }>;
  tab_uuid: string;         // UUID of the tab
  amount:   number;         // Tab total in cents
}

Example:

onPaymentSuccess: (data) => {
  const payment      = data.payments[0];
  const totalDollars = (payment.amount + payment.customer_fee) / 100;

  console.log(`Charged: $${totalDollars.toFixed(2)}`);
  console.log(`Payment ID: ${payment.payment_id}`);
  console.log(`Card Type: ${payment.payment_type}`);
}