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.

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>
       )
    }

See also

• Express payment methods