Adyen offers two pre-built UI solutions for accepting payments:
Drop-in is a pre-built checkout.
It is quicker to integrate, but allows for less control over your payments UI.
- Components are pre-built payment forms for individual payment methods. You can use these to build a checkout.
They allow for more flexibility in how you present payment methods in your checkout, but take more time to integrate - you will need to add and configure each payment method individually.
In addition to integrating Drop-in or Components into your website or app, you will also need to set up a server to communicate with Adyen's APIs.
Use Drop-in if you want to integrate quickly, and without extensive front-end development work.
Drop-in renders as a pre-built checkout in your website or app:
Ready to integrate Drop-in? Select a platform below to start building your integration.
Components render similarly to Drop-in, but give you more control over how you can present your payments UI.
Each Component renders a pre-built form for a payment method, and you can use these as building blocks for a checkout. This requires more front-end development work, but gives you more control over how and where payment methods are presented in your website or app. For example, you can present payment methods as a list, in tabs, or on separate pages or screens.
The UI of each Component can be customized, allowing you to match the styling to your brand, and the language to your customer.
Use the tabs below for some examples of what Components for some payment methods look like.
The following payment form is our Card Component, which can be used to collect credit and debit card details from your shopper:
The following payment form is our SEPA Direct Debit Component:
The following payment form is our AfterPay Component:
The following payment form is our Qiwi Component:
The following payment form is our iDEAL Component:
Ready to integrate Components? Select a platform below to start building your integration.