Skip to content
_Pay Engine

    How to implement SAQ-A solution

    1. Prepare the HTML form

    The following HTML snippet contains the neccessary data for card tokenization with Bridge iframes. Note that the minimal code is the form itself and the input tags, which must not contain name attributes:

    HTML snippet

    <div>
  <form id="saq-a">
    <div>
      <div>Card Number</div>
      <div id="a_credit_card_number_container">
      </div>
    </div>
    <div>
      <div>Expiry Date</div>
      <div>
        <input
          id="a_expiry"
          placeholder="MM/YY"
          autocomplete="off" />
      </div>
    </div>
    <div>
      <div>Card holder</div>
      <div>
        <input
          id="a_cardholder"
          type="text"
          placeholder="John Rambo"
          autocomplete="off" />
      </div>
    </div>
    <div>
      <div>Verification</div>
      <div id="a_verification_container">
      </div>
    </div>
    <div>
      <div>
        <button id="submit" type="button">
          Pay now
        </button>
      </div>
    </div>
  </form>
</div>

    2. Initialize iframes, call the tokenization JS function and add a callback

    Initialize iframes, call the tokenization JS function and add a callback. The following snippet shows how to initialize the PayEngine iframes and gather the requied parametes and to call PayEngine.iframesCreatePaymentInstrument()

    JavaScript snippet

    <script type="text/javascript">
var iframesReference;

function initIframesCallback ( error, result ) {
  if( error ) {
    console.log( JSON.stringify( error ) );
  } else {
    iframesReference = result;
  }
}

function callback( error, result ) {
  if( error ) {
    console.log( JSON.stringify( error ) );
  } else {
    console.log( JSON.stringify( result ) );
  }
}

window.onload = function() {
  PayEngine.iframesInit("a_credit_card_number_container", "a_verification_container", null, initIframesCallback);

  document.getElementById('submit').addEventListener( 'click', function( event ) {
    var expiry = document.getElementById( "a_expiry" ).value.split( "/" );
    var paymentData = {
      expiryMonth:  expiry[0],
      expiryYear:   expiry[1],
      cardHolder:   document.getElementById( "a_cardholder" ).value
    };

    PayEngine.iframesCreatePaymentInstrument( iframesReference, paymentData, null, callback );
  } );
}

</script>

    On this page