braintree-web/google-payment

A component to integrate with Google Pay. The majority of the integration uses Google's pay.js JavaScript file. The Braintree component generates the configuration object necessary for Google Pay to initiate the Payment Request and parse the returned data to retrieve the payment method nonce which is used to process the transaction on the server.

Note: This component is currently in beta and the API may include breaking changes when upgrading. Please review the Changelog for upgrade steps whenever you upgrade the version of braintree-web.

Source:

Members

(static) VERSION :string

The current version of the SDK, i.e. 3.30.0.

Source:

Methods

(static) create(options, callbackopt) → {Promise|void}

Parameters:
Name Type Attributes Description
options object

Creation options:

Properties
Name Type Description
client Client

A Client instance.
callback callback <optional>

The second argument, data, is the GooglePayment instance. If no callback is provided, create returns a promise that resolves with the GooglePayment instance.
Source:
Examples

Simple Example 

// include https://payments.developers.google.com/js/apis/pay.js in a script tag
// on your page to load the `google.api.PaymentsClient` global object.

var paymentButton = document.querySelector('#google-pay-button');
var paymentsClient = new google.payments.api.PaymentsClient({
  environment: 'TEST' // or 'PRODUCTION'
});

braintree.client.create({
  authorization: 'tokenization-key-or-client-token'
}).then(function (clientInstance) {
  return braintree.googlePayment.create({
    client: clientInstance
  });
}).then(function (googlePaymentInstance) {
  paymentButton.addEventListener('click', function (event) {
    var paymentDataRequest;

    event.preventDefault();

    paymentDataRequest = googlePaymentInstance.createPaymentDataRequest({
      merchantId: 'your-merchant-id-from-google',
      transactionInfo: {
        currencyCode: 'USD',
        totalPriceStatus: 'FINAL',
        totalPrice: '100.00'
      }
    });

    paymentsClient.loadPaymentData(paymentDataRequest).then(function (paymentData) {
      return googlePaymentInstance.parseResponse(paymentData);
    }).then(function (result) {
      // send result.nonce to your server
    }).catch(function (err) {
      // handle err
    });
  });
});

Check Browser and Customer Compatibility 

var paymentsClient = new google.payments.api.PaymentsClient({
  environment: 'TEST' // or 'PRODUCTION'
});

function setupGooglePayButton(googlePaymentInstance) {
  var button = document.createElement('button');

  button.id = 'google-pay';
  button.appendChild(document.createTextNode('Google Pay'));
  button.addEventListener('click', function (event) {
    var paymentRequestData;

    event.preventDefault();

    paymentDataRequest = googlePaymentInstance.createPaymentDataRequest({
      merchantId: 'your-merchant-id-from-google',
      transactionInfo: {
        currencyCode: 'USD',
        totalPriceStatus: 'FINAL',
        totalPrice: '100.00' // your amount
      }
    });

    paymentsClient.loadPaymentData(paymentDataRequest).then(function (paymentData) {
      return googlePaymentInstance.parseResponse(paymentData);
      }).then(function (result) {
      // send result.nonce to your server
    }).catch(function (err) {
      // handle errors
    });
  });

  document.getElementById('container').appendChild(button);
}

braintree.client.create({
  authorization: 'tokenization-key-or-client-token'
}).then(function (clientInstance) {
  return braintree.googlePayment.create({
    client: clientInstance
  });
}).then(function (googlePaymentInstance) {
  return paymentsClient.isReadyToPay({
    allowedPaymentMethods: googlePaymentInstance.createPaymentDataRequest().allowedPaymentMethods
  });
}).then(function (response) {
  if (response.result) {
    setupGooglePayButton(googlePaymentInstance);
  }
}).catch(function (err) {
  // handle setup errors
});