Follow this guide to upgrade from the legacy version of Frames (v1) to the newest version (v2).
Step 1: Replace the script
Find the following script tag:
Replace it with this tag:
Step 2: Rename the event handlers
If you have custom styling, skip to step 4.
If you don't have any custom styling, continue to step 3.
Step 3 (optional): Add a style tag
To get started quickly, you can use our default styling:
Step 4 (optional): Rename or replace the HTML tags
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.
The div with the
one-liner class is used by our default style. You can safely remove it if you're providing your own.
Step 5 (optional): Rename containerSelector
If you were using the
containerSelector option in Frames v1, make sure to rename it to
frameSelector is not a required field. Without it, Frames v2 will use
card-frame by default.
themeProvider have been deprecated and can be safely removed. They will not have any effect on Frames v2.
Step 6: Rename the form element selectors
paymentForm selector to
payment-form and the
payNowButton selector to
Can we help?
Thanks for using Checkout.com. If you need help or have a question, message our Support team at firstname.lastname@example.org.