---
title: "Set up payment methods"
description: "Configure the payment methods that you want to offer in your Composable Storefront."
url: "https://docs.adyen.com/plugins/salesforce-commerce-cloud/composable-storefront/set-up-payment-methods"
source_url: "https://docs.adyen.com/plugins/salesforce-commerce-cloud/composable-storefront/set-up-payment-methods.md"
canonical: "https://docs.adyen.com/plugins/salesforce-commerce-cloud/composable-storefront/set-up-payment-methods"
last_modified: "2024-05-01T11:14:00+02:00"
language: "en"
---

# Set up payment methods

Configure the payment methods that you want to offer in your Composable Storefront.

[View source](/plugins/salesforce-commerce-cloud/composable-storefront/set-up-payment-methods.md)

This page guides you through setting up the payment methods you want to offer in your Composable Storefront. With our integration, most payment methods work out of the box, but some require additional configuration.

## Requirements

| Requirement          | Description                                                                                                                                                                                                      |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Integration type** | A Salesforce [Composable Storefront integration](/plugins/salesforce-commerce-cloud/composable-storefront/install-and-set-up-the-package).                                                                       |
| **Setup steps**      | Before you can set up payment methods in your Salesforce Business Manager, [add the payment methods that you want to offer](/plugins/salesforce-commerce-cloud/supported-payment-methods) in your Customer Area. |

## Enable Adyen as your payment processor

To enable Adyen as the payment processor for cards and other local payment methods that you have added in your Customer Area:

1. In the Salesforce Business Manager, go to **Merchant tools** > **Ordering** > **Payment Methods**.
2. In the Payment Methods overview, check the **ID** column to make sure that **AdyenComponent** and **CREDIT\_CARD** are enabled.
3. Under Details, set **Payment Processor** to **Adyen\_Component** for both types.

After you enable Adyen as your payment processor, most payment methods from your Customer Area will be available in your Composable Storefront without requiring additional configuration. Payment methods that require additional setup steps are listed on this page.

## Apple Pay

You can allow your shoppers to check out with Apple Pay or Apple Pay express in your Composable Storefront integrated with Adyen. Our package supports setting up Apple Pay with Adyen's [Apple Pay certificate](/payment-methods/apple-pay/apple-pay-certificate/). To set up Apple Pay:

1. [Enable Apple Pay](#enable-apple-pay).
2. Optionally, [set up Apple Pay express](#express).
3. Make [test payments](#test) with Apple Pay.
4. [Go live](#go-live-apple-pay).

### Enable Apple Pay

1. [Set up your server](https://developer.apple.com/documentation/apple_pay_on_the_web/setting_up_your_server) for secure communication with Apple Pay.

   * All pages that include Apple Pay must be served over HTTPS.
   * Your domain must have a valid SSL certificate.

2. [Add Apple Pay in your test Customer Area](/payment-methods/add-payment-methods).

   * You'll be asked for **Shop websites**: your website URLs, for example `https://www.mystore.com`. If you add more than one, separate them with a comma.
   * You cannot use `http://localhost` to test.

### (Optional) Set up Apple Pay express

To allow your shoppers to pay with Apple Pay express, insert the Apple Pay express checkout button in a page of your PWA Retail React App. You can display the express checkout button on your cart page or the mini cart modal window.

The integration only supports displaying the Apple Pay button after a shopper places one or more items in their basket. Therefore, it is not possible to display the Apple Pay express button on the product detail page.

### Tab: v1.2.0

1. In your Retail React App, import the payment processing and UI elements that are required to enable the Apple Pay express checkout button on your cart page (`cart-cta.jsx`) or mini cart modal window (`use-add-to-cart-modal.js`).

   **Import the elements**

   ```js
   import '@adyen/adyen-salesforce-pwa/dist/app/adyen.css' // Import the Apple Pay button style.
   import {useAccessToken, useCustomerId, useCustomerType} from '@salesforce/commerce-sdk-react' // Fetch the basket and use Salesforce Commerce APIs.
   import {AdyenExpressCheckoutProvider, ApplePayExpress} from '@adyen/adyen-salesforce-pwa' // Import the Adyen Apple Pay Express component.
   import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site' // Import Salesforce React hooks to get the locale and site name for the shopper session.
   import PropTypes from 'prop-types'
   ```

2. Add the Adyen Express Checkout context in the Retail React App page where you want to enable Apple Pay express.

   **Add the context**

   ```js
   <AdyenExpressCheckoutProvider
      useAccessToken={useAccessToken}
      useCustomerId={useCustomerId}
      useCustomerType={useCustomerType}
      useMultiSite={useMultiSite}
   >
      <ApplePayExpress />
   </AdyenExpressCheckoutProvider>
   ```

### Tab: v2.0.0 and later

1. In your Retail React App, import the payment processing and UI elements that are required to enable the Apple Pay express checkout button on your cart page (`cart-cta.jsx`) or mini cart modal window (`use-add-to-cart-modal.js`).

   **Import the elements**

   ```js
   import '@adyen/adyen-salesforce-pwa/dist/app/adyen.css' // Import the Apple Pay button style.
   import {useAccessToken, useCustomerId, useCustomerType} from '@salesforce/commerce-sdk-react' // Fetch the basket and use Salesforce Commerce APIs.
   import {AdyenExpressCheckoutProvider, ApplePayExpress} from '@adyen/adyen-salesforce-pwa' // Import the Adyen Apple Pay Express component.
   import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site' // Import Salesforce React hooks to get the locale and site name for the shopper session.
   import PropTypes from 'prop-types'
   ```

2. Add the Adyen Express Checkout context in the Retail React App page where you want to enable Apple Pay express.

   **Add the context**

   ```js
   <AdyenExpressCheckoutProvider
   authToken={authToken}
   customerId={customerId}
   locale={locale}
   site={site}
   basket={basket}
   navigate={navigate}
   >
   <ApplePayExpress />
   </AdyenExpressCheckoutProvider>
   ```

### Tab: v4.0.0 and later

1. In your Retail React App, import the payment processing and UI elements that are required to enable the Apple Pay express checkout button on your cart page (`cart-cta.jsx`) or mini cart modal window (`use-add-to-cart-modal.js`).

   **Import the elements**

   ```js
   import '@adyen/adyen-salesforce-pwa/dist/app/adyen.css' // Import the Apple Pay button style.
   import {useAccessToken, useCustomerId, useCustomerType} from '@salesforce/commerce-sdk-react' // Fetch the basket and use Salesforce Commerce APIs.
   import {ApplePayExpress} from '@adyen/adyen-salesforce-pwa' // Import the Adyen Apple Pay Express component.
   import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site' // Import Salesforce React hooks to get the locale and site name for the shopper session.
   import PropTypes from 'prop-types'
   ```

2. Add the Adyen PWA Apple Express Checkout component in the Retail React App page where you want to enable Apple Pay express.

   **Add the Apple Pay express checkout component**

   ```js
   import React, {useEffect, useState} from 'react'
   import {useAccessToken, useCustomerId} from '@salesforce/commerce-sdk-react'
   import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
   import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
   import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
   import {ApplePayExpress} from '@adyen/adyen-salesforce-pwa'
   import '@adyen/adyen-salesforce-pwa/dist/app/adyen.css'

   const CartCTA = () => {
       const {data: basket} = useCurrentBasket()
       const customerId = useCustomerId()
       const {getTokenWhenReady} = useAccessToken()
       const navigate = useNavigation()
       const {locale, site} = useMultiSite()
       const [authToken, setAuthToken] = useState()
       useEffect(() => {
           const getToken = async () => {
               const token = await getTokenWhenReady()
               setAuthToken(token)
           }
           getToken()
       }, [])
       const handleError = (error) => {
           console.error('Apple Pay error:', error)
       }
       return (
           <div>
               {/* Your existing cart CTA buttons */}

               {/* Apple Pay Express Button */}
               <ApplePayExpress
                   authToken={authToken}
                   site={site}
                   locale={locale}
                   basket={basket}
                   navigate={navigate}
                   customerId={customerId}
                   onError={[handleError]}
               />
           </div>
       )
   }

   export default CartCTA
   ```

### Tab: v4.2.0 or later

On v4.2.0 and later of the package, you can also start the Apple Pay express flow on the product detail page.

1. In your Retail React App, import the payment processing and UI elements that are required to enable the Apple Pay express checkout button on your cart page (`cart-cta.jsx`), mini cart modal window (`use-add-to-cart-modal.js`), or the product detail page.

   **Import the elements**

   ```js
   import '@adyen/adyen-salesforce-pwa/dist/app/adyen.css' // Import the Apple Pay button style.
   import {useAccessToken, useCustomerId, useCustomerType} from '@salesforce/commerce-sdk-react' // Fetch the basket and use Salesforce Commerce APIs.
   import {ApplePayExpress} from '@adyen/adyen-salesforce-pwa' // Import the Adyen Apple Pay Express component.
   import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site' // Import Salesforce React hooks to get the locale and site name for the shopper session.
   import PropTypes from 'prop-types'
   ```

2. Add the Adyen PWA Apple Express Checkout component in the Retail React App page where you want to enable Apple Pay express.

   **Add the Apple Pay express checkout component**

   ```js
   import React, {useEffect, useState} from 'react'
   import {useAccessToken, useCustomerId} from '@salesforce/commerce-sdk-react'
   import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
   import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
   import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
   import {ApplePayExpress} from '@adyen/adyen-salesforce-pwa'
   import '@adyen/adyen-salesforce-pwa/dist/app/adyen.css'

   const CartCTA = () => {
       const {data: basket} = useCurrentBasket()
       const customerId = useCustomerId()
       const {getTokenWhenReady} = useAccessToken()
       const navigate = useNavigation()
       const {locale, site} = useMultiSite()
       const [authToken, setAuthToken] = useState()
       useEffect(() => {
           const getToken = async () => {
               const token = await getTokenWhenReady()
               setAuthToken(token)
           }
           getToken()
       }, [])
       const handleError = (error) => {
           console.error('Apple Pay error:', error)
       }
       return (
           <div>
               {/* Your existing cart CTA buttons */}

               {/* Apple Pay Express Button */}
               <ApplePayExpress
                   authToken={authToken}
                   site={site}
                   locale={locale}
                   basket={basket}
                   navigate={navigate}
                   customerId={customerId}
                   onError={[handleError]}
               />
           </div>
       )
   }

   export default CartCTA
   ```

3. Only if you are displaying the Apple Pay express button on the product detail page, add the following to your Apple Pay express context.

   * `isExpressPdp`= **true**
   * A `product` object that contains `id`, and `quantity`.

   **Display Apple Pay express on the product detail page**

   ```javascript
   <ApplePayExpress
      authToken={authToken}
      customerId={customerId}
      locale={locale}
      site={site}
      currency={currency}
      navigate={navigate}
      isExpressPdp={true}
      merchantDisplayName={'Merchant name'}
      product={ {id: product.id, quantity} }
      onError={[onError]}
    />
   ```

   The component does not support handling quantity and variant changes on the product detail page.

### Testing

Use Apple's test card numbers to test your integration. Refer to [Apple Documentation](https://developer.apple.com/apple-pay/sandbox-testing/) for a full list of test cards and instructions on how to add those to your test device.

You can check the status of an Apple Pay test payment in [Customer Area](https://ca-test.adyen.com/) > **Transactions** > **Payments**.

### Go live

To process live Apple Pay payments, follow the steps that are relevant to your version.

### Tab: v1.2.0

1. Download and unzip the Apple Pay [domain association file from our Apple Pay documentation](/payment-methods/apple-pay/web-component/?tab=adyen-certificate-live_1). You do not have to follow the subsequent steps on the page.

2. In the [environment variables file you created when setting up the package](/plugins/salesforce-commerce-cloud/composable-storefront/install-and-set-up-the-package/#set-environment-variables), add a **YOUR\_SITE\_ID\_ADYEN\_APPLE\_DOMAIN\_ASSOCIATION** variable.

3. Copy and paste the domain association file content to set the variable value:

   ```text
   YOUR_SITE_ID_ADYEN_APPLE_DOMAIN_ASSOCIATION="7B227..."
   ```

### Tab: v2.0.0 and later

1. Download and unzip the Apple Pay [domain association file from our Apple Pay documentation](/payment-methods/apple-pay/web-component/?tab=adyen-certificate-live_1). You do not have to follow the subsequent steps on the page.
2. In your MRT environment, [go to your environment variables](/plugins/salesforce-commerce-cloud/composable-storefront/install-and-set-up-the-package/#set-environment-variables).
3. Copy the domain association file content, and paste it to the **YOUR\_SITE\_ID\_ADYEN\_APPLE\_DOMAIN\_ASSOCIATION** variable value.

## Click to Pay

[Click to Pay](/payment-methods/cards/click-to-pay) is supported on v4.1.0 and later. To set up Click to Pay, you need to

To set up Click to Pay:

1. To [allow scripts and iframes from external sources](/development-resources/pci-dss-compliance-guide/script-security#allow-external-sources), which is required to load Click to Pay, configure your [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP):

   1. Go to the `overrides/app/ssr.js` file of your Retail React App, where you will add the required domains.

   2. Add the following Visa and Mastercard domains to the **script-src**, **img-src**, **frame-src**, and **connect-src** directives:

      * **\*.mastercard.com**
      * **\*.visa.com**

   For an example, refer to [example implementation on GitHub](https://github.com/Adyen/adyen-salesforce-headless-commerce-pwa/blob/develop/packages/adyen-retail-react-app/overrides/app/ssr.js#L90).

2. Optionally, configure a Merchant Display name that will be shown on the Click to Pay dialog.

   * In your [`AdyenCheckout` component instance](/plugins/salesforce-commerce-cloud/composable-storefront/install-and-set-up-the-package?plugin=Salesforce%20Composable%20Storefront\&integration=package\&version=4.0.0#configure), set the `merchantDisplayName` to your preferred display name.

   **Example AdyenCheckout configuration for Click to Pay**

   ```javascript
   <AdyenCheckout
      authToken={authToken}
      site={site}
      locale={locale}
      navigate={navigate}
      basket={basket}

      returnUrl={${window.location.origin}/checkout/confirmation}

      // Your other optional configuration
      merchantDisplayName={'YOUR_COMPANY_NAME'}
   />
   ```

## Credit card installments

Credit card installments are optionally available in some countries. To learn more about their availability, see [Credit card installments](/payment-methods/cards/credit-card-installments).

Credit card installments are supported on v4.3.0 and later of the package. When enabled, the AdyenWeb card component shows the shopper an **Installments** dropdown next to the card form. The selected installment count is forwarded to Adyen, persisted on the Salesforce Commerce Cloud payment instrument as `c_cardInstallments`, and shown on the order confirmation page.

Installments only apply to regular card payments. Express checkouts (Apple Pay, Google Pay, and PayPal express) do not surface the installments UI.

### Requirements

* In your [test Customer Area](https://ca-test.adyen.com/), enable installments for each combination of merchant account, card scheme, and country that you want to support. Without this, the `/payments` request fails with an installments-not-allowed error even if the storefront submits a valid value.

* Installments are only allowed for the following country and currency combinations:

  | Country     | Allowed values                                                                                                                                       |
  | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
  | Brazil (BR) | Any unique integers in `1..99`. Currency must be **BRL**.                                                                                            |
  | Mexico (MX) | Any unique subset of `[3, 6, 9, 12, 18]`. Currency must be **MXN**.                                                                                  |
  | Japan (JP)  | Plans `regular`, `revolving`, and `bonus`. `regular` accepts integers `2..99`; `revolving` and `bonus` always require `1`. Currency must be **JPY**. |

  The PWA package enforces this country gate server-side based on the country part of the `locale` query parameter sent on `/api/adyen/payments`. For any other country, the `installments` field is removed from the payment request before it reaches Adyen.

### Configure credit card installments

1. To generate a ready-to-paste configuration block, run the helper script that ships with the package:

   **Generate the installments configuration**

   ```bash
   npx generate-installment-options
   ```

   The script asks for the country, mode (single `card` or per-scheme), card schemes, and values or plans. It validates your input against the allowed values for each country and prints a configuration block that you can drop into your Retail React App.

2. Pass the generated `card.installmentOptions` block to the `<AdyenCheckout />` component through the `paymentMethodsConfiguration` property in your checkout payment step (`overrides/app/pages/checkout/partials/payment.jsx`).

   * **Per scheme**: configure different installment values for each card brand, for example **visa**, **mc**, or **amex**.

     **Per-scheme installments configuration**

     ```javascript
     const paymentMethodsConfiguration = {
         card: {
             installmentOptions: {
                 visa: {
                     values: [2]
                 },
                 mc: {
                     values: [4, 6]
                 }
             },
             showInstallmentAmounts: true
         }
     }
     ```

   * **Single configuration for all cards**: a single `card` key applies to every accepted scheme.

     **Single installments configuration for all cards**

     ```javascript
     const paymentMethodsConfiguration = {
         card: {
             installmentOptions: {
                 card: {values: [3, 6, 9, 12]}
             },
             showInstallmentAmounts: true
         }
     }
     ```

   Set `showInstallmentAmounts` to **true** to display the per-installment amount, for example `3 x $33.33`, next to each option in the dropdown.

3. Pass the `paymentMethodsConfiguration` object to your `<AdyenCheckout />` component instance:

   **Pass installments configuration to AdyenCheckout**

   ```javascript
   <AdyenCheckout
       authToken={authToken}
       site={site}
       locale={locale}
       navigate={navigate}
       basket={basket}
       paymentMethodsConfiguration={paymentMethodsConfiguration}
       // Your other configuration
   />
   ```

After a successful payment, the selected installment count is stored on the order's payment instrument as `c_cardInstallments`. The retail app reads it from `order.paymentInstruments[0].c_cardInstallments` and renders an **Installments** line on the order confirmation page when the value is present.

## PayPal express

PayPal express is supported on v4.2.0 and later of the package. With PayPal express, your shoppers can complete their purchases from the cart or product detail pages without manually entering shipping and billing information. The component handles the checkout flow by fetching the shipping addresses, and methods, so the shopper does not have to manually enter shipping and billing information.

1. Add the Adyen PWA PayPal express checkout component in your Retail React App page where you want to enable PayPal express.

   * Cart page: `type`: **cart**
   * Product detail page: `type`: **pdp**

2. Only if you are displaying the component on the product detail page, add a `product` object in the PayPal express context. The product object must include the `id`, `price`, and `quantity` fields, so the component creates a temporary basket. The component uses `quantity * price` to calculate the price.

   The component does not support handling quantity and variant changes on the product detail page.

   The example below shows how to add the PayPal express button on your product detail page with custom styling configuration and callbacks to handle the payment flow.

   **Add the PayPal express button to your product detail page**

   ```javascript
   import {PayPalExpress} from '@adyen/adyen-salesforce-pwa'
   <PayPalExpress
       authToken={authToken}
       customerId={customerId}
       locale={ {id: 'en-US'} }
       site={siteConfig}
       basket={basket}
       navigate={navigate}
       type="pdp"
       currency="USD"
       product={ { // Only required for the express flow on the product detail page
          id: 'product-123',
          price: 99.99,
          quantity: 1,
          variationAttributes: {...}
       } }
       beforeSubmit={[validateCart]}
       afterSubmit={[trackPaymentInitiation]}
       beforeAuthorized={[logAuthorization]}
       afterAuthorized={[updateAnalytics]}
       beforeShippingAddressChange={[validateAddress]}
       afterShippingAddressChange={[updateShippingCosts]}
       onError={[handleError, logError]}
       configuration={ {
           style: {
               layout: 'horizontal',
               shape: 'rect',
               label: 'paypal'
           }
       } }
       spinner={<LoadingSpinner />}
   />
   ```

3. Optionally, redirect shoppers to a review page before they complete the payment where they can review their order by setting `enableReview` to **{true}**.

   **Enable the review page**

   ```javascript
   import {PayPalExpress} from '@adyen/adyen-salesforce-pwa'
   <PayPalExpress
   // Your other properties for the PayPal express flow
   enableReview={true}
   reviewPageUrl="/checkout/review"
   />
   ```

4. Configure your review page. The review page needs to:

   * Display an order summary with the shipping and billing addresses.
   * Show selected shipping and payment methods.
   * Use the `useAdyenReviewPage` hook to retrieve payment data.
   * Call `submitPaymentDetails()` when the shopper confirms the order details.\
     Below is an example implementation of the review page.

   ```javascript
    import {useAdyenReviewPage} from '@adyen/adyen-salesforce-pwa'

    const ReviewPage = () => {
    const {data: basket} = useCurrentBasket()
    const customerId = useCustomerId()
    const {getTokenWhenReady} = useAccessToken()
    const {site} = useMultiSite()
    const navigate = useNavigation()
    const [authToken, setAuthToken] = useState()

    useEffect(() => {
           const getToken = async () => {
               const token = await getTokenWhenReady()
               setAuthToken(token)
           }
           getToken()
    }, [])

    const {isLoading, isSubmitting, paymentData, error, submitPaymentDetails} = useAdyenReviewPage({
           authToken,
           customerId,
           basketId: basket?.basketId,
           site,
           skip: !authToken || !basket?.basketId
    })

    const handlePlaceOrder = async () => {
           if (!paymentData) return

           try {
               const response = await submitPaymentDetails()

               if (response?.isSuccessful && response?.isFinal) {
                   navigate(`/checkout/confirmation/${response?.merchantReference}`)
               } else {
                   // Handle payment failure
               }
           } catch (err) {
               // Handle error
           }
    }

       return (
           // Render order review UI
           <Button onClick={handlePlaceOrder} isLoading={isSubmitting}>
               Place Order
           </Button>
       )
    }
   ```

## Google Pay

[Enable Google Pay](/payment-methods/add-payment-methods) in your test [Customer Area](https://ca-test.adyen.com/). You do not need additional configuration for the standard Google Pay flow. Adyen automatically forwards the `merchantId` and `gatewayMerchantId` to the component.

To enable Google Pay in the live environment, get your [Google Merchant ID](/payment-methods/google-pay/web-drop-in#before-you-go-live) and register your storefront origins in your [Google Pay & Wallet Console](https://pay.google.com/business/console/).

### Google Pay express

Google Pay express is supported on v4.3.0 and later of the package. With Google Pay express, your shoppers can complete their purchases from the cart or product detail pages without going through the regular multi-step checkout. The component opens the Google Pay sheet to collect the shipping address, shipping method, and payment method, and then authorizes the payment through Adyen.

#### Requirements

* Configure shipping methods per market in Salesforce Commerce Cloud. If `/api/adyen/shipping-methods` does not return any applicable methods for the selected address, the Google Pay sheet shows a `SHIPPING_ADDRESS_UNSERVICEABLE` error.
* Make sure the storefront uses locales whose country part matches a country supported by Google Pay. The component derives the country code from the last two characters of `locale.id`, for example **en-US** maps to **US**.

#### Add the Google Pay express component

1. Add the Adyen PWA Google Pay express checkout component in your Retail React App page where you want to enable Google Pay express.

   * Cart page: `cart-cta.jsx`. Pass the current `basket` to the component.
   * Product detail page: set `isExpressPdp` to **true**. Pass a `product` object that contains `id`, `price`, `quantity`, and any required `variationAttributes`. Also pass the `currency`. The component creates a temporary basket through the Adyen package, so the shopper's main basket is not modified if they abandon the flow.

   The component does not support handling quantity and variant changes on the product detail page.

   The example below shows how to add the Google Pay express button on your product detail page with custom styling configuration and callbacks to handle the payment flow.

   **Add the Google Pay express button to your product detail page**

   ```javascript
   import {GooglePayExpress} from '@adyen/adyen-salesforce-pwa'
   <GooglePayExpress
       authToken={authToken}
       customerId={customerId}
       locale={ {id: 'en-US'} }
       site={siteConfig}
       navigate={navigate}
       currency="USD"
       isExpressPdp={true}
       merchantDisplayName={'Merchant name'}
       product={ { // Only required for the express flow on the product detail page
          id: 'product-123',
          price: 99.99,
          quantity: 1,
          variationAttributes: {...}
       } }
       onError={[handleError]}
       configuration={ {
           buttonColor: 'black',
           buttonType: 'pay',
           buttonRadius: 4
       } }
       spinner={<LoadingSpinner />}
   />
   ```

2. To add the Google Pay express button on your cart page, pass the current `basket` instead of `isExpressPdp`, `currency`, and `product`.

   **Add the Google Pay express button to your cart page**

   ```javascript
   import {GooglePayExpress} from '@adyen/adyen-salesforce-pwa'
   <GooglePayExpress
       locale={locale}
       site={site}
       basket={basket}
       navigate={navigate}
       onError={[showError]}
       spinner={<LoadingSpinner />}
   />
   ```

3. Use the following properties to configure the component:

   | Property              | Type               | Required                                                                                    | Description                                                                                                                          |
   | --------------------- | ------------------ | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
   | `locale`              | Object             | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The locale object. The `locale.id` is forwarded to AdyenWeb and used to derive the Google Pay `countryCode`.                         |
   | `site`                | Object             | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The current site object.                                                                                                             |
   | `basket`              | Object             | Cart only                                                                                   | The current basket. Required in cart mode and ignored when `isExpressPdp` is **true**.                                               |
   | `navigate`            | Function           | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The React Router navigate function used to redirect to the order confirmation page.                                                  |
   | `isExpressPdp`        | Boolean            |                                                                                             | Set to **true** to start the express flow on the product detail page. The component creates a temporary basket on click.             |
   | `currency`            | String             | PDP only                                                                                    | The currency to use for the synthetic basket built from the product. Required when `isExpressPdp` is **true**.                       |
   | `product`             | Object             | PDP only                                                                                    | The product object with `id`, `price`, `quantity`, and any required `variationAttributes`. Required when `isExpressPdp` is **true**. |
   | `merchantDisplayName` | String             |                                                                                             | Display name shown in the Google Pay sheet.                                                                                          |
   | `configuration`       | Object             |                                                                                             | Display overrides for the Google Pay button, for example `buttonColor`, `buttonType`, and `buttonRadius`.                            |
   | `onError`             | Array of functions |                                                                                             | Callbacks invoked with errors from the environment, payment methods, shipping, or payment flow.                                      |
   | `spinner`             | Node               |                                                                                             | Custom loader rendered while the environment, payment methods, or shipping methods are loading.                                      |
   | `authToken`           | String             |                                                                                             | A pre-fetched SCAPI access token. If not provided, the component fetches one with `useAccessToken`.                                  |
   | `customerId`          | String             |                                                                                             | A pre-fetched customer ID. If not provided, the component fetches one with `useCustomerId`.                                          |

   The component is silently not mounted on browsers or devices that do not support Google Pay.

## See also

* [Express payment methods](/payment-methods/express-checkout)

## Next steps

[Customization guide](/plugins/salesforce-commerce-cloud/composable-storefront/customization-guide)

[Check our customization guide to learn how you can modify your integration.](/plugins/salesforce-commerce-cloud/composable-storefront/customization-guide)

[required](/plugins/salesforce-commerce-cloud/composable-storefront/go-live-checklist)

[Configure your live account](/plugins/salesforce-commerce-cloud/composable-storefront/go-live-checklist)

[Follow this checklist before you start accepting live payments.](/plugins/salesforce-commerce-cloud/composable-storefront/go-live-checklist)