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 {5box-sizing: border-box6}78html {9padding: 1rem;10background-color: #FFF;11font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',12Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans','Helvetica Neue', sans-serif13}1415#payment-form {16width: 31.5rem;17margin: 0 auto18}1920iframe {21width: 100%22}2324.one-liner {25display: flex;26flex-direction: column27}2829#pay-button {30border: none;31border-radius: 3px;32color: #FFF;33font-weight: 500;34height: 40px;35width: 100%;36background-color: #13395E;37box-shadow: 0 1px 3px 0 rgba(19, 57, 94, 0.4)38}3940#pay-button:active {41background-color: #0B2A49;42box-shadow: 0 1px 3px 0 rgba(19, 57, 94, 0.4)43}4445#pay-button:hover {46background-color: #15406B;47box-shadow: 0 2px 5px 0 rgba(19, 57, 94, 0.4)48}4950#pay-button:disabled {51background-color: #697887;52box-shadow: none53}5455#pay-button:not(:disabled) {56cursor: pointer57}5859.card-frame {60border: solid 1px #13395E;61border-radius: 3px;62width: 100%;63margin-bottom: 8px;64height: 40px;65box-shadow: 0 1px 3px 0 rgba(19, 57, 94, 0.2)66}6768.card-frame.frame--rendered {69opacity: 170}7172.card-frame.frame--rendered.frame--focus {73border: solid 1px #13395E;74box-shadow: 0 2px 5px 0 rgba(19, 57, 94, 0.15)75}7677.card-frame.frame--rendered.frame--invalid {78border: solid 1px #D96830;79box-shadow: 0 2px 5px 0 rgba(217, 104, 48, 0.15)80}8182.success-payment-message {83color: #13395E;84line-height: 1.485}8687.token {88color: #b35e14;89font-size: 0.9rem;90font-family: monospace91}9293@media screen and (min-width: 31rem) {94.one-liner {95flex-direction: row96}97.card-frame {98width: 318px;99margin-bottom: 0100}101#pay-button {102width: 175px;103margin-left: 8px104}105}106107</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>7PAY GBP 24.998</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.