Google Pay

Client-Side Implementationanchor

availability

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

Choose an integration methodanchor

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 integrationanchor

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 integrationanchor

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 SDKanchor

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:

  1. HTML
<script src="https://pay.google.com/gp/p/js/pay.js"></script>
<script src="https://js.braintreegateway.com/web/3.111.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.111.0/js/google-payment.min.js"></script>

Initializationanchor

Create the Braintree Google Payment component and check whether the browser supports Google Pay.

  1. Callback
  2. Promise
var paymentsClient = new google.payments.api.PaymentsClient({
  environment: 'TEST' // Or 'PRODUCTION'
});

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) {
  paymentsClient.isReadyToPay({
    // see https://developers.google.com/pay/api/web/reference/object#IsReadyToPayRequest for all options
    apiVersion: 2,
    apiVersionMinor: 0,
    allowedPaymentMethods: googlePaymentInstance.createPaymentDataRequest().allowedPaymentMethods,
    existingPaymentMethodRequired: true
  }).then(function (isReadyToPay) {
    if (isReadyToPay.result) {
      // Set up Google Pay button
    }
  });
});

Add a Google Pay button to your page using the createButton API.

Requesting a paymentanchor

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.

  1. Callback
  2. Promise
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
    // result.type may be either "AndroidPayCard" or "PayPalAccount", and
    // paymentData will contain the billingAddress for card payments
  })
}).catch(function (err) {
  // Handle Google Pay errors
});

When accepting PayPal via Google Pay, the payment method nonce when customers select PayPal will be a PayPalAccount nonce type. Make sure to check which nonce type you've received if you display any payment data details from the nonce such as the card brand or PayPal email address.

Here's a full example of using Google Pay:

  1. Callback
  2. Promise
// 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
              // result.type may be either "AndroidPayCard" or "PayPalAccount", and
              // paymentData will contain the billingAddress for card payments
            });
          }).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.0anchor

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.

Support for PayPal via Google Pay is included in this release. For more details, check out the configuration guide.

Additions to initialization signatureanchor

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

Overridesanchor

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()anchor

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 →