QuadPay

The QuadPay Developer Hub

Welcome to the QuadPay developer hub. You'll find comprehensive guides and documentation to help you start working with QuadPay as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Customize Your QuadPay Widget

This is a guide to help you implement custom styling for the QuadPay widget on your eCommerce site.

Advanced Customizations

If you would like to talk about more advanced customizations or have any questions please get in touch with us.

QuadPay Widget

Widget Element IDs

The default QuadPay widget HTML elements are assigned unique IDs to make CSS customization easier.

Element ID
Element Description

quadPayCalculatorWidget

Outer widget container.

quadPayCalculatorWidgetLogo

QuadPay Logo

quadPayCalculatorWidgetText

Container for the widget copy
e.g. "or 4 Interest-Free..."

quadPayCalculatorWidgetTextFromCopy

Variable price copy
e.g. "of $11.25"

quadPayCalculatorWidgetLearn

The Learn More link.

Basic Widget Html

<div id="quadPayCalculatorWidget">
  <img id="quadPayCalculatorWidgetLogo" src="https://assets.quadpay.com/assets/images/quadpay-logo.png">
  <div id="quadPayCalculatorWidgetText">or 4 Interest-Free Installments
    <br>
    <span id="quadPayCalculatorWidgetTextFromCopy">of <span>$11.25</span></span> 
    <span id="quadPayCalculatorWidgetLearn">Learn&nbsp;more</span>
  </div>
</div>

Custom CSS Styling

To customize the look and feel of the QuadPay Widget simply add a CSS block targeting the Element IDs listed in the table above.

CSS Descriptor

Don't forget to add the '!important' CSS descriptor to your new CSS rules in insure they take precedence over the default styles.

<style type="text/css">
  #quadPayCalculatorWidgetText {
  	font-family: Helvetica, sans-serif !important;
  	font-size: 12px !imporant;
  }

  #quadPayCalculatorWidgetLogo {
  	margin-top: 5px !imporant;
  }
</style>

Customize Your QuadPay Widget

This is a guide to help you implement custom styling for the QuadPay widget on your eCommerce site.