Add Checkout Page to Unbounce (Smart Builder)

Add Checkout Page to an Unbounce landing page using the Smart Builder to embed checkouts. This lets you collect payments directly on Unbounce.

How do I install the app?

To add a checkout, you first need to install the Checkout Page App on your Unbounce page.

Adding the App is very simple:

Edit your Unbounce page

From the top left menu, click on Apps And search for Checkout Page

In your search results, click + Next to Checkout Page to install the plugin

That’s it, you have installed the Checkout Page app!

How do I embed my checkout?

Embedding your checkout lets your customers finish their purchases directly on your landing page.

This is the easiest way to checkout because your customers don’t have to leave your page to complete their purchases.

Your one page checkout will blend in with your landing page design and make the checkout process feel smooth for your customer.

Once you have installed the Checkout Page App, follow these steps to set up your checkout:

In Unbounce, edit your page and click on the element that you want to replace with your checkout

Choose Change element From the menu, click on E-Commerce And select Checkout Page

Click on your new Checkout Page element and select Checkout Settings From the menu below

Return to your Checkout Page dashboard, open the checkout you want to embed, click Share & embed In the top right corner and copy the payment link

On Unbounce, paste the payment link in the Checkout Settings And select Checkout embed As the Checkout element

Turn on Conversion tracking To track Checkout Page sales or submissions as conversions in Unbounce

Click Apply And save your page

How do I add a pop-up checkout?

By adding a pop-up checkout, you can let your customers complete their purchases without leaving your landing page.

The pop-up checkout element adds a button to your page, which opens your one-page checkout when clicked.

Here’s how to do it:

In Unbounce, edit your page and click on the element that you want to replace with a button that opens a pop-up checkout

Choose Change element From the menu, click E-Commerce And select Checkout Page

Click on your new Checkout Page element and select Checkout Settings From the menu below

Return to your Checkout Page dashboard, open the checkout you want to embed, click Share & embed In the top right corner and copy the payment link

On Unbounce, paste the payment link in the Checkout Settings And select Checkout button As the Checkout element

Customize the Button text

From Button action Select Open in popup To open your checkout popup when your customer clicks your button

Turn on Conversion tracking To track Checkout Page sales or submissions as conversions in Unbounce

Click Apply And save your page

Add Buy button linking to your checkout in a new tab

Instead of placing the checkout on your landing page, it is easy to put a Buy button that links to your one-page checkout on Checkout Page.

You can customize the Buy button text and choose to open the link in a new tab.

The steps to do this are easy:

In Unbounce, edit your page and click on the element that you want to replace with a button that opens a pop-up checkout

Choose Change element From the menu, click E-Commerce And select Checkout Page

Click on your new Checkout Page element and select Checkout Settings From the menu below

Return to your Checkout Page dashboard, open the checkout you want to embed, click Share & embed In the top right corner and copy the payment link

Paste this link in the Checkout Settings On Unbounce and select Checkout button As the Checkout element

Customize the Button text

From Button action Select Open in new tab To open your checkout in a new tab when your customer clicks your button

Turn on Conversion tracking To track Checkout Page sales or submissions as conversions in Unbounce.

Click Apply And save your page