Adding a Checkout form

After you create a  Checkout form in your Quaderno admin, you're ready to add it to your own website or blog.

The process of adding embed code to your website's source HTML is a bit different depending on how and where you want your Checkout form to appear and on your publishing platform.

Copy & paste the Checkout code

You can sell your products on your own website, your blog, or wherever you've already built an audience online. 

To add the code in any HTML page:

1. Copy the embed code that's generated when you create a Checkout form:

<script src="https://checkout.quaderno.io/checkout.js"></script><button id="QuadernoCheckoutButton">Pay now</button><script>var handler=QuadernoCheckout.configure({key:"pk_test_PUzCU1nogJmZGesyUzET",locale:"en",color:"#4c7800",callback:function(data) { window.location = "/thank-you-page.html";}});document.querySelector("#QuadernoCheckoutButton").addEventListener("click",function(e){handler.open({gateway:"stripe",type:"charge",taxes:"excluded",country:"GB",item_code:"CODE",currency:"USD",amount:"999",});e.preventDefault();});</script>

2. Open the page on your website where you want to embed the Checkout form.

3. Paste the code and save your changes.

Add script tags separately

Some platforms (like ClickFunnels or Unbounce) require that you paste the embed code's <script> tags in the page header, and the rest of the embed code on the page where you want the Checkout form to appear.

To add script tags separately: 

1. Copy the embed code that's generated when you create a Checkout form:

<script src="https://checkout.quaderno.io/checkout.js"></script><button id="QuadernoCheckoutButton">Pay now</button><script>var handler=QuadernoCheckout.configure({key:"pk_test_PUzCU1nogJmZGesyUzET",locale:"en",color:"#4c7800",callback:function(data) { window.location = "/thank-you-page.html";}});document.querySelector("#QuadernoCheckoutButton").addEventListener("click",function(e){handler.open({gateway:"stripe",type:"charge",taxes:"excluded",country:"GB",item_code:"CODE",currency:"USD",amount:"999",});e.preventDefault();});</script>

2. Open the page header for the website where you want to embed the Checkout form. 

3. Paste the first <script> section of the embed code into the page header:

<script src="https://checkout.quaderno.io/checkout.js"></script>

4. Save your changes.

5. Open the page on your website where you want to embed the Checkout form.

6. Paste the button and the second <script> section in the page:

<button id="QuadernoCheckoutButton">Pay now</button><script>var handler=QuadernoCheckout.configure({key:"pk_test_PUzCU1nogJmZGesyUzET",locale:"en",color:"#4c7800",callback:function(data) { window.location = "";}});document.querySelector("#QuadernoCheckoutButton").addEventListener("click",function(e){handler.open({gateway:"stripe",type:"charge",taxes:"excluded",country:"DE",item_code:"###",currency:"USD",amount:"999",});e.preventDefault();});</script>

7. Save your changes. 

Still need help? Contact Us Contact Us