Overview

This page guides you to set up your account with Tap, and start accepting online payments on your website or mobile App.

1. Registration

You can create your account from here Get-Started

2. Get Your API Keys

Once registration has been completed, follow the steps below to get your API testing keys:

Sign in to Tap’s Dashboard using your email or phone number
Click on Accounts
Click on the ID in the Operators section
Click on the MERCHANT section to get the default API keys.
The data you will find in the Operators are:
1. Merchant ID: your account unique identifier which you will use in the API requests and in the communication with the support and integration team.
2. Test - Secret Key: The secret API key that enables you to create transactions in the sandbox environment.
3. Test - Public Key: The public API key that enables you to use the SDKs in the sandbox environment.
4. Live - Secret Key: The secret API key that enables you to create transactions in the production environment.
5. Live - Public Key: The public API key that enables you to use the SDKs in the production environment.

❗️
Be Careful When You Share the API Keys
The secret Keys are sensitive data, which enables the user to get the transactions details and the account information.
Our team will not share with you the secret keys by email and will ask you to get the API keys from the dashboard.
When the team share the secret Keys they will share them masked like that sk_live_xxxxxxxxxxyz
To store your API keys use the environment variable and don't add them in the code directly.
The secret keys have to be in the backend, not in the frontend, adding the secret keys in the frontend will make them exposed to the public and they might be misused, but no issues in adding the public keys in the frontend.

Choose your integration

1. Tokenization:

The tokenization is the process of generating a temporary token of the card and create a transaction. This is useful when you want to customize the checkout page and the pay button using our SDKs for the Card payments and Apple Pay.

Card SDKs

Web and WebView
1. Card
Mobile:

The Sequence Diagram Of the Payments With The Card SDK

%%{init: {'theme': 'base'}}%%
sequenceDiagram
  participant Customer
  participant Frontend
  participant Backend
  participant TapPayments
  participant CardSDK

  Note over Customer, CardSDK: Initial Setup
  Customer->>Frontend: Enters website page
  Customer->>Frontend: Enters card details<br/>(card number, expiry, CVV, name)
  Customer->>Frontend: Clicks pay button

  Note over Frontend, CardSDK: Tokenization Process
  Frontend->>CardSDK: window.CardSDK.tokenize()
  CardSDK-->>Frontend: Returns token ID (tok_xxxx)<br/>via onSuccess callback

  Note over Frontend, Backend: Backend Processing
  Frontend->>Backend: Sends token ID
  Backend->>TapPayments: Makes payment request
  TapPayments-->>Backend: Returns transaction ID<br/>and 3DS URL
  Backend-->>Frontend: Sends 3DS URL

  Note over Customer, TapPayments: 3D Secure Authentication
  Frontend->>Customer: Redirects to 3DS URL
  Customer->>TapPayments: Enters 3DS OTP
  Customer->>TapPayments: Clicks submit button
  TapPayments->>Frontend: Redirects to redirect URL<br/>with tap_id parameter

  Note over Frontend, TapPayments: Transaction Verification
  Frontend->>Backend: Sends transaction ID<br/>(extracted from tap_id)
  Backend->>TapPayments: Requests transaction details
  TapPayments-->>Backend: Returns transaction details
  
  Note over Backend, TapPayments: Webhook Verification
  TapPayments->>Backend: Sends webhook with transaction details<br/>(includes hashstring header)
  Backend->>Backend: Generates hashstring<br/>and validates against webhook header
  
  alt Hashstring is valid
      Backend-->>Frontend: Returns success response
  else Hashstring is invalid
      Backend-->>Frontend: Returns error response
  end
  
  Frontend->>Customer: Displays success/failure message

Card Tokenization Flow Summary

Setup: Customer enters card details on merchant website
Tokenization: Card SDK tokenizes sensitive card data
Payment Request: Backend processes payment with Tap Payments
3DS Authentication: Customer completes 3D Secure verification
Transaction Verification: Backend requests transaction details from Tap Payments
Webhook Verification: Tap Payments sends webhook with hashstring validation
Security Check: Backend validates webhook hashstring for authenticity
Result: Frontend displays success/failure message based on validation

Apple Pay SDKs

Web:
1. Apple Pay
Mobile App:
The Sequence Diagram Of the Payments With The Apple Pay SDK

%%{init: {'theme': 'base'}}%%
sequenceDiagram
    participant Customer
    participant Frontend
    participant Backend
    participant TapPayments
    participant ApplePaySDK

    Note over Customer, ApplePaySDK: Initial Setup
    Customer->>Frontend: Enters website page
    Customer->>Frontend: Clicks Apple Pay button

    Note over Customer, ApplePaySDK: Apple Pay Authentication
    Frontend->>ApplePaySDK: Initiates Apple Pay payment
    ApplePaySDK->>Customer: Shows Apple Pay authentication<br/>(Face ID, Touch ID, or Passcode)
    Customer->>ApplePaySDK: Authenticates with Apple Pay
    ApplePaySDK-->>Frontend: Returns token ID (tok_xxxx)

    Note over Frontend, TapPayments: Payment Processing
    Frontend->>Backend: Sends token ID
    Backend->>TapPayments: Makes payment request
    TapPayments-->>Backend: Returns transaction ID<br/>and payment status
    Backend-->>Frontend: Returns payment response
    Frontend->>Customer: Displays success/failure message

Apple Pay Tokenization Flow Summary

Setup: Customer enters website and clicks Apple Pay button
Apple Pay Authentication: Customer authenticates using Face ID, Touch ID, or Passcode
Token Generation: Apple Pay SDK returns token ID
Payment Processing: Backend processes payment with Tap Payments
Result: Frontend displays payment outcome to customer

🚧
Domain and Bundle ID Registration
You have to Register the bundle ID of your mobile app to be able to use these mobile SDKs.
And for web you have to register the hosted domain that will load the SDKs.

2. Checkout

The checkout experience is a hosted page that provides and easy integration to go live easily, with the minimum technical effort, we provide the checkout page for web and mobile apps as well.

Web:
1. Charge API: To use the hosted page with direct capture of the payment feature, you can add the needed payment source in source.id for example source.id: "src_all"
2. Authorize API: To use the hosted page with the authorize flow which hold the payment for a period of time and then capture or void the payment, then you can add the needed payment source in source.id for example source.id: "src_cards", note that not all the payment methods support this flow, so please check with the support team if the required payment method is supporting the authorize or not.
Mobile App:

The Sequence Diagram Of the Payments With The Checkout

%%{init: {'theme': 'base'}}%%
sequenceDiagram
    participant User
    participant Application
    participant CheckoutSDK
    participant TapPayments

    Note over User, TapPayments: Checkout Process
    User->>Application: Clicks "Proceed to Checkout"
    Application->>CheckoutSDK: Initiates checkout SDK
    CheckoutSDK->>User: Presents checkout UI

    Note over User, CheckoutSDK: Payment Entry
    User->>CheckoutSDK: Enters card details
    User->>CheckoutSDK: Clicks pay button

    Note over CheckoutSDK, TapPayments: Payment Processing
    CheckoutSDK->>TapPayments: Processes payment internally
    TapPayments-->>CheckoutSDK: Returns payment result

    alt Transaction Successful
        CheckoutSDK-->>Application: Returns charge ID<br/>via onSuccess callback
    else Transaction Failed
        CheckoutSDK-->>Application: Returns error message<br/>via onError callback
    end

Checkout SDK Flow Summary

Initiation: User clicks proceed to checkout
SDK Launch: Application initiates Checkout SDK
UI Presentation: Checkout SDK shows payment interface
Payment Entry: User enters card details and clicks pay
Processing: Checkout SDK handles all payment processing internally
Result: SDK returns charge ID (success) or error message (failure)

3. Custom Integration

To make your custom form and to handle the cardholder data you need to follow the data security standards of the payment card industry (PCI DSS). Our team will enable the feature of handling the cardholder data when you provide a valid PCI DSS certificate and PCI AOC.

In this case no matter if you are on web or app, you will encrypt the cardholder data with the RSA public key that our team will share with you and use the token API to send the encrypted cardholder data.

%%{init: {'theme': 'base'}}%%
sequenceDiagram
    participant Customer
    participant Frontend
    participant Backend
    participant TapPayments

    Note over Customer, Frontend: Initial Setup
    Customer->>Frontend: Enters website/mobile app page
    Customer->>Frontend: Enters card details<br/>(card number, expiry, CVV, name)
    Customer->>Frontend: Clicks pay button

    Note over Frontend, Backend: Encryption Process
    Frontend->>Frontend: Encrypts card using<br/>RSA encryption algorithm
    Frontend->>Backend: Sends encrypted card data

    Note over Backend, TapPayments: Backend Processing
    Backend->>TapPayments: Makes payment request<br/>with encrypted card
    TapPayments-->>Backend: Returns transaction ID<br/>and 3DS URL
    Backend-->>Frontend: Sends 3DS URL

    Note over Customer, TapPayments: 3D Secure Authentication
    Frontend->>Customer: Redirects to 3DS URL
    Customer->>TapPayments: Enters 3DS OTP
    Customer->>TapPayments: Clicks submit button
    TapPayments->>Frontend: Redirects to redirect URL<br/>with tap_id parameter

    Note over Frontend, TapPayments: Transaction Verification
    Frontend->>Backend: Sends transaction ID<br/>(extracted from tap_id)
    Backend->>TapPayments: Requests transaction details
    TapPayments-->>Backend: Returns transaction details
    
    Note over Backend, TapPayments: Webhook Verification
    TapPayments->>Backend: Sends webhook with transaction details<br/>(includes hashstring header)
    Backend->>Backend: Generates hashstring<br/>and validates against webhook header
    
    alt Hashstring is valid
        Backend-->>Frontend: Returns success response
    else Hashstring is invalid
        Backend-->>Frontend: Returns error response
    end
    
    Frontend->>Customer: Displays success/failure message

PCI DSS Compliant Flow Summary

Setup: Customer enters card details on merchant website or mobile app
Encryption: Frontend encrypts card data using RSA encryption algorithm
Payment Request: Backend receives encrypted card data and processes payment with Tap Payments
3DS Authentication: Customer completes 3D Secure verification
Transaction Verification: Backend requests transaction details from Tap Payments
Webhook Verification: Tap Payments sends webhook with hashstring validation
Security Check: Backend validates webhook hashstring for authenticity
Result: Frontend displays success/failure message based on validation

Comparison Between the Flows

Feature	Card SDK v2	Apple Pay	Checkout SDK	PCI DSS Compliant
UI Management	Partially Manual	Manual	Automatic	Manual
Encryption Method	SDK Tokenization	SDK Tokenization	SDK Tokenization	RSA Encryption
3DS Handling	Manual	N/A	Automatic	Manual
Webhook Verification	Manual	Manual	Automatic	Manual
Integration Complexity	High	Medium	Low	High
Customization	Medium	Medium	Low	High
PCI DSS Compliance	SDK Handled	SDK Handled	SDK Handled	Merchant Handled