Google Pay

Google Pay

Introduction

Google Pay can be utilized as a checkout option on a payment page as well as a direct checkout option on the cart page. Loading the Google Pay button via COPY+PAY payment widget is just like loading any other brand, i.e. in step 2, GOOGLEPAY must be specified as a brand. Once the Google Pay button will be used by the consumer, the Google Pay payment sheet will appear on the device.

As soon as the consumer starts to interact with the Google Pay payment sheet, several events will be triggered. All events can be consumed by implementing the COPY+PAY API callback functions. All callback functions offered by the Google Pay are wrapped into the COPY+PAY API. No interaction with the Google Pay is required.

For steering the Google Pay payment sheet or for updating data on the Google Pay payment sheet after the consumer started to interact with it, several options are available.

Google Pay on the payment page

Loading the Google Pay button via COPY+PAY payment widget is just like loading any other brand, i.e. in step 2, GOOGLEPAY must be specified as a brand.

See an example below.

Google Pay Options

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.

References

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

ParameterDescriptionExamples
gatewayMerchantId Required. Your entity ID provided by us. gatewayMerchantId: "8a8294174e735d0c014e78beb6b9154b"
merchantId Required when going Live. A Google merchant identifier issued after your website is approved by Google. See Google Pay's Integration checklist for more information about the approval process and obtaining a Google merchant identifier. merchantId: "your_merchantId"
allowedAuthMethods Optional. 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.
The default value is ["PAN_ONLY"]. 		allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"]
allowedCardNetworks Optional. One or more card networks you support also supported by the Google Pay API.:
  • AMEX
  • DISCOVER
  • JCB
  • MASTERCARD
  • VISA
The default value contains all card networks. 		allowedCardNetworks: ["AMEX", "DISCOVER", "JCB", "MASTERCARD", "VISA"]
buttonColor Optional. Customize the button color. Possible values: "default" (A Google-selected default value, currently black but it may change over time), "black", "white". See also the Brand guidelines. buttonColor: "white"
buttonType Optional. Customize the button type. Possible values: "book", "buy" (default), "checkout", "donate", "order", "pay", "plain", "subscribe". Note: When buttonType is "buy", the payment button displays the card brand and the last four digits of the card number. buttonType: "checkout"
buttonSizeMode Optional. The button can has a static width and height, or can change the size to fit its container. Possible values: "static" (default), "fill". buttonSizeMode: "fill"
merchantName Optional. Merchant name encoded as UTF-8. Merchant name is rendered in the payment sheet. In Test environment, or if a merchant is not recognized, a "Pay Unverified Merchant" message is displayed in the payment sheet. merchantName: "Example Merchant"
callbackIntents

Optional. Specifies the following callback intents: OFFER, PAYMENT_AUTHORIZATION, SHIPPING_ADDRESS, SHIPPING_OPTION.

If not set, the default values contain PAYMENT_AUTHORIZATION (always), SHIPPING_ADDRESS (if onPaymentDataChanged is set), SHIPPING_OPTION (if onPaymentDataChanged and shippingOptionRequired are set)

Note: The PAYMENT_AUTHORIZATION object must be used when SHIPPING_ADDRESS or SHIPPING_OPTION are used. 		callbackIntents: ["OFFER"]
emailRequired Optional. Set to true to request an email address. emailRequired: true
shippingAddressRequired Optional. Set to true to request a full shipping address. The default value is true, if onPaymentDataChanged is set. shippingAddressRequired: true
shippingAddressParameters Optional. 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 Optional. The shippingOptionRequired when set to true, indicates that we are providing the shipping options to the user. When set to true, shippingOptionParameters must be passed in. shippingOptionRequired: true
shippingOptionParameters Optional. 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.00: Express shipping",
      description: "Express shipping delivered in 1 business day."
    }
    ]
  }
billingAddressRequired Optional. Set to true if you require a billing address. A billing address should only be requested if it's required to process the transaction. Additional data requests can increase friction in the checkout process and lead to a lower conversion rate. If set to true, the billing address is passed as part of the parameter passed by Google to onPaymentDataAuthorized(paymentData). Can be retrieved as paymentData.paymentMethodData.info.billingAddress billingAddressRequired: true
billingAddressParameters Optional. The expected fields returned if billingAddressRequired is set to true. Refer BillingAddressParameters billingAddressParameters : { "format": "FULL", phoneNumberRequired : true }
displayItems Optional. All of the available charges for the current payment request. This is only populated in the payment sheet if you use Authorize Payments or Dynamic Price Updates. This field is required if you implement support for Authorize Payments or Dynamic Price Updates. Refer DisplayItem displayItems: [
   {
      label: "Subtotal",
      type: "SUBTOTAL",
      price: "11.00"
   },
   {
      label: "Tax",
      type: "TAX",
      price: "1.00"
   },
   {
      label: "GST",
      type: "TAX",
      price: "1.00"
   }
]
submitOnPaymentAuthorized Optional. In case of using 3D Secure 2.0 the e-mail and the billing address of the customer are required to process the transaction. This parameter can be used to automatically submit customer information and billing address received from Google Pay as a part of the transaction. Possible values are:
  • customer: data from Google Pay is submitted to the following customer fields: customer.email, customer.phone, customer.givenName, customer.surname
  • billing: data from Google Pay is submitted to the following billing fields: billing.street1, billing.stree2, billing.city, billing.state, billing.postcode, billing.country
Note that this parameter must be used together with the parameters emailRequired and billingAddressRequired to request an email and a billing address from Google Pay. 		submitOnPaymentAuthorized: [ "customer", "billing" ]
onCancel Optional. This method helps the merchant to identify the event when the shopper closes the Google Pay payment window. Merchants can define a javascript function implementation to get notified of this shopper's action. When onCancel is not implemented by the merchant, the wpwlOptions.onError implementation by the merchant will be called. The wpwlOptions.onError will also be called when the status of the error thrown by Google Pay is DEVELOPER_ERROR onCancel : function onCancel(errorCode) {
      console.log('onCancel function called with
      errorCode ', errorCode);
}

Google Pay callback functions

The following table lists all available 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, returned by Google after a payer approves payment.
The method should return a Promise. Depending on its state, it should return
  • Resolved: An object that contains information about payment transaction results. For details, see PaymentAuthorizationResult
  • Rejected: An error object with intent "PAYMENT_AUTHORIZATION" and message to be rendered in the payment sheet. For details, see PaymentDataError
Note that the payment is submitted for processing only after this method returns successfully. 		onPaymentAuthorized:
Example 1.
function (paymentData) {
  Use or Save full shipping address(
  return new Promise(function(resolve, reject) {
    // Custom merchant logic
    resolve(
      { transactionState: 'SUCCESS' }
    );
  });
}
Example 2.
function (paymentData) {
  Use or Save full shipping address(
  return new Promise(function(resolve, reject) {
    // Custom merchant logic
    resolve(
      {
         transactionState: 'ERROR' ,
         error: {
            reason: "PAYMENT_DATA_INVALID",
            message: "Custom merchant message",
            intent: "PAYMENT_AUTHORIZATION"
         }
      }
    );
  });
}
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 method should return a Promise. Depending on its state, it should return
  • Resolved: An object that contains information about new transaction information, shipping options, and payment data errors. For details, see PaymentDataRequestUpdate.
  • Rejected: An error object with SHIPPING_ADDRESS or SHIPPING_OPTION intent and message to be rendered in the payment sheet. For details, see PaymentDataError.
 onPaymentDataChanged:
function (intermediatePaymentData) {
   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; }

Options and callback example

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