GooglePayment

GooglePayment

This class represents a Google Payment component produced by braintree-web/google-payment.create. Instances of this class have methods for initializing the Google Pay flow.

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.

Constructor

new GooglePayment(options)

Do not use this constructor directly. Use braintree-web.google-payment.create instead.

Parameters:
Name Type Description
options object

Google Payment create options.
Source:

Methods

createSupportedPaymentMethodsConfiguration(overridesopt) → {object}

Create an object to pass into the tokenize method to specify a custom configuration. If no overrides are provided, the default configuration will be used in tokenize.

Parameters:
Name Type Attributes Description
overrides object <optional>

The configuration overrides for the data property on the supported payment methods objects. This object will be merged with the default configuration object based on the settings in the Braintree Gateway. If no object is passed in, the default configuration object will be returned.
Source:
Examples

Getting the default configuration for a specified type 

var configuration = googlePaymentInstance.createSupportedPaymentMethodsConfiguration();

configuration.supportedMethods; // ['https://google.com/pay']

configuration.data.allowedCardNetworks; // ['AMEX', 'DISCOVER', 'MASTERCARD', 'VISA'] <- whatever the supported card networks for the merchant account are

Specifying overrides 

var configuration = googlePaymentInstance.createSupportedPaymentMethodsConfiguration({
  merchantName: 'My Custom Merchant Account Name',
  allowedCardNetworks: ['VISA']
});

configuration.data.merchantName; // 'My Custom Merchant Account Name'
configuration.data.allowedCardNetworks; // ['VISA']

on(event, handler) → {void}

Subscribes a handler function to a named event. event should be shippingAddressChange or shippingOptionChange. For convenience, you can also listen on shippingaddresschange or shippingoptionchange to match the event listeners in the Payment Request API documentation. Events will emit a shippingEventObject.

Parameters:
Name Type Description
event string

The name of the event to which you are subscribing.
handler function

A callback to handle the event.
Source:
Example

Listening to a Google Payment event, in this case 'shippingAddressChange' 

braintree.googlePayment.create({ ... }, function (createErr, googlePaymentInstance) {
  googlePaymentInstance.on('shippingAddressChange', function (event) {
    console.log(event.target.shippingAddress);
  });
});

teardown(callbackopt) → {Promise|void}

Cleanly remove anything set up by create.

Parameters:
Name Type Attributes Description
callback callback <optional>

Called on completion.
Source:
Examples
googlePaymentInstance.teardown();

With callback 

googlePaymentInstance.teardown(function () {
  // teardown is complete
});

tokenize(configuration, callbackopt) → {Promise|void}

Initializes a Google Pay flow and provides a nonce payload.

Parameters:
Name Type Attributes Description
configuration object

The payment details.

Properties
Name Type Attributes Description
details object

The payment details. For details on this object, see Google's PaymentRequest API documentation.
options object <optional>

Additional Google Pay options. For details on this object, see Google's PaymentRequest API documentation.
callback callback <optional>

The second argument, data, is a tokenizePayload. If no callback is provided, tokenize returns a function that resolves with a tokenizePayload.
Source:
Examples
googlePaymentInstance.tokenize({
  details: {
    total: {
      label: 'Price',
      amount: {
        currency: 'USD',
        value: '100.00'
      }
    }
  }
}).then(function (payload) {
  // send payload.nonce to server
}).catch(function (err) {
  if (err.code === 'PAYMENT_REQUEST_CANCELED') {
    // Google Pay payment request was canceled by user
  } else {
    // an error occurred while processing
  }
});

Include additional payment request options 

googlePaymentInstance.tokenize({
  details: {
    total: {
      label: 'Price',
      amount: {
        currency: 'USD',
        value: '100.00'
      }
    }
  },
  options: {
    requestPayerName: true,
    requestPayerPhone: true,
    requestPayerEmail: true
  }
}).then(function (payload) {
  // Send payload.nonce to your server

  // Examine additional info in the raw payment response
  console.log(payload.details.rawPaymentResponse);
});

Include custom supported payment method object 

googlePaymentInstance.tokenize({
  supportedPaymentMethods: googlePaymentInstance.createSupportedPaymentMethodsConfiguration({merchantName: 'Custom Name'}),
  details: {
    total: {
      label: 'Price',
      amount: {
        currency: 'USD',
        value: '100.00'
      }
    }
  },
  options: {
    requestPayerName: true,
    requestPayerPhone: true,
    requestPayerEmail: true
  }
}).then(function (payload) {
  // Send payload.nonce to your server

  // Examine additional info in the raw payment response
  console.log(payload.details.rawPaymentResponse);
});

Request Shipping Information 

var shippingOptions = [
  {
    id: 'economy',
    label: 'Economy Shipping (5-7 Days)',
    amount: {
      currency: 'USD',
      value: '0',
    },
  }, {
    id: 'express',
    label: 'Express Shipping (2-3 Days)',
    amount: {
      currency: 'USD',
      value: '5',
    },
  }, {
    id: 'next-day',
    label: 'Next Day Delivery',
    amount: {
      currency: 'USD',
      value: '12',
    },
  },
];
var paymentDetails = {
	 total: {
    label: 'Total',
    amount: {
      currency: 'USD',
      value: '10.00',
    }
  },
  shippingOptions: shippingOptions
};

googlePaymentInstance.on('shippingAddressChange', function (event) {
  // validate shipping address on event.target.shippingAddress
  // make changes to the paymentDetails or shippingOptions if necessary

  event.updateWith(paymentDetails)
});

googlePaymentInstance.on('shippingOptionChange', function (event) {
  shippingOptions.forEach(function (option) {
    option.selected = option.id === event.target.shippingOption;
  });

  event.updateWith(paymentDetails)
});

googlePaymentInstance.tokenize({
  details: paymentDetails,
  options: {
    requestShipping: true
  }
}).then(function (payload) {
  // send payload.nonce to your server
  // collect shipping information from payload
  console.log(payload.details.rawPaymentResponse.shippingAddress);
});