iFrames (PCI-compliant)

9min

An iFrame makes embedding payment functionality into websites convenient and straightforward. Through secure handling of payment information, iFrames ensure PCI compliance. Card details that a customer enters go directly into the iFrame. Cross River sends merchants a token that represents those details. Then, merchants can use that token to request a card-based transaction.

IMPORTANT In Cross River's Card Payments API, iFrames are compliant with the PCI DSS standard. PCI-compliant iFrames lower the cost of PCI compliance by merchants. That's because credentials are already saved onto a Cross River server. This means those credentials don’t have to be stored by CR partners.

Who uses iFrames

As a Cross River merchant partner, use iFrames:

  • If you are not PCI-compliant
  • For quick and easy payment form customization
  • For another way to reach your customers, in parallel with your existing online registration.

How an iFrame works

  1. Host an iFrame on your website.
  2. The cardholder—the customer—enters their card details directly into the iFrame. You don't store, process, or send the customer's card data on your own form or server.
  3. CR processes customer-sensitive information and returns a token representing those details. CR does this through a process called tokenization.
  4. A webhook sends you a card token.
  5. Use the card token to make a payment request.

See the API to set up an iFrame on your site.

What iFrames do

When you enable an iFrame, a cardholder signs up their card to your website. As a result, card details are entered instantly to your system for secure processing.

Every time a cardholder enables an iFrame session, CR assigns a one-time code for that session. Then, the code becomes associated with the payee's card.

When the cardholder's browser encounters an iFrame element, it creates a new HTML document environment. The content that the iFrame contains gets loaded into that document.

iFrames key benefits

  • iFrames integrate smoothly with your existing site.
  • iFrames are an open technology that all major web browsers support.
  • With the CR iFrame Generator:
    • Once you create an iFrame template, you always control the look and feel.
    • Need to make changes? Do it via the iFrame Generator UI .
    • You never have to touch the code!

How to use iFrames

Do the configuration steps (described in Generating an iFrame, below). Then, integrate the iFrame into the look and feel of your website.

Sample iFrame image
Sample iFrame image


Generating an iFrame

To set up an iFrame and get it working on your merchant site, use the iFrame Generator and Generate OTC signup card API .

iFrame Generator—Introduction

Overview

Welcome to the iFrame Generator, your self-service interface for creating PCI-compliant iFrames. iFrame Generator provides an efficient and streamlined way to embed iFrames onto your merchant website.

With iFrame Generator, creating an iFrame is a one-time action. Once you have generated an iFrame, you can immediately begin entering customer card information via your website. Of course, if you wish, you may add more iFrames in the future.

Use case (high-level)

Do the following to create and embed an iFrame onto your site:

  1. Create an iFrame design template.
  2. Customize the template based on the requirements of your merchant website.
  3. Save the template.
  4. Download the iFrame code.
  5. Embed the iFrame code into your website.

iFrame Generator—Procedure

The procedure for generating an iFrame contains 3 main steps:

  1. Add a template.
  2. Define a style.
  3. Build a URL.
1

Add a template

  1. Launch the Customer Portal UI.
  2. In the left-side icon bar, click iFrame.
  3. In the iFrames window, click + Add template.
Document image

2

Define a style

  1. Assign the template a name and domain. Define registration and error paths.
  2. You can use the Credit card design, and Form design sections to customize your iFrame look and feel.
  3. Click Save template when you're done.
Document image

3

Build a URL

  1. Click Copy embedded code. A detailed pop-up tells you how to: a. Build the iFrame URL using the OTC Card Signup API. b. Insert the API-generated parameters into the iFrame source code. c. Paste the iFrame code into your merchant site HTML.
  2. Click OK, got it.

Now your iFrame is ready to sign up cards.

Document image


Related topics

Generate an iFrame OTC signup card

Card management APIs

🤔
Have a question?
Our super-smart AI, knowledgeable support team and an awesome community will get you an answer in a flash.
To ask a question or participate in discussions, you'll need to authenticate first.