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.

Integration Examples

Reference

fn - recurly.GooglePay

Arguments
ParamTypeDescription
optionsObject
[options.country]StringYour 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]StringISO 4217 purchase currency (ex: 'USD'). Required if options.paymentDataRequest.transactionInfo.currencyCode is not provided.
[options.total]StringTotal cost to display in the Google Pay payment sheet. Required if options.paymentDataRequest.transactionInfo.total is not provided.
[options.googleMerchantId]StringYour Google Account Merchant ID. Required if options.paymentDataRequest.merchantInfo.merchantId is not provided.
[options.googleBusinessName]StringYour Google Business name.
[options.environment]StringThe Google Pay Environment 'TEST' or 'PRODUCTION'. This value is automatically deduced from your Recurly Site mode, but you can always overwrite it.
[options.buttonOptions]ObjectThe Google Pay Button Options.
[options.billingAddressRequired]BooleanRequires the User Billing Address in the Google Pay Payment. Not needed if options.form with the billing address is provided.
[options.existingPaymentMethodRequired]BooleanRequires the User to have a configured payment method in their wallet, otherwise will return a google-pay-not-available error.
[options.form]HTMLElementIf provided, tokens generated will include customer billing address from the form, overriding any billing address gathered from Google Pay.
[options.gatewayCode]StringSpecify which Payment Gateway in Recurly must process the Payment.
[options.callbacks]ObjectCallbacks to handle the events in the session.
[options.paymentDataRequest]ObjectThe PaymentDataRequest object. While all fields in the PaymentDataRquest are supported, listed in this table are the overrides for the top level options.
[options.braintree]ObjectOptional. Braintree configuration.
[options.braintree.clientAuthorization]StringIf using Braintree to process Google Pay transactions, provide your client authorization code here.
Google Pay options.callbacks Arguments
ParamTypeDescription
[options.callbacks.onPaymentDataChanged]FunctionPass through to the native callback
[options.callbacks.onPaymentAuthorized]FunctionCalled with the PaymentData, including the recurlyToken. Should return a resolving Promise or a rejecting Promise with the appropriate error.
Google Pay options.paymentDataRequest Arguments
ParamTypeDescription
[options.paymentDataRequest.merchantInfo]ObjectThe MerchantInfo. Can override the options.googleMerchantId and options.googleBusinessName options.
[options.paymentDataRequest.transactionInfo]ObjectThe 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

This event is fired when the GooglePay instance has completed initialization and the Customer is ready to Pay.

Payload
ParamTypeDescription
buttonHTMLElementThe Google Pay button already setup.
paymentAuthorized

This event is fired when the customer has authorized the payment presented on the Apple Pay payment sheet.

Payload
ParamTypeDescription
paymentDataObjectThe PaymentData object.
paymentData.recurlyToken.idStringToken identifier to be sent to the API.
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
ParamTypeDescription
tokenObject
token.idStringToken identifier to be sent to the API
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
ParamTypeDescription
errorRecurlyErrorAn error describing the issue that occurred.