availability

Masterpass is currently in a limited release to US merchants, and the API is subject to change.

Contact us at masterpass-requests@braintreepayments.com to request access to the release.

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
Copy
Copied
<script src="https://js.braintreegateway.com/web/3.26.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.26.0/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
Copy
Copied
<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
Copy
Copied
.button-hidden {
  visibility: hidden;
}

Initialize components

  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
JavaScript
Copy
Copied
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

  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
JavaScript
Copy
Copied
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: Server-side →

Still have questions?

If you can’t find an answer, contact our Support team.