Customization guide

We recommend to start customizing only after you have successfully deployed your app to Managed Runtime, and have tested your integration.

You can customize your integration by overriding default functions of the Adyen npm package. There are different customizations that you can apply:

• Front-end customizations: customize the checkout experience for your shoppers.
• Back-end customizations: customize the default functions the integration can execute, or customize your webhook implementation.

We recommend you to create modularized customizations, and to document the customizations you apply to the integration. You must not modify the Adyen npm package code. This makes it easier to upgrade when there is a new version or troubleshoot if you face any issues.

Front end customizations

There are different customizations you can apply to the front end to create unique shopping experiences. You need to pass your customizations to the AdyenCheckoutProvider.

Below is a list of most commonly applied customizations.

• Customize the checkout appearance:
  • Customize the checkout configuration: Use a custom styled checkout instead of the default Adyen checkout. See Custom styling to learn more.
  • Customize the appearance of configuration elements: Adjust the configuration for payment methods, like the payment button color for a specific payment method. You need to use the paymentMethodsConfiguration object to modify the default appearance of a payment method at checkout.
  • Add translations: Apply UI localizations in your checkout, for example, add translations for the payment button to display in the language of the shopper. See Localization to learn more.
    See our example integration on GitHub to learn how to apply the customizations listed above in your app.
• Customize the shopping experience with additional callbacks: Use the Drop-in configuration events beforeSubmit and onSubmit to modify the default checkout flow. See an example of using additional callbacks in our example integration on GitHub.
• Add additional payment method styling: Use a custom CSS file and import it after the following line in the overrides/app/routes.jsx file.

  import '@adyen/adyen-salesforce-pwa/dist/app/adyen.css'

Back-end customizations

To add additional back-end functions, you can modify the default Adyen controllers or add new controllers. For example, by adding pre-authorization risk check controllers.

After you have set up webhooks, the AUTHORISATION webhook is enabled by default. If you want to receive webhooks for more payment events and implement additional order processing flows, customize your webhook implementation.

You can add custom controllers after Adyen controllers as a list of overrides in the ovverrides/app/ssr.js file. You must set an array so that controllers with custom features are called first when the API calls are triggered, for example:

const overrides = {
   payments: [PrePaymentsController, PaymentsController, PostPaymentsController, SuccessHandler, ErrorHandler],
   webhook: [
      authenticate,
      validateHmac,
      parseNotification,
      authorizationWebhookHandler,
      donationWebhookHandler,
      orderClosedWebhookHandler,
      cancelationWebhookHandler
   ]
}
registerAdyenEndpoints(app, runtime, overrides)

Webhook controller customizations

To extend your webhook implementation:

1. Create a new webhook controller.
   For an example controller, see the AUTHORISATION webhook handler in the package.

2. In your overrides/app/ssr.js file, add the new controller to the list of overrides to extend the default webhook handling.
   For example, if you create a new controller and name it customNotificationHandler, add the webhook to the overrides list, like below:

   import {registerAdyenEndpoints, authenticate, validateHmac, parseNotification} from '@adyen/adyen-salesforce-pwa/dist/ssr/index.js'
   // import your custom notification handler
   import { customNotificationHandler } from "./your-custom-notification-handler"
   
   const overrides = {
     webhook: [
        authenticate,
        validateHmac,
        parseNotification,
        customNotificationHandler
     ]
   }
   // pass overrides object with with your custom webhook handler to registerAdyenEndpoints
   registerAdyenEndpoints(app, runtime, overrides)

After you have extended your webhook implementation, use the B2C Commerce - Orders API to update the order status, payment status, and export status for your PWA store. See how this is done in the example PWA integration with the Adyen package on GitHub for the AUTHORISATION webhook handler.

The package does not have a pre-built integration with our Salesforce Order Management System (OMS) package. To enable compatibility, you need to implement custom webhook handling that syncs orders with the ready for export status to OMS.