Drop-in is a single prebuilt UI component that renders all of your enabled payment methods and handles the payment flow, including additional actions such as 3D Secure. It is the recommended integration for most Valpay partners.
What Drop-in is for
Drop-in uses the Sessions flow. Your server creates a session, and the Drop-in component on your frontend uses that session to render the form, submit the payment, and guide the shopper through any additional steps.
One component renders every payment method enabled on your account.
Drop-in handles additional actions, for example 3D Secure authentication and redirects, then returns the shopper to your
returnUrl.It keeps your PCI scope low, because the component collects and submits the sensitive payment details.
Prerequisites
An API key and merchant account, provided securely by Valpay.
A client key, provided securely by Valpay, used to initialize Drop-in on the frontend.
Your Store ID, provided by Valpay and required on every transaction.
Start with test credentials, then move to live. Test transactions do not reach the card networks. Use the Adyen test SDK during development.
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. See Standard Payment Flow.Pass the session to your frontend. Send the
idandsessionDatato the page where Drop-in mounts.Mount Drop-in. Initialize the checkout with your environment, client key, and session, then create and mount the Drop-in component.
Handle the result. Use the completion and error callbacks for the shopper-facing outcome, but treat the Adyen webhook as the authoritative result.
Code sample
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 */ }
});
checkout.create('dropin').mount('#dropin-container');
Notes
For specific card brands to be accepted, they must be listed explicitly in your card configuration. For example, Discover will not be accepted unless it is included. See Card Payments.
If you need to place each payment method in your own custom layout, use Components Integration. If you want Adyen to host the entire page, use Hosted Checkout. To learn how the session model compares to the direct API approach, see Sessions vs Advanced Flow.
Contact Valpay Support for credentials, your client key, your Store ID, or troubleshooting.