Braintree web examples using GPay

[imshuffling]

Using Google Pay, Looking useful examples to integrate handle shipping options.

Struggling to find examples of this in the braintree docs, can anyone point me in the right direction?

[hollabaq86]

👋 thanks for reaching out. This is a good callout, we don't have very clear documentation on how to set overrides other than transactionInfo for Google's PaymentDataRequest object. I'll make a note for us to take a look at building those code examples out or adding an example to our codepens.

Our reference guides mention that you can optionally override any of the Payment Data request parameters, so it could look something like (with some pseudocode and comments):

var paymentDataRequest = googlePaymentInstance.createPaymentDataRequest({
  merchantInfo: {
    merchantId: 'my-merchant-id-from-google'
  },
  transactionInfo: {
    currencyCode: 'USD',
    totalPriceStatus: 'FINAL',
    totalPrice: '100.00'
  },
  shippingAddressRequired: true,
  shippingAddressParameters: {
// parameters from this object https://developers.google.com/pay/api/web/reference/request-objects#ShippingAddressParameters
  },
  shippingOptionRequired: true,
  shippingOptionParameters: {
  // parameters from this object https://developers.google.com/pay/api/web/reference/request-objects#ShippingOptionParameters  
  },
});

// Update card payment methods to require billing address
var cardPaymentMethod = paymentDataRequest.allowedPaymentMethods;
cardPaymentMethod.parameters.billingAddressRequired = true;
cardPaymentMethod.parameters.billingAddressParameters = {
  format: 'FULL',
  phoneNumberRequired: true
};

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

paymentsClient.loadPaymentData(paymentDataRequest).then(function (response) {
  // handle response with googlePaymentInstance.parseResponse
  // (see below)
});

Hope this helps, if you have any additional questions integrating Google Pay, please contact Braintree Support

[imshuffling]

OK thanks @hollabaq86 :) this is most helpful.

If i wanted to fire a callback on if the shippingOptions event was changed, say the user selected another option and I wanted to update the price? How would that look. is that included in the paymentDataRequest?

[imshuffling]

Adjusting your example.

const paymentDataRequest = googlePaymentInstance.createPaymentDataRequest({
  transactionInfo: {
    currencyCode: chargeInLocalCurrencyAvailable ? currentCurrency : 'GBP',
    totalPriceStatus: 'FINAL',
    totalPrice: localPrice(totals.orderTotal, !chargeInLocalCurrencyAvailable).toString(),
  },
  // shippingAddressRequired: true,
  // emailRequired: true,
  shippingAddressRequired: true,
  shippingAddressParameters: {
    // parameters from this object https://developers.google.com/pay/api/web/reference/request-objects#ShippingAddressParameters
  },
  callbackIntents: ['SHIPPING_ADDRESS', 'SHIPPING_OPTION', 'PAYMENT_AUTHORIZATION'],
  paymentDataCallbacks: {
    onPaymentDataChanged: onPaymentDataChanged,
    onPaymentAuthorized: onPaymentAuthorized,
  },
  shippingOptionRequired: true,
  shippingOptionParameters: {
    // parameters from this object https://developers.google.com/pay/api/web/reference/request-objects#ShippingOptionParameters
    defaultSelectedOptionId: standardDelivery.id,
    shippingOptions: [
      {
        id: standardDelivery.id,
        label: `£${getShippingMethodAmount(standardDelivery, deliveryCharges)}: Standard Shipping`,
        description: `Standard Shipping ${formatDate(standardDelivery.deliveryDate)}`,
      },
      {
        id: nextDayDelivery.id,
        label: `£${getShippingMethodAmount(nextDayDelivery, deliveryCharges)}: Express Shipping`,
        description: `Express Shipping ${formatDate(nextDayDelivery.deliveryDate)}`,
      },
    ],
  },
});

Adding this part

  callbackIntents: ['SHIPPING_ADDRESS', 'SHIPPING_OPTION', 'PAYMENT_AUTHORIZATION'],
  paymentDataCallbacks: {
    onPaymentDataChanged: onPaymentDataChanged,
    onPaymentAuthorized: onPaymentAuthorized,
  },

not sure what to do next?