Google Pay ™
Add Google Pay™ to your Recurly.js checkout: render the button, launch the native payment sheet, and receive a Recurly token—optionally routing through Braintree.
Use Recurly.js to process Google Pay transactions.
To get started, ensure your Payment Gateway is configured to accept Google Pay transactions.
Prerequisites and limitations
- Gateway support – Your configured payment gateway must already be enabled for Google Pay transactions.
- Merchant IDs – You’ll need a valid Google Merchant ID (and, for Braintree, a client-authorization string).
- Browser / device support – Customers must use Chrome v61+ (Android) or any browser that supports Google Pay on the web.
- Token lifetime – Recurly tokens generated via Google Pay follow the standard 20-minute reuse window.
- User wallets – If
existingPaymentMethodRequired
is set, shoppers without a stored card will see a “Google Pay not available” error.
Key details
Invoking the purchase flow
Configure a new instance of recurly.GooglePay
as follows.
// Handle when the token has been generated to keep the payment sheet in the "Processing"
// state until the onPaymentAuthorized callback has completed
function onPaymentAuthorized(paymentData) {
const { recurlyToken: token } = paymentData;
// Submit the token to your server
console.log('Google Pay succeeded.',
'Token:', token.id,
'PaymentData:', paymentData);
}
const googlePay = recurly.GooglePay({
currency: 'USD',
country: 'US',
total: '10',
googleMerchantId: 'GOOGLE_MERCHANT_ID',
billingAddressRequired: true,
callbacks: {
onPaymentAuthorized,
},
});
// When the GooglePay instance is ready, attach the Google Pay Button to the DOM
googlePay.on('ready', function (googlePayButton) {
$('#google-pay-button-container').appendChild(googlePayButton);
});
// Handle errors. These may occur at any point in the Google Pay flow
googlePay.on('error', function (err) {
// err.code, err.message
console.error('Google Pay error', err);
});
Google Pay via Braintree
If you're processing Google Pay transactions with Braintree, you'll pass a client authorization during instantiation:
const googlePay = recurly.GooglePay({
currency: 'USD',
country: 'US',
total: '10',
googleMerchantId: 'GOOGLE_MERCHANT_ID',
billingAddressRequired: true,
callbacks: {
onPaymentAuthorized,
},
braintree: {
clientAuthorization: MY_CLIENT_AUTHORIZATION
}
});
Additional configuration
To provide additional customer data to tokens generated by recurly.GooglePay
, you may pass a form
reference. recurly.GooglePay
will collect customer data from the form just as would occur during
credit card tokenization. See Getting a Token for more information on building
such a form.
const googlePay = recurly.GooglePay({
// ...
form: document.querySelector('#my-payment-form')
});
If you choose to include a Recurly.js payment form, any billing name or address fields entered on that form will be used instead of the address in the user's Google Pay info; the token request will contain the fields entered on the payment form. If the form is completely empty of name and address inputs, the token request will contain the name and address chosen by the user during the Google Pay flow.
Reference
fn - recurly.GooglePay
Arguments
Param | Type | Description |
---|---|---|
options | Object | |
[options.country] | String | Your ISO 3166 country code (ex: 'US' ). This is your country code as the merchant. Required if options.paymentDataRequest.transactionInfo.countryCode is not provided. |
[options.currency] | String | ISO 4217 purchase currency (ex: 'USD' ). Required if options.paymentDataRequest.transactionInfo.currencyCode is not provided. |
[options.total] | String | Total cost to display in the Google Pay payment sheet. Required if options.paymentDataRequest.transactionInfo.total is not provided. |
[options.googleMerchantId] | String | Your Google Account Merchant ID. Required if options.paymentDataRequest.merchantInfo.merchantId is not provided. |
[options.googleBusinessName] | String | Your Google Business name. |
[options.environment] | String | The Google Pay Environment 'TEST' or 'PRODUCTION' . This value is automatically deduced from your Recurly Site mode, but you can always overwrite it. |
[options.buttonOptions] | Object | The Google Pay Button Options. |
[options.billingAddressRequired] | Boolean | Requires the User Billing Address in the Google Pay Payment. Not needed if options.form with the billing address is provided. |
[options.existingPaymentMethodRequired] | Boolean | Requires the User to have a configured payment method in their wallet, otherwise will return a google-pay-not-available error. |
[options.form] | HTMLElement | If provided, tokens generated will include customer billing address from the form, overriding any billing address gathered from Google Pay. |
[options.gatewayCode] | String | Specify which Payment Gateway in Recurly must process the Payment. |
[options.callbacks] | Object | Callbacks to handle the events in the session. |
[options.paymentDataRequest] | Object | The PaymentDataRequest object. While all fields in the PaymentDataRquest are supported, listed in this table are the overrides for the top level options. |
[options.braintree] | Object | Optional. Braintree configuration. |
[options.braintree.clientAuthorization] | String | If using Braintree to process Google Pay transactions, provide your client authorization code here. |
Google Pay options.callbacks
Arguments
options.callbacks
ArgumentsParam | Type | Description |
---|---|---|
[options.callbacks.onPaymentDataChanged] | Function | Pass through to the native callback |
[options.callbacks.onPaymentAuthorized] | Function | Called with the PaymentData , including the recurlyToken . Should return a resolving Promise or a rejecting Promise with the appropriate error. |
Google Pay options.paymentDataRequest
Arguments
options.paymentDataRequest
ArgumentsParam | Type | Description |
---|---|---|
[options.paymentDataRequest.merchantInfo] | Object | The MerchantInfo . Can override the options.googleMerchantId and options.googleBusinessName options. |
[options.paymentDataRequest.transactionInfo] | Object | The TransactionInfo . Can override the options.total , options.currency and options.country options. |
It is not required to set options.paymentDataRequest.callbackIntents
. They are automatically configured based on the options.callbacks
and required options.paymentDataRequest
counterparts provided.
Returns
A new recurly.GooglePay
instance
event - Emits
ready
ready
This event is fired when the GooglePay instance has completed initialization and the Customer is ready to Pay.
Payload
Param | Type | Description |
---|---|---|
button | HTMLElement | The Google Pay button already setup. |
paymentAuthorized
paymentAuthorized
This event is fired when the customer has authorized the payment presented on the Apple Pay payment sheet.
Payload
Param | Type | Description |
---|---|---|
paymentData | Object | The PaymentData object. |
paymentData.recurlyToken.id | String | Token identifier to be sent to the API. |
token
token
This event is fired when the customer has completed the Google Pay payment sheet flow. Recurly has received the payment details, and generated this token to be used in our API.
Payload
Param | Type | Description |
---|---|---|
token | Object | |
token.id | String | Token identifier to be sent to the API |
error
error
This event is emitted when any error is encountered, whether during setup of the Google Pay payment sheet, or during payment authorization. It will be useful to display errors to your customer if a problem occurs during the Google Pay flow.
Payload
Param | Type | Description |
---|---|---|
error | RecurlyError | An error describing the issue that occurred. |
Updated 12 days ago