This guide will provide you with the steps to start using the external cards feature by integrating with the TabaPay Cards Tokenization widget. Card tokenization is a process that converts sensitive cardholder data into a token to protect it from being accessed in the event of a data breach or unauthorized exposure. This process is similar to encryption, which obscures data to make it unreadable. The widget allows for direct communication between the client, TabaPay, and Synctera, eliminating the need for the integrator to have PCI certification.

​
Getting started

Before integrating with TabaPay Card PCI-Compliant iFrame, ensure that you have all the necessary components in place:
  1. Ensure Synctera API keys are provisioned and working for your business;
  2. Ensure external cards have been enabled for your program with your Synctera implementation and onboarding contact;
  3. If integrating in a mobile application, you may need to use a web view such as a WKWebView in a iOS application, WebView in an android application, or a WebView in React Native;
  4. Content security policies should be set in the application using the following directives:
{
  "connect-src": [
    'https://sso.tabapay.com',
    'https://sso.sandbox.tabapay.com:8443'
  ],
  "frame-src": [
    'https://sso.tabapay.com',
    'https://sso.sandbox.tabapay.com:8443'
  ]
}

​
Display iFrame and tokenize an External Card

The steps below describe how to display TabaPay PCI-Compliant iFrame:
1

Add an iFrame tag to the desired webpage

<div><iframe id="sso"></iframe></div>
2

Set the iFrame source for the appropriate environment

3

Add an event listener and handler for TabaPay events

<script>
  document.getElementById( "sso" ).src = "https://sso.sandbox.tabapay.com:8443/SSOSynctera.html";
</script>
4

Add an event listener and handler for TabaPay events

<script>
  function pfReceivedMessage( event )
  {
    if ( event.data != "Close" )
    {
      if ( event.data.slice( 0, 7 ) == "Error: " )
      {
        // Error
      }
      else
      {
        var asData = event.data.split( "|" );
        if ( asData.length == 4 )
        {
          // asData[ 0 ] contains the Cardholder Name
          // asData[ 1 ] contains the Last 4
          // asData[ 2 ] contains the Expiration Date in YYYYMM Format
          // asData[ 3 ] contains the Card Token
        }
        else
        {
          // Data Error
        }
      }
    }
    else
    {
      // Close or Cancel
    }
  }
  window.addEventListener( "message", pfReceivedMessage, false);
</script>
Upon completing the preceding steps, the widget should be ready to display and capable of tokenizing External Cards.
For more information on card tokenization using TabaPay PCI-Compliant iFrame, refer to the TabaPay documentation.

​
Associate token with the customer

The final step is to associate the created token with the customer identity, using the card token and cardholder name. See External Cards Guide for further instructions.

​
Customization Options

The TabaPay Browser SDK provides a number of customization options for controlling the layout and appearance of the TabaPay Card PCI-Compliant iFrame. See TabaPay Browser SDK for additional details and specific customization options.