Home
Guides

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:

  1. Sign in to Tap’s Dashboard using your email or phone number
  2. Click on Accounts
  3. Click on the ID in the Operators section
  4. Click on the MERCHANT section to get the default API keys.
  5. 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

  1. Web and WebView
    1. Card
  2. Mobile:
    1. Card flutter
    2. Card Android Native (Kotlin)
    3. Card IOS Native (Swift)
    4. Card React Native

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

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

Apple Pay SDKs

  1. Web:
    1. Apple Pay
  2. Mobile App:
    1. Flutter
    2. Swift
    3. React Native
  3. 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

  1. Setup: Customer enters website and clicks Apple Pay button
  2. Apple Pay Authentication: Customer authenticates using Face ID, Touch ID, or Passcode
  3. Token Generation: Apple Pay SDK returns token ID
  4. Payment Processing: Backend processes payment with Tap Payments Charge or Authorize API
  5. 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.

  1. 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.
  2. Mobile App:
    1. Checkout Flutter
    2. Checkout IOS
    3. Checkout Android
    4. Checkout React Native

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
      Note over Application, TapPayments: Transaction Verification
      Application->>TapPayments: Calls charge/authorize API<br/>with the ID
      TapPayments-->>Application: Returns transaction status
      Application->>User: Displays final transaction status

Checkout SDK Flow Summary

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

3. Plugins:

You can use any of our plugins provided and developed by Tap's technical team, such as:

  1. Magento
  2. WooCommerce
  3. OpenCart

Or you can use plugins built by our partners like:

  1. Shopify Native plugin
  2. Shopify Redirection plugin

4. 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

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

Comparison Between the Flows

FeatureCard SDK v2Apple PayCheckout SDKPCI DSS CompliantPlugins
UI ManagementPartially ManualManualAutomaticManualAutomatic
Encryption MethodSDK TokenizationSDK TokenizationSDK TokenizationRSA EncryptionSDK Tokenization
3DS HandlingManualN/AAutomaticManualAutomatic
Webhook VerificationManualManualAutomaticManualAutomatic
Integration ComplexityHighMediumLowHighLow
CustomizationMediumMediumLowHighLow
PCI DSS ComplianceSDK HandledSDK HandledSDK HandledMerchant HandledSDK/Partner Handled