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.
Drop-in and Components are both PCI Compliant, and support the same range of payment methods.
Drop-in
Use Drop-in if you want to integrate quickly, and without extensive front-end development work.
Adding payment methods to a Drop-in integration is as simple as enabling them in the Adyen Customer Area.
The Drop-in UI can be customized, allowing you to match the styling to your brand, and the language to your customer.
Drop-in renders as a pre-built checkout in your website or app:
Integrate Drop-in
Ready to integrate Drop-in? Select a platform below to start building your integration.
Components
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.
Adding payment methods to your integration requires you to enable them in the Adyen Customer Area, then embed and configure a Component in your website or app.
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:
Integrate Components
Ready to integrate Components? Select a platform below to start building your integration.