availability

Google Pay is available in beta with the latest version of our JavaScript v3 SDK and Android v2 SDK. The JavaScript SDK requires an Android device running Chrome v61 or higher.

On the web, Google Pay utilizes the Payment Request API. Our JavaScript v3 SDK handles the necessary Payment Request API calls for Google Pay through a streamlined Google Payment component, minimizing the client-side work on your end.

Get the SDK

See the client SDK setup guide for JavaScript v3. Google Pay requires version 3.24.1 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.28.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.28.0/js/google-payment.min.js"></script>

Initialization

Before initializing the Google Payment component, check that the browser is a version of Google Chrome that supports the Payment Request API using braintree.googlePayment.isSupported(). Then create your component:

JavaScript
Copy
Copied
if (braintree.googlePayment.isSupported()) {
  braintree.googlePayment.create({
    client: clientInstance
  }, function (err, googlePaymentInstance) {
    // set up Google Pay button
  });
}

Requesting a payment

Call tokenize when your Google Pay button is clicked to kick off the Payment Request flow. If completed successfully, the tokenize call will return a payload including the payment method nonce to be sent to your server. If unsuccessful, the call will return an error.

JavaScript
Copy
Copied
googlePaymentInstance.tokenize({
  details: {
    total: {
      label: 'Total',
      amount: {
        currency: 'USD',
        value: amount
      }
    }
  }
}, function (tokenizeErr, payload) {
  if (tokenizeErr) {
    // Handle errors from processing payment request
  }

  // Send payload.nonce to your server
});

Here's a full example of using Google Pay:

JavaScript
Copy
Copied
var button = document.querySelector('#google-pay-button');
var paymentDetails = {
  total: {
    label: 'Total',
    amount: {
      currency: 'USD',
      value: '100.00'
    }
  }
};

braintree.client.create({
  authorization: CLIENT_AUTHORIZATION
}, function (clientErr, clientInstance) {
  if (braintree.googlePayment.isSupported()) {
    braintree.googlePayment.create({
      client: clientInstance
    }, function (googlePaymentErr, googlePaymentInstance) {
      button.addEventListener('click', function (event) {
        googlePaymentInstance.tokenize({
          details: paymentDetails
        }, function (tokenizeErr, payload) {
          // Send payload.nonce to your server
        });
      });
    });
  }

  // Set up other 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: Server-side →

Still have questions?

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