This article shows you how to accept QUID payments on your Wix site. For this example I will be adding QUID to the web page www.tinysecurepayments.com.

Due to the way Wix handles blocks of HTML code (i.e. you have to embed that code in an iframe that cannot be accessed by JavaScript on your site) you cannot arbitrarily add blocks of code to your site. The QUID JavaScript client library has a nice feature to work around this limitation, namely the ability to search for a specific block of text in your web page and replace that text with the QUID payment slider or button.

Create a QUID API Key

Follow these steps to create your API key

Add the QUID JavaScript client and stylesheet to your site

Note: The ability to add "tracking code" to a Wix site is a premium feature that requires you to connect a domain to your Wix site and is therefore only available in paid Wix plans.

In your Wix admin panel, navigate to Settings > Tracking Tools & Analytics. Add a new tool using the "+ New Tool" button and paste the code below into the text box below the "Paste the code snippet here:" label

<link rel="stylesheet" href="https://js.quid.works/v1/assets/quid.css">
<script src="https://js.quid.works/v1/client.js"></script>

Add "QUID Header" in the Name box. Under "Add Code to Pages:" select "All pages" and "Load code on each new page" and under the "Place Code in:" label select "Head" (this is the default). 

Click the Apply button to save your changes.

Add the QUID Slider JavaScript

These steps are specific to Wix and are required because of the way Wix's HTML blocks work.

In your Wix editor open Settings > Tracking & Analytics and click the "+ New Tool" button. Paste the code below into the text box below the "Paste the code snippet here:" label - make sure to put your real API key in the code

<script>
  quid.autoInit({
    apiKey: 'kp-ENTERYOURQUIDAPIKEYHERE',
    sliderSel: 'div.txtNew',
    regexMatch: '--quid-slider--',
    amount: "0.25",
    minAmount: "0.00",
    maxAmount: "2.00",
    currency: "CAD",
    productID: "DONATION",
    productName: "Tiny Secure Payments Donation",
    productURL: "https://www.tinysecurepayments.com",
    productDescription: "Donation to tinysecurepayments.com",
    text: "DONATE NOW"
  })
</script>

Add "QUID Body" in the Name box. Under "Add Code to Pages:" select "All pages" and "Load code on each new page" and under the "Place Code in:" label select "Body - end." 

Click the Apply button to save your changes.

Add the QUID Payment Slider

Using the Wix editor, open the page that you want the QUID payment slider to show up and click the "+" icon to add a new element. 

Select one of the paragraph text styles and drag it to where you want the slider.

In the text box add the text "--quid-slider--" (this must be the only text in the text element)

Adjust the text colour to make the text blend in with the background colour -- there will be a short period of time when you page loads and before the QUID script replaces the text with a slider, so this will make sure your visitors don't see the text.

Save and publish your site and start accepting donations!

Add a QUID Payment Button

You can also use this approach to have the QUID donation button on your site. To do this, add a second block of javascript code using the approach above and add the following code.

<script>
  quid.autoInit({
    apiKey: 'kp-ENTERYOURQUIDAPIKEYHERE',
    sel: 'div.txtNew',
    regexMatch: '--quid-button--',
    amount: "0.25",
    currency: "CAD",
    productID: "DONATION",
    productName: "Tiny Secure Payments Donation",
    productURL: "https://www.tinysecurepayments.com",
    productDescription: "Donation to tinysecurepayments.com",
    text: "DONATE NOW"
  })
</script>

Place a text element with only the text "--quid-button--" where you want a donation button to appear.

Did this answer your question?