Add Checkout Page to Webflow

In this help article, you will learn how to add your checkout to your Webflow landing page.

With Checkout Page, you can easily create a one-page checkout and add it to your site in different ways.

Here are the instructions for Webflow.

Add a Buy button

You can add a Buy button that links to your checkout to open it in the same or a new window.

Follow these steps to do it:

1. Open the page builder on Webflow
2. From the left-hand menu, select Add Elements
3. Drag Button and drop it in the desired place on your page
4. From your Checkout Page dashboard, click on the checkout you want to link to
5. Then click on Share & embed in the top right corner and copy the payment link
6. Delete # from the URL field in the Link Settings pop-up on Webflow and paste the new link from Checkout Page instead

1. Tick Open in new tab if you’d like your checkout to open in a new tab
2. Double-click on the button text to change it as you wish
3. Preview your page through the little eye on the top left and publish when you’re ready

Add a pop-up checkout

Adding a pop-up checkout is a great way to let your customers check out on your site while hiding the checkout from those just browsing.

Note: this option requires a paid Webflow account or an active site plan on your Webflow project.

Here’s how to add it:

1. Open your Webflow dashboard
2. Click on the three dots next to the site you’d like to edit and go to Settings

1. Go to the Custom Code tab

1. From your Checkout Page dashboard, click on the checkout you want to add and then Share & embed
2. Go to the Pop up section and copy the Script code under Webflow
3. Paste this script code into the Head Code box on Webflow and Save changes

1. Open your page Designer and from the left-hand menu, click on Add Elements
2. Click on Button to add it to your page
3. Back on Checkout Page, copy the payment link below the Script code
4. Delete # from the URL field in the Link Settings pop-up on Webflow and paste the new link from Checkout Page instead
5. From the button settings on the right side of the page, click the paintbrush to open the Style tab
6. Click on the + under Selector and type in cp-button and enter

1. Publish your page to preview

Embed your checkout

Embed your checkout on your landing page for your customers to finish their purchases on your site.

Note: this option requires a paid Webflow account or an active site plan on your Webflow project.

Let us guide you through it:

1. Open the page builder on Webflow
2. From the left-hand menu, select Add Elements
3. Drag Embed from the Components section and drop it on your page
4. From your Checkout Page dashboard, click on the checkout you want to add and then Share & embed
5. Go to the Embed section and copy the Embed code under Webflow
6. Paste this embed code into the box on Webflow and click Save & Close

1. Publish your page to preview

Great, now your checkout has been added to your landing page!