This article shows you how to accept QUID payments on your Ghost blog. For this example I will be adding QUID to the blog blog.quid.works.

Create a QUID API Key

Follow these steps to create your API key

Add the QUID JavaScript library to your site

In your Ghost admin panel click on the Code Injection link. Add the following code in the Blog Header field. If you have other code in this field (like your Google Analytics tracking code) 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>

Take note of the function in the quid.autoInit above, specifically:

onPaymentSuccess: function(){},

This is a dummy function that does nothing when a payment is successful. Alternately, we could have a real JavaScript function here to do something when a payment is received or we could send the user to another page on our Ghost site by specifying a URI in place of the function like:

onPaymentSuccess: '/thanks',

Add the QUID payment code to your blog posts

In your Ghost admin panel click on the Posts navigation link.

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

Click on the Post title to edit the blog post

Add an HTML element

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="/test-story/"
     quid-product-name="Test Story"
     quid-product-description="QUID Works Blog Donation"
     quid-theme="quid"
     quid-palette="blue"
     quid-text="DONATE 25¢ CAD"
     quid-text-paid="THANKS FOR DONATING!"
     />
</div>

...making the appropriate substitutions for your own site and content.

Save your changes to the Post

When you page loads the donation button will be displayed!

Did this answer your question?