Enable Adyen as your payment processor<\/h2>\n
To enable Adyen as the payment processor for cards and other local payment methods that you have added in your Customer Area:<\/p>\n
- \n
- In the Salesforce Business Manager, go to Merchant tools<\/strong> > Ordering<\/strong> > Payment Methods<\/strong>.<\/li>\n
- In the Payment Methods overview, check the ID<\/strong> column to make sure that AdyenComponent<\/strong> and CREDIT_CARD<\/strong> are enabled.<\/li>\n
- Under Details, set Payment Processor<\/strong> to Adyen_Component<\/strong> for both types.<\/li>\n<\/ol>\n
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.<\/p>\n
Apple Pay<\/h2>\n
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<\/a>. To set up Apple Pay:<\/p>\n
- \n
- Enable Apple Pay<\/a>.<\/li>\n
- Optionally, set up Apple Pay express<\/a>.<\/li>\n
- Make test payments<\/a> with Apple Pay.<\/li>\n
- Go live<\/a>.<\/li>\n<\/ol>\n
Enable Apple Pay<\/h3>\n
- \n
- Set up your server<\/a> for secure communication with Apple Pay.\n
- \n
- All pages that include Apple Pay must be served over HTTPS.<\/li>\n
- Your domain must have a valid SSL certificate.<\/li>\n<\/ul><\/li>\n
- Add Apple Pay in your test Customer Area<\/a>.\n
- \n
- You'll be asked for Shop websites<\/strong>: your website URLs, for example
https:\/\/www.mystore.com<\/code>. If you add more than one, separate them with a comma.<\/li>\n- You cannot use
http:\/\/localhost<\/code> to test.<\/li>\n<\/ul><\/li>\n<\/ol>\n(Optional) Set up Apple Pay express<\/h3>\n
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.<\/p>\n
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.<\/p>\n\n
\n\nTesting<\/h3>\n
Use Apple's test card numbers to test your integration. Refer to Apple Documentation<\/a> for a full list of test cards and instructions on how to add those to your test device.<\/p>\n
You can check the status of an Apple Pay test payment in Customer Area<\/a> > Transactions<\/strong> > Payments<\/strong>.<\/p>\n
Go live<\/h3>\n
To process live Apple Pay payments, follow the steps that are relevant to your version.<\/p>\n\n
\n\nClick to Pay<\/h2>\n
Click to Pay<\/a> is supported on v4.1.0 and later. To set up Click to Pay, you need to<\/p>\n
To set up Click to Pay:<\/p>\n
- \n
- \n
To allow scripts and iframes from external sources<\/a>, which is required to load Click to Pay, configure your Content Security Policy (CSP)<\/a>:<\/p>\n
- \n
- Go to the
overrides\/app\/ssr.js<\/code> file of your Retail React App, where you will add the required domains.<\/li>\n- Add the following Visa and Mastercard domains to the script-src<\/strong>, img-src<\/strong>, frame-src<\/strong>, and connect-src<\/strong> directives:\n
- \n
- *.mastercard.com<\/strong><\/li>\n
- *.visa.com<\/strong><\/li>\n<\/ul><\/li>\n<\/ol>\n
For an example, refer to example implementation on GitHub<\/a>.<\/p>\n<\/li>\n
- \n
Optionally, configure a Merchant Display name that will be shown on the Click to Pay dialog.<\/p>\n
- \n
- In your
AdyenCheckout<\/code> component instance<\/a>, set themerchantDisplayName<\/code> to your preferred display name.<\/li>\n<\/ul>\n\n<\/code-sample>\n<\/div>\n<\/li>\n<\/ol>\n Credit card installments<\/h2>\n
\nCredit card installments are optionally available in some countries. To learn more about their availability, see Credit card installments<\/a>.<\/p>\n<\/div>\n
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<\/strong> 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<\/code>, and shown on the order confirmation page.<\/p>\n\nInstallments only apply to regular card payments. Express checkouts (Apple Pay, Google Pay, and PayPal express) do not surface the installments UI.<\/p>\n<\/div>\n
Requirements<\/h3>\n
- \n
- In your test Customer Area<\/a>, enable installments for each combination of merchant account, card scheme, and country that you want to support. Without this, the
\/payments<\/code> request fails with an installments-not-allowed error even if the storefront submits a valid value.<\/li>\n- \n
Installments are only allowed for the following country and currency combinations:<\/p>\n
- \n
- In your test Customer Area<\/a>, enable installments for each combination of merchant account, card scheme, and country that you want to support. Without this, the
- *.visa.com<\/strong><\/li>\n<\/ul><\/li>\n<\/ol>\n
- Add the following Visa and Mastercard domains to the script-src<\/strong>, img-src<\/strong>, frame-src<\/strong>, and connect-src<\/strong> directives:\n
- Go to the
- You cannot use
- You'll be asked for Shop websites<\/strong>: your website URLs, for example
- Optionally, set up Apple Pay express<\/a>.<\/li>\n
- In the Payment Methods overview, check the ID<\/strong> column to make sure that AdyenComponent<\/strong> and CREDIT_CARD<\/strong> are enabled.<\/li>\n
![\"-white_check_mark-\"](\"\/user\/data\/smileys\/emoji\/white_check_mark.png\" "\\"-white_check_mark-\\"")
<\/td>\n