Using Checkout on Squarespace

Quaderno Checkout is an embeddable payment form for your  Squarespace site. It works within your site seamlessly, allowing customers to pay in-place without being redirected away anywhere else. It looks pretty great, to boot!

Use Quaderno Checkout on your Squarespace site if you want to:

  • Add taxes on top of you prices depending on your customer's location.
  • Charge your customers via Stripe, PayPal or Braintree.
  • Send beautiful receipts automatically.  
  • Automate your accounting by exporting all your reports to CSV files or Xero, or sharing them with your accountant.

Embedding Checkout on Squarespace

To add embed code to page elements in Squarespace:

1.    Create your custom Checkout form.

2. Copy the embed code that's generated:

<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>

3. Open the page where you want to embed the Checkout form.

4. Find the element on the page where you want the Checkout button to appear, hover over the Page Content area, and then click Edit:

5. Click the insert point where you want to add the embed code:

6. In the  More section of the Content Blocks dialog, click Code:

7. Paste the Checkout code in the code dialog and hit Apply.

8. Click Save on the page editor.

Since Squarespace disables JavaScript in its dashboard, you need to preview your page separately to see the Checkout form that you've added.

Still need help? Contact Us Contact Us