October 30, 2017 | 1 minute read

How to add Masterpass support to your site

Get Masterpass digital wallet on your eCommerce site

As part of our continuous work to make it easier for our developers to support the growing range of online payment methods, we are happy to announce that now Square’s E-commerce API will support Masterpass for our U.S. sellers. By doing this we guarantee that our sellers will be able to close their sales with every method buyers are interested in paying with.

Masterpass is Mastercard’s digital wallet, which lets buyers checkout easily, quickly, and securely from your site using all major card brands.

To enable Masterpass, simply follow the three steps below:

Step 1 - Add your Location ID to the SqPaymentForm. (Note: you can find your Location ID by logging into your developer portal):

var paymentForm = new SqPaymentForm({
  // ...
  locationId: locationId,
  masterpass: {     // Initialize Masterpass placeholder ID
    elementId: 'sq-masterpass'
   },
   // ...
});

Step 2 - Similar to the other wallets we support, add the following in the callback section:

methodsSupported: function (methods) {
  if (methods.masterpass === true) {
  // Show Masterpass button
  var element = document.getElementById('sq-masterpass');
  element.style.display = 'inline-block';
  }
}
// ...

Step 3 - Add the CreatePaymentRequest:

createPaymentRequest: function () {
    return {
        requestShippingAddress: true,
        currencyCode: "USD",
        countryCode: "US",
        total: {
            label: "{{ MERCHANT NAME }}",
            amount: "100.00",
            pending: false,
        },
        lineItems: [
            {
                label: "Subtotal",
                amount: "80.00",
                pending: false,
            },
            {
                label: "Shipping",
                amount: "0.00",
                pending: true,
            },
            {
                label: "Tax",
                amount: "10.00",
                pending: false,
            }
        ]
    };
};
// ...

By adding Masterpass support for our developers and the sellers they serve, buyers can pay using the payment method they prefer. To learn more about what you can do with Square’s E-commerce API, see our documentation on embedding a payment form.

Additional Reading