Masterpass

Client-Side Implementation

Availability

Masterpass has been replaced with the latest unified checkout experience offered through Visa known as Secure Remote Commerce (SRC). If you were previously using Masterpass, you will need to integrate with SRC

SRC is currently in a limited release to eligible merchants, and the API is subject to change. It was introduced in Android v2, iOS v4, and JavaScript v3 of our Client SDKs.

Basic configuration

To set up the Braintree JavaScript v3 SDK, see the installation guide. Then, load the masterpass component. If you are using script tags to load files, be sure to at least include:

HTML

<script src="https://js.braintreegateway.com/web/3.88.1/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.88.1/js/masterpass.min.js"></script>

Set up your Masterpass button

Note

Be sure to follow Masterpass's brand requirements when configuring the Masterpass button.

First, create a Masterpass button in your HTML.

HTML

<div id="masterpass-button" class="button-hidden">
    <a href="#">
        <img alt="Checkout with Masterpass" role="button" src="https://static.masterpass.com/dyn/img/btn/global/mp_chk_btn_147x034px.svg" />
    </a>
</div>

Add a class to start with the button hidden and remove the class when Masterpass finishes initializing.

css

.button-hidden {
    visibility: hidden;
}

Initialize components

Initalize a client using either a tokenization key or a client token from your server
Create a Masterpass component
Once you receive a callback indicating that Masterpass is available, display the Masterpass button

Callbacks

Promises

var masterpassButton = document.getElementById('masterpass-button');

// Create a client.
braintree.client.create({
  authorization: CLIENT_AUTHORIZATION
}, function (clientErr, clientInstance) {

  // Stop if there was a problem creating the client.
  // This could happen if there is a network error or if the authorization
  // is invalid.
  if (clientErr) {
    console.error('Error creating client:', clientErr);
    return;
  }

  // Create a Masterpass component.
  braintree.masterpass.create({
    client: clientInstance
  }, function (masterpassErr, masterpassInstance) {

    // Stop if there was a problem creating Masterpass.
    // This could happen if there was a network error or if it's incorrectly
    // configured.
    if (masterpassErr) {
      console.error('Error creating Masterpass:', masterpassErr);
      return;
    }

    masterpassAvailable(masterpassInstance);
  });
});

function masterpassAvailable(masterpassInstance) {

  // Display Masterpass button.
  masterpassButton.classList.remove('button-hidden');
  ...
}

Launching Masterpass and tokenizing

To request a Masterpass payment from the customer, call masterpassInstance.tokenize with subtotal and currencyCode
Optionally, add configuration options for Masterpass
A Masterpass popup window prompts the user to authorize payment
On success, send payload.nonce to your server to create a transaction

Callbacks

Promises

function masterpassAvailable(masterpassInstance) {
    // Display Masterpass button
    masterpassButton.classList.remove('button-hidden');

    var payment = {
        currencyCode: 'USD',
        subtotal: '10.00',
        // Optional configurations. See <a href="https://developer.mastercard.com/page/masterpass-lightbox-parameters">https://developer.mastercard.com/page/masterpass-lightbox-parameters</a> for all options.
        config: {
            suppressShippingAddressEnable: true
        }
    }

    masterpassButton.addEventListener('click', function (event) {
        // Because tokenization opens a popup, this has to be called as a result of
        // customer action, like clicking a button—you can't call this at any time.
        masterpassInstance.tokenize(payment, function (tokenizeErr, payload) {
            // Stop if there was an error.
            if (tokenizeErr) {
                if (tokenizeErr.code === 'MASTERPASS_POPUP_CLOSED') {
                    console.log('Customer closed popup');
                } else {
                    console.error('Error during Masterpass tokenization', tokenizeErr);
                }
                return;
            }

            // Send payload.nonce to your server, and create a transaction there.
            console.log('payload', payload);
        });
    });
}