Help center / Adding Checkout Page to Instapage

Adding Checkout Page to Instapage

If you're using Instapage to build your site, you can add Checkout Page's payment forms to your site in various ways. Before getting started, you'll need:

  • An Instapage account & site
  • A Checkout Page account and at least one page

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

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

To integrate Checkout Page on your Instapage site by linking to your Checkout Page, you'll start by copying the URL to your Checkout Page. Open your Checkout Page in the Checkout Page dashboard, and click "Share". In the first option of the modal, click "Copy" to copy the URL to your page.


Next, you'll add a button to your Instapage page. If preferred, you can add a text link instead of a button. Edit the design of the page you want to add a button to and add a button from the left panel. Click on 'Click Event' from the button's modal, and choose 'Outside URL'. In the Link field, paste the URL you copied on Checkout Page. You can select 'New Tab' if desired. To preview how your button behaves, click Preview top right, and click your button. That's it! You've now integrated your Checkout Page on your Instapage site!

2. Add your Checkout Page as a pop-up

To integrate Checkout Page on your Instapage site as a pop-up, you'll start by copying the Checkout Page pop-up script. Open your Checkout Page in the Checkout Page dashboard, and click "Share". In the third option of the modal ("Add as pop-up on your site"), click the first "Copy" button to copy the Checkout Page pop-up script.


On your Instapage page, select HTML/CSS from the Settings panel on the right. Here you'll paste the code you copied in step 1.

Next, you'll create a button that will act as the Call To Action to open the Checkout Page pop-up. We need to add a button with HTML as at the time of writing, Instapage doesn't support adding data attributes and classes to buttons.

  • In the Share modal in Checkout Page, copy the button code below the script code you copied in step 1.
  • On your Instapage page, select HTML from the left panel
  • Click EDIT, and paste the button code you copied
  • You can add CSS classes or styles to style the button

That's it! The button will now open your Checkout Page in a pop-up*.

*At the time of writing, Instapage doesn't correctly execute our script in Preview mode, causing the pop-up to not open correctly. Please test the pop-up in the published version of your page.

3. Embed your Checkout Page

To integrate Checkout Page on your Instapage site by embedding it onto the page, you'll start by copying the Checkout Page embed script. Open your Checkout Page in the Checkout Page dashboard, and click "Share". In the last option of the modal ("Embed on your site"), click the "Copy" button to copy the Checkout Page embed script.

On your Instapage page, add an HTML block from the left panel. Paste the code you copied in step 1 and hit save. Your Checkout Page will now be embedded on your page!*

*At the time of writing, Instapage doesn't correctly execute our script in Preview mode, causing the embed to not load correctly. Please test the embed in the published version of your page.

Need more help?

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