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.

   Example directory structure for a custom module

   Expand view

   Copy link to code block

   Copy code

   Copy code

   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 on the Adyen_Payment module.

   Define your module and add dependency

   Expand view

   Copy link to code block

   Copy code

   Copy code

   <?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

   Expand view

   Copy link to code block

   Copy code

   Copy code

   <?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, 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

   Expand view

   Copy link to code block

   Copy code

   Copy code

   {
      "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

   Expand view

   Copy link to code block

   Copy code

   Copy code

   // 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
• 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.
   Override the Adyen Class

   Expand view

   Copy link to code block

   Copy code

   Copy code

   <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. 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.

   Define a plugin

   Expand view

   Copy link to code block

   Copy code

   Copy code

   <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

   Expand view

   Copy link to code block

   Copy code

   Copy code

   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 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.

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