Introduction

Google Pay works as a checkout option on the payment page or directly on the cart page. Loading the Google Pay button via the COPYandPAY payment widget follows the same process as loading any other brand—specify GOOGLEPAY as a brand in step 2. When the consumer clicks the Google Pay button, the Google Pay payment sheet appears on their device.

As the consumer interacts with the Google Pay payment sheet, multiple events occur. Handle these events by implementing COPYandPAY API callback functions. The COPYandPAY API wraps all callback functions offered by Google Pay, eliminating the need for direct interaction with Google Pay.

For controlling or updating the Google Pay payment sheet after consumer interaction has started, multiple options are available.

The payment page

Loading the Google Pay button via the COPYandPAY payment widget follows the same process as any other brand integration. In step 2, specify GOOGLEPAY as the brand.

<form action="https://developer.peachpayments.com/docs/oppwa-integrations-copyandpay" class="paymentWidgets" data-brands="GOOGLEPAY"></form>

body {background-color:#f6f6f5;}

var wpwlOptions = {
    googlePay: {
        gatewayMerchantId: "8a8294174e735d0c014e78cf26461790"
    }
}

Result:

Google Pay options

As with other options, you can change the Google Pay behaviour by using wpwlOptions.googlePay. The list below provides a full reference of all available options.

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 Peach Payments.	`gatewayMerchantId: "8a8294174e735d0c014e78cf26461790"`
`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"`
`gateway`	Required for GOOGLEPAYTKN. Your payment provider configured for Google Pay.	`gateway: "sonypaymentservices"`
`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"]`
`checkoutOption`	Optional. Affects the submit button text displayed in the Google Pay payment sheet. See also the Google Pay's Integration checklist. DEFAULT: The payment sheet button is labeled "Continue". COMPLETE_IMMEDIATE_PURCHASE: The payment sheet button is labeled "Pay now". This option is only available when totalPriceStatus is set to FINAL.	`checkoutOption: "COMPLETE_IMMEDIATE_PURCHASE"`
`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 have 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 to 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` is set to `true`. This element basically defines the shipping options that are to be presented to the user. Refer to 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 to 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 to 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 3-D Secure 2.0 the email 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.street2`, `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); }`

Callback functions

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

Callback function	Description	Example
`onPaymentAuthorized`	This method runs when a payment authorises in the payment sheet. The method parameter, `paymentData`, contains requested shopper data returned by Google after payment approval. The method returns a `Promise`. - Resolved: Returns an object with payment transaction results. - Rejected: Returns an error object with `PAYMENT_AUTHORIZATION` intent and a message shown in the payment sheet. Note that the payment is submitted for processing only after this method returns successfully.	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 changes in the payment sheet, such as shipping address and shipping options. The method parameter, `intermediatePaymentData`, contains the selected address and shipping option in the payment sheet. It returns a `Promise`. - Resolved: Returns an object with updated transaction information, shipping options, and payment data errors. - Rejected: Returns an error object with `SHIPPING_ADDRESS` or `SHIPPING_OPTION` intent and a message shown in the payment sheet.	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, use the example code below as guidance:

<form action="https://developer.peachpayments.com/docs/oppwa-integrations-copyandpay" class="paymentWidgets" data-brands="GOOGLEPAY"></form>

body {background-color:#f6f6f5;}

var wpwlOptions = {
    googlePay: {
        // Your entity ID provided by us
        gatewayMerchantId: "8a8294174e735d0c014e78cf26461790",
        
        // Google merchant identifier
        merchantId: "ALPHANUMBERIC16D",
        
        // Possible values: PAN_ONLY, CRYPTOGRAM_3DS
        allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
        
        // Possible values: AMEX, DISCOVER, JCB, MASTERCARD, VISA
        allowedCardNetworks:  ["AMEX", "DISCOVER", "JCB", "MASTERCARD", "VISA"],
        
        // Possible values: default, black, white
        buttonColor: "white",
        
        // Possible values: book, buy (default), checkout, donate, order, pay, plain, subscribe
        buttonType: "pay",
        
        // Possible values: static (default), fill
        buttonSizeMode: "fill",
        
        // The name shown in the payment sheet
        merchantName: "Example Merchant",
        
        // The name shown in the payment sheet
        shippingAddressParameters : {
            allowedCountryCodes: ["US", "IN"],
            phoneNumberRequired: true
        },
        
        // If shoppers billing address is required
        billingAddressRequired: true,
        
        // The desired format for the billing address
        billingAddressParameters : { "format": "FULL", phoneNumberRequired : true },
        
        // The shipping option
        shippingOptionRequired : true,
        
        // The shipping option parameters configuration
        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." 
            }]
        },
        
        displayItems: [{
            label: "Subtotal",
            type: "SUBTOTAL",
            price: "11.00"
        }, {
            label: "Tax",
            type: "TAX",
            price: "1.00"
        }, {
            label: "GST",
            type: "TAX",
            price: "1.00"
        }],
        
        // Callback when payment data is changed
        onPaymentDataChanged : function (intermediatePaymentData) {
            return new Promise(function(resolve, reject) {
                resolve({});
            });
        },
        
        // Callback when a payment is authorized
        onPaymentAuthorized: function (paymentData) {
            return new Promise(function(resolve, reject) {
                resolve({ transactionState: "SUCCESS" });
            });
        }
    }
};

Result: