Web Components

Web Components

Same configuration object, same handlers. The difference is what you mount:
const { AdyenCheckout, Card, Ideal } = window.AdyenWeb;

const checkout = await AdyenCheckout({ /* identical config */ });

new Card(checkout).mount('#card-container');
new Ideal(checkout).mount('#ideal-container');
You build the method selector and decide which component to show. Everything from onSubmit onward is unchanged.
Remember that this list is yours to maintain. Enabling a payment method in  ⁠⁠Payment methods⁠  makes it available, but it will not appear in your checkout until you mount a component for it.