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.

Source:

Members

(static) VERSION :string

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

Source:

Methods

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

Parameters:
Name Type Attributes Description
options object

Creation options:

Properties
Name Type Attributes Description
client Client <optional>

A Client instance.
authorization string <optional>

A tokenizationKey or clientToken. Can be used in place of options.client.
googlePayVersion Number <optional>

The version of the Google Pay API to use. Value of 2 is required to accept parameters documented by Google. Omit this parameter to use the deprecated Google Pay Version 1.
googleMerchantId String <optional>

A Google merchant identifier issued after your website is approved by Google. Required when PaymentsClient is initialized with an environment property of PRODUCTION, but may be omitted in TEST environment.
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://pay.google.com/gp/p/js/pay.js in a script tag
// on your page to load the `google.payments.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,
     googlePayVersion: 2,
     googleMerchantId: 'your-merchant-id-from-google'
  });
}).then(function (googlePaymentInstance) {
  paymentButton.addEventListener('click', function (event) {
    var paymentDataRequest;

    event.preventDefault();

    paymentDataRequest = googlePaymentInstance.createPaymentDataRequest({
      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({
      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,
    googlePayVersion: 2,
    googleMerchantId: 'your-merchant-id-from-google'
  });
}).then(function (googlePaymentInstance) {

  return 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 (response) {
  if (response.result) {
    setupGooglePayButton(googlePaymentInstance);
  }
}).catch(function (err) {
  // handle setup errors
});