Adding Checkout Page to Unbounce
Use Checkout Page to sell digital products, physical products, services and more on your Unbounce site.
Learn how to use Checkout Page on Unbounce landing pages.
There are 3 ways to integrate Checkout Page on your Unbounce site:
- Link to your Checkout Page with a link or button (View demo)
- Add your Checkout Page as a pop-up (View demo)
- Embed your Checkout Page
1. Link to your Checkout Page with a link or a button
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.
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.
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".
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
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.
To set up the button:
- Add a button by dragging from the left panel
- 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"
- Scroll down to Element Metadata
- Add class
- That's it! Now 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.
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 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.