Implementing the Subscribe Pro Vault Hosted Iframe

The Subscribe Pro Vault Hosted Iframe is a secure, PCI compliant way to collect credit card information (and other types of payment details) from your customers. The iframe is hosted on the Subscribe Pro servers, and is designed to be embedded in your checkout page or other locations where you would need to securely collect credit card details from your customers.

Current version

Before You Begin

To get started, you will need a Subscribe Pro account with a sandbox environment provisioned.

Implement the Iframe on Your Page

  1. Insert the Subscribe Pro JavaScript <script> tag onto a new page your website to load the iframe client script. The page is typically located in the checkout area of the website.

  2. Call the IframeClient.on() function to register event handlers for the iframe client.

  3. Call the IframeClient.init() function to initialize the iframe client.

  4. Call the IframeClient.tokenize() function to tokenize the customer's card data.

Basic Example

Where you fill in the proper credentials for XXXX:

<html>
  <body>
    <div>
      <h1>Site Header</h1>
    </div>

    <div class="content">
      <main>
        <div class="container" style="max-width: 24rem">
          <br /><br />
          <div
            id="number-el"
            style="
              height: 38px;
              width: 18rem;
              border: 1px solid #ccc;
              border-radius: 8px;
            "
          ></div>
          <br />
          <div
            id="cvv-el"
            style="
              height: 38px;
              width: 8rem;
              border: 1px solid #ccc;
              border-radius: 8px;
            "
          ></div>
          <br />
          <button onclick="tokenizeCard();">Save / Tokenize Card</button>
          <br /><br />
          <div id="challenge" style="height: 40rem; width: 32rem"></div>
          <br /><br />
        </div>
      </main>
    </div>

    <!-- Load the iframe script -->
    <script
      type="text/javascript"
      src="https://vault.subscribepro.com/js/iframe-client-1.11.0.js"
    ></script>

    <!-- Pass configuration and init the iframe script -->
    <script type="text/javascript">
      // Handle events from the iframe
      IframeClient.on('initialized', () => {
        console.log('Iframe was initialized.');
      });

      IframeClient.on('inputEvent', (args) => {
        console.log('Iframe inputEvent received.', args);
      });

      IframeClient.on('tokenize', (result) => {
        console.log('Tokenize attempt was completed.', result);
      });

      // Initialize the iframe client
      IframeClient.init({
        vaultUrl: 'https://vault.subscribepro.com',
        vaultEnvironmentId: 'XXXX',
        numberIframe: 'number-el',
        cvvIframe: 'cvv-el',
        showCvv: true,
        requireCvv: true,
        requireValidation: true,
        enablePrettyFormat: false,
        customCardTypes: [],
      });
    </script>
  </body>
</html>