availability

Google Pay in the JavaScript SDK is available across multiple browsers. See Google's documentation for a full list.

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 initiate the Google Pay flow. Our JavaScript v3 SDK creates a configuration object that can be passed into the loadPaymentData method on the Google client.

Get the SDK

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://pay.google.com/gp/p/js/pay.js"></script>
<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/google-payment.min.js"></script>

Initialization

Create the Braintree Google Payment component.

Callbacks Promises
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.

Callbacks Promises
Copy
Copied
var paymentDataRequest = googlePaymentInstance.createPaymentDataRequest({
  merchantId: 'your-merchant-id-from-google', // Omit this line in sandbox; insert your Google merchant ID in production
  transactionInfo: {
    currencyCode: 'USD',
    totalPriceStatus: 'FINAL',
    totalPrice: '100.00' // Your amount
  },
  cardRequirements: {
    // We recommend collecting billing address information, at minimum
    // billing postal code, and passing that billing postal code with all
    // Google Pay transactions as a best practice.
    billingAddressRequired: true
  }
});
var paymentsClient = new google.payments.api.PaymentsClient({
  environment: 'TEST' // Or 'PRODUCTION'
}));

paymentsClient.loadPaymentData(paymentDataRequest).then(function(paymentData) {
  googlePaymentInstance.parseResponse(paymentData, function (err, result) {
    if (err) {
      // Handle parsing error
    }
    // Send result.nonce to your server
  })
}).catch(function (err) {
  // Handle Google Pay errors
});

Here's a full example of using Google Pay:

Callbacks Promises
Copy
Copied
// Make sure to have https://pay.google.com/gp/p/js/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', // Omit this line in sandbox; insert your Google merchant ID in production
            transactionInfo: {
              currencyCode: 'USD',
              totalPriceStatus: 'FINAL',
              totalPrice: '100.00' // Your amount
            },
            cardRequirements: {
              // We recommend collecting billing address information, at minimum
              // billing postal code, and passing that billing postal code with all
              // Google Pay transactions as a best practice
              billingAddressRequired: true
            }
          });

          paymentsClient.loadPaymentData(paymentDataRequest).then(function(paymentData) {
            googlePaymentInstance.parseResponse(paymentData, function (err, result) {
              if (err) {
                // Handle parsing error
              }

              // 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