Rendering buttons with HTML tags

The fastest way to accept payments is by using QUID's handy HTML tags to render payment buttons. The tags can be placed anywhere in the document (for example, just below a product name).

<div class="quid-button"
     quid-amount="0.12"
     quid-currency="USD"
     quid-product-id="P0001"
     quid-product-url="/articles/green_carrots_and_beans"
     quid-product-name="Green Carrots and Beans"
     quid-product-description="Article on Kev's Vegan Blog"
     />

The above code displays a payment button for a blog article, with the price of 12¢ USD. When a user completes a payment, the successCallback function is called with the payment details. (See Verifying Payments for more information on verifying and processing the payment.)

Styling the payment buttons

You can style the button with CSS by customizing the button.quid-pay-button, and button.quid-pay-button.paidtargets. They support the :disabled, :focused, :active, and :hover states.

For example, you can customize the paid state with:

button.quid-pay-button.paid {
    border-bottom: 2px #2ab335 solid !important;
    background-color: #ade1c2 !important;
    color: #00625d !important;
}

You can also download and customize the default CSS stylesheet from quid.css.

Creating your own buttons with Javascript

If you're looking for more flexibility, you can use QUID's Javascript library to customize the payment flow. Before you can use the Javascript library, make sure you have https://js.quid.works/v1/quid.js loaded into your document.

The requestPayment() API

The API call for initiating a payment is requestPayment(...), which takes the following parameters:

  • productID - A unique identifier for the product that is being purchased.
  • productURL - An optional product URL you can use to manage your product hierarchy.
  • productName - The product name shown to the user.
  • productDescription - The description of the product shown to the user.
  • price - Payment amount requested.
  • currency - Currency code (CAD, USD, EUR, etc.)
  • successCallback - If this is a URL, the user will be redirected to it upon a successful payment. Or this can be a javascript function to call upon success.

Example API request

const q = new quid.Quid({
  apiKey: 'kt-JSB7GJ50F1TDW31MWJDDLLJR53P85VKN',
 
  // Setup click handlers after QUID is ready
  onLoad: () => {
    $(button).click(() => {
      q.requestPayment({
          productID: '0001',
          productURL: '/articles/turtles_0001',
          productName: 'Turtles all the way down',
          productDescription: 'An article on the Turtle blog',
          price: 0.25,
          currency: 'CAD',
          successCallback: (response) => {
            console.log(response)
          },
      });
    });
  }
});

// Install QUID into website
q.install();

Verifying payments

Before delivering a product (such as your blog content), you must verify that the payment was indeed successful. Follow the instructions in Verifying Payments to learn how.

Did this answer your question?