(Legacy) TabaPay PCI Compliant iFrame

The following is meant to be only a simple sample on how this may work and is not meant for production use or imply that it is production ready.

📘

If you would like to use an iFrame, you need to request one.

In order to receive a PCI-Compliant iFrame from TabaPay, you first have to contact the TabaPay team and ask for the PCI-Compliant iFrame service.

Client Web Page

HTML to include TabaPay iFrame.

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

How to resize the iFrame

#sso {
   width: 650px;
   height: 565px;
}

JavaScript Code to load TabaPay iFrame when needed

If you request an iFrame, you will receive an email with the correct url once it is completed. Make sure you let the TabaPay team know that you would like to use an iFrame in order to get started.

document.getElementById( "sso" ).src = "https://<FQDN>/<PageName>.html?<Unique>";

Add a Listener for the Return from TabaPay iFrame

In order to retrieve information from the iFrame, you will need to add an event listener to your page. In this case, our example function pfReceivedMessage would be called on the event being passed. This function can be named/defined as you need. We have an example function below.

window.addEventListener( "message", pfReceivedMessage, false );

Function to handle Return from TabaPay iFrame

This is where we defined our example function pfReceivedMessage that we then added to the previous event listener. Again, you can define/name this function as you see fit. This is an example.

function pfReceivedMessage( event )
{
  if ( event.data != "Close" )
  {
    if ( event.data.slice( 0, 7 ) == "Error: " )
    {
      // Error
    }
    else
    {
      var asData = event.data.split( "|" );
      if ( asData.length == 3 )
      {
        // asData[ 0 ] contains the Last 4
        // asData[ 1 ] contains the Expiration Date in YYYYMM Format
        // asData[ 2 ] contains the Card Token
      }
      else
      {
        // Data Error
      }
    }
  }
  else
  {
    // Close or Cancel
  }
}

Client BackEnd Server

Can use the Card Token in the following TabaPay API Calls:

• Query Card
• Create Account
• Update Account
• Create Transaction

Customization of iFrame

If you are providing the HTML, CSS, and JavaScript to us:

HTML must be minifiable

• CSS must be minifiable
• JavaScript must be compilable (with no warnings or errors) with the Google Closure Compiler
• No External JavaScript Libraries, No External JavaScript Frameworks
• The Results will be a single HTML file
• Any external images will be hosted from your servers
• We will control and own the HTML, CSS, and JavaScript (please check with your legal department)

Clarifications (feedback from Early Users):

• You will provide us with the HTML, CSS, JavaScript:
  • Formatted as for Development (leave spaces, indentation, whitespace, blank lines, etc...)
  • Leave Comments in as for Development
  • We have to understand the code you send to us, so keep it (very) simple...
• We (TabaPay) will minify the HTML, CSS, JavaScript:
  • If there are issues, we will try to fix...
  • If we can't fix (easily), we may ask you to revise it...
• Due to PCI, we cannot include external libraries or frameworks...
• And again due to PCI, we have to own the code (HTML, CSS, JavaScript), so please check with your Legal Department...

Also see the Step-by-Step Example below of this process including our expectations of the expected file (or 3 files: HTML, CSS, and JavaScript) that we will be receiving from you.

Common sense (real world) facts about this customization:

• Take advantage of this (almost) complete control of this customization and the ability for you to customize it, but:
  • Be Simple
  • Be Reasonable
  • Understand some of the Restrictions, if any
  • If we say we cannot do something, show us how to do it simply and we will take another look
  • If we say no, please accept that it can't be done or we can't do it
• Due to time constraints, we can only do minor tweaks after the initial delivery of the HTML, CSS, and JavaScript.

Other Notes:

• Expiration of the Card Token?
  • The Card Token will expire in 5-10 minutes.