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 and any assets must be served over HTTPS (or localhost if testing in sandbox) for the Google Pay option to be available.

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. While Google Pay has been supported since version 3.29.0, the latest version of the integration shown here requires version 3.40.0 or higher. For details on what's different, see New in 3.40.0 below.

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.45.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.45.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
  googlePayVersion: 2,
  googleMerchantId: 'merchant-id-from-google' // Optional in sandbox; if set in sandbox, this value must be a valid production Google Merchant ID
}, 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({
  transactionInfo: {
    currencyCode: 'USD',
    totalPriceStatus: 'FINAL',
    totalPrice: '100.00' // Your amount
  }
});

// We recommend collecting billing address information, at minimum
// billing postal code, and passing that billing postal code with all
// Google Pay card transactions as a best practice.
// See all available options at https://developers.google.com/pay/api/web/reference/object
var cardPaymentMethod = paymentDataRequest.allowedPaymentMethods[0];
cardPaymentMethod.parameters.billingAddressRequired = true;
cardPaymentMethod.parameters.billingAddressParameters = {
  format: 'FULL',
  phoneNumberRequired: 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/web/guides/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,
    googlePayVersion: 2,
    googleMerchantId: 'merchant-id-from-google' // Optional in sandbox; if set in sandbox, this value must be a valid production Google Merchant ID
  }, function (googlePaymentErr, googlePaymentInstance) {
    paymentsClient.isReadyToPay({
      // see https://developers.google.com/pay/api/web/reference/object#IsReadyToPayRequest
      apiVersion: 2,
      apiVersionMinor: 0,
      allowedPaymentMethods: googlePaymentInstance.createPaymentDataRequest().allowedPaymentMethods,
      existingPaymentMethodRequired: true // Optional
    }).then(function(response) {
      if (response.result) {
        button.addEventListener('click', function (event) {
          event.preventDefault();

          var paymentDataRequest = googlePaymentInstance.createPaymentDataRequest({
            transactionInfo: {
              currencyCode: 'USD',
              totalPriceStatus: 'FINAL',
              totalPrice: '100.00' // Your amount
            }
          });

          // We recommend collecting billing address information, at minimum
          // billing postal code, and passing that billing postal code with all
          // Google Pay card transactions as a best practice.
          // See all available options at https://developers.google.com/pay/api/web/reference/object
          var cardPaymentMethod = paymentDataRequest.allowedPaymentMethods[0];
          cardPaymentMethod.parameters.billingAddressRequired = true;
          cardPaymentMethod.parameters.billingAddressParameters = {
            format: 'FULL',
            phoneNumberRequired: 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.

New in 3.40.0

Braintree's JavaScript SDK v3.40.0 added support for Google Pay v2. The code snippets above show a slightly altered Google Pay integration from what was recommended for Google Pay v1, and the changes are described in more detail below.

While existing integrations with Google Pay v1 work, keep in mind that Google has removed their Google Pay v1 documentation.

Additions to initialization signature

During initialization, you will be required to supply new options to braintree.googlePayment.create():

  • googlePayVersion as 2 in all environments
  • your Google-provided googleMerchantId in production

Overrides

Overrides are still available but require migration according to Google's migration guide. With the deep nesting of Google Pay v2 configuration objects, however, we recommend that merchants edit the paymentDataRequest objects directly, as we show in the requesting a payment example.

isReadyToPay()

Google Pay's PaymentsClient.isReadyToPay() method is present in both versions of Google Pay; however, v2 requests require additional parameters apiVersion and apiVersionMinor in addition to v1's allowedPaymentMethods. See Google's isReadyToPayRequest documentation for more details.

See also

Next Page: Server-side →

Still have questions?

If you can’t find an answer, contact us