Adyen Components demo

Adyen Web Components mounted one payment method at a time, running in Adyen's test environment. Pick the methods you want, change the configuration on the left, and see which v6 class renders each one.

Adyen Web 6.33.0 Component

No Component yet. Add your test credentials to .env and restart the server.

No stored cards yet. Turn on enableStoreDetails, pay once with test card 4111 1111 1111 1111 (any future expiry, CVC 737) and tick "Save". Then flip showStoredCards on, and this browser's saved card renders as its own Component here, each with its own Remove button.

Test credentials

Reference values for whichever component you mount on the right.

Cards 4 cards

Card payments are the default across every country. These four test cards cover a Visa success, a Mastercard success, a straight American Express, and an Amex that triggers a 3D Secure challenge, enough to exercise the Card Component's authentication and result screens.

Expiry: 03/30 · CVC: 737 (Amex: 7373)

iDEAL | Wero

iDEAL is the dominant online payment method in the Netherlands. Instead of entering card details, the shopper picks their Dutch bank, gets redirected to that bank's app or web login to approve the payment.

Wero is a pan-European mobile wallet from the European Payments Initiative (EPI), a bank-owned instant-payments network being rolled out across the SEPA zone. iDEAL is transitioning onto Wero, which is why Adyen groups them together as one method.

Test issuer

TESTNL2A

Select TESTNL2A as the issuer, then pick the scenario you want to run: Success → Authorised, Cancellation → Canceled, Expiration → Pending, Failure → Refused.

ACH

ACH Direct Debit pulls funds directly from a US bank account using the shopper's routing and account numbers. It's cheaper than card payments but slower to settle.

Bank account number

123456789

Routing number

011000138

Use any name and any correctly formatted US address for the remaining fields. Alternative routing: 121000358.

Pay by Bank (UK)

Pay by Bank is an open banking payment method: the shopper authenticates directly with their own bank instead of entering card details, and the payment settles as a bank transfer initiated on their behalf. Adyen routes this through Tink, and the flow renders slightly differently by market. In the UK, an issuer list appears before redirect; in some other markets (like Germany), the shopper picks their bank after the redirect.

Tink Demo Bank issuer IDs

uk-demobank-open-banking-handoff

uk-demobank-open-banking-redirect

uk-demobank-open-banking-redirect-aispis

Tink login: Approved

Username / password

u83646180 / rlf446

Tink login: Authentication error

Username / password

u92721594 / nbs589

Tink login: Temporary error

Username / password

u91902655 / jtx720

Copying the Tink credentials copies username and password on two lines. For the Approved scenario, choose the account ending in 285 for amounts > £150, or 327 for amounts ≤ £150.

Klarna

Klarna is a Buy Now Pay Later (BNPL) provider offering three main variants: Pay Later (invoice-style, pay after delivery), Pay Now (immediate bank transfer), and Pay Over Time (installments). In Adyen these appear as distinct payment method types (klarna, klarna_paynow, klarna_account). Availability and shopper data requirements vary widely by country.

Klarna's sample customer data varies by country. See Klarna's Adyen documentation for the right test data for your region.

API log

checkout-test.adyen.com · v71

The calls behind the components above. Note where each one comes from: your server creates the session, then the SDK talks to Adyen directly from the browser, and Adyen calls back to your server once the payment is done.

Endpoint Called by Status

About this demo

This is a live, non-affiliated demo of Adyen Web Components, version 6 running the Sessions flow. Where Drop-in renders every available payment method in one combined block, Components let you mount methods individually and decide exactly what appears and where. Everything here runs against Adyen's test environment, and configuration changes apply to the preview straight away.

Two display modes are available. Single mode mounts one method at a time, and multi mode lets you tick any combination and renders each into its own container, which is closer to how a real Components integration places methods inside a merchant's own layout. The list of available methods comes from the session's own paymentMethodsResponse, so it reflects what is actually enabled for the chosen country and currency rather than a fixed list.

In Adyen Web v6 every payment method is a separate exported class, so mounting iDEAL means instantiating the Ideal class and mounting Klarna means instantiating the Klarna class. That replaced the generic create() factory from v5, and it is the single biggest practical difference when upgrading a Components integration. This page resolves each method type to its class at runtime and shows the mapping in the API log above, so it is visible rather than buried in your bundle.

Stored cards work differently here too. Drop-in lists saved methods for you, while Components leave that to the merchant, so each saved card is rendered as its own Component with a Remove button you supply. For a written comparison of the two approaches, see Adyen Drop-in vs Adyen Components. Test environment only, no real payments are processed, and no real card details should be entered here.

Personal project by Elie Joseph. Not affiliated with, endorsed by, or officially connected to any payment service provider. All product and company names, logos and brands referenced on this site are property of their respective owners. Playgrounds run against test environments only. No real payments are processed. Use only test data. Never enter real card numbers, real personal information, or any genuine payment details on this site or in any linked test environment.