In the world of online transactions, providing a secure and easy to configure payment experience will help a lot of any e-commerce business. Adyen, a payment provider service offers a robust and customizable payment integration for your needs. Ensuring you have all your needs to craft a payment experience that will meet your user’s needs. Adyen allows businesses to accept e-commerce, mobile, and point-of-sale payments.

If you want to know the difference between Adyen Web Components and Adyen Drop-in, you can check this link for a comparison Drop-in VS Web Components: Getting started with Adyen | Goodfrontend.

In this article, I will give you an overview of how to integrate Adyen Web Components into your application.

Integration and Configuration:

To start using Adyen install the Adyen web node package first using npm or yarn


Once installed, you can import the Adyen into your application and create a configuration object. This object contains important parameters such as clientKey, environment, session and also optional settings like analytics. This is where we also configure the payment methods that we want to add into our application.

Create a DOM element for the Component to be rendered let’s use ID so it’s unique

Create a configuration object inside the file. Make sure to replace the placeholders such as clientKey, locale, translations, session id and session data.

AdyenWebComponent.js

You can customize your localization as well, you need to create a translation object.

If you have your own json file for localization on each locale. You can add the translation on the translations object

Do note that Adyen already covered some of the locales, you can check their github to check which locale are already covered Adyen Locales.

You can also add event handlers onto the global configuration such as onError, onChange, onSubmit etc. You can check more events here.

Custom Styling

Adyen Web Components have their own styling for easy to use, but you can also customize it based on your design. This needs a lot of time and effort because you need to override the default css style on each component. So, make sure you ready your dev tools inspect. Adyen uses the BEM method and this is an example of how to style the checkout pay button.

You can also style each component in the paymentMethodsConfiguration

Here’s an example of changing the font color of card payment. You can provide styling for the following:

• Base
• Placeholder
• Error
• Validated

Conclusion

Integrating Adyen Web Components into your react application provides a foundation for a secure and localized payment. By understanding the configuring options, localization techniques and customization abilities of web components. You can create a payment that is tailored to your needs and enhance the user’s shopping experience. Leverage the Adyen’s powerful tools to make sure that your customer enjoy a fast and delightful payment journey