How can we customise the Adobe Commerce plugin? (Magento)

Customizing isn’t recommended but you can adjust styling

We don’t recommend or support the customization of the plugin. However, we understand you might want to make some styling changes in the default plugin. Changing the styling shouldn’t negatively impact the plugin, but please note we don’t support any customisations of the order flow.

From version 4.1.0 onwards, we replaced the HPP integration with components within Adobe Commerce. This way you can use CSS styling instead of customisation through skins.

Tip: Follow the Adobe Commerce Customisation guide to ensure the customization is done properly, without interfering with other modules.

Styling within Adobe Commerce

The StyleObject should be added here, the StyleObject is defined in our documentation through the styles field. The CSS Styles can be adjusted here.

Changing the payment method name

To change the payment method name, you can do some changes within the adyen hpp method.

  1. Define another variable called method, then set it to paymentMethod.methodIdentifier, and do the the same for title and set it to paymentMethod.name
  2. Then, write an if statement to check if the method is the payment method you want to change and if it matches, then it will change the title to your needs.
    An example is:

var method = paymentMethod.methodIdentifier; var title = paymentMethod.name; if (method === '[paymentmethodtxvariant]'){ title = 'New Name'; paymentMethod.name = 'New Name'; } var result = { isAvailable: ko.observable(true), paymentMethod: paymentMethod, method: self.item.method, item: { "title": title, "method": method },

Tip: To change any of the default logos, replace them in the logos folder.

Note: We recommend you review and test any customizations or third-party extensions that you use in combination with this plugin. For more information refer to the technical release notes on GitHub.

Learn more

Find more details on this topic.

Go to Adyen Docs
The illustration of support agent wearing a headset.

Do you need additional help?

Contact our support team

Send us the details of your issue by adding images or screenshots.

Submit a request