The bundled QUID payment widgets are highly customizable. You can use a variety of colour schemes, themes, and specify precisely what text is shown to the user. For more advanced customizations, you can use your own CSS files, or the native Javascript libraries.

QUID Buttons

The QUID payment button can be used for payments, donations, and tips. The following example creates a payment button on the Sweet Potato and Carrot Soup blog post on Kev's Vegan Blog.

<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="Blog Post Donation"
  quid-product-description="Sweet Potato and Carrot Soup"
  quid-theme="quid"
  quid-palette="blue"
  quid-text="DONATE 25¢ CAD"
  quid-text-paid="THANKS FOR DONATING!"
/>

This block displays the following payment button:

When the button is clicked, a payment confirmation is displayed:

QUID Sliders

QUID sliders let your users decide how much to pay. They're useful for donations or pay-what-you-want types of content. Here's an example from the Chick Pea Curry blog post on Kev's Vegan Blog.

<div class="quid-slider"
  quid-amount="0.25"
  quid-currency="CAD"
  quid-product-id="P0001"
  quid-product-url="/blog/2019/1/21/chick-pea-curry"
  quid-product-name="Blog Post Donation"
  quid-product-description="Chick Pea Curry"
  quid-theme="quid"
  quid-palette="blue"
  quid-text="DONATE"
  quid-text-paid="THANKS FOR DONATING!"
/>

This block will display the following payment button and value selection slider:

When the payment button is clicked, the following payment confirmation is displayed with the selected slider value:

Div Classes

quid-button 

Use the quid-button div class to display the payment price on a button that can be clicked.

quid-slider 

Use the quid-slider div class to display above the payment button a slider that can be used to select the payment value.

Configuration Options


quid-amount
 

Set the payment amount in dollars and cents. This configuration option is required when a value selection slider is not used. When a slider is used, the quid-amount parameter will define the starting position for the slider selector.

quid-currency 

Set the currency of the payment amount. This configuration option is required.

quid-max-amount 

For use only with the slider div class. Set the maximum amount to allow on the slider.

quid-min-amount 

For use only with the slider div class. Set the minimum amount to allow on the slider.

quid-palette 

Set the colour palette to use for the QUID button (and optional slider). Possible values are:

  default

  dark

  blue

  maroon

  orange

  grey

  red

  green

quid-product-id

The product ID is a unique identifier for your product. Users see this ID in their billing statements and dashboards. 

quid-product-name

 This field specifies a short name for your product. Users see this in their confirmation windows and billing statements.

quid-product-description

This field can be used to set a slightly longer description for your product. This is also visible in on the confirmation windows and billing statements.

quid-product-url

This (optional) URL is lets your users know where to find the specific product they purchased.

quid-size 

Display a larger payment button by using the configuration value large . This has no impact on the size of the value selection slider.

quid-text 

Text displayed on the button / slider.

quid-text-paid
 

Text displayed after a successful payment.

quid-theme 

Set the button theme to use for the QUID button. Possible values are:

  default

  quid

Did this answer your question?