Pay.js v2 Google Pay™ Entry Reference
Please Note: This page includes references to features that are still under development. For the currently-supported feature set, see the Pay.js v1 documentation (previously Client JS).
Config Options
The Pay.js Google Pay Entry can be configured with almost all of the options that Google Pay provides. This allows you to customize the button appearance, set requirements billing info, provide discount codes and shipping options, etc. Here we have listed any of the fields that are required from you, or that the Pay.js library will pre-set, for all other options see the Google Pay Request Objects of the same names.
interface GooglePayConfig {
targetDiv: string;
paymentDataRequest: PaymentDataRequest;
buttonOptions?: ButtonOptions;
paymentOptions?: PaymentOptions;
cardParameters?: CardParameters;
};
GooglePayConfig
This is the main configuration object used by Pay.js to configure your Google Pay instance.
| Property | Type | Necessity | Description |
|---|---|---|---|
| targetDiv | string |
Required | The target div element where the Google Pay button should be appended as a child |
| paymentDataRequest | PaymentDataRequest | Required | Use this object to configure your site's support for the Google Pay API. |
| buttonOptions | ButtonOptions | Optional | This object allows you to configure a Google Pay payment button. |
| paymentOptions | PaymentOptions | Optional | Configure this object for a production environment once you've tested your implementation and you're ready to receive payments from shoppers. |
| cardParameters | CardParameters | Optional | This object allows you to define the accepted payment card types. Google filters a payer's available payment cards based on your configured options. |
PaymentDataRequest
Use this object to configure your site's support for the Google Pay API. For additional options like callbackIntents and shippingOptionParameters see Google's documentation here: PaymentDataRequest.
| Property | Type | Necessity | Description |
|---|---|---|---|
| apiVersion | number |
Pre-Set | Major API version. The value is 2 for this specification. |
| apiVersionMinor | number |
Pre-Set | Minor API version. The value is 0 for this specification. |
| allowedPaymentMethods | PaymentMethod | Pre-Set | Specifies support for one or more payment methods supported by the Google Pay API. |
| transactionInfo | TransactionInfo | Required | Details about the authorization of the transaction based upon whether the user agrees to the transaction or not. Includes total price and price status. |
| merchantInfo | MerchantInfo | Required | Information about the merchant that requests payment data. |
PaymentMethod
This object specifies one or more payment methods supported by the Google Pay API and accepted by your website. For more info see Google's documentation here: PaymentMethod.
| Property | Type | Necessity | Description |
|---|---|---|---|
| type | string |
Pre-Set | A short identifier for the supported payment method. CARD is the only supported value for this parameter. |
| parameters | CardParameters | Pre-Set | Parameters required to configure the provided payment method type. |
| tokenizationSpecification | TokenizationSpecification | Pre-Set | Configure an account or decryption provider to receive payment information. |
CardParameters
This object allows you to define the accepted payment card types. Google filters a payer's available payment cards based on your configured options. For additional options like allowPrepaidCards and billingAddressRequired see Google's documentation here: CardParameters
| Property | Type | Necessity | Description |
|---|---|---|---|
| allowedAuthMethods | string[] |
Pre-Set | The Pay.js library will set this as ['PAN_ONLY', 'CRYPTOGRAM_3DS'] (for settlement in US and Canada only) |
| allowedCardNetworks | string[] |
Pre-Set | The Pay.js library will set this as ['AMEX', 'DISCOVER', 'JCB', 'MASTERCARD', 'VISA'] (for settlemet in US and Canada only) |
TokenizationSpecification
This object allows you to configure an account to receive chargeable payment information. For more info see Google's documentation here: TokenizationSpecification.
| Property | Type | Necessity | Description |
|---|---|---|---|
| type | string |
Pre-Set | The Pay.js library will set this as PAYMENT_GATEWAY. |
| parameters | GatewayParameters | Pre-Set | Parameters specific to the selected payment method tokenization type. |
GatewayParameters
This object provides identifying information about the specific payment gateway. For more info see Google's documentation here: GatewayParameters.
| Property | Type | Necessity | Description |
|---|---|---|---|
| gateway | string |
Pre-Set | The Pay.js library will set this as usaepay. |
| gatewayMerchantId | string |
Pre-Set | The Pay.js library will set this as your gateway merchant key. |
TransactionInfo
This object describes a transaction that determines a payer's ability to pay. It's used to present a payment authorization dialog. For additional options like transactionId and checkoutOption see Google's documentation here: TransactionInfo
| Property | Type | Necessity | Description |
|---|---|---|---|
| currencyCode | string |
Required | The ISO 4217 alphabetic currency code. |
| countryCode | string |
(required for EEA countries) | The ISO 3166-1 alpha-2 country code where the transaction is processed. |
| totalPriceStatus | string |
Required | The status of the total price used: NOT_CURRENTLY_KNOWN, ESTIMATED, or FINAL |
| totalPrice | string |
Required | Total monetary value of the transaction with an optional decimal precision of two decimal places. Must follow the regex format: ^[0-9]+(.[0-9][0-9])?$ |
MerchantInfo
This object provides information about the merchant that requests payment data. For more info see Google's documentation here: MerchantInfo
| Property | Type | Necessity | Description |
|---|---|---|---|
| merchantId | string |
Required | A Google merchant identifier issued after registration with the Google Pay Business Console. Required when PaymentsClient is initialized with an environment property of PRODUCTION. See Request production access for more information about the approval process and how to obtain a Google merchant identifier. |
ButtonOptions
This object allows you to configure a Google Pay payment button. For more information about the different button types, and colors see Google's documentation here: ButtonOptions. Be sure to abide by Google's Brand guidelines whenever you display the Google Pay button on your site.
| Property | Type | Necessity | Description |
|---|---|---|---|
| onClick | function or object |
Pre-Set | The Pay.js library uses this to generate the tokenized payment key. |
Status Change Events
The Pay.js Google Pay Entry will send out events that you can listen for using the on() function as shown below. At this time, only the googlepaySuccess and googlePayError events are supported. Google also includes support for different callbacks to allow for updating shipping address/options, discounts and payment authorization. This can all be configured using the Pay.js library in the config object, for more information see Google's guide on Dynamic Price Updates.
// listen for Google Pay to be successfully completed
googlePay.on('googlePaySuccess', function () {
// do something
});
// listen for any Google Pay errors
googlePay.on('googlePayError', function () {
// do something
})