availability

Visa Checkout is currently in a limited release to eligible merchants, and the API is subject to change. Contact our Accounts team 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
Copy
Copied
<script src="https://js.braintreegateway.com/web/3.39.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.39.0/js/visa-checkout.min.js"></script>

Visa Checkout

Visa Checkout 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.

important

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

Initialization

  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:

Callbacks Promises
Copy
Copied
// 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 merchant_account_id 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.

  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:

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

  1. To request a Visa Checkout 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:

Callbacks Promises
Copy
Copied
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 Visa Checkout. This example will allow you to get started, and provides a reference while integrating into your existing code base.

Callbacks Promises
Copy
Copied
// 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 →

Still have questions?

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