Button or Custom DOM Element

Add a Zip button or attach the click event to a custom HTML DOM element.

Zip button
<quadpay-button id="QPButton" merchantId="44444444-4444-4444-4444-444444444444" merchantReference="xxxyyy111" amount="100" currency="USD"></quadpay-button>

You can find all available attributes for the Zip button in the below table.

Zip Button Attributes

Attribute Name	Type	Optional/Required	Description
amount	number	Required	The maximum amount that can be authorized on the issued virtual card. It should include all fees, taxes, shipping, and discount codes calculated in its value.
shippingAmount	number	Optional	The cost of shipping.
taxAmount	number	Optional	The cost of taxes.
currency		Required	The currency in which the customer is transacting, in ISO 4217 format.
merchantId	GUID	Required	Your unique ID for your integration. Shared via the Merchant Portal.
merchantReference	string	Required	This is an identifier you will use to reconcile orders made with Zip. Set this to something that is unique for each order that you can preferably reference within your system.
customerFirstName	string	Optional	Customer's first name
customerLastName	string	Optional	Customer's last name
customerEmail	string	Optional	Customer's email address
customerPhoneNumber	string	Optional	Customer's phone number
customerAddressLine1	string	Optional	Customer's primary address informationc
customerAddressLine2	string	Optional	Customer's secondary address information. May contain - Apartment number, Care of, Attention
customerCity	string	Optional	Customer's address city
customerState	string	Optional	Customer's address state, in ISO 3166-2:US format (two letter state code)
customerPostalCode	string	Optional	5 digit state postal/zip code
customerCountry	string	Optional	Customer's address country, in ISO_3166-2 (two letter country code). E.g., US, CA, MX
isDisabled	bool	Optional	For testing purposes. This blocks openCheckout.
merchantFeeForPaymentPlan	number	Optional	A customer contribution model that includes an incremental order amount called “Merchant Fee for Payment Plan” (MFPP).
forceIFrame	bool	Optional	Default functionality will launch the Zip checkout flow in a pop-up window, unless forceIFrame is set to 'true'.
checkoutFlow	enum	Optional	Indicates if it’s the standard or express flow. Either “standard” or “express”.
hideOverlay	bool	Optional	Default functionality will present a dark gray overlay behind the pop-up window, unless hideOverlay is set to 'true.'

📘
Internet Explorer 11 Support
Because the quadpay-button utilizes webcomponents, you have to take extra care when initializing it within IE11. In modern browsers, you can start working with the quadpay-button as soon as the quadpay.js script executes. However, in IE11, you'll want to configure an event listener on the document for the WebComponentsReady event and then execute your setup code. This is only required if you expect to support IE11. Here's a sample script:
  if (isIe11()) {
        document.addEventListener('WebComponentsReady', function (e) {
            setupQuadPay();
        });
    } else {
        setupQuadPay();
    }

    function isIe11() {
        return !!window.MSInputMethodContext && !!document.documentMode;
    }

Custom DOM Element

The custom DOM element can be any type of element that supports an onClick event. The below example is a button element but this can be anything from radio buttons, dropdown or image.

<input type="button" id="ZipButton" value="Pay with Zip" />

Set an onComplete callback handler that accepts the virtual card details and uses them as the payment method in your system.

Button or Custom DOM Element

Zip Button Attributes

📘Internet Explorer 11 Support

Custom DOM Element

📘
Internet Explorer 11 Support