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 componet.

Use case

1. 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. 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 JavaScript:

<script type="text/javascript" src="https://2pay-js.2checkout.com/v1/2pay.js"></script>

4. 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 you are ready

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

Demo

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