Help center / Adding Checkout Page to Unbounce

Adding Checkout Page to Unbounce

Learn how to use Checkout Page on Unbounce landing pages.

There are 3 ways to integrate Checkout Page on your Unbounce site:

  1. Link to your Checkout Page with a link or button (View demo)
  2. Add your Checkout Page as a pop-up (View demo)
  3. Embed your Checkout Page

This is the easiest way to integrate. Start by copying the URL to your checkout page. Open your checkout page in the dashboard and click "Share". In the Link to page section, click "Copy" to copy the URL.

Copy page link


Next, you'll add a button to your Unbounce page. You could also use a text link instead of a button for an inline purchase experience. Open the page you want to add a button to in the editor, and drag a button from the left editor menu onto the page.

Unbounce add button

In the Properties panel on the right, look up the 'Click action' section. Set action to "Go to URL" and paste the URL you copied on Checkout Page into the URL field. Set Target to either "Same tab or window", or "New tab or window".

Unbounce button action

Click the preview toggle top right, and click your button to open your checkout page. You've now added your checkout to your Unbounce site! Go ahead and repeat for any other call to actions or other products or services you're selling.

Tip: When using your checkout in a URL, consider setting the Redirect URL back to a thank you page on your site to explain what will happen next, or present an upsell.

2. Add your Checkout Page as a pop-up

To sell in a pop-up on your Unbounce site, you'll start by copying the Checkout Page pop-up script. This piece of JavaScript will look for any Checkout Page buttons you've added to the site's page and makes them open in a pop-up.

  <script type="text/javascript" src="https://checkoutpage.co/js/overlay.js" defer></script>

To add the script to your Unbounce page, click the "Javascripts" button bottom left.

Unbounce javascripts

Here you can paste the script you copied. For the placement of the script, choose "Head".

Now let's add a button that will open the checkout in a pop-up. To start, copy the link to your checkout from your page's Share tab in Checkout Page.

Copy page link

To set up the button:

  • Add a button by dragging from the left panel Unbounce add button
  • In the Properties pane, go to 'Click action'
  • For Action, select Go to URL
  • Paste the link to your page
  • Set Target to "Same tab or window"
  • Style your button, change the button label or anything else that will make it pop

That's it! Click the preview toggle top right, and click your button to open your checkout page. Go ahead and repeat for any other call to actions or other products or services you're selling.

Note: if you're adding multiple buttons on the same page, you only need to add the Javascript script once. If you're adding buttons to other pages, you need to add the script to those pages as well. If you're selling on multiple pages across your website, consider adding the script to all your pages.

3. Embed your Checkout Page

Consider this option if you want to create an inline checkout on your site.

We'll use an iframe to embed your checkout on your Unbounce site. Let's start by copying the Checkout Page embed script. Open your checkout page in the dashboard, and click "Share". In the "Embed on your site" section, click the "Copy" button to copy the embed script for your page.

  • Open the Unbounce editor
  • Drag the Custom HTML Custom html widget from the object toolbar (on the left side of the editor) to the spot you would like it to appear on your landing page. A new dialog box will appear.
  • In the Embed Custom HTML Code dialog box, paste the copied embed script into the blank field and click the Save Code button in the bottom right corner of the dialog box.
  • Stretch the Custom HTML to be the correct size (this can be a process of trial and error after you preview the page).
  • Save your page.
  • Click the Preview preview.png button at the top right corner of the builder to see it in action. It won't show up in the editor, just in preview mode and the final published page. Some custom HTML may not render in preview, so if it doesn't show up then be sure to check the published page.
  • Resize the Custom HTML component again to make sure the object you embedded shows up in its entirety.

That's it! You will now see your checkout page on your site.

Need more help?

Contact us via the Chat in the bottom-right corner or via email on support@checkoutpage.co