Web SDK - Merchant Warrior API 2.0

The easiest way to integrate Apple Pay and other wallets is to use the Merchant Warrior Web SDK.

Include the Merchant Warrior Javascript in the head of your HTML document

<script src="https://securetest.merchantwarrior.com/sdk/merchantwarrior.min.js"></script>

Configure your options

Configure your middleware. For security reasons, the JavaScript SDK does not make any calls directly to the Merchant Warrior servers. Rather, these requests are passed through a middleware option. Please see our guide on how to set up your middleware.

Create the Merchant Warrior object.

MerchantWarrior.createWithToken(accessToken, options).then((mwarrior) => {
    // Interact with the mwarrior object here
});

Create a payment summary. If the customer details are currently unknown, they can be omitted and supplied later in the process. This summary also allows you to choose which wallets you would like to be made available to compatible devices. The options are googlepay, applepay, and basic-card. basic-card uses whatever interface the browser makes available, and uses card data (such as PAN) directly.

The applePay property is for specific Apple Pay options. It takes an object that has a single string property, buttonText. This property controls what text is displayed on the Apple Pay button. Available options include buy, donate, plain, set-up, book, check-out, subscribe, add-money, contribute, order, reload, rent, support, tip, or top-up.

The googlePay property is for specific Google Pay options. It takes an object with 4 properties; buttonText, buttonLocale, buttonHeight and buttonWidth.

The buttonText property has the following available options: book, buy, checkout, donate, order, pay, plain, subscribe.

buttonLocale accepts any locale, eg. en or fr

buttonHeight and buttonWidth accept dimensions in pixels

Create and mount a payment request

    mwarrior.paymentRequest(summary).then((element) => {
        element.mount('payment-buttons'); // This will attach the buttons to the HTML element with an id of 'payment-buttons'
    });

Handle events.

The two primary events

payment-complete, which will trigger when the payment process has completed. It has 3 arguments, status which is a boolean value indicating whether the payment was successful, response which contains a JSON object detailing the response from the Merchant Warrior servers, and errors which contains any Javascript error details. Whether a payment is successful or not, the button that triggered it will still be reusable and should be manually removed when finished with.

request-customer, which will trigger near the start of the payment flow if a customer is not included in the initial payment summary. It has two parameters - resolve, and reject. These are connected to an internal promise. Calling the resolve parameter with a valid customer will allow the payment request to proceed, and calling the reject parameter will end the payment and trigger the payment-complete event.

    mwarrior.on('payment-complete', (status, response, errors) => {
        if (status) {
            document.getElementById('payment-buttons').innerHTML = '';
            // Payment successful!
        } else {
            // Payment failed
        }
    });

    mwarrior.on('request-customer', (resolve, reject) => {
        resolve(customer);
    });

Put it all together. An example of this code in action can be found here