availability

Visa Checkout is currently in a limited release to eligible merchants, and the API is subject to change. Contact us at visacheckout-requests@braintreepayments.com 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.26.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.26.0/js/visa-checkout.min.js"></script>

Visa Checkout

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

important

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

Initialization

  1. Initialize a client using either a tokenization key or a client token from your server
  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:

JavaScript
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) {
  // Visa Checkout is initialized.
}

Specifying payment details and launching Visa Checkout

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:

JavaScript
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.

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

Still have questions?

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