Skip to content

Get started with Frames

Last updated: 13th January 2022

This page explains what you need to get up and running with Frames.


Before you begin

  • 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 create a free test account now to practise API calls, and use the sandbox version of the endpoint.
  • You can set up webhooks, so that after you securely collect the card details with Frames, and proceed to make a payment request, you can be notified when the payment is captured (completed) and continue the sales fulfilment flow.

Use your public key on the client side. You should never include your secret key on the client side for security reasons. Only use the secret key on the server side.


Access Frames

To get started using Frames, you first need to get access to its built-in features. On this page, we will reference tags suitable for HTML webpages. See our Frames React wrapper for an alternative option.

Include the CDN package in a script tag on your relevant HTML page:

1
<script src="https://cdn.checkout.com/js/framesv2.min.js"></script>

Choose single or multiple iframes

Frames can be rendered either as a single iframe (displayed as one input field) or as multiple iframes (displayed as multiple input fields).

We insert an iframe between each placeholder div you put in your payment form.

    We will insert a single iframe in:

    1
    2
    3
    <div class="card-frame">
    <!-- form will be added here -->
    </div>

    Initialize Frames

    Before the input fields appear on your website and app, you need to initialize Frames.

    In your JavaScript file, call the init (short for initialize) action on the Frames object and include your public API key within the brackets.

    1
    Frames.init("pk_test_XXXX");

    Set up Frames events

    Frames has a collection of events that are triggered when certain actions happen. This is how your application will know when a form has been submitted, or card details tokenized. They also help you tailor the experience you want to provide to your customers.

    We have listed all configuration options.


    Next steps

    Request a payment

    Now that you've generated a token, you can request a payment with it.

    Customize Frames

    Make Frames your own by using our customization options.

    Find out more

    Frames reference

    Use the Frames reference to learn about the different configuration options available to you.