You're viewing documentation for our latest API. This will not impact your integration, but you will need the documentation relevant to you. If you have an account with Checkout.com you have received an email confirming which version to use.
This page explains what you need to get up and running with Frames, and the different ways you can customize it.
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:
Before the input fields appear on your website and app, you need to initialize Frames.
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.
Frames can be rendered either as a single iframe (displayed as one input field) or as multiple iframes (displayed as multiple input fields).
Your checkout page can contain CSS declarations for styling the containers, such as to change the border color. For example, you can use the invalid modifier to render a red border if an invalid card number is entered.
The default approach is to hide the borders of input fields within the iframe input fields and style them within the checkout page as explained above, however, custom styling can be passed into Frames at initialization as shown below. This includes base, invalid, and placeholder styling options.
Make your customers feel at home by using our localization settings to change the language of your payment form. Use one of our pre-defined languages or create your own.
If the language you would like to use appears in our pre-defined list, then just set the localization parameter, for example localization: 'FR-FR'.
The pre-defined languages are:
Arabic = AR
Chinese Simplified = ZH-CH
Chinese Traditional (Hong Kong) = ZH-HK
Chinese Traditional (Taiwan) = ZH-TW
Danish = DA-DK
Dutch = NL-NL
English = EN-GB
Filipino = FIL-PH
Finnish - FI-FI
French = FR-FR
German = DE-DE
Hindi = HI-IN
Indonesian = ID-ID
Italian = IT-IT
Japanese = JA-JP
Korean = KO-KR
Malay = MS-MY
Norwegian Bokmål = NB-NO
Spanish = ES-ES
Swedish = SV-SE
Thai = TH-TH
Vietnamese = VI-VN
Placeholders are defined by the selected localization. For further customization, you can pass an object to localization.