Customize the plugin

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.

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

How it works

1. Create a custom module, where you can add your custom code.
2. 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 to the custom module you have created.
4. Deploy your customizations.

Create a custom module

Create a custom module that holds your custom code. Read more about modules in Adobe Commerce documentation.

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

2. Create a directory structure for your module, and include required subdirectories.

3. In the app/code/Example/AdyenCustomization/etc/module.xml file, define your module with a dependency on the Adyen_Payment module.

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

Add your custom module to Composer

To deploy your code with Composer, include composer.json in your custom module's root directory.

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

2. Add the module to the Composer 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
• Modify default plugin methods
• Customize the checkout UI

Override Adyen classes with Dependency Injections

To override default plugin functionality, override classes using Adobe Commerce Dependency Injections. 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, 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 yourdi.xml file, configure the custom class to override the specific Adyen class.

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. This lets you modify the default plugin behaviors without overriding them.

1. In the custom module that you created, add a di.xml file. If you have already added a di.xml file for Dependency Injections, you do not have to create a new one.

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

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

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 folder in the default module.

   File	Description
   view/frontend/layout	The folder that contains the XML layout files.
   view/frontend/web/js	The folder that contains the JavaScript code for the module.
   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:

   1. Add the files that contain your custom code.
   2. Create a require-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.

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 to test customizations that change the way the plugin processes payments.