© 2019 QUID Works Inc.

How to accept donations on your Wix site using QUID

--quid-slider-for-reals--

QUID makes it easy to accept small payments online and Wix makes it easy to create a decent looking site really quickly, so putting them together should be easy and awesome, right?

Well, it's not that easy, but there is a way to accept QUID donations on your Wix site. Here's how.

How to add the QUID donation slider to your Wix site

In this approach, you will create a Wix text element, with some specific contents, in each place you want a QUID payment slider to appear. When the QUID javascript library loads it will look for the text elements on your webpage and it will replace them with the slider. This approach requires you are on a premium Wix plan and that you have a custom domain connected to your site so that you have access to the Tracking & Analytics feature (the cheapest Wix premium plan is sufficient).

Generate your QUID API key

  1. Login to your QUID merchant dashboard

  2. Scroll down to the API Keys section of the dashboard and click the "+" icon to create a new API key

  3. Click the toggle beside the "New test API key" text to create a live API key

  4. Under "Specify origins for this key" click on the "http://" text to switch it to "https://"

  5. The text field will be filled with the site address you provided when you signed up to sell with QUID, if that is correct leave it as-is, otherwise change it to your website address

  6. Copy and save your API key and secret somewhere safe. You will need the API key in the next step.

Add the QUID javascript client and stylesheet

The following is how the QUID library is added to any website tool that allows for code injection.

  1. In your Wix editor open Settings > Tracking & Analytics

  2. Click the "+ New Tool" button

  3. Paste the code below into the text box below the "Paste the code snippet here:" label

  4. Add "QUID Header" in the Name box

  5. Under "Add Code to Pages:" select "All pages" and "Load code on each new page"

  6. Under the "Place Code in:" label select "Head" (this is the default)

  7. Click the Apply button

Add the QUID slider javascript

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

  1. In your Wix editor open Settings > Tracking & Analytics

  2. Click the "+ New Tool" button

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

  4. Add "QUID Body" in the Name box

  5. Under "Add Code to Pages:" select "All pages" and "Load code on each new page"

  6. Under the "Place Code in:" label select "Body - end"

  7. Click the Apply button

Add the text boxes

  1. Using the Wix editor, open the page that you want the QUID payment slider to show up.

  2. Click the "+" icon to add a new element

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

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

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

  6. Save and publish your site

Check out our support article on how to style the QUID payment button or widget.

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. Place a text element with only the text "--quid-button--" where you want a donation button to appear.

This site was designed with the
.com
website builder. Create your website today.
Start Now