Add Checkout Page to Unbounce (Classic Builder)

Webflow is a visual web design platform. Embed your Checkout Page in Webflow projects using iframes or custom code to enable payments on your design.

How do I add a Buy button?

1. The easiest way to link your checkout to your landing page is by adding a Buy button on Unbounce.
2. Clicking on the Buy button will direct your customers from your landing page to your one-page checkout.
3. To get started, follow these simple steps:
4. Create a page on Unbounce using the Classic Builder
5. From the left side menu, click and hold to drag Button onto your landing page
6. Click on your new Button and navigate to Properties on the right side
7. Choose Go to URL from the Click action drop-down menu
8. From your Checkout Page dashboard, click on the checkout you want to link to
9. Then click on Share & embed in the top right corner and copy the payment link
10. Paste this link in the URL field under Click Action on Unbounce
11. Save and preview your design

How do I add a pop-up checkout?

1. By adding a pop-up checkout, you can let your customers complete their purchases without leaving your landing page.
2. To do so, you can link your Buy button to open a pop-up on the same page.
3. Here’s how to do it:
4. Create a page on Unbounce using the Classic Builder
5. From the left side menu, click and hold to drag Button onto your landing page
6. Click on your new Button and navigate to Properties on the right side
7. Choose Go to URL in Lightbox from the Click action drop-down menu
8. From your Checkout Page dashboard, click on the checkout you want to link to
9. Then click on Share & embed in the top right corner and copy the payment link
10. Paste this link in the URL field under Click Action on Unbounce
11. Adjust the Size to W: 480 and H: 1000
12. Save and preview your design

How do I embed my checkout?

1. Another way to share your one-page checkout is to embed it on your landing page.
2. This way your customers can finish the checkout directly on your page, making the whole experience much smoother.
3. These are the steps to do it:
4. Create a page on Unbounce using the Classic Builder
5. From the left side menu, click and hold to drag Custom HTML onto your landing page
6. From your Checkout Page dashboard, click on the checkout you want to link to
7. Click on Share & embed on the top right corner
8. Select Embed and copy the Embed code from the Unbounce section
9. Return to Unbounce and paste the Embed Code into the window that popped up
10. Click to save and navigate to Properties on the right side
11. Under Geometry, adjust the size to W:480 and H depending on your checkout
12. Save and preview your design
13. That’s it, now you’re ready to sell!