availability

Google Pay in the JavaScript SDK requires an Android device running Chrome v61 or higher.

Choose an integration method

You can accept Google Pay with either our Drop-in UI or a custom integration.

note

Your website must be served over HTTPS (or localhost if testing in sandbox) for the Google Pay option to appear.

Drop-in integration

Our Drop-in UI is the fastest way to set up your client-side integration.

For full details, see Drop-in Setup and Integration.

Custom integration

On the web, Google Pay utilizes a JavaScript file provided by Google to faciliate the tokenization. Our JavaScript v3 SDK creates a configuration object that can be passed into the loadPaymentData method on the Google client.

Get the SDK

important

Versions 3.24.1–3.28.0 use a deprecated Google Pay integration. The instructions for integrating with those versions can be found in the Google Payment reference documentation.

See the client SDK setup guide for JavaScript v3. Google Pay requires version 3.29.0 or higher.

If you are using script tags to load files, be sure to include:

HTML
Copy
Copied
<script src="https://js.braintreegateway.com/web/3.32.1/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.32.1/js/google-payment.min.js"></script>

Initialization

Load the Google's pay.js JavaScript file on your page (along with the Braintree JavaScript files) and create the Braintree Google Payment component.

HTML
Copy
Copied
<script src="https://payments.developers.google.com/js/apis/pay.js"></script>
JavaScript
Copy
Copied
braintree.googlePayment.create({
  client: clientInstance // From braintree.client.create, see below for full example
}, function (err, googlePaymentInstance) {
  // Set up Google Pay button
});

You will need a button element on your page styled according to Google's brand guidelines.

Requesting a payment

Call loadPaymentData from the Google PaymentsClient instance with the configuration generated from the createPaymentDataRequest method in the Braintree JS SDK component. Use the parseResponse method to retrieve the payment method nonce to be sent to your server.

JavaScript
Copy
Copied
var paymentDataRequest = googlePaymentInstance.createPaymentDataRequest({
  merchantId: 'your-merchant-id-from-google', // Only required for production environment
  transactionInfo: {
    currencyCode: 'USD',
    totalPriceStatus: 'FINAL',
    totalPrice: '100.00' // Your amount
  }
});
var paymentsClient = new google.payments.api.PaymentsClient({
  environment: 'TEST' // Or 'PRODUCTION'
}));

paymentsClient.loadPaymentData(paymentDataRequest).then(function(paymentData) {
  return googlePaymentInstance.parseResponse(paymentData);
}).then(function (result) {
  // Send result.nonce to your server
}).catch(function (err) {
  // Handle errors
});

Here's a full example of using Google Pay:

JavaScript
Copy
Copied
// Make sure to have https://payments.developers.google.com/js/apis/pay.js loaded on your page

// You will need a button element on your page styled according to Google's brand guidelines
// https://developers.google.com/pay/api/brand-guidelines
var button = document.querySelector('#google-pay-button');
var paymentsClient = new google.payments.api.PaymentsClient({
  environment: 'TEST' // Or 'PRODUCTION'
});

braintree.client.create({
  authorization: CLIENT_AUTHORIZATION
}, function (clientErr, clientInstance) {
  braintree.googlePayment.create({
    client: clientInstance
  }, function (googlePaymentErr, googlePaymentInstance) {
    paymentsClient.isReadyToPay({
      allowedPaymentMethods: googlePaymentInstance.createPaymentDataRequest().allowedPaymentMethods
    }).then(function(response) {
      if (response.result) {
        button.addEventListener('click', function (event) {
          event.preventDefault();

          var paymentDataRequest = googlePaymentInstance.createPaymentDataRequest({
            merchantId: 'your-merchant-id-from-google',
            transactionInfo: {
              currencyCode: 'USD',
              totalPriceStatus: 'FINAL',
              totalPrice: '100.00' // Your amount
            }
          });

          paymentsClient.loadPaymentData(paymentDataRequest).then(function(paymentData) {
            return googlePaymentInstance.parseResponse(paymentData);
          }).then(function (result) {
            // Send result.nonce to your server
          }).catch(function (err) {
            // Handle errors
          });
        });
      }
    }).catch(function (err) {
      // Handle errors
    });
  });

  // Set up other Braintree components
});
important

In sandbox, you may see a message that says "Unrecognized app. Please make sure you trust this app before proceeding." This message will not appear when running in production.

See also

Next Page: Server-side →

Still have questions?

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