Frames

Frames is quick and easy to integrate, accepts online payments from all major credit cards, and is customizable to your brand.

Embed the Frames payment form to your website and allow your customers to enter their payment details directly on your checkout page. From Frames, your customers' 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. . After you have a card token, you're able to create a payment, add a customer, or save the card for later.

The Frames solution requires a little bit of customization and integration know-how. If you would like a simpler solution, then take a look at Checkout.js.

Frames demo

After a simple background color tweak, this is what Frames looks like:

Try it out!

  • use one of our test cards, for example, 4242 4242 4242 4242
  • use any future expiry date (mm/yy)
  • and the CVV is 100

Payment methods

Sure, Frames looks great! But, it also has lots of payment options:

The two-step process

It doesn't take long to get started with Frames. That's why we like to describe the process in just two-steps.

Step 1: Embed the code

Pick a method for integrating — there's a couple of different ways you can do it —, then add the code to your page. You'll need to make a few edits here, and change the publicKey to your own. To help, we have added some comments to the code to guide you.

<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
      },
      cardTokenised: function(event) {
        var cardToken = event.data.cardToken;
        Frames.addCardToken(paymentForm, cardToken)
        paymentForm.submit()
      },
      cardTokenisationFailed: function(event) {
        // catch the error
      }
    });
    paymentForm.addEventListener('submit', function(event) {
      event.preventDefault();
      Frames.submitCard();
    });
  </script>
</body>

Step 2: Customize

We built Frames for customization, as such you have a lot of control over the appearance of your form. In our example above, we changed the background color; with some simple tweaks, you can do that and a lot more. Check out our customization page for details about making Frames your own.

Can we help?

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


Frames