Secure Remote Commerce

Client-Side Implementation

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+ and JavaScript v3+.

Contact us to request access to the release.

Installation

Braintree

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:

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>

SRC

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 assets

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

Sandbox assets:

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:

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.

Initialization

Initialize a client using the appropriate authorization
- If using 3D Secure with Visa Checkout, you must use a client token from your server
- Otherwise, you can choose between a tokenization key or a client token
Create a Visa Checkout component
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:

Callbacks

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 token

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 details

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.

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

Here is an example:

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.

Tokenizing

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

Here is an example:

Callbacks

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 example

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.

Callbacks

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