Drop-in

Drop-in

The examples below use Adyen Web v6. If you are on v5, the initialisation syntax differs — see Adyen's migration guide.

Initialise

const { AdyenCheckout, Dropin } = window.AdyenWeb;

const checkout = await AdyenCheckout({
  environment: 'test',            // 'live' in production
  clientKey: clientKey,           // from your backend
  countryCode: 'NL',              // required in v6
  locale: 'nl-NL',
  amount: { currency: 'EUR', value: 2800 },
  paymentMethodsResponse: paymentMethods,   // from your backend, unchanged

  onSubmit: async (state, component, actions) => {
    // state.data contains paymentMethod, browserInfo, and more
    const res = await fetch('/api/payments', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ ...state.data, orderId: 592 }),
    });
    const { resultCode, action, order, donationToken } = await res.json();

    if (!resultCode) return actions.reject();
    actions.resolve({ resultCode, action, order, donationToken });
  },

  onAdditionalDetails: async (state, component, actions) => {
    const res = await fetch('/api/payments/details', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ ...state.data, orderId: 592 }),
    });
    const { resultCode, action } = await res.json();

    if (!resultCode) return actions.reject();
    actions.resolve({ resultCode, action });
  },

  onPaymentCompleted: (result) => { /* mark the order paid in your UI */ },
  onPaymentFailed:    (result) => { /* show a failure state */ },
  onError:            (error)  => { /* log and show a generic error */ },
});

new Dropin(checkout).mount('#dropin-container');
Two things to note about v6 specifically. countryCode is mandatory at initialisation. And onSubmit and onAdditionalDetails must call actions.resolve() or actions.reject() — the payment flow will not continue otherwise. In v5 you called component.handleAction() instead; that pattern no longer applies.

Your backend

/api/payments receives state.data, adds the fields Adyen Web does not know about, signs the request, and forwards it:
POST /woocommerce/adyen/stores/{store_id}/payments
json
{
  "channel": "web",
  "returnUrl": "https://myshop.example.com/checkout/order-received/592/",
  "amount": { "currency": "EUR", "value": 2800 },
  "paymentMethod": { "...from state.data..." },
  "browserInfo": { "...from state.data..." },
  "metadata": { "wc_order_id": 592 }
}
Return the Midlayer's resultCode, action, and order to the browser. Store pspReference against the order before you respond.
/api/payments/details does the same against POST /woocommerce/adyen/stores/{store_id}/payment-details.