Skip to content

      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.

      The minimal code consists of 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

      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>