Components are individual payment-method UI elements that you place into your own custom checkout layout. They give you more control over the look and arrangement of the form than Drop-in, while using the same session-based model.
What Components are for
Each Component renders a single payment method, for example a card form. You decide where each one sits in your checkout, so you can build a fully custom layout while Adyen still handles the sensitive payment input.
You mount one Component per payment method you want to offer.
Components use the Sessions flow, the same as Drop-in, and handle additional actions such as 3D Secure.
They keep your PCI scope low, because each Component collects and submits the payment details.
When to choose Components over Drop-in
You want each payment method positioned individually in a custom layout, rather than the single combined form that Drop-in renders.
You want to control which methods appear where, and style them within your own design system.
Your checkout is multi-step or spans multiple pages, and you want to embed the payment step inside your own flow rather than show a single combined form.
You are willing to wire up each Component yourself, which is more integration effort than Drop-in.
If you want one component that renders all methods, use Drop-in Integration. If you want Adyen to host the whole page, use Hosted Checkout. For full UI control with the highest effort and PCI scope, see API Integration.
How to integrate
Create a session on your server. Call the Adyen Checkout API
/sessionsendpoint with the payment details, including your Store ID. Adyen returns a sessionidandsessionData.Pass the session to your frontend. Send the
idandsessionDatato the page that hosts your checkout.Create and mount each Component. Initialize the checkout with your environment, client key, and session, then create the Component you need and mount it into its container.
Handle the result. Use the completion and error callbacks for the shopper-facing outcome, and treat the Adyen webhook as the authoritative result.
Code sample
On your server, create the session:
POST https://checkout-test.adyen.com/v71/sessions
X-API-Key: YOUR_API_KEY
{
"merchantAccount": "YOUR_MERCHANT_ACCOUNT",
"amount": { "currency": "USD", "value": 1000 },
"reference": "ORDER-12345",
"returnUrl": "https://your-site.com/checkout/return",
"countryCode": "US",
"store": "YOUR_STORE_ID"
}
On your frontend, initialize the checkout and mount each Component into its own container:
const checkout = await AdyenCheckout({
environment: 'test', // 'live' in production
clientKey: 'YOUR_CLIENT_KEY',
session: { id: SESSION_ID, sessionData: SESSION_DATA },
onPaymentCompleted: (result) => { /* handle success */ },
onError: (error) => { /* handle failure */ }
});
// Mount the card method into your own layout
const cardComponent = checkout.create('card');
cardComponent.mount('#card-container');
// Mount additional method components as needed
// const otherComponent = checkout.create('<paymentMethodType>');
// otherComponent.mount('#other-container');
For full, platform-specific Component code (Web, iOS, Android, React Native, and Flutter), see Adyen's Sessions flow integration guide.
Card brands must be listed explicitly in your card configuration, or they will not be accepted. For example, Discover must be included. See Card Payments.
Credentials, your client key, and your Store ID are provided securely by Valpay. Contact Valpay Support for credentials or troubleshooting.