Set up payment methods

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

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. To set up Apple Pay:

1. Enable Apple Pay.
2. Optionally, set up Apple Pay express.
3. Make test payments with Apple Pay.
4. Go live.

Enable Apple Pay

1. Set 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.
   • 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.

Testing

Use Apple's test card numbers to test your integration. Refer to Apple Documentation 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 > Transactions > Payments.

Go live

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

Click to Pay

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, which is required to load Click to Pay, configure your Content Security Policy (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.

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

   • In your AdyenCheckout component instance, set the merchantDisplayName to your preferred display name.

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.

Requirements

• In your test Customer Area, 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:

   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.

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

   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:

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.

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

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.

    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 in your test Customer Area. 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 and register your storefront origins in your Google Pay & Wallet 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.

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

3. Use the following properties to configure the component:

   Property	Type	Required	Description
   locale	Object		The locale object. The locale.id is forwarded to AdyenWeb and used to derive the Google Pay countryCode.
   site	Object		The current site object.
   basket	Object	Cart only	The current basket. Required in cart mode and ignored when isExpressPdp is true.
   navigate	Function		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