- Get Started
- Guides
- Integrations
- References
- API Reference
- Basic Payment
- Forex
- Authentication
- Card Account
- Apple Pay
- Virtual Account
- Bank Account
- Token Account
- Customer
- Billing Address
- Merchant Billing Address
- Shipping Address
- Merchant Shipping Address
- Merchant
- Corporate
- Recipient
- Marketplace & Cart
- Airline
- Lodging
- Passenger
- Tokenization
- Recurring Migration
- 3D Secure
- Custom Parameters
- Async Payments
- Webhook notifications
- Job
- Risk
- Point of Sale
- Response Parameters
- Card On File
- Chargeback
- Result Codes
- Payment Methods
- Transaction Flows
- Regression Testing
- Data Retention Policy
- API Reference
- Support
- Imprint
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
.
Parameter | Description | Examples |
---|---|---|
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.
|
allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"] |
allowedCardNetworks | Optional. One or more card networks you support also supported by the Google Pay API.:
|
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" |
emailRequired | Optional. Set to true to request an email address. | emailRequired: 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 |
|
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:
|
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 function | Description | Examples |
---|---|---|
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
|
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
|
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).