Help center / Adding Checkout Page to Webflow

Adding Checkout Page to Webflow

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

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

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

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

To integrate Checkout Page on your Webflow site with a link or button, start by copying the URL to your checkout page. Open your checkout page in the 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 Webflow page. If preferred, you can add a text link instead of a button. Edit the page you want to add a button to, and click "Add Elements" (top left). Select "Button" from the "Basic" section. In the URL field, paste the URL you copied on Checkout Page. You can select 'Open in new tab' if desired. To preview how your button behaves, click the little eye (preview) icon top left, and click your button. That's it. You've now integrated your checkout on your Webflow site!

2. Add your checkout as a pop-up

Note: this option requires a paid Webflow account or an active site plan on your Webflow project.

To integrate your checkout on your Webflow site as a pop-up, you'll start by copying the Checkout Page pop-up script. Open your checkout in the 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 Webflow page, open the Add panel and add an Embed element.

Embed

  • Copy the embeddable code to your clipboard
  • Press A to open the Add elements panel
  • Add an embed element from the components section
  • Paste in the custom code you copied in step 1
  • Save and close the modal

Next, you'll create a button that will act as the Call To Action to open the Checkout Page pop-up.

  • Open the Add elements (A) panel
  • Add a button
  • In the Style panel (S), add a class cp-button
  • In the Element Settings (D), add a Custom Attribute
    • Name: data-seller
    • Value: Find your value in the Use modal on Checkout Page
  • In the Element Settings (D), add another Custom Attribute
    • Name: data-checkout
    • Value: Find your value in the Use modal on Checkout Page

To find the correct values for data-seller and data-checkout, look in the Use modal on your page on Checkout Page. There will be an example with the correct values for your page. Something like this:

<button
  class="cp-button"
  data-seller="your-seller-name"
  data-checkout="your-page-slug"
>
  Buy now
</button>

That's it! Open the Webflow preview and click your button — it will now open your checkout in a pop-up.

3. Embed your checkout

Note: this option requires a paid Webflow account or an active site plan on your Webflow project.

To integrate Checkout Page on your Webflow site by embedding it onto the page, you'll start by copying the Checkout Page embed script. Open your checkout in the 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 Webflow page, open the Add panel and add an Embed element.

Embed

  • Copy the embeddable code to your clipboard
  • Press A to open the Add elements panel
  • Add an embed element from the components section
  • Paste in the custom code you copied in step 1
  • Save and close the modal

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