This article shows you how to accept QUID payments on your Squarespace site. For this example I will be adding QUID to the blog kevsveganblog.com.

Create a QUID API Key

Follow these steps to create your API key

Add the QUID JavaScript library to your site

Note: Squarespace Code Injection is a premium feature that is available in certain Squarespace plans.

In your Squarespace admin panel, navigate to Settings > Advanced > Code Injection. Add the following code in the header box field. If you have other code in this box make sure that the QUID code is pasted outside the other code blocks.

<link rel="stylesheet" href="https://js.quid.works/v1/assets/quid.css">
<script src="https://js.quid.works/v1/client.js"></script>
<script>
    quid.autoInit({
      apiKey: 'your-QUID-API-key',
      onPaymentSuccess: function(){},
    });
</script>

Add the QUID payment code to your blog posts

In your Squarespace admin panel, navigate to Pages > Blog (or whatever your blog page is named)

The following steps will be done for each blog post on which you want to place a donation button.

Click "EDIT" on your blog post

Hover over the content anchor where you want to insert the button

Add a code block

Edit the code block

Add the payment button code to your code block

<div style="width:100%;text-align:center">
  <div class="quid-button"
     quid-amount="0.25"
     quid-currency="CAD"
     quid-product-id="P0001"
     quid-product-url="/blog/2019/1/23/sweet-potato-and-carrot-soup"
     quid-product-name="Sweet Potato and Carrot Soup"
     quid-product-description="Kev's Vegan Blog Donation"
     quid-theme="quid"
     quid-palette="blue"
     quid-text="DONATE 25¢ CAD"
     quid-text-paid="THANKS FOR DONATING!"
     />
</div>

...making the appropriate substitutions.

Save your changes to the blog post

When you page loads the donation button will be displayed!

Did this answer your question?