Google Pay

Google Pay

Introduction

Loading the Google Pay button via COPYandPAY payment widget requires two actions:

  • Just like any other brand, GOOGLEPAY must be specified as a brand in step 2.
  • Specify your merchant ID in wpwlOptions.googlePay.gatewayMerchantId (Click js tab to see the code example). See the Options section for more information.

Options

Google Pay provides a list of features that can be used via the API Reference.

As with other options, you can modify the Google Pay behavior by using wpwlOptions.googlePay.

The full reference of all available options is shown below in this page.

To quick start your integration, we recommend use our example code below as a guidance (Click js tab to see the code example).

References

The following table lists all available Google Pay options that you can use with wpwlOptions.googlePay.

ParameterDescriptionExamples
gatewayMerchantId Your merchant ID provided by us. gatewayMerchantId: "8a8294174b7ecb28014b9699220015ca"
allowedAuthMethods Fields supported to authenticate a card transaction.
  • PAN_ONLY: this authentication method is associated with payment cards stored on file with the user's Google Account. Returned payment data includes personal account number (PAN) with expiration month and year.
  • CRYPTOGRAM_3DS: This authentication method is associated with cards stored as Android device tokens. Returned payment data includes a 3-D Secure (3DS) cryptogram generated on the device.
 allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"]
allowedCardNetworks One or more card networks you support also supported by the Google Pay API.:
  • AMEX
  • DISCOVER
  • JCB
  • MASTERCARD
  • VISA
 allowedCardNetworks: ["AMEX", "DISCOVER", "JCB", "MASTERCARD", "VISA"]
merchantId A Google merchant identifier issued after your website is approved by Google. Required when going Live. See Google Pay's Integration checklist for more information about the approval process and obtaining a Google merchant identifier. merchantId: "your_merchantId"
merchantName A user-visible merchant name encoded as UTF-8. This name may be shown to the user in the Google Pay payment sheet to describe the merchant requesting payment data. merchantName: "Example Merchant"
callbackIntents An optional parameter. If the support for GooglePay callback functions is needed, then this attribute is to be considered. This is an optional attribute and is an array which can contain any or all of the below values.
  • PAYMENT_AUTHORIZATION
  • SHIPPING_ADDRESS
  • SHIPPING_OPTION
If callbackIntents is not sent, then ACI will calculate the same based on other attributes as listed below -
  • onPaymentAuthorized - If onPaymentAuthorized is passed in, then ACI will add PAYMENT_AUTHORIZATION to the callbackIntents array.
  • onPaymentDataChanged - If onPaymentDataChanged is passed or if shippingAddressRequired is true, then ACI will add SHIPPING_ADDRESS to the callbackIntents array.
  • shippingOptionRequired - If shippingOptionRequired is passed in as true, then ACI will add SHIPPING_OPTION to the callbackIntents array.
If callbackIntents is sent, then based on the values passed in, the appropriate data should also be passed in, as listed below -
  • If callbackIntents contains PAYMENT_AUTHORIZATION, then an implementation of onPaymentAuthorized must also be passed in.
  • If callbackIntents contains SHIPPING_ADDRESS, then an implementation of onPaymentDataChanged must also be passed in.
  • If callbackIntents contains SHIPPING_OPTION, then shippingOptionParameters must also be passed in.
  • callbackIntents : ["PAYMENT_AUTHORIZATION", "SHIPPING_ADDRESS", "SHIPPING_OPTION"]
  • callbackIntents : ["PAYMENT_AUTHORIZATION", "SHIPPING_ADDRESS"]
  • callbackIntents : ["PAYMENT_AUTHORIZATION"]
shippingAddressRequired An optional parameter. This indicates if the Shipping Address is allowed to be displayed/selected in the Google Pay payment sheet. This is an optional parameter. Set to true to request a full shipping address.
Impact on onPaymentDataChanged()
  • If shippingAddressRequired is set to true, then the callback function onPaymentDataChanged() must be implemented.
  • If shippingAddressRequired is set to false or not passed, and the callback function onPaymentDataChanged() is implemented, ACI will set this value automatically to true, in the request to Google Pay.
Impact on callbackIntents
  • If shippingAddressRequired is set to true, and callbackIntents is passed, then callbackIntents array should contain the 'SHIPPING_ADDRESS' element.
  • If shippingAddressRequired is set to false or not passed, and the callback function onPaymentDataChanged() is implemented, ACI will set this value automatically to true, in the request to Google Pay.
Also, if this value is set to true and callbackIntents is passed, then callbackIntents array should contain the 'SHIPPING_ADDRESS' element. 		shippingAddressRequired: true
shippingAddressParameters An optional parameter. If shippingAddressRequired is set to true or if onPaymentDataChanged is passed in, shippingAddressParameters is used to specify shipping address restrictions. The user's shipping address will then abide to these specified restrictions. Refer ShippingAddressParameters
  • shippingAddressParameters: { allowedCountryCodes: ["US"], phoneNumberRequired: true } - This will restrict the allowed country to be US only and will display/mandate the phone number.
  • shippingAddressParameters: { allowedCountryCodes: ["US", "IN"], phoneNumberRequired: false } - This will restrict the allowed country to be US or India only and the phone number is not displayed/mandated.
shippingOptionRequired An optional parameter. The shippingOptionRequired when set to true, indicates that we are providing the shipping options to the user. When set to true, callbackIntents array is to contain SHIPPING_OPTION as an element and shippingOptionParameters must be passed in. shippingOptionRequired: true
shippingOptionParameters An optional parameter. shippingOptionParameters is set when shippingOptionRequired when set to true. This element basically defines the shipping options that are to be presented to the user. Refer ShippingOptionParameters shippingOptionParameters : {
  defaultSelectedOptionId: "shipping-002",
  shippingOptions: [
    {
      id: "shipping-001",
      label: "Free: Standard shipping",
      description: "Free Shipping delivered in 5 business days."
    },
    {
      id: "shipping-002",
      label: "$1.99: Standard shipping",
      description: "Standard shipping delivered in 3 business days."
    },
    {
      id: "shipping-003",
      label: "$10: Express shipping",
      description: "Express shipping delivered in 1 business day."
    }
    ]
  }

Google Pay callback functions

Callback Intents

Google Pay provides us with two call back functions namely onPaymentAuthorized and onPaymentDataChanged. To use these call back functions, we need to follow the below steps :

  • Provide implementations of onPaymentAuthorized, onPaymentDataChanged based on the need. Either OR both of the functions can be implemented and passed via wpwlOption.googlePay
  • You can also set the wpwlOption.googlePay.callbackIntents parameter, this is optional. This is an array consisting of values based on the need of call backs.
    • If passed in, the value of this array can be like ["PAYMENT_AUTHORIZATION", "SHIPPING_ADDRESS", "SHIPPING_OPTION"] or ["PAYMENT_AUTHORIZATION", "SHIPPING_ADDRESS"] or ["PAYMENT_AUTHORIZATION"] based on the needs.
    • If not passed in, ACI will auto discover and set this value based on the below -
      If wpwlOption.googlePay.onPaymentAuthorized is implemented, then ACI will include 'PAYMENT_AUTHORIZATION' as an element in the array.
      If wpwlOption.googlePay.onPaymentDataChanged is implemented OR wpwlOption.googlePay.shippingAddressRequired is set to true, then ACI will include 'SHIPPING_ADDRESS' as an element in the array
      If wpwlOption.googlePay.shippingOptionRequired is set to true, then ACI will include 'SHIPPING_OPTION' as an element in the array

The following table details the onPaymentAuthorized and onPaymentDataChanged Google Pay callback functions that you can use with wpwlOptions.googlePay.

Callback functionDescriptionExamples
onPaymentAuthorized This method is called when a payment is authorized in the payment sheet. The method parameter, PaymentData, is an object that contains the requested shopper data that's returned by Google after a payer approves payment. PaymentData contains:
  • apiVersion - Major API version. The value in the response matches the value provided in googlePay.apiVersion
  • apiVersionMinor - Minor API version. The value in the response matches the value provided in googlePay.apiVersionMinor.
  • paymentMethodData - Data about the selected payment method. Refer PaymentMethodData.
  • email - Email Address
  • shippingAddress - The shipping address. Refer Address.
The implemented handler should return an Promise which can be in a Resolved or Rejected status:
  • If Resolved, should return object that contains information about payment transaction results. Refer PaymentAuthorizationResult
  • If Rejected, should return an error object with an error intent and message to be rendered in the payment sheet. Refer PaymentDataError
 onPaymentAuthorized:
function onPaymentAuthorized(paymentData) {
  Use or Save full shipping address(
  return new Promise(function(resolve, reject) {
    resolve(
      { transactionState: 'SUCCESS' }
    );
  });
}
onPaymentDataChanged This method handles payment data changes in the payment sheet such as shipping address and shipping options. The method parameter, is an object that contains the selected address and shipping option in the payment sheet. For details, see IntermediatePaymentData. The IntermediatePaymentData object contains :
  • callbackTrigger - The value of this parameter can be any of the below and specifies the type of event being passed in.
    • INITIALIZE
    • SHIPPING_ADDRESS
    • SHIPPING_OPTION
    For example, callbackTrigger has a value of SHIPPING_OPTION, when the user selects any one of the presented shipping options.
  • IntermediateAddress - This is an object which represents the key elements of an address and can be used to calculate, say shipping cost. For details, refer IntermediateAddress.
  • SelectionOptionData - This is an object that represents the shipping option selected in the payment sheet. For details, refer SelectionOptionData.
The implemented handler should return an Promise which can be in a Resolved or Rejected status:
  • If Resolved, An object that contains information about new transaction information, shipping options, and payment data errors. For details, see PaymentDataRequestUpdate.
  • If Rejected, An error object with an error intent and message to be rendered in the payment sheet. For details, see PaymentDataError.
 onPaymentDataChanged:
onPaymentDataChanged : function onPaymentDataChanged(intermediatePaymentData) {
   console.log('Google Pay User induced function and returning');
   var returnMe = new Promise(function(resolve, reject) {
   var paymentDataRequestUpdate = {};
   var shippingOptionData = intermediatePaymentData.shippingOptionData;
   if (intermediatePaymentData.callbackTrigger == "SHIPPING_OPTION") {
      console.log('SHIPPING_OPTION selected with shipping option id selected as ', shippingOptionData.id)
      paymentDataRequestUpdate = {
         newShippingOptionParameters: {
            defaultSelectedOptionId: shippingOptionData.id,
            shippingOptions: [
               {
                  id: "shipping-001",
                  label: "Free: Standard shipping",
                  description: "Free Shipping delivered in 5 business days."
               },
               {
                  id: "shipping-002",
                  label: "$1.99: Standard shipping",
                  description: "Standard shipping delivered in 3 business days."
               },
               {
                  id: "shipping-003",
                  label: "$10.00: Express shipping",
                  description: "Express shipping delivered in 1 business day."
               }
            ]
         },
         newTransactionInfo: {
            currencyCode: "INR",
            totalPriceStatus: "FINAL",
            transactionId: "MyTranId",
            totalPrice: "12.00",
            totalPriceLabel: "Total",
            checkoutOption: "COMPLETE_IMMEDIATE_PURCHASE",
            displayItems: [
               {
                  label: "Subtotal",
                  type: "SUBTOTAL",
                  price: "5.00",
               },
               {
                  label: "Tax",
                  type: "TAX",
                  price: "1.00",
               }
            ]
         }
      };
   }
   resolve(paymentDataRequestUpdate);
   });
   return returnMe; }