Get started with Frames
This page explains what you need to get up and running with Frames.
Before you begin
- Make sure you have your Bearer public API key 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:
<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:
<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.
Frames.init("pk_sbox_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
Find out more
Frames reference
Use the Frames reference to learn about the different configuration options available to you.