Masterpass

Client-Side Implementationanchor

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.

Contact us to request access to the release.

Basic configurationanchor

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:

  1. 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 buttonanchor

note

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

First, create a Masterpass button in your HTML.

  1. 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.

  1. css
.button-hidden {
  visibility: hidden;
}

Initialize componentsanchor

  1. Initalize a client using either a tokenization key or a client token from your server
  2. Create a Masterpass component
  3. Once you receive a callback indicating that Masterpass is available, display the Masterpass button
  1. Callbacks
  2. 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 tokenizinganchor

  1. To request a Masterpass payment from the customer, call masterpassInstance.tokenize with subtotal and currencyCode
  2. Optionally, add configuration options for Masterpass
  3. A Masterpass popup window prompts the user to authorize payment
  4. On success, send payload.nonce to your server to create a transaction
  1. Callbacks
  2. Promises
function masterpassAvailable(masterpassInstance) {

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

  var payment = {
    currencyCode: 'USD',
    subtotal: '10.00',
    // Optional configurations. See https://developer.mastercard.com/page/masterpass-lightbox-parameters 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);
    });
  });
}

Next Page: Server-side