> ## Documentation Index
> Fetch the complete documentation index at: https://primer.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Google Pay: Drop In Guide

> Integrate Google Pay on your website or mobile application with just a few lines of code.

## Before you begin

This guide assumes that you know how to

* [Show Drop-in Checkout](https://primer.io/docs/checkout/drop-in/)

## Accept payments with Google Pay

### Prepare the client session

Google Pay requires the following data to process a payment successfully. Pass the following data in the client session, or in the payment request (for manual payment creation).

| Parameter Name | Required | Description |
| - | - | - |
| [currencyCode](https://primer.io/docs/api-reference/v2.4/api-reference/client-session-api/create-a-client-session.md#body-currency-code) | ✓ | 3-letter currency code in [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217#Active_codes) format, e.g. `USD` for US dollars |
| [order](https://primer.io/docs/api-reference/v2.4/api-reference/client-session-api/create-a-client-session.md#body-order.)  ↳ [lineItems](https://primer.io/docs/api-reference/v2.4/api-reference/client-session-api/create-a-client-session.md#body-order-line-items) | | Details of the line items of the order |
| [order](https://primer.io/docs/api-reference/v2.4/api-reference/client-session-api/create-a-client-session.md#body-order.)  ↳ [countryCode](https://primer.io/docs/api-reference/v2.4/api-reference/client-session-api/create-a-client-session.md#body-order..countryCode) | ✓ | The merchant's country (ISO 3166-1 alpha-2) — where the transaction is processed, not the buyer's country |

> [!NOTE]
>
> `order.countryCode` maps to Google Pay's [`TransactionInfo.countryCode`](https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo): "The ISO 3166-1 alpha-2 country code where the transaction is processed." Use the country of your acquiring entity (for example, if your acquirer is in the EEA, this is required for SCA compliance).

### Prepare the SDK for payments

> [tab] Web
>
> #### Show Universal Checkout
>
> Google Pay is automatically presented to the customer when calling `Primer.showUniversalCheckout`.
>
> ```typescript Typescript   theme={"dark"}
> try {
>   await Primer.showUniversalCheckout(clientToken, {
>     container: '#checkout-container',
>     options,
>     onCheckoutComplete({ payment }) {
>       console.log('Checkout complete.', payment)
>     },
>   })
> } catch (e) {
>   // handle error
> }
>
> ```
>
> #### Customization
>
> Check the [Customization Guide](https://primer.io/docs/checkout/drop-in/customization.md#styling-payment-method-button) to learn how to customize payment method buttons.
>
> Additionally, you can style the Google Pay button by passing the following options:
>
> ```typescript Typescript  theme={"dark"}
> const options = {
>     /* Other options... */
>     googlePay: {
>         buttonType: 'long', // 'long' (default) | 'short'
>         buttonColor: 'black', // 'default' (default) | 'black' | 'white',
>     }
> }
> ```
>
> **Capture billing address**\\
>
> By default, Google Pay does not capture the user's billing address.
>
> You can ask to capture the billing address by setting the option `captureBillingAddress`. The billing address is added to the client session before the payment is made.
>
> ```typescript Typescript    theme={"dark"}
> const options = {
>     /* Other options... */
>     googlePay: {
>         captureBillingAddress: true,
>     }
> }
> ```
>
> #### Limitations
>
> * Google Pay **can** be presented inside an Android WebView, but only when the host Android app enables WebView support for Google Pay. This is done in the app itself, following Google's [Using Android WebView](https://developers.google.com/pay/api/android/guides/recipes/using-android-webview) guide, and requires Google Play Services 25.18.30 or later. No change is required in Primer's SDK — Primer's Google Pay integration works in a WebView once the app is configured.
>
>   If the host app hasn't enabled WebView support — or the page is opened in a third-party in-app browser that doesn't (e.g. the Facebook, Instagram, or TikTok browser) — Google Pay won't present its payment sheet and the button won't be available there.
>
> #### Troubleshooting
>
> ##### The Google Pay button does not appear
>
> Primer drop-in checkout runs a few checks to validate that the user can pay with Google Pay.
>
> The Google Pay button does not appear if one of these conditions is met:
>
> * Google Pay JS library fails to be downloaded. This usually comes from a network issue on the user side.
> * Google Pay believes the browser is not supported. Under the hood, the SDK uses Google Pay's function [`isReadyToPay`](https://developers.google.com/pay/api-reference/web/reference/client) to validate this.
> * The country code or the currency code are missing from the client session.

> [tab] Android
>
> #### Show Universal Checkout
>
> Google Pay is automatically presented to the customer when calling `Primer.instance.showUniversalCheckout`.
>
> ```kotlin KOTLIN theme={"dark"}
> class CheckoutActivity : AppCompatActivity() {
>   private fun setupObservers() {
>     viewModel.clientToken.observe(this) { clientToken ->
>       showUniversalCheckout(clientToken)
>     }
>   }
>   private fun showUniversalCheckout(clientToken: String) {
>     Primer.instance.showUniversalCheckout(this, clientToken)
>   }
> }
> ```
>
> #### Customization
>
> **Capture billing address**\\
>
> > [!NOTE]
> >
> > Capturing billing address is supported on 2.16.0+ SDK versions.
>
> By default, Google Pay does not capture the user's billing address.
>
> You can ask to capture the billing address by setting the option `captureBillingAddress`. The billing address is added to the client session before the payment is made.
>
> ```kotlin KOTLIN theme={"dark"}
> val settings = PrimerSettings(
>     /* Other options... */
>     paymentMethodOptions = PrimerPaymentMethodOptions(
>             googlePayOptions = PrimerGooglePayOptions(captureBillingAddress = true)
>     ),
> )
> ```
>
> **Required Existing Payment Method**
>
> > [!NOTE]
> >
> > Support for enabling the requirement of an existing payment method is included in SDK versions 2.27.0+.
>
> By default, Google Pay is presented to the user regardless of whether they have a supported card in their wallet.
>
> You can now automatically hide Google Pay if the user’s wallet does not contain a supported card by setting `existingPaymentMethodRequired` to `true`.
>
> ```kotlin KOTLIN theme={"dark"}
> val settings = PrimerSettings(
>     /* Other options... */
>     paymentMethodOptions = PrimerPaymentMethodOptions(
>             googlePayOptions = PrimerGooglePayOptions(existingPaymentMethodRequired = true)
>     ),
> )
> ```
>
> **Collect email address**\\
>
> > [!NOTE]
> >
> > Support for collecting user's email address is included in SDK versions 2.33.0+.
>
> You can now collect user’s email address by setting `emailAddressRequired` to `true`.
>
> ```kotlin KOTLIN theme={"dark"}
> val settings = PrimerSettings(
>     /* Other options... */
>     paymentMethodOptions = PrimerPaymentMethodOptions(
>         googlePayOptions = PrimerGooglePayOptions(emailAddressRequired = true)
>     ),
> )
> ```
>
> Collect shipping address and phone number
>
> > [!NOTE]
> >
> > Support for collecting user's shipping address and phone number is included in SDK versions 2.33.0+.
>
> You can now collect user’s shipping address and phone number by setting `shippingAddressParameters` to `PrimerGoogleShippingAddressParameters(phoneNumberRequired = true)`.
>
> ```kotlin KOTLIN theme={"dark"}
> val settings = PrimerSettings(
>     /* Other options... */
>     paymentMethodOptions = PrimerPaymentMethodOptions(
>         googlePayOptions = PrimerGooglePayOptions(
>             shippingAddressParameters = PrimerGoogleShippingAddressParameters(phoneNumberRequired = true)
>         )
>     ),
> )
> ```
>
> **Customize Google Pay Button Appearance**\\
>
> > [!NOTE]
> >
> > The PayButton API is a requirement for all new Android Google Pay API integrations that use a Google Pay payment button. Support for customizing Google Pay Button Appearance is included in SDK versions 2.33.0+.
>
> You can customize the Google Pay button's appearance by setting the `buttonOptions` parameter within `PrimerGooglePayOptions`. This allows you to modify attributes such as the button's type and theme.
>
> ```kotlin KOTLIN theme={"dark"}
> val settings = PrimerSettings(
>     /* Other options... */
>     paymentMethodOptions = PrimerPaymentMethodOptions(
>         googlePayOptions = PrimerGooglePayOptions(
>             buttonOptions = GooglePayButtonOptions(
>                 buttonType = ButtonConstants.ButtonType.PAY,
>                 buttonTheme = ButtonConstants.ButtonTheme.DARK
>             )
>         )
>     ),
> )
> ```
>
> For more details, refer to the [Primer Google Pay Button Options documentation](https://primer.io/docs/sdk/android/v2.x.x/primer-headless-checkout/methods/start.md#param-button-options).
>
> **Restrict card types**\\
>
> > [!NOTE]
> >
> > Support for restricting credit and prepaid cards is included in SDK versions 2.52.0+.
>
> By default, Google Pay offers all supported card types. You can restrict which card types are offered by setting `allowCreditCards` and `allowPrepaidCards` to `false`.
>
> ```kotlin KOTLIN theme={"dark"}
> val settings = PrimerSettings(
>     /* Other options... */
>     paymentMethodOptions = PrimerPaymentMethodOptions(
>         googlePayOptions = PrimerGooglePayOptions(
>             allowCreditCards = false,
>             allowPrepaidCards = false
>         )
>     ),
> )
> ```
>
> > [!NOTE]
> >
> > Google Pay has no equivalent flag to disallow debit cards, so a credit-only configuration is not achievable on the platform.

> [tab] React Native
>
> #### Show Universal Checkout
>
> Google Pay is automatically presented to the customer when calling `Primer.showUniversalCheckout`.
>
> ```typescript Typescript theme={"dark"}
> const CheckoutScreen = async (props: any) => {
>   const onUniversalCheckoutButtonTapped = async () => {
>     try {
>       await Primer.showUniversalCheckout(clientToken)
>     } catch (err) {
>       // handle error
>     }
>   }
> }
> ```
>
> #### Customization
>
> **Capture billing address**\\
>
> > [!NOTE]
> >
> > Capturing billing address is supported on 2.17.0+ SDK versions.
>
> By default, Google Pay does not capture the user's billing address.
>
> You can ask to capture the billing address by setting the option `isCaptureBillingAddress`. The billing address is added to the client session before the payment is made.
>
> ```typescript Typescript theme={"dark"}
> let settings: PrimerSettings = {
>     paymentMethodOptions: {
>         /* Other options... */
>         googlePayOptions: {
>          isCaptureBillingAddressEnabled: true
>         }
>     },
> };
> ```
>
> **Required Existing Payment Method**\\
>
> > [!NOTE]
> >
> > Support for enabling the requirement of an existing payment method is included in SDK versions 2.21.0+.
>
> By default, Google Pay is presented to the user regardless of whether they have a supported card in their wallet.
>
> You can now automatically hide Google Pay if the user’s wallet does not contain a supported card by setting `isExistingPaymentMethodRequired` to `true`.
>
> ```typescript Typescript theme={"dark"}
> let settings: PrimerSettings = {
>     paymentMethodOptions: {
>         /* Other options... */
>         googlePayOptions: {
>          isExistingPaymentMethodRequired: true
>         }
>     },
> };
> ```
>
> **Collect email address**\\
>
> > [!NOTE]
> >
> > Support for collecting user's email address is included in SDK versions 2.28.0+.
>
> You can now collect user’s email address by setting `emailAddressRequired` to `true`.
>
> ```typescript Typescript theme={"dark"}
> let settings: PrimerSettings = {
>     paymentMethodOptions: {
>         /* Other options... */
>         googlePayOptions: {
>          emailAddressRequired: true
>         }
>     },
> };
> ```
>
> **Collect shipping address and phone number**\\
>
> > [!NOTE]
> >
> > Support for collecting user's shipping address and phone number is included in SDK versions 2.28.0+.
>
> You can now collect user’s shipping address and phone number by setting `shippingAddressParameters` to `{ phoneNumberRequired: true }`.
>
> ```typescript Typescript theme={"dark"}
> let settings: PrimerSettings = {
>     paymentMethodOptions: {
>         /* Other options... */
>         googlePayOptions: {
>          shippingAddressParameters: { phoneNumberRequired: true }
>         }
>     },
> };
> ```
>
> **Customize Google Pay Button Appearance**\\
>
> > [!NOTE]
> >
> > The PayButton API is a requirement for all new Android Google Pay API integrations that use a Google Pay payment button. Support for customizing Google Pay Button Appearance is included in SDK versions 2.28.0+.
>
> You can customize the Google Pay button's appearance by setting the `buttonOptions` parameter within `IPrimerGooglePayOptions`. This allows you to modify attributes such as the button's type and theme.
>
> ```typescript Typescript theme={"dark"}
> let settings: PrimerSettings = {
>     paymentMethodOptions: {
>         /* Other options... */
>         googlePayOptions: {
>             buttonOptions: {
>           buttonTheme: PrimerGooglePayButtonConstants.Themes.Dark,
>           buttonType: PrimerGooglePayButtonConstants.Types.Checkout
>         }
>         }
>     },
> };
> ```
>
> For more details, refer to the [Primer Google Pay Button Options documentation](https://primer.io/docs/sdk/react-native/v2.x.x/common-objects/PrimerSettings.md#param-google-pay-options).
>
> **Restrict card types**\\
>
> > [!NOTE]
> >
> > Support for restricting card types is included in SDK versions 2.46.0+.
>
> By default, Google Pay offers all supported card types. You can restrict which card types are offered by setting `allowedCardTypes` to any combination of `credit`, `debit`, and `prepaid`.
>
> ```typescript Typescript theme={"dark"}
> let settings: PrimerSettings = {
>     /* Other options... */
>     paymentMethodOptions: {
>         googlePayOptions: {
>             allowedCardTypes: ["debit"]
>         }
>     },
> };
> ```
>
> ### Limitations
>
> Google Pay is not compatible with iOS. The payment method button will not be presented.

## Go live

You don’t need to do anything particular to go live — just make sure to use production credentials.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.