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.

Get client key

The client key is required to configure Adyen Checkout on the frontend.. You can retrieve its value from the following API endpoint:
GET /adyen/web-component-client-key

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.