Drop-in VS Web Components: Getting started with Adyen

What is Adyen? 

Adyen is a payment processing company that accepts hundreds of payment methods with direct connectivity to card schemes and fraud protection. Adyen payment services enable business owners to take payments in the manner that bests suits their needs. They offer several services to businesses which include a payment gateway for online payments, where you can create checkout experiences for your website in-app and mobile devices, and point-of-sale to integrate in-store payment terminals as stand-alone or into the merchant’s cash registry.

In this article, we will be discussing Adyen as a payment gateway for online payments specifically on how to decide what integration method to use for your website. Adyen has multiple ways to integrate their online payments APIs, but we’ll be focusing on the two pre-built UI solutions for accepting Adyen payments: Web Drop-in and Web Components. 

Web Drop-in

Web Drop-in or Drop-in is one of the integration options that Adyen offers for accepting payments on your website. It is a pre-built checkout that shows all the payment methods in a collapsible list or accordion. This method is quicker to integrate since a large part of the frontend pieces are kind of done for you which means less development work. 

Adyen provides a Customer Area where you can enable and disable payment methods depending on your customer’s country and also configure in which order the payment methods are rendered. This is how easily you can add a payment method to your website using Drop-in.

You can also customize the Drop-in UI to fit the styling to your brand and the language to your customers.

Here is a sample display of Drop-in as shown below taken from Adyen’s Web app.

Web Components

Compared to Drop-in, Web Components provide you with greater flexibility over how your payments UI is shown. This integration method requires more frontend development work since each payment method is configured individually which allows you to place any payment method anywhere and in any way on your website. For example, you can display your payment methods as a list, in tabs, or on separate pages or screens. 

Similar to Drop-in, Web Component’s UI can also be customized, to match the styling to your brand and the language to your customer.

Below is a sample display of Web Components for some payment methods taken from Adyen’s Web app.

Final thoughts

In summary, the integration method to use when accepting payments with Adyen depends on your needs. If you just want to display a bunch of payment methods at once, probably want to control some of the order of the payment methods, and want to style it to match the look and feel of your website then use Drop-in because it will save you a bit of work down the line. But if you want to split the payment methods individually or wanted to add other components in the middle then this should be where you want to use Web Components. 

Thus, only go for Web Components if you’re going to split the payment forms. However, it’s still your choice to make on how you want to implement it on your website. 

You can check out their documentation for more information.