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

Google Pay options.callbacks Arguments

Google Pay options.paymentDataRequest Arguments

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

paymentAuthorized

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

Payload

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

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