---
title: "Customization guide"
description: "Customize your composable storefront integration."
url: "https://docs.adyen.com/plugins/salesforce-commerce-cloud/composable-storefront/customization-guide"
source_url: "https://docs.adyen.com/plugins/salesforce-commerce-cloud/composable-storefront/customization-guide.md"
canonical: "https://docs.adyen.com/plugins/salesforce-commerce-cloud/composable-storefront/customization-guide"
last_modified: "2024-09-11T16:49:00+02:00"
language: "en"
---

# Customization guide

Customize your composable storefront integration.

[View source](/plugins/salesforce-commerce-cloud/composable-storefront/customization-guide.md)

We recommend to start customizing only after you have [successfully deployed your app to Managed Runtime](/plugins/salesforce-commerce-cloud/composable-storefront/install-and-set-up-the-package#deploy-to-mrt), and have [tested your integration](/plugins/salesforce-commerce-cloud/composable-storefront/install-and-set-up-the-package#test-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](#front-end-customizations): customize the checkout experience for your shoppers.
* [Back-end customizations](#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](/plugins/salesforce-commerce-cloud/composable-storefront/upgrade) when there is a new version or [troubleshoot](/plugins/salesforce-commerce-cloud/composable-storefront/troubleshooting) 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](/online-payments/build-your-integration/sessions-flow/?platform=Web\&integration=Drop-in\&version=5.63.0#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](/online-payments/build-your-integration/sessions-flow/?platform=Web\&integration=Drop-in\&version=5.63.0#localization) to learn more.\
    [See our example integration on GitHub](https://github.com/Adyen/adyen-salesforce-headless-commerce-pwa/blob/main/packages/adyen-retail-react-app/overrides/app/pages/checkout/index.jsx#L89) 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](/online-payments/build-your-integration/sessions-flow/?platform=Web\&integration=Drop-in\&version=5.63.0#drop-in-configuration) `beforeSubmit` and `onSubmit` to modify the default checkout flow. See an example of using additional callbacks [in our example integration on GitHub](https://github.com/Adyen/adyen-salesforce-headless-commerce-pwa/blob/develop/packages/adyen-retail-react-app/overrides/app/pages/checkout/partials/payment.jsx#L125).

* **Add additional payment method styling**: Use a custom CSS file and import it after the following line in the `overrides/app/routes.jsx` file.
  ```js
  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.

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:

```js
const overrides = {
   payments: [PrePaymentsController, PaymentsController, PostPaymentsController, SuccessHandler, ErrorHandler],
}
registerAdyenEndpoints(app, runtime, overrides)
```

## Webhook controller customizations

After you have [set up webhooks](/plugins/salesforce-commerce-cloud/composable-storefront/install-and-set-up-the-package#set-up-webhooks), the [AUTHORISATION](https://docs.adyen.com/api-explorer/Webhooks/1/post/AUTHORISATION) webhook is enabled by default. If you want to receive webhooks for [more payment events](/development-resources/webhooks/webhook-types#event-codes) and implement additional order processing flows, extend your webhook implementation.

To extend your webhook implementation:

1. Create a new webhook controller.\
   For an example controller, see the [AUTHORISATION webhook handler](https://github.com/Adyen/adyen-salesforce-headless-commerce-pwa/blob/c32b81aedb296896b718cede348740455a3405d0/packages/adyen-salesforce-pwa/lib/api/controllers/authorization-webhook-handler.js) in the package.

2. [In your `overrides/app/ssr.js` file](/plugins/salesforce-commerce-cloud/composable-storefront/install-and-set-up-the-package#install-the-adyen-package-in-your-local-pwa-app), 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:

   ```js
   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](https://developer.salesforce.com/docs/commerce/commerce-api/references/orders?meta=Summary) 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](https://github.com/Adyen/adyen-salesforce-headless-commerce-pwa/blob/c32b81aedb296896b718cede348740455a3405d0/packages/adyen-salesforce-pwa/lib/api/controllers/authorization-webhook-handler.js#L30).

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