Button or Custom DOM Element

Plugin icon

Button or Custom DOM Element


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


250

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 NameTypeOptional/RequiredDescription
amountnumberRequiredThe 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.
shippingAmountnumberOptionalThe cost of shipping.
taxAmountnumberOptionalThe cost of taxes.
currencyRequiredThe currency in which the customer is transacting, in ISO 4217 format.
merchantIdGUIDRequiredYour unique ID for your integration. Shared via the Merchant Portal.
merchantReferencestringRequiredThis 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.
customerFirstNamestringOptionalCustomer's first name
customerLastNamestringOptionalCustomer's last name
customerEmailstringOptionalCustomer's email address
customerPhoneNumberstringOptionalCustomer's phone number
customerAddressLine1stringOptionalCustomer's primary address informationc
customerAddressLine2stringOptionalCustomer's secondary address information. May contain - Apartment number, Care of, Attention
customerCitystringOptionalCustomer's address city
customerStatestringOptionalCustomer's address state, in ISO 3166-2:US format (two letter state code)
customerPostalCodestringOptional5 digit state postal/zip code
customerCountrystringOptionalCustomer's address country, in ISO_3166-2 (two letter country code). E.g., US, CA, MX
isDisabledboolOptionalFor testing purposes. This blocks openCheckout.
merchantFeeForPaymentPlannumberOptionalA customer contribution model that includes an incremental order amount called “Merchant Fee for Payment Plan” (MFPP).
forceIFrameboolOptionalDefault functionality will launch the Zip checkout flow in a pop-up window, unless forceIFrame is set to 'true'.
checkoutFlowenumOptionalIndicates if it’s the standard or express flow. Either “standard” or “express”.
hideOverlayboolOptionalDefault 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.