Frames migration guide

Last updated: April 29, 2022

Follow this guide to upgrade from the legacy version of Frames (v1) to the newest version (v2).

Find the following script tag:

<script src="https://cdn.checkout.com/js/frames.js">

Replace it with this tag:

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

Rename cardTokenisednow to cardTokenized and cardTokenisationFailed to cardTokenizationFailed.

If you have custom styling, skip to step 4.

If you don't have any custom styling, continue to step 3.

To get started quickly, you can use our default styling:


1<style>
2*,
3*::after,
4*::before {
5    box-sizing: border-box
6}
7
8html {
9    padding: 1rem;
10    background-color: #FFF;
11    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
12   Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans','Helvetica Neue', sans-serif
13}
14
15#payment-form {
16    width: 31.5rem;
17    margin: 0 auto
18}
19
20iframe {
21    width: 100%
22}
23
24.one-liner {
25    display: flex;
26    flex-direction: column
27}
28
29#pay-button {
30    border: none;
31    border-radius: 3px;
32    color: #FFF;
33    font-weight: 500;
34    height: 40px;
35    width: 100%;
36    background-color: #13395E;
37    box-shadow: 0 1px 3px 0 rgba(19, 57, 94, 0.4)
38}
39
40#pay-button:active {
41    background-color: #0B2A49;
42    box-shadow: 0 1px 3px 0 rgba(19, 57, 94, 0.4)
43}
44
45#pay-button:hover {
46    background-color: #15406B;
47    box-shadow: 0 2px 5px 0 rgba(19, 57, 94, 0.4)
48}
49
50#pay-button:disabled {
51    background-color: #697887;
52    box-shadow: none
53}
54
55#pay-button:not(:disabled) {
56    cursor: pointer
57}
58
59.card-frame {
60    border: solid 1px #13395E;
61    border-radius: 3px;
62    width: 100%;
63    margin-bottom: 8px;
64    height: 40px;
65    box-shadow: 0 1px 3px 0 rgba(19, 57, 94, 0.2)
66}
67
68.card-frame.frame--rendered {
69    opacity: 1
70}
71
72.card-frame.frame--rendered.frame--focus {
73    border: solid 1px #13395E;
74    box-shadow: 0 2px 5px 0 rgba(19, 57, 94, 0.15)
75}
76
77.card-frame.frame--rendered.frame--invalid {
78    border: solid 1px #D96830;
79    box-shadow: 0 2px 5px 0 rgba(217, 104, 48, 0.15)
80}
81
82.success-payment-message {
83    color: #13395E;
84    line-height: 1.4
85}
86
87.token {
88    color: #b35e14;
89    font-size: 0.9rem;
90    font-family: monospace
91}
92
93@media screen and (min-width: 31rem) {
94    .one-liner {
95        flex-direction: row
96    }
97    .card-frame {
98        width: 318px;
99        margin-bottom: 0
100    }
101    #pay-button {
102        width: 175px;
103        margin-left: 8px
104    }
105}
106
107</style>

Replace the div tags inside the form element with the new ones from the example below. Make sure to update the card-frame class with your custom frameSelector if you have changed it.


1<div class="one-liner">
2    <div class="card-frame">
3        <!-- form will be added here -->
4    </div>
5        <!-- add submit button -->
6    <button id="pay-button" disabled>
7        PAY GBP 24.99
8    </button>
9</div>
10<p class="success-payment-message"></p>

Information

The div with the one-liner class is used by our default style. You can safely remove it if you're providing your own.

If you were using the containerSelector option in Frames v1, make sure to rename it to frameSelector.

frameSelector is not a required field. Without it, Frames v2 will use card-frame by default.

Note

theme and themeProvider have been deprecated and can be safely removed. They will not have any effect on Frames v2.

Rename the paymentForm selector to payment-form and the payNowButton selector to pay-button.

Wherever needed, update the JavaScript with the new version. Both types of initialization are supported.

Frames migration guide

Step 1: Replace the script

Step 2: Rename the event handlers

Step 3 (optional): Add a style tag

Step 4 (optional): Rename or replace the HTML tags

Information

Step 5 (optional): Rename containerSelector

Note

Step 6: Rename the form element selectors

Step 7: Update the JavaScript