> For the complete documentation index, see [llms.txt](https://docs.2checkout.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.2checkout.com/2checkout-apis/2checkout-apis/2pay.js-payments-solution-integration-guide/use-cases/preload-iframe-to-increase-loading-speed.md).

# 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

{% stepper %}
{% step %}

### Create the form

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

```html
<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>
```

{% endstep %}

{% step %}

### Add the card element container

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

```html
<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>
```

{% endstep %}

{% step %}

### Include the 2Pay.js drop-in payment client

Include the 2Pay.js drop-in payment client JavaScript:
{% endstep %}

{% step %}

### Preload the iframe on page load

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

```javascript
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');
});
```

{% endstep %}

{% step %}

### Display or hide the card form when ready

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

{% endstep %}
{% endstepper %}

## Demo

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

HTML

```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

```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

```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();
}
```

{% embed url="<https://codepen.io/2checkout-connectors/pen/XJdmvBb>" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.2checkout.com/2checkout-apis/2checkout-apis/2pay.js-payments-solution-integration-guide/use-cases/preload-iframe-to-increase-loading-speed.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.