You're viewing our new Unified Payments API documentation. Click here to access our Classic API docs.

Frames

Start accepting online payments in just a few minutes with Frames. It's quick and easy to integrate, accepts online payments from all major credit cards, and is customizable to your brand.

How it works

  1. You embed the Frames payment form in your website. The customer then enters their payment details directly on your checkout page.

  2. From Frames, your customer's sensitive information is processed by us and exchanged for a token. This process is called tokenization - tokenization - The industry standard process for protecting sensitive data by replacing it with an algorithmically generated number called a token. At Checkout.com we use tokenization to protect our customers' confidential payment information from fraudsters. Payment information is substituted with randomly generated numbers — the tokens — and passed to us over the internet. Using the token, we can locate the payment details from our secure vault and complete the request without the need to transfer any sensitive data. . Once you have the card token, you're ready to make the payment request.

Click to enlarge.

Click to enlarge.

Try it out

Use one of our test cards and corresponding CVV to try Frames out for yourself. For example 4242 4242 4242 4242 with CVV 100.

You can use any expiry date (mm/yy), as long as it's in the future.

Integrate Frames

Before you start

Make sure you have your public_key. You can find it in the Hub, under Settings > Channels. If you don't have an account with us yet, you can request a free test one at Checkout.com.

Add the code snippet to your site

The following code snippet is the start of the payment process and allows you to tokenize a customer's sensitive card information using Frames. Simply copy it and add it to your checkout page, replacing the supplied publicKey with your own. The card token will be posted via the URL specified in the form's action attribute.

<body>
  <!-- add frames script -->
  <script src="https://cdn.checkout.com/js/frames.js"></script>
  <form id="payment-form" method="POST" action="https://merchant.com/charge-card">
    <div class="frames-container">
      <!-- form will be added here -->
    </div>
    <!-- add submit button -->
    <button id="pay-now-button" type="submit" disabled>Pay now</button>
  </form>

  <script>
    var paymentForm = document.getElementById('payment-form');
    var payNowButton = document.getElementById('pay-now-button');

    Frames.init({
      publicKey: 'pk_test_6ff46046-30af-41d9-bf58-929022d2cd14',
      containerSelector: '.frames-container',
      cardValidationChanged: function() {
        // if all fields contain valid information, the Pay now
        // button will be enabled and the form can be submitted
        payNowButton.disabled = !Frames.isCardValid();
      },
      cardSubmitted: function() {
        payNowButton.disabled = true;
          // display loader
        }
      });
      paymentForm.addEventListener('submit', function(event) {
        event.preventDefault();
        Frames.submitCard()
        .then(function(data) {
          Frames.addCardToken(paymentForm, data.cardToken);
          paymentForm.submit();
        })
        .catch(function(err) {
          // catch the error
        });
      });
  </script>
</body>

Make Frames your own

Configuration options

You'll find a list of all the possible configuration options plus some examples in our Frames reference guide.

Customization

We just did a simple background colour change in the demo example, but you have a lot of control over the appearance of your form. Check out our customization guide for more details.

Next step

Now that you've got your card token, you're ready to request your first card payment.

Can we help?

Thanks for using Checkout.com. If you need any help or support, then message our support team at support@checkout.com.