Plugin icon

Set up payment methods

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

Before you begin

Before you can set up payment methods in your Salesforce Business Manager, you need to add payment methods to 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 work out of the box and do not require additional configuration. When a payment method requires additional setup, the 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. 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.

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

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

Test your integration

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

  1. Download and unzip the Apple Pay domain association file from our Apple Pay docs. 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, add a YOUR_SITE_ID_ADYEN_APPLE_DOMAIN_ASSOCIATION variable.
  3. Copy and paste the domain association file content to set the variable value, like the following:
    YOUR_SITE_ID_ADYEN_APPLE_DOMAIN_ASSOCIATION="7B227..."

See also

Next steps