Add Checkout Page to Instapage

Add Checkout Page to an Instapage landing page to embed checkouts directly. This lets you convert visitors without leaving your Instapage.

How do I add a buy button?

1. You can add a Buy button that links to your checkout to open it in the same or a new window.
2. Follow these steps to do it:
3. Open the page builder on Instapage
4. From the left-hand menu, click on Button to add it to your site
5. Add Click Event from the Button menu and choose Outside URL
6. From your Checkout Page dashboard, click Share next to the checkout you want to link to and copy the payment link
7. Paste this link in the text field on Instapage
8. If you wish, select New Tab (optional) and click Done
9. Publish and preview the page

How do I add a pop-up checkout?

Checkout Page pop-up

1. While better suited for customization, this type of pop-up might require some coding skills to style it.
2. Open the page builder on Instapage
3. From the right-hand menu, click on HTML/CSS
4. From your Checkout Page dashboard, click Share next to the checkout you want to link to
5. Go to the Pop up section and copy the Script code under Instapage
6. On Instapage, paste this Script code into Head section and save
7. From the left-hand menu, click on HTML to add it to your page
8. Return to the Pop up section on Checkout Page and copy the Link code
9. Back on Instapage, Edit the HTML block, paste the Link code and click Done
10. Add CSS classes & styles to style the link as you wish
11. Save & Publish the page before clicking on Preview

Instapage native pop-up

1. Adding a pop-up checkout is a let your customers check out on your site while hiding the checkout from those browsing.
2. Open the page builder on Instapage
3. From the left-hand menu, click on Button
4. Add Click Event from the Button menu and choose Pop up
5. From the left-hand menu, click on HTML to add it to the new pop-up section
6. From your Checkout Page dashboard, click Share next to the checkout you want to link to
7. Go to the Embed section and copy the Embed code under Instapage
8. Return to Instapage to Edit the HTML block, paste the embed code into it and click Done
9. Resize your pop-up to match the size of your checkout by dragging the blue squares on the sides and recentering the HTML box
10. To fit it perfectly, you will need to shorten the width and extend the length
11. Save & Publish the page before clicking on Preview

How do I embed my checkout?

1. Embed your checkout on your landing page for your customers to finish their purchases on your site.
2. Let us guide you through it:
3. Open the page builder on Instapage
4. From the left-hand menu, click on HTML to add it to your site
5. From your Checkout Page dashboard, click Share next to the checkout you want to link to
6. Go to the Embed section and copy the Embed code under Instapage
7. Edit the HTML block, paste the embed code into it and click Done
8. Save & Publish the page and click on Preview
9. Great, now your checkout has been added to your landing page!
10. Note: To ensure the checkout fits in your site, you should embed it at the end of an Instablock or in its own Instablock.
11. You should also add the following script to make the page adapt to the height of your checkout.
12. Copy the below script and add it to your landing page via Page settings > Javascript > Footer:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    setTimeout(function () {
      fixEmbeddedHeight();
    }, 3000); // wait 3s for all children to fully load

    function handleReceiveMessage(e) {
      function isCheckoutPageEvent(e) {
        return e.data.type && e.data.type.indexOf("checkoutpage.") === 0;
      }

      function isResizeEvent(e) {
        return e.data.type === "checkoutpage.resize";
      }

      if (isCheckoutPageEvent(e) && isResizeEvent(e)) {
        fixEmbeddedHeight();
      }
    }

    window.addEventListener("message", handleReceiveMessage);
  });

  window.addEventListener("resize", fixEmbeddedHeight);

  function fixEmbeddedHeight() {
    var html_embeds = document.querySelectorAll('div.contents[data-at="html"]');
    html_embeds.forEach(function (embed, index) {
      var parent_section = embed.closest(".section");
      var parent_section_block = embed.closest(".section-block");
      var children = embed.children;
      // set initial children_height to 0px
      // change this to something else if you want to add some padding between elements
      var children_height = 0;
      for (i = 0; i < children.length; i++) {
        children_height += parseInt(children[i].offsetHeight);
      }

      var offsetTop =
        embed.getBoundingClientRect().top -
        parent_section_block.getBoundingClientRect().top;

      parent_section.style.height = children_height + offsetTop + "px";
      parent_section_block.style.height = "100%";
    });
  }
</script>