QuadPay

QuadPay Integration

Welcome! Integrating QuadPay into your online store is straightforward. Here you'll find comprehensive guides and documentation to support integrating QuadPay into your site as quickly as possible. Let's jump right in!

Guides

Widget Integration

The QuadPay widget informs customers what QuadPay is and how to use it. The QuadPay widget is designed to integrate well with a wide variety of online stores. By inheriting the font face, alignment, and color palette of your online store, while allowing for further style edits, the QuadPay widget will seamlessly integrate with your site. Please refer to the Widget Guidelines which describe in detail where and how the widget should appear.

📘

If you are looking to adjust a currently existing integration, you may want to refer to the instructions for integrating previous versions of the QuadPay widget.

Example Widget

Follow these steps to integrate the widget onto your site.

1. Enable display of the widget

Paste this snippet which renders the QuadPay widget and informational modal in the store's theme or global file.

<!-- QuadPay: Older Browsers -->
<script src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-loader.js" type="application/javascript"></script>
<script defer nomodule src="https://widgets.quadpay.com/es5/quadpay-widget-2.2.6.js" type="application/javascript"></script>
<!-- QuadPay: Modern Browsers -->
<script async src="https://widgets.quadpay.com/quadpay-widget-2.2.6.js" type="application/javascript"></script>

2. Place the widget

Paste this snippet where the QuadPay widget should appear:

  • Beneath the product price on Product Details Page
  • Beneath the cart total on the Cart screen
  • Beneath the cart total on the Mini Cart screen

For each placement, update the amount attribute (e.g. {{ current_variant.price }}) with the variable for the product price or cart total.

<!-- Insert QuadPay Widget -->
<div style="margin: 0 0 10px 0;min-height:20px;">
  <quadpay-widget amount={{ current_variant.price }} ></quadpay-widget>
</div>

3. Preview and QA the widget

Preview the widget. Sometimes adjustments like spacing and alignment are necessary. Be sure to preview the widget at desktop and mobile screen widths.

Also, take note that the QuadPay informational modal appears when the user clicks on the QuadPay logo or information "i" link. To customize the styling of this modal, select the element by ID and add insert CSS styling accordingly.

For a complete QA of the integration, please review the Testing & QA guidelines.

OPTIONAL

These aspects of the QuadPay widget can be customized:

  • Layout spacing
  • Alignment, including alignment by breakpoint
  • Size (text and logo)
  • Color (including different colors for price and logo)
  • Logo alignment
  • Minimum and maximum price,
  • Handling for variable pricing and changes in quantity

> Adjust Layout Spacing

To adjust the space around the widget, wrap the widget in a div and adjust the style="margin: {TOP, RIGHT, BOTTOM, LEFT PIXELS}; attributes to achieve the desired spacing.

<!-- Insert QuadPay Widget -->
<div style="margin: 0 0 10px 0;min-height:20px;">
  <quadpay-widget amount={{ cart.total_price }} ></quadpay-widget>
</div>

> Adjust Alignment

The default alignment of the widget is left-aligned. To change the widget’s alignment, add alignment="center" or alignment="right" to the quadpay-widget tag.

<!-- Insert QuadPay Widget -->
<div style="margin: 0 0 10px 0;min-height:20px;">
  <quadpay-widget amount={{ cart.total_price | divided_by: 100.00 }} 
       alignment="center"></quadpay-widget>
</div>

> Adjust Widget Margins Directly

The default margin value is simply 0. To change the widget's margins, add customMargins="20px 10px" (whatever suits your needs and follows proper CSS margin guidelines) to the quadpay-widget tag.

<!-- Insert QuadPay Widget -->
<div>
  <quadpay-widget amount={{ cart.total_price | divided_by: 100.00 }} 
       customMargins="10px"></quadpay-widget>
</div>

> Adjust Alignment on a Breakpoint

The default alignment of the widget is always left-aligned. Often, the layout of a site changes as the viewport width changes. To adjust the alignment of the widget based on a breakpoint, add breakpointAlignment="{BREAKPOINT (VIEWPORT PIXEL WIDTH) ALIGNMENT}" to the quadpay-widget tag.

<!-- Insert QuadPay Widget -->
<div style="margin: 0 0 10px 0;min-height:20px;">
  <quadpay-widget amount={{ cart.total_price | divided_by: 100.00 }} 
       breakpointAlignment="768 right"></quadpay-widget>
</div>

> Adjust Text Size

To increase or decrease the size of the text inside the widget, add size="{PERCENTAGE}" to the quadpay-widget tag.

<!-- Insert QuadPay Widget -->
<div style="margin: 0 0 10px 0;min-height:20px;">
  <quadpay-widget amount={{ cart.total_price | divided_by: 100.00 }} 
       size="110%"></quadpay-widget>
</div>

> Adjust Logo Size

To increase or decrease the size of the QuadPay logo inside the widget, add logoSize="{PERCENTAGE}" to the quadpay-widget tag. (Available with version 2.2.0 and higher.)

<!-- Insert QuadPay Widget -->
<div style="margin: 0 0 10px 0;min-height:20px;">
  <quadpay-widget amount={{ cart.total_price | divided_by: 100.00 }} 
       logoSize="95%"></quadpay-widget>
</div>

> Set Logo Color

The default color for the QuadPay logo is black. To adjust the color of the QuadPay logo, add logoColor="{HEX COLOR}" to the quadpay-widget tag. To display the 4-color QuadPay logo, add logoColor="4color" to the quadpay-widget tag.

<!-- Insert QuadPay Widget -->
<div style="margin: 0 0 10px 0;min-height:20px;">
  <quadpay-widget amount={{ cart.total_price | divided_by: 100.00 }}
       logoColor="#666666"></quadpay-widget>
</div>

> Adjust Logo Alignment

If the logo does not appear vertically aligned in the widget, the add logoAlignment="{PIXELS UP OR DOWN}" to the quadpay-widget tag.

<!-- Insert QuadPay Widget -->
<div style="margin: 0 0 10px 0;min-height:20px;">
  <quadpay-widget amount={{ cart.total_price | divided_by: 100.00 }} 
       logoAlignment="-1px"></quadpay-widget>
</div>

> Set Price Color

The default color for the installment price is the same as the surrounding text. To adjust the color of the installment price, add priceColor="{HEX COLOR}" to the quadpay-widget tag. (Available with version 2.2.0 and higher.)

<!-- Insert QuadPay Widget -->
<div style="margin: 0 0 10px 0;min-height:20px;">
  <quadpay-widget amount={{ cart.total_price | divided_by: 100.00 }}
       priceColor="#990000"></quadpay-widget>
</div>

> Adjust Minimum Price

The default minimum purchase price is $35. On occasion, a merchant has agreed to a different minimum price with QuadPay. In these cases, the widget should reflect the agreed-to minimum purchase price by adding min="{MINIMUM PRICE}" to the quadpay-widget tag.

<!-- Insert QuadPay Widget -->
<div style="min-height:20px;">
  <quadpay-widget amount={{ cart.total_price | divided_by: 100.00 }} 
       min="35" ></quadpay-widget>
</div>

> Adjust Maximum Price

The default maximum amount allowed is $1500. On occasion, a merchant has agreed to a different maximum with QuadPay. In these cases, the widget should reflect the agreed-to maximum amount allowed by adding max="{MAXIMUM PRICE}" to the quadpay-widget tag.

<!-- Insert QuadPay Widget -->
<div style="margin: 0 0 10px 0;min-height:20px;">
  <quadpay-widget amount={{ cart.total_price | divided_by: 100.00 }} 
       max="1600" ></quadpay-widget>
</div>

> Handle Changes to Price or Cart Total

👍

QA Tip

Test that QuadPay installment amount updates on products with variable prices and when quantities are changed in the cart.

The QuadPay installment amount should update when the product price changes. To use this feature, add amountSelector="{SELECTOR (ID, CLASS) FOR PRICE OR TOTAL}" to the quadpay-widget tag:

<!-- Insert QuadPay Widget -->
<div style="margin: 0 0 10px 0;min-height:20px;">
  <quadpay-widget amount={{ cart.total_price | divided_by: 100.00 }} 
       amountSelector=".price"></quadpay-widget>
</div>

🚧

Version 2.0.0 of the QuadPay Widget

If you are using the older widget's JavaScript quadpay-widget-2.0.0.js, then pass these two attributes in the quadpay-widget tag:

  • variablePriceSelector="{SELECTOR FOR DROPDOWN OR SELECT TOGGLE}"
  • variablePrice="{SELECTOR (ID, CLASS) FOR PRICE}"

> Combine Customizations

Many customizations can be included in the quadpay-widget tag.

<!-- Insert QuadPay Widget -->
<div style="margin: 0 0 10px 0;min-height:20px;">
  <quadpay-widget amount={{ cart.total_price | divided_by: 100.00 }} 
                  min="35" 
                  max="1600" 
                  alignment="center" 
                  breakpointAlignment="768, right" 
                  size="110%" 
                  logoColor="#666666" 
                  logoAlignment="-1px" 
                  amountSelector=".testprice"
                  >
  </quadpay-widget>
</div>

📘

Advanced Customizations

If you would like to talk about more advanced customizations or have any questions please email our Integrations Team.

> Disable ADA Compliance Styling

You can disable ADA compliance styling with the attribute disableAdaCompliance="true" on the quadpay-widget element.

Example

<!-- Insert QuadPay Widget -->
<div style="margin: 0 0 10px 0;min-height:20px;">
  <quadpay-widget amount={{ cart.total_price | divided_by: 100.00 }} 
       amountSelector=".price" disableAdaCompliance="true"></quadpay-widget>
</div>

Updated 6 days ago


What's Next

Now that you've added the QuadPay gateway and integrated the QuadPay widget, be sure to follow these quality assurance steps:

Testing & QA

Widget Integration


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.