Add Checkout Page to Webflow

Add Checkout Page to a Webflow landing page to embed checkouts in your website. This integrates payment collection with your Webflow design.

How do I add a Buy button?

1. You can add a Buy button that links to your checkout to open it in the same or a new window.
2. Follow these steps to do it:
3. Open the page builder on Webflow
4. From the left-hand menu, select Add Elements
5. Drag Button and drop it in the desired place on your page
6. From your Checkout Page dashboard, click on the checkout you want to link to
7. Then click on Share & embed in the top right corner and copy the payment link
8. Delete # from the URL field in the Link Settings pop-up on Webflow and paste the new link from Checkout Page instead
9. Tick Open in new tab if you'd like your checkout to open in a new tab
10. Double-click on the button text to change it as you wish
11. Preview your page by clicking the "play" preview icon that is located on the top left and publish when you're ready

How do I add a pop-up checkout?

1. Adding a pop-up checkout is a great way to let your customers check out on your site while hiding the checkout from those browsing.
2. Note: this option requires a paid Webflow account or an active site plan on your Webflow project.
3. Here's how to add it:
4. Open your Webflow dashboard
5. Click on the three dots next to the site you'd like to edit and go to Settings
6. Go to the Custom Code tab
7. From your Checkout Page dashboard, click on the checkout you want to add and then Share & embed
8. Go to the Add to website section, and then the Pop up section and copy the Script code
9. Paste this script code into the Head Code box on Webflow and Save changes
10. Open your page Designer and from the left-hand menu, click on Add Elements
11. Click on Button to add it to your page
12. Back on Checkout Page, copy the payment URL below the Script code
13. Delete # from the URL field in the Link Settings pop-up on Webflow and paste the new URL from Checkout Page instead
14. From the button settings on the right side of the page, click the paintbrush to open the Style tab
15. Click on the + under Selector and type in cp-button and enter
16. Publish your page to preview

How do I embed my checkout?

1. Embed your checkout on your landing page for your customers to finish their purchases on your site.
2. Note: this option requires a paid Webflow account or an active site plan on your Webflow project.
3. Let us guide you through it:
4. Open the page builder on Webflow
5. From the left-hand menu, select Add Elements
6. Drag Embed from the Components section and drop it on your page
7. From your Checkout Page dashboard, click on the checkout you want to add and then Share & embed
8. Go to the Embed section and copy the Embed code under Webflow
9. Paste this embed code into the box on Webflow and click Save & Close
10. Publish your page to preview
11. Great, now your checkout has been added to your landing page!
12. Note: For an upsell flow to work, the initial purchase should happen on the same domain as the upsell. You also need to set up a custom domain to host your checkouts as a subdomain of your main site - e.g. if your site is example.com, use pay.example.com