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 is only available for our Android v3, Android v2, iOS v4, and JavaScript v3 SDKs.

Contact us 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:

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

Set up your Masterpass button


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

First, create a Masterpass button in your 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" />

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

.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
var masterpassButton = document.getElementById('masterpass-button');

// Create a client.
}, 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);

  // Create a Masterpass component.
    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);


function masterpassAvailable(masterpassInstance) {

  // Display Masterpass button.

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
function masterpassAvailable(masterpassInstance) {

  // Display Masterpass button

  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);

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

Next Page: Server-side →