Get started with Frames
Last updated: April 29, 2022
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 practice 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.
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:
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<div class="card-frame">2<!-- form will be added here -->3</div>
Before the input fields appear on your website and app, you need to initialize Frames.
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.
Find out more
Use the Frames reference to learn about the different configuration options available to you.