---
title: "Customize the plugin"
description: "Learn how to customize your plugin integration with Adyen"
url: "https://docs.adyen.com/plugins/adobe-commerce/customize"
source_url: "https://docs.adyen.com/plugins/adobe-commerce/customize.md"
canonical: "https://docs.adyen.com/plugins/adobe-commerce/customize"
last_modified: "2024-10-25T13:43:00+02:00"
language: "en"
---

# Customize the plugin

Learn how to customize your plugin integration with Adyen

[View source](/plugins/adobe-commerce/customize.md)

You can customize your shoppers' checkout experience and add custom functionality to the plugin to meet your business needs. For example, you can apply modifications to the checkout process, or customize the style of your checkout to match your brand.

To implement these customizations, create a custom module that contains your custom code. We recommend to create an additional module for your custom code so that you do not customize the default Adyen plugin module. This way, you can continue to receive support from Adyen for [supported versions](/plugins/adobe-commerce/#supported-versions).

If you customize the default Adyen plugin, we may be unable to provide support, and upgrading and troubleshooting your integration may require additional effort.

## Requirements

| Requirement          | Description                                                       |
| -------------------- | ----------------------------------------------------------------- |
| **Integration type** | An [Adobe Commerce plugin integration](/plugins/adobe-commerce/). |

## How it works

1. [Create a custom module](#create-a-custom-module), where you can add your custom code.
2. [Add your custom module to Composer](#add-your-custom-module-to-composer), so that you can deploy your custom code.
3. Decide on the type of customizations you need, and [add your customizations](#implement-customizations) to the custom module you have created.
4. [Deploy your customizations](#deploy-your-customizations).

## Create a custom module

Create a custom module that holds your custom code. Read more about [modules in Adobe Commerce documentation](https://developer.adobe.com/commerce/php/architecture/modules/overview/#module-components).

1. Create a new module in your root directory, for example `Example/AdyenCustomizations`.

2. [Create a directory structure for your module](https://experienceleague.adobe.com/en/docs/commerce-learn/tutorials/backend-development/create-module), and include required subdirectories.

   **Example directory structure for a custom module**

   ```php
   app/code/Example/AdyenCustomization/
   ├── etc/
   ├── Block/
   ├── Model/
   ├── Plugin/
   └── view/
   ```

3. In the `app/code/Example/AdyenCustomization/etc/module.xml` file, [define your module with a dependency](https://developer.adobe.com/commerce/php/architecture/modules/dependencies/) on the `Adyen_Payment` module.

   **Define your module and add dependency**

   ```php
   <?xml version="1.0"?>
   <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
      <module name="Example_AdyenCustomization" setup_version="1.0.0"/>
      <sequence>
         <module name="Adyen_Payment"/>
      </sequence>
   </config>
   ```

4. Register the module in `app/code/Example/AdyenCustomization/registration.php`.

   **Register your module**

   ```php
   <?php
   \Magento\Framework\Component\ComponentRegistrar::register(
   \Magento\Framework\Component\ComponentRegistrar::MODULE, // custom module name?
   'Example_AdyenCustomization',
   __DIR__ // ?
   );
   ```

## Add your custom module to Composer

To deploy your code with [Composer](https://developer.adobe.com/commerce/php/development/build/composer-integration/), include `composer.json` in your custom module's root directory.

1. In the root of your custom module directory, create a `composer.json` file.

   **Example composer.json file**

   ```json
   {
      "name": "Example_AdyenCustomization",
      "description": "Customizations for the Adyen payment module.",
      "require": {
         "adyen/module-payment": "YOUR_ADYEN_PAYMENTS_PLUGIN_VERSION"
      },
      "type": "magento2-module",
      "version": "1.0.0", // Your custom module version.
      "repositories": [
         {
          "type": "composer"
         }
      ]
   }
   ```

2. Add the module to the Composer autoload.

   **Add the module to Composer autoload**

   ```bash
   // Add custom module to Composer
   composer require example/adyen-customization

   // Update Composer autoload
   composer dump-autoload
   ```

## Implement customizations

After you have created a custom module, you can start implementing your customizations. You can implement the following types of customization:

* [Override Adyen classes](#override-adyen-classes)
* [Modify default plugin methods](#modify-methods)
* [Customize the checkout UI](#customize-ui)

### Override Adyen classes with Dependency Injections

To override default plugin functionality, override classes using [Adobe Commerce Dependency Injections](https://developer.adobe.com/commerce/php/development/components/dependency-injection/). By overriding default classes, you can change or extend the default plugin behaviors. This can include changing the way transactions are processed for a specific payment method, or integrating your business logic into payment flows.

1. In the [custom module that you created](#create-a-custom-module), add a `di.xml` file.

2. For the Adyen class that you want to override, implement a custom class in your module, for example: `app/code/Example/AdyenCustomization/Model/CustomClass.php`.

3. In your`di.xml` file, configure the custom class to override the specific Adyen class.

   **Override the Adyen Class**

   ```xml
   <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
   <preference for="Adyen\Payment\Model\SomeClass" type="Example\AdyenCustomization\Model\CustomClass" />
   </config>
   ```

### Modify default plugin methods

To make changes to specific methods in the plugin, such as adding logic before or after a method runs, or modifying a method's output, use [Adobe Commerce Plugins](https://developer.adobe.com/commerce/php/development/components/plugins/). This lets you modify the default plugin behaviors without overriding them.

1. In the [custom module that you created](#create-a-custom-module), add a `di.xml` file. If you have [already added a `di.xml` file for Dependency Injections](#override-adyen-classes-with-dependency-injections), you do not have to create a new one.

2. In the `di.xml` file, define a plugin.

   **Define a plugin**

   ```xml
   <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
      <type name="Adyen\Payment\Model\SomeClass">
         <plugin name="custom_plugin" type="Example\AdyenCustomization\Plugin\CustomPlugin"/>
      </type>
   </config>
   ```

3. Create and implement the plugin class in your custom module directory to execute logic before, after, or around methods.

   **Example implementation of a custom plugin**

   ```php
   namespace Example\AdyenCustomization\Plugin;

   class CustomPlugin
   {
      public function beforeSomeMethod($subject, $arg1)
      {
         // Custom logic before the method
      }

      public function afterSomeMethod($subject, $result)
      {
         // Custom logic after the method
         return $result;
      }
   }
   ```

### Customize the checkout UI

You can apply customizations to your checkout page to match your brand's style and format. This includes modifying layout files, adding custom styles, and adding JavaScript for enhanced interactivity.

1. Copy the default Adyen module's layout XML and template files. These files are in the [`view/frontend` ](https://github.com/Adyen/adyen-magento2/tree/main/view/frontend)folder in the default module.

   | File                                                                                               | Description                                                  |
   | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
   | [`view/frontend/layout`](https://github.com/Adyen/adyen-magento2/tree/main/view/frontend/layout)   | The folder that contains the XML layout files.               |
   | [`view/frontend/web/js`](https://github.com/Adyen/adyen-magento2/tree/main/view/frontend/web/js)   | The folder that contains the JavaScript code for the module. |
   | [`view/frontend/web/css`](https://github.com/Adyen/adyen-magento2/tree/main/view/frontend/web/css) | The folder that contains the CSS code for the module.        |

2. Apply your customizations in the files that you have copied.

3. In the `view/frontend` folder of the [custom module that you created](#create-a-custom-module):

   1. Add the files that contain your custom code.
   2. Create a [`require-config.js` ](https://github.com/Adyen/adyen-magento2/blob/main/view/frontend/requirejs-config.js)file, for example: `app/code/Example/AdyenCustomization/view/frontend/requirejs-config.js`. Include your custom JavaScript components, overrides, or modifications in this file.

## Deploy your customizations

Run the following commands to update Composer, clear caches, and deploy the module.

**Deploy the custom module**

```bash
composer dump-autoload
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento cache:clean
php bin/magento cache:flush
```

## Testing

Before you go live, test your customizations in a staging or development environment. We recommend to run automated tests and perform manual tests to make sure your UI changes appear as expected.

Use our [test cards](/development-resources/test-cards-and-credentials/test-card-numbers) to test customizations that change the way the plugin processes payments.

## Next steps

[required](/plugins/adobe-commerce/go-live-checklist)

[Go live](/plugins/adobe-commerce/go-live-checklist)

[After you have tested your customizations, follow our Go-live checklist, and deploy the customizations in the live environment.](/plugins/adobe-commerce/go-live-checklist)

[Troubleshoot](/plugins/adobe-commerce/troubleshooting/)

[Monitor your customizations and follow the steps in our Troubleshooting guide if you experience any issues.](/plugins/adobe-commerce/troubleshooting/)