# Google Pay ## Overview **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. ## Google Merchant Account 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. ## Configuring the Embedded SDK 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: Hosted ```javascript Google Pay Hosted Example 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 } }); ``` Non-Hosted ```javascript Google Pay Non-Hosted Example 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 merchantIdentifier: "01234567890123456789" // Your Google Pay Merchant Identifier } }); ``` 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. ## Allowing Credit Cards 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: ```javascript Google Pay Allow Only Debit Cards Example Ryft.init({ publicKey, clientSecret, googlePay: { merchantIdentifier, // Only required for Non-Hosted integration merchantName, merchantCountryCode, allowCreditCards: false // Default is true } }); ``` ## Shipping Configuration 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 to `false`. - `addressRequired` (boolean): A flag indicating whether the customer's shipping address is required. Defaults to `true`. Here's an example of how to configure the embedded SDK with shipping options for Google Pay: ```javascript Google Pay Shipping Configuration Example 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. ## Customising the Google Pay Button 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 is `48`. - `type` (string): The type of button to display, e.g. `buy`, `plain`, `subscribe`. Default is `plain`. - `color` (string): The color of the button, e.g. `black`, `white`. Default is `black`. - `width` (string): The CSS width of the button, e.g. `80%`, `50%`. Default is `100%`. - `borderRadius` (number): The border radius of the button in pixels. Default is `4`. Please refer to the [Google Pay Button Branding Guidelines](https://developers.google.com/pay/api/web/guides/brand-guidelines) to ensure that your customisations comply with Google's requirements. Here's an example of how to customise the Google Pay button: ```javascript Google Pay Custom Button Example 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, }, }, }); ``` ## Handling the Payment Result 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](/documentation/get_started/process_payments/embedded_sdk/sdk_events) section for more details on how to listen for and handle SDK events. ## Testing Google Pay 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](https://developers.google.com/pay/api/web/guides/resources/test-card-suite) 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. ## Going Live 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](https://developers.google.com/pay/api/web/guides/test-and-deploy/deploy-production-environment#obtain-your-merchantID) for more details). - Request production access from Google (see [here](https://developers.google.com/pay/api/web/guides/test-and-deploy/request-prod-access) for more details). - Complete the steps outlined in the [Deploy to Production](https://developers.google.com/pay/api/web/guides/test-and-deploy/deploy-production-environment) 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.