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.

See also

• Express payment methods