{"title":"Customize the plugin","category":"default","creationDate":1670928420,"content":"<p>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.<\/p>\n<p>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 <a href=\"\/pt\/plugins\/adobe-commerce\/#supported-versions\">supported versions<\/a>.<\/p>\n<p>If you customize the default Adyen plugin, we may be unable to provide support, and upgrading and troubleshooting your integration may require additional effort.<\/p>\n<h2>Requirements<\/h2>\n<table>\n<thead>\n<tr>\n<th style=\"text-align: left;\">Requirement<\/th>\n<th style=\"text-align: left;\">Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"text-align: left;\"><strong>Integration type<\/strong><\/td>\n<td style=\"text-align: left;\">An <a href=\"\/pt\/plugins\/adobe-commerce\/\">Adobe Commerce plugin integration<\/a>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>How it works<\/h2>\n<ol>\n<li><a href=\"#create-a-custom-module\">Create a custom module<\/a>, where you can add your custom code.<\/li>\n<li><a href=\"#add-your-custom-module-to-composer\">Add your custom module to Composer<\/a>, so that you can deploy your custom code.<\/li>\n<li>Decide on the type of customizations you need, and <a href=\"#implement-customizations\">add your customizations<\/a> to the custom module you have created.<\/li>\n<li><a href=\"#deploy-your-customizations\">Deploy your customizations<\/a>.<\/li>\n<\/ol>\n<h2 id=\"create-a-custom-module\">Create a custom module<\/h2>\n<p>Create a custom module that holds your custom code. Read more about <a href=\"https:\/\/developer.adobe.com\/commerce\/php\/architecture\/modules\/overview\/#module-components\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">modules in Adobe Commerce documentation<\/a>.<\/p>\n<ol>\n<li>\n<p>Create a new module in your root directory, for example <code>Example\/AdyenCustomizations<\/code>.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/experienceleague.adobe.com\/en\/docs\/commerce-learn\/tutorials\/backend-development\/create-module\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Create a directory structure for your module<\/a>, and include required subdirectories.<\/p>\n<div data-component-wrapper=\"code-sample\">\n<code-sample :title=\"'Example directory structure for a custom module'\" :id=\"''\" :code-data='[{\"language\":\"php\",\"tabTitle\":\"\",\"content\":\"app\\\/code\\\/Example\\\/AdyenCustomization\\\/\\n\\u251c\\u2500\\u2500 etc\\\/\\n\\u251c\\u2500\\u2500 Block\\\/\\n\\u251c\\u2500\\u2500 Model\\\/\\n\\u251c\\u2500\\u2500 Plugin\\\/\\n\\u2514\\u2500\\u2500 view\\\/\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<\/li>\n<li>\n<p>In the <code>app\/code\/Example\/AdyenCustomization\/etc\/module.xml<\/code> file, <a href=\"https:\/\/developer.adobe.com\/commerce\/php\/architecture\/modules\/dependencies\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">define your module with a dependency<\/a> on the <code>Adyen_Payment<\/code> module.<\/p>\n<div data-component-wrapper=\"code-sample\">\n<code-sample :title=\"'Define your module and add dependency'\" :id=\"''\" :code-data='[{\"language\":\"php\",\"tabTitle\":\"\",\"content\":\"&lt;?xml version=\\\"1.0\\\"?&gt;\\n&lt;config xmlns:xsi=\\\"http:\\\/\\\/www.w3.org\\\/2001\\\/XMLSchema-instance\\\" xsi:noNamespaceSchemaLocation=\\\"urn:magento:framework:Module\\\/etc\\\/module.xsd\\\"&gt;\\n   &lt;module name=\\\"Example_AdyenCustomization\\\" setup_version=\\\"1.0.0\\\"\\\/&gt;\\n   &lt;sequence&gt;\\n      &lt;module name=\\\"Adyen_Payment\\\"\\\/&gt;\\n   &lt;\\\/sequence&gt;\\n&lt;\\\/config&gt;\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<\/li>\n<li>\n<p>Register the module in <code>app\/code\/Example\/AdyenCustomization\/registration.php<\/code>.<\/p>\n<div data-component-wrapper=\"code-sample\">\n<code-sample :title=\"'Register your module'\" :id=\"''\" :code-data=\"[{&quot;language&quot;:&quot;php&quot;,&quot;tabTitle&quot;:&quot;&quot;,&quot;content&quot;:&quot;&lt;?php\\n\\\\Magento\\\\Framework\\\\Component\\\\ComponentRegistrar::register(\\n\\\\Magento\\\\Framework\\\\Component\\\\ComponentRegistrar::MODULE, \\\/\\\/ custom module name?\\n'Example_AdyenCustomization',\\n__DIR__ \\\/\\\/ ?\\n);&quot;}]\" :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<\/li>\n<\/ol>\n<h2>Add your custom module to Composer<\/h2>\n<p>To deploy your code with <a href=\"https:\/\/developer.adobe.com\/commerce\/php\/development\/build\/composer-integration\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Composer<\/a>, include <code>composer.json<\/code> in your custom module's root directory.<\/p>\n<ol>\n<li>\n<p>In the root of your custom module directory, create a <code>composer.json<\/code> file.<\/p>\n<div data-component-wrapper=\"code-sample\">\n<code-sample :title=\"'Example composer.json file'\" :id=\"''\" :code-data='[{\"language\":\"json\",\"tabTitle\":\"\",\"content\":\"{\\n   \\\"name\\\": \\\"Example_AdyenCustomization\\\",\\n   \\\"description\\\": \\\"Customizations for the Adyen payment module.\\\",\\n   \\\"require\\\": {\\n      \\\"adyen\\\/module-payment\\\": \\\"YOUR_ADYEN_PAYMENTS_PLUGIN_VERSION\\\"\\n   },\\n   \\\"type\\\": \\\"magento2-module\\\",\\n   \\\"version\\\": \\\"1.0.0\\\", \\\/\\\/ Your custom module version.\\n   \\\"repositories\\\": [\\n      {\\n       \\\"type\\\": \\\"composer\\\"\\n      }\\n   ]\\n}\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<\/li>\n<li>\n<p>Add the module to the Composer autoload.<\/p>\n<div data-component-wrapper=\"code-sample\">\n<code-sample :title=\"'Add the module to Composer autoload'\" :id=\"''\" :code-data='[{\"language\":\"bash\",\"tabTitle\":\"\",\"content\":\"\\\/\\\/ Add custom module to Composer\\ncomposer require example\\\/adyen-customization\\n\\n\\\/\\\/ Update Composer autoload\\ncomposer dump-autoload\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<\/li>\n<\/ol>\n<h2>Implement customizations<\/h2>\n<p>After you have created a custom module, you can start implementing your customizations. You can implement the following types of customization:<\/p>\n<ul>\n<li><a href=\"#override-adyen-classes\">Override Adyen classes<\/a><\/li>\n<li><a href=\"#modify-methods\">Modify default plugin methods<\/a><\/li>\n<li><a href=\"#customize-ui\">Customize the checkout UI<\/a><\/li>\n<\/ul>\n<h3 id=\"override-adyen-classes-with-dependency-injections\">Override Adyen classes with Dependency Injections<\/h3>\n<p>To override default plugin functionality, override classes using <a href=\"https:\/\/developer.adobe.com\/commerce\/php\/development\/components\/dependency-injection\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Adobe Commerce Dependency Injections<\/a>. 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.<\/p>\n<ol>\n<li>In the <a href=\"#create-a-custom-module\">custom module that you created<\/a>, add a <code>di.xml<\/code> file.<\/li>\n<li>For the Adyen class that you want to override, implement a custom class in your module, for example: <code>app\/code\/Example\/AdyenCustomization\/Model\/CustomClass.php<\/code>.<\/li>\n<li>In your<code>di.xml<\/code> file, configure the custom class to override the specific Adyen class.\n<div data-component-wrapper=\"code-sample\">\n<code-sample :title=\"'Override the Adyen Class'\" :id=\"''\" :code-data='[{\"language\":\"xml\",\"tabTitle\":\"\",\"content\":\"&lt;config xmlns:xsi=\\\"http:\\\/\\\/www.w3.org\\\/2001\\\/XMLSchema-instance\\\" xsi:noNamespaceSchemaLocation=\\\"urn:magento:framework:ObjectManager\\\/etc\\\/config.xsd\\\"&gt;\\n&lt;preference for=\\\"Adyen\\\\Payment\\\\Model\\\\SomeClass\\\" type=\\\"Example\\\\AdyenCustomization\\\\Model\\\\CustomClass\\\" \\\/&gt;\\n&lt;\\\/config&gt;\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div><\/li>\n<\/ol>\n<h3 id=\"modify-methods\">Modify default plugin methods<\/h3>\n<p>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 <a href=\"https:\/\/developer.adobe.com\/commerce\/php\/development\/components\/plugins\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Adobe Commerce Plugins<\/a>. This lets you modify the default plugin behaviors without overriding them.<\/p>\n<ol>\n<li>\n<p>In the <a href=\"#create-a-custom-module\">custom module that you created<\/a>, add a <code>di.xml<\/code> file. If you have <a href=\"#override-adyen-classes-with-dependency-injections\">already added a <code>di.xml<\/code> file for Dependency Injections<\/a>, you do not have to create a new one.<\/p>\n<\/li>\n<li>\n<p>In the <code>di.xml<\/code> file, define a plugin.<\/p>\n<div data-component-wrapper=\"code-sample\">\n<code-sample :title=\"'Define a plugin'\" :id=\"''\" :code-data='[{\"language\":\"xml\",\"tabTitle\":\"\",\"content\":\"&lt;config xmlns:xsi=\\\"http:\\\/\\\/www.w3.org\\\/2001\\\/XMLSchema-instance\\\" xsi:noNamespaceSchemaLocation=\\\"urn:magento:framework:ObjectManager\\\/etc\\\/config.xsd\\\"&gt;\\n   &lt;type name=\\\"Adyen\\\\Payment\\\\Model\\\\SomeClass\\\"&gt;\\n      &lt;plugin name=\\\"custom_plugin\\\" type=\\\"Example\\\\AdyenCustomization\\\\Plugin\\\\CustomPlugin\\\"\\\/&gt;\\n   &lt;\\\/type&gt;\\n&lt;\\\/config&gt;\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<\/li>\n<li>\n<p>Create and implement the plugin class in your custom module directory to execute logic before, after, or around methods.<\/p>\n<div data-component-wrapper=\"code-sample\">\n<code-sample :title=\"'Example implementation of a custom plugin'\" :id=\"''\" :code-data='[{\"language\":\"php\",\"tabTitle\":\"\",\"content\":\"namespace Example\\\\AdyenCustomization\\\\Plugin;\\n\\nclass CustomPlugin\\n{\\n   public function beforeSomeMethod($subject, $arg1)\\n   {\\n      \\\/\\\/ Custom logic before the method\\n   }\\n\\n   public function afterSomeMethod($subject, $result)\\n   {\\n      \\\/\\\/ Custom logic after the method\\n      return $result;\\n   }\\n}\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<\/li>\n<\/ol>\n<h3 id=\"customize-ui\">Customize the checkout UI<\/h3>\n<p>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.<\/p>\n<ol>\n<li>\n<p>Copy the default Adyen module's layout XML and template files. These files are in the <a href=\"https:\/\/github.com\/Adyen\/adyen-magento2\/tree\/main\/view\/frontend\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">\n  <code>view\/frontend<\/code>\n<\/a> folder in the default module.<\/p>\n<table>\n<thead>\n<tr>\n<th>File<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/github.com\/Adyen\/adyen-magento2\/tree\/main\/view\/frontend\/layout\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">\n  <code>view\/frontend\/layout<\/code>\n<\/a><\/td>\n<td>The folder that contains the XML layout files.<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/github.com\/Adyen\/adyen-magento2\/tree\/main\/view\/frontend\/web\/js\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">\n  <code>view\/frontend\/web\/js<\/code>\n<\/a><\/td>\n<td>The folder that contains the JavaScript code for the module.<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/github.com\/Adyen\/adyen-magento2\/tree\/main\/view\/frontend\/web\/css\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">\n  <code>view\/frontend\/web\/css<\/code>\n<\/a><\/td>\n<td>The folder that contains the CSS code for the module.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n<li>\n<p>Apply your customizations in the files that you have copied.<\/p>\n<\/li>\n<li>\n<p>In the <code>view\/frontend<\/code> folder of the <a href=\"#create-a-custom-module\">custom module that you created<\/a>:<\/p>\n<ol>\n<li>Add the files that contain your custom code.<\/li>\n<li>Create a <a href=\"https:\/\/github.com\/Adyen\/adyen-magento2\/blob\/main\/view\/frontend\/requirejs-config.js\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">\n  <code>require-config.js<\/code>\n<\/a> file, for example: <code>app\/code\/Example\/AdyenCustomization\/view\/frontend\/requirejs-config.js<\/code>. Include your custom JavaScript components, overrides, or modifications in this file.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<h2 id=\"deploy-your-customizations\">Deploy your customizations<\/h2>\n<p>Run the following commands to update Composer, clear caches, and deploy the module.<\/p>\n<div data-component-wrapper=\"code-sample\">\n    <code-sample :title=\"'Deploy the custom module'\" :id=\"''\" :code-data='[{\"language\":\"bash\",\"tabTitle\":\"\",\"content\":\"composer dump-autoload\\nphp bin\\\/magento setup:upgrade\\nphp bin\\\/magento setup:di:compile\\nphp bin\\\/magento cache:clean\\nphp bin\\\/magento cache:flush\"}]' :enable-copy-link-to-code-block=\"true\" :code-sample-card-size=\"'fullsize'\"><\/code-sample>\n<\/div>\n<h2>Testing<\/h2>\n<p>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.<\/p>\n<p>Use our <a href=\"\/pt\/development-resources\/test-cards-and-credentials\/test-card-numbers\">test cards<\/a> to test customizations that change the way the plugin processes payments.<\/p>","url":"https:\/\/docs.adyen.com\/pt\/plugins\/adobe-commerce\/customize","articleFields":{"description":"Learn how to customize your plugin integration with Adyen","id":"39953528","type":"page","_expandable":{"operations":""},"next_steps":[{"title":"Go live","description":"After you have tested your customizations, follow our Go-live checklist, and deploy the customizations in the live environment.","url":"\/plugins\/adobe-commerce\/go-live-checklist","required":true},{"title":"Troubleshoot","description":"Monitor your customizations and follow the steps in our Troubleshooting guide if you experience any issues.","url":"\/plugins\/adobe-commerce\/troubleshooting\/","required":false}],"status":"current","last_edit_on":"25-10-2024 13:43","feedback_component":true,"filters_component":false,"decision_tree":"[]","page_id":"526e99b1-8acb-4eb0-9713-537f5f5694bb"},"algolia":{"url":"https:\/\/docs.adyen.com\/pt\/plugins\/adobe-commerce\/customize","title":"Customize the plugin","content":"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.\nTo 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.\nIf you customize the default Adyen plugin, we may be unable to provide support, and upgrading and troubleshooting your integration may require additional effort.\nRequirements\n\n\n\nRequirement\nDescription\n\n\n\n\nIntegration type\nAn Adobe Commerce plugin integration.\n\n\n\nHow it works\n\nCreate a custom module, where you can add your custom code.\nAdd your custom module to Composer, so that you can deploy your custom code.\nDecide on the type of customizations you need, and add your customizations to the custom module you have created.\nDeploy your customizations.\n\nCreate a custom module\nCreate a custom module that holds your custom code. Read more about modules in Adobe Commerce documentation.\n\n\nCreate a new module in your root directory, for example Example\/AdyenCustomizations.\n\n\nCreate a directory structure for your module, and include required subdirectories.\n\n\n\n\n\nIn the app\/code\/Example\/AdyenCustomization\/etc\/module.xml file, define your module with a dependency on the Adyen_Payment module.\n\n\n\n\n\nRegister the module in app\/code\/Example\/AdyenCustomization\/registration.php.\n\n\n\n\n\nAdd your custom module to Composer\nTo deploy your code with Composer, include composer.json in your custom module's root directory.\n\n\nIn the root of your custom module directory, create a composer.json file.\n\n\n\n\n\nAdd the module to the Composer autoload.\n\n\n\n\n\nImplement customizations\nAfter you have created a custom module, you can start implementing your customizations. You can implement the following types of customization:\n\nOverride Adyen classes\nModify default plugin methods\nCustomize the checkout UI\n\nOverride Adyen classes with Dependency Injections\nTo 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.\n\nIn the custom module that you created, add a di.xml file.\nFor the Adyen class that you want to override, implement a custom class in your module, for example: app\/code\/Example\/AdyenCustomization\/Model\/CustomClass.php.\nIn yourdi.xml file, configure the custom class to override the specific Adyen class.\n\n\n\n\nModify default plugin methods\nTo 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.\n\n\nIn 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.\n\n\nIn the di.xml file, define a plugin.\n\n\n\n\n\nCreate and implement the plugin class in your custom module directory to execute logic before, after, or around methods.\n\n\n\n\n\nCustomize the checkout UI\nYou 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.\n\n\nCopy the default Adyen module's layout XML and template files. These files are in the \n  view\/frontend\n folder in the default module.\n\n\n\nFile\nDescription\n\n\n\n\n\n  view\/frontend\/layout\n\nThe folder that contains the XML layout files.\n\n\n\n  view\/frontend\/web\/js\n\nThe folder that contains the JavaScript code for the module.\n\n\n\n  view\/frontend\/web\/css\n\nThe folder that contains the CSS code for the module.\n\n\n\n\n\nApply your customizations in the files that you have copied.\n\n\nIn the view\/frontend folder of the custom module that you created:\n\nAdd the files that contain your custom code.\nCreate a \n  require-config.js\n file, for example: app\/code\/Example\/AdyenCustomization\/view\/frontend\/requirejs-config.js. Include your custom JavaScript components, overrides, or modifications in this file.\n\n\n\nDeploy your customizations\nRun the following commands to update Composer, clear caches, and deploy the module.\n\n    \n\nTesting\nBefore 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.\nUse our test cards to test customizations that change the way the plugin processes payments.","type":"page","locale":"pt","boost":17,"hierarchy":{"lvl0":"Home","lvl1":"Plugins","lvl2":"Adobe Commerce","lvl3":"Customize the plugin"},"hierarchy_url":{"lvl0":"https:\/\/docs.adyen.com\/pt","lvl1":"https:\/\/docs.adyen.com\/pt\/plugins","lvl2":"https:\/\/docs.adyen.com\/pt\/plugins\/adobe-commerce","lvl3":"\/pt\/plugins\/adobe-commerce\/customize"},"levels":4,"category":"Plugins","category_color":"green","tags":["Customize","plugin"]}}
