Google Pay allows customers to make payments using their Google account, providing a seamless and secure checkout experience. This guide provides instructions on how to integrate Google Pay into your payment form using the embedded SDK.
To process Google Pay transactions, a business typically needs a Google Merchant Account (also called a Google Pay Merchant ID). This account is registered with Google and contains your business identity details (name, country, banking information).
It also issues a Google Merchant Identifier, which is required when integrating Google Pay under your own account.
Ryft makes this simpler by offering two ways to integrate Google Pay:
| Option | How it Works | Benefits |
|---|---|---|
| Hosted | Use Ryft's existing Google Pay merchant account. No need to register your own. | Minimal setup effort. Faster time to production. |
| Non-Hosted | Use your own (or an existing) Google Pay merchant account. | Full control of your Google relationship. Portable across processors. |
- If you choose Hosted (recommended for most businesses), you don't need to create or maintain a Google Pay Merchant Account — Ryft handles this for you.
- If you choose Non-Hosted, you'll need to create and manage your own account with Google, including the ongoing relationship and configuration.
We recommend using the Hosted integration option, unless:
- You already have a Google Pay Merchant Account that you want to use, or
- You have sufficient resources to manage the account and relationship with Google.
To enable Google Pay in your payment form, you need to configure the embedded SDK with the appropriate settings. This includes the googlePay configuration object, which allows you to specify the following fields:
merchantName: The name of the business as it should appear to customers during the Google Pay checkout process.merchantCountryCode: The two-letter ISO country code representing the country where your business is located (e.g., "US" for the United States, "GB" for the United Kingdom).merchantIdentifier: (Non-Hosted only) Your Google Pay Merchant Identifier, which is required if you're using your own Google Pay Merchant Account.
Here's an example of how to configure the embedded SDK for Google Pay:
Ryft.init({
publicKey,
clientSecret,
googlePay: {
merchantName: "Fish & Chips Ltd", // The name of the business as it should appear to customers
merchantCountryCode: "GB" // The two-letter ISO country code for the business location
}
});If your configuration is correct, the Google Pay button will be displayed in the payment form. Customers can then click the button to initiate the Google Pay checkout process.
By default, the Google Pay integration allows customers to pay using either Debit or Credit cards. If you want to restrict payments to only Debit cards, you can set the googlePay.allowCreditCards configuration option to false.
Here's an example of how to configure the embedded SDK to allow only Debit cards:
Ryft.init({
publicKey,
clientSecret,
googlePay: {
merchantIdentifier, // Only required for Non-Hosted integration
merchantName,
merchantCountryCode,
allowCreditCards: false // Default is true
}
});If your business requires shipping information for orders, you can configure the embedded SDK to collect shipping details during the Google Pay checkout process. This is done using the googlePay.shippingConfig configuration object, which allows you to specify the following fields:
options(array): An array of shipping options that the customer can choose from. Each option should include:id(string): A unique value to identify the shipping option.label(string): A descriptive label for the shipping option (e.g., "Standard Shipping", "Express Shipping").description(string): A detailed description of the shipping option.
allowedCountryCodes(array): An array of two-letter ISO country codes representing the countries where shipping is available (e.g., ["US", "GB"]). If not specified, shipping will be available to all countries.phoneNumberRequired(boolean): A flag indicating whether the customer's phone number is required for shipping. Defaults tofalse.addressRequired(boolean): A flag indicating whether the customer's shipping address is required. Defaults totrue.
Here's an example of how to configure the embedded SDK with shipping options for Google Pay:
Ryft.init({
publicKey,
clientSecret,
googlePay: {
merchantIdentifier, // Only required for Non-Hosted integration
merchantName,
merchantCountryCode,
shippingConfig: {
options: [
{
id: "standard",
label: "Standard Shipping",
description: "Delivers in 3-5 business days",
},
{
id: "express",
label: "Express Shipping",
description: "Next day delivery",
},
],
allowedCountryCodes: ["US", "GB"],
phoneNumberRequired: true,
addressRequired: true,
},
},
});When customers proceed to checkout using Google Pay, they will be presented with the shipping options you have configured.
The selected shipping option and any collected shipping information will be included in the paymentSession object returned in the walletPaymentSessionResult event.
If you want to customise the appearance of the Google Pay button, you can use the googlePay.buttonConfiguration configuration object. This allows you to specify the following fields:
height(number): The height of the button in pixels. Default is48.type(string): The type of button to display, e.g.buy,plain,subscribe. Default isplain.color(string): The color of the button, e.g.black,white. Default isblack.width(string): The CSS width of the button, e.g.80%,50%. Default is100%.borderRadius(number): The border radius of the button in pixels. Default is4.
Please refer to the Google Pay Button Branding Guidelines to ensure that your customisations comply with Google's requirements.
Here's an example of how to customise the Google Pay button:
Ryft.init({
publicKey,
clientSecret,
googlePay: {
merchantIdentifier, // Only required for Non-Hosted integration
merchantName,
merchantCountryCode,
buttonConfiguration: {
height: 50,
type: "buy",
color: "white",
width: "80%",
borderRadius: 8,
},
},
});To handle the result of a Google Pay transaction, you can listen for the walletPaymentSessionResult event, which is triggered when the payment process is completed. This event provides a paymentSession object that contains information about the transaction status and any errors that may have occurred. You can use this information to update your UI and inform the customer of the payment outcome.
Also, the walletButtonsReady event can be used to detect when the Google Pay button is fully loaded and ready for interaction.
Please refer to the Handling SDK Events section for more details on how to listen for and handle SDK events.
To test Google Pay transactions, you can simply use the Ryft Sandbox environment and initialise the SDK as described in this guide.
The Google Pay button will be displayed in the payment form, allowing you to simulate transactions by clicking the button and selecting one of the test cards provided by Google (see here for a list of test cards).
Please note that if the Google Pay button does not appear, it is likely the SDK configuration is incorrect. Double-check your googlePay settings and ensure that publicKey and clientSecret are set correctly.
If you choose to implement Google Pay using the Non-Hosted option, there are some additional steps to take before going live:
- Obtain a production Google Merchant ID from Google (see here for more details).
- Request production access from Google (see here for more details).
- Complete the steps outlined in the Deploy to Production guide provided by Google.
If using the Hosted option, no additional steps are required to go live, as Ryft manages the Google Pay Merchant Account on your behalf.