Preload iframe to increase loading speed

Overview

If you are not displaying the card form on page load, you can preload the iframe in the background to speed up the loading time when you mount the component.

Use case

1

Create the form

Create a form with id="payment-form":

<form type="post" id="payment-form">
  <div class="form-group">
    <label for="name" class="label control-label">Name</label>
    <input type="text" id="name" class="field form-control">
  </div>
  <button class="btn btn-primary" type="submit">Generate token</button>
</form>

2

Add the card element container

Inside the form add an element with id="card-element". The form should now look like this:

<form type="post" id="payment-form">
  <div class="form-group">
    <label for="name" class="label control-label">Name</label>
    <input type="text" id="name" class="field form-control">
  </div>
  <div id="card-element">
    <!-- A TCO IFRAME will be inserted here. -->
  </div>
  <button class="btn btn-primary" type="submit">Generate token</button>
</form>

3

Include the 2Pay.js drop-in payment client

Include the 2Pay.js drop-in payment client JavaScript:

4

Preload the iframe on page load

Insert the following configuration JavaScript to preload the iframe in the background on page load.

window.component = null;
window.addEventListener('load', function() {
  // Initialize the JS Payments SDK client.
  let jsPaymentClient = new TwoPayClient('YOUR_MERCHANT_CODE');

  // Create the component that will hold the card fields.
  let component = jsPaymentClient.components.create('card');

  // Preload the card fields component in the desired HTML tag. This is where the iframe will be located.
  component.preload('#card-element');
});

5

Display or hide the card form when ready

function show() {
  component.mount('#card-element');
}
function hide() {
  component.hide();
}

Demo

After performing the steps above, your implementation should look like this:

HTML

<form method="post" id="payment-form">
    <a href="javascript:show()">Show Iframe</a>
    <a href="javascript:hide()">Hide Iframe</a>

    <div id="card-element">
        <!-- A TCO IFRAME will be inserted here. -->
    </div>
</form>

CSS

.hide-iframe {
  visibility: hidden;
  display: none;
}

.show-iframe {
  visibility: visible;
  display: block;
}

.two-co-iframe-template {
  top       : 0;
  left      : 0;
  bottom    : 0;
  right     : 0;
  width     : 100%;
  height    : 100%;
  border    : 0;
  background: none transparent;
}

.two-co-iframe-hidden-tabbable {
  transform: scale(0);
  width: 0;
  height: 0;
  position: absolute;
}

JavaScript

window.component = null;

window.addEventListener('load', function () {
    // Initialize the 2Pay.js client.
    let jsPaymentClient = new TwoPayClient('AVLRNG');

    // jsPaymentClient.setup.disableIframeStyles();

    // Create the component that will hold the card fields.
    component = jsPaymentClient.components.create('card');

    // Mount the card fields component in the desired HTML tag. This is where the iframe will be located.
    component.preload('#card-element');

    // ...setup form submission handler to create a token
});


function show() {
  component.mount('#card-element');
}

function hide() {
  component.hide();
}