Secure Remote Commerce

Client-Side Implementationanchor

availability

Masterpass, Amex Express Checkout, and Visa Checkout have been replaced with the latest unified checkout experience offered through Visa known as Secure Remote Commerce. If you were previously using Masterpass or Amex Express Checkout, you will need to integrate with SRC. If you were using Visa Checkout, you do not have to change your integration as SRC is an updated version of Visa Checkout. As such, you may see Visa Checkout referenced elsewhere in our documentation.

SRC is currently in a limited release to eligible merchants, and the API is subject to change. It is available in iOS v4+, JavaScript v3+, and Android v3.

Contact us to request access to the release.

Installationanchor

Braintreeanchor

To set up the Braintree JavaScript v3 SDK, see the installation guide.

Then, load the visa-checkout 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.87.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.87.0/js/visa-checkout.min.js"></script>

SRCanchor

SRC for Braintree requires the Visa Checkout SDK running in your app.

To set up the JavaScript Visa Checkout SDK, see Visa's documentation on adding Visa Checkout to your web page.

Environment assetsanchor

The Visa Checkout SDK has specific sandbox and production asset URLs. These are the asset URLs to use depending on the environment:

Sandbox assets:

  1. HTML
<!-- Visa Checkout SDK -->
<script src="https://sandbox-assets.secure.checkout.visa.com/checkout-widget/resources/js/integration/v1/sdk.js"></script>

<!-- Visa Checkout button -->
<img src="https://sandbox.secure.checkout.visa.com/wallet-services-web/xo/button.png" alt="Visa Checkout" class="v-button" role="button"/>

Production assets:

  1. HTML
<!-- Visa Checkout SDK -->
<script src="https://assets.secure.checkout.visa.com/checkout-widget/resources/js/integration/v1/sdk.js"></script>

<!-- Visa Checkout button -->
<img src="https://secure.checkout.visa.com/wallet-services-web/xo/button.png" alt="Visa Checkout" class="v-button" role="button"/>
important

You are not required to sign up with SRC. If you already have, do not initialize the SRC component with your own SRC credentials. These details will be handled internally by the Braintree SDK.

Initializationanchor

  1. Initialize a client using the appropriate authorization
  2. Create a Visa Checkout component
  3. Once you receive a callback indicating that Visa Checkout is ready, display the Visa Checkout button

For the Visa Checkout button, visit Adding Visa Checkout to Your Web Page and view details on adding the Visa Checkout button.

Here is an example:

  1. Callbacks
  2. Promises
// Create a client.
braintree.client.create({
  authorization: CLIENT_AUTHORIZATION
  // If using 3D Secure, you must use a client token.
}, 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 Visa Checkout component.
  braintree.visaCheckout.create({
    client: clientInstance
  }, function (visaCheckoutErr, visaCheckoutInstance) {

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

    visaCheckoutInitialized(visaCheckoutInstance);
  });
});

function visaCheckoutInitialized(visaCheckoutInstance) {
  // Visa Checkout is initialized.
}

Generating a client tokenanchor

If you choose to use a client token, you must generate it on the server and make it accessible to your client.

To use a merchant account ID other than your default, specify the MerchantAccountId when generating the client token. This merchant account ID must match the merchant account ID used to create the transaction.

Specifying payment detailsanchor

note

See Visa Checkout's user interface guidelines for more information on UI and branding requirements.

Visa Checkout uses the payment amount in an initial options object.

  1. Create an initial options object
  2. Under paymentRequest, set values such as currencyCode and subtotal
  3. Call the createInitOptions function to configure Visa Checkout to provide payment methods that we can tokenize
  4. Provide the initOptions object at the time of payment

Here is an example:

  1. JavaScript
function visaCheckoutInitialized(visaCheckoutInstance) {
  var baseInitOptions = {
    paymentRequest: {
      currencyCode: "USD",
      subtotal: "10.00"
    }
  };

  // Populate init options with options Braintree requires.
  var initOptions = visaCheckoutInstance.createInitOptions(baseInitOptions);

  // Ready to start Visa Checkout.
  // Call `V.init` with the `initOptions`.
}

For more information on the V.init initial options, see the Visa Developer Resources.

Tokenizinganchor

  1. To request a SRC payment from the customer, call V.init, passing in the initOptions, to launch a Visa Checkout UI
  2. An encrypted payment will be returned to the Braintree JS SDK, which will tokenize it
  3. Send the payload.nonce to your server, and create a transaction there

Here is an example:

  1. Callbacks
  2. Promises
function visaCheckoutInitialized(visaCheckoutInstance) {
  var baseInitOptions = {
    paymentRequest: {
      currencyCode: 'USD',
      subtotal: '10.00'
    }
  };

  var initOptions = visaCheckoutInstance.createInitOptions(baseInitOptions);
  V.init(initOptions);

  V.on('payment.success', function (payment) {
    visaCheckoutInstance.tokenize(payment, function (tokenizeErr, payload) {
      if (tokenizeErr) {
        console.error('Error during Visa Checkout tokenization', tokenizeErr);
      } else {
        // Send payload.nonce to your server, and create a transaction there.
        console.log('payload', payload);
      }
    });
  });
}

Full exampleanchor

This is a full example of the integration between Braintree and SRC. This example will allow you to get started, and provides a reference while integrating into your existing code base.

  1. Callbacks
  2. Promises
// 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 Visa Checkout component.
  braintree.visaCheckout.create({
    client: clientInstance
  }, function (visaCheckoutErr, visaCheckoutInstance) {

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

    visaCheckoutInitialized(visaCheckoutInstance);
  });
});

function visaCheckoutInitialized(visaCheckoutInstance) {
  var baseInitOptions = {
    paymentRequest: {
      currencyCode: 'USD',
      subtotal: '10.00'
    }
  };

  var initOptions = visaCheckoutInstance.createInitOptions(baseInitOptions);
  V.init(initOptions);

  V.on('payment.success', function (payment) {
    visaCheckoutInstance.tokenize(payment, function (tokenizeErr, payload) {
      if (tokenizeErr) {
        console.error('Error during Visa Checkout tokenization', tokenizeErr);
      } else {
        // Send payload.nonce to your server, and create a transaction there.
        console.log('payload', payload);
      }
    });
  });
}

Next Page: Server-side →