Payment Method Types/
Google Pay/
Client-side

Client-Side Implementation

Accept Google Pay in a web checkout using a custom integration with the Braintree JavaScript SDK v4.

On the web, Google Pay utilizes a JavaScript file provided by Google to initiate the Google Pay flow. The Braintree JavaScript v4 SDK creates a configuration object that you pass into the loadPaymentData method on the Google client.

PrerequisitesAnchorIcon

Before you start, make sure you have the following:

  • A Braintree client instance created with braintree.client.create and a valid client authorization.
  • The Google Pay JavaScript file (pay.js) and the Braintree client and google-payment JavaScript files loaded on the page.
  • A button element on the page to use as the Google Pay button.

Get the SDKAnchorIcon

See the client SDK setup guide for JavaScript v4. For details on what's different, see New in 4.0.0 below.

If you are using script tags to load files, include the following:

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

Initialize the Google Payment componentAnchorIcon

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

  1. Async/Await
async function setupGooglePay() {
  try {
    const googlePaymentInstance = await braintree.googlePayment.create({
      client: clientInstance, // From braintree.client.create, see below for full example
      googleMerchantId: 'merchant-id-from-google' // Optional in sandbox; if set in sandbox, this value must be a valid production Google Merchant ID
    });
    const isReadyToPay = await 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
    });
    if (isReadyToPay.result) {
      // Set up Google Pay button
    }
  } catch (err) {
    // Handle error
  }
}

A successful check returns isReadyToPay.result: true, which indicates that the browser and device support Google Pay.

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

Request a paymentAnchorIcon

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

  1. Async/Await
async function requestPayment() {
  const 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
  const cardPaymentMethod = paymentDataRequest.allowedPaymentMethods[0];
  cardPaymentMethod.parameters.billingAddressRequired = true;
  cardPaymentMethod.parameters.billingAddressParameters = {
    format: 'FULL',
    phoneNumberRequired: true
  };

  try {
    const paymentData = await paymentsClient.loadPaymentData(paymentDataRequest);
    const result = await googlePaymentInstance.parseResponse(paymentData);
    // Send result.nonce to your server
    // paymentData will contain the billingAddress for card payments
  } catch (err) {
    // Handle errors
  }
}

A successful response includes a nonce in result.nonce that you send to your server to complete the transaction.

Here's a full example of using Google Pay:

  1. Async/Await
// 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
const button = document.querySelector('#google-pay-button');
const paymentsClient = new google.payments.api.PaymentsClient({
  environment: 'TEST' // Or 'PRODUCTION'
});

async function setupGooglePay() {
  try {
    const clientInstance = await braintree.client.create({
      authorization: CLIENT-AUTHORIZATION
    });
    const googlePaymentInstance = await braintree.googlePayment.create({
      client: clientInstance,
      googleMerchantId: 'merchant-id-from-google' // Optional in sandbox; if set in sandbox, this value must be a valid production Google Merchant ID
    });
    const response = await paymentsClient.isReadyToPay({
      // see https://developers.google.com/pay/api/web/reference/object#IsReadyToPayRequest
      apiVersion: 2,
      apiVersionMinor: 0,
      allowedPaymentMethods: googlePaymentInstance.createPaymentDataRequest().allowedPaymentMethods,
      existingPaymentMethodRequired: true // Optional
    });
    if (response.result) {
      button.addEventListener('click', async function (event) {
        event.preventDefault();

        const 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
        const cardPaymentMethod = paymentDataRequest.allowedPaymentMethods[0];
        cardPaymentMethod.parameters.billingAddressRequired = true;
        cardPaymentMethod.parameters.billingAddressParameters = {
          format: 'FULL',
          phoneNumberRequired: true
        };

        try {
          const paymentData = await paymentsClient.loadPaymentData(paymentDataRequest);
          const result = await googlePaymentInstance.parseResponse(paymentData);
          // Send result.nonce to your server
          // result.type may be either "AndroidPayCard" or "PayPalAccount", and
          // paymentData will contain the billingAddress for card payments
        } catch (err) {
          // Handle errors
        }
      });
    }
  } catch (err) {
    // Handle creation errors
  }
}

When the customer clicks the Google Pay button and completes the Google Pay sheet, the browser returns a payment nonce in result.nonce that you send to your server.

New in 4.0.0AnchorIcon

Braintree's JavaScript SDK v4.0.0 dropped support for Google Pay v1. See the Google Pay migration guide for more details.

See also


Next Page: Server-side →