Guides
  1. Payments
  2. Digital wallets
  3. Google Pay

Enable Google Pay

Integrate Google Pay™ in the Rainforest Payment Component

You can implement Google Pay™ into your existing Rainforest integration with three steps:

  • Configure the Google Pay button in the Payment Component
  • Handle the Google Pay payment method in your platform
  • Update the Terms of Service in Merchant Onboarding

Configure the component

When rendering the payment component, add GOOGLE_PAY to the list of allowed-methods :

  <rainforest-payment
    session-key='REPLACE_ME'
    payin-config-id='REPLACE_ME'
-   allowed-methods="CARD,ACH"
+   allowed-methods='CARD,ACH,GOOGLE_PAY'
  ></rainforest-payment>

Rainforest will render a Google Pay button in the available payment methods, if it is supported.

Event listeners

If Google Pay is requested via the allowed-methods prop, we'll let you know if it is supported and available for the specified merchant via events.

The loaded event will return a payload in the following format:

type ValidatedACHPartner = 'PLAID';

type LoadedPayload = {
    google_pay: {
        is_supported: boolean;
    };
    validated_ach: {
        partner: Nullable<ValidatedACHPartner>;
        is_supported: boolean;
    };
};

Listen to this event and parse the event data to know if Google Pay is supported:

const component = document.getElementById('payment-component');
component.addEventListener('loaded', function (data) {
    if (data.detail[0].google_pay.is_supported) {
        console.log('Google Pay is supported!');
    }
});

The Payment Component will emit the same events as it does for other payment methods. You can continue to handle those as you do already.


Handle the Google Pay payment method type

Cards collected via Google Pay behave differently from keyed in cards, so they are represented in the API as a separate type of payment method. For many integrations, this won’t impact you, but in some cases you may need to make integration changes to handle this payment method type.

Check if you have any code that looks at a Rainforest Payin or PaymentMethod and gets data from the card sub-object. In the Google Pay case, the following will be different:

  • method_type will be GOOGLE_PAY instead of CARD
  • card will be null
  • google_pay will be populated with relevant information on the payment method
{
  // ...
  "method_type": "GOOGLE_PAY",
  "card": null,
  "google_pay": {
    "type": "CREDIT",
    "brand": "VISA",
    "brand_desc": "Visa",
    "description": "Visa 1366"
  }
}

If you currently save cards for future use by using the card object, we recommend that for Google Pay you should save the google_pay.description as the way you show the card to the end user when they want to select it again.


Update the Terms of Service in onboarding

Platforms must include the Google Pay API Terms of Service and the Google Pay and Wallet APIs Acceptable Use Policy in the merchant terms their merchants must accept.

Add this language to your merchant terms and conditions acknowledgement:

By accepting these Terms, Merchant also agrees to the Google Pay API Terms of Service, available at https://payments.developers.google.com/terms/sellertos, and the Google Pay and Wallet APIs Acceptable Use Policy, available at https://payments.developers.google.com/terms/aup.


Hosted integration

Rainforest's Payment Component renders and manages the Google Pay button on your behalf and is hosted from Rainforest's domain. This hosted checkout model means:

  • No domain registration required - unlike Apple Pay, you don't need to register your merchant domain with Google.
  • NO CSP update required - if your platform enforces a Content-Security-Policy, there are no additional CSP requirements besides *.rainforest.com.

Additional Google Resources

This integration follows Google's own guidance for integrations. For additional reference:

Updated about 5 hours ago

Did this page help you?