Adyen Drop-in – how to pass unique order ID?

I have been trying to use the Adyen Drop-in component to make payments on the Razor pages site I am developing. I have got a test version running that makes a payment for a hard-coded amount but I have yet to figure out how to pass a unique order ID to my API endpoint making the payment request.

Taking the examples from https://docs.adyen.com/online-payments/drop-in-web, the drop-in component is mounted via JavaScript using

const checkout = new AdyenCheckout(configuration);
const dropin = checkout.create('dropin').mount('#dropin-container');

where the configuration object is created with something like

const configuration = {
 paymentMethodsResponse: paymentMethodsResponse, // The `/paymentMethods` response from the server.
 clientKey: "YOUR_CLIENT_KEY", // Web Drop-in versions before 3.10.1 use originKey instead of clientKey.
 locale: "en-US",
 environment: "test",
 onSubmit: (state, dropin) => {
     // Your function calling your server to make the `/payments` request
     makePayment(state.data)
       .then(response => {
         if (response.action) {
           // Drop-in handles the action object from the /payments response
           dropin.handleAction(response.action);
         } else {
           // Your function to show the final result to the shopper
           showFinalResult(response);
         }
       })
       .catch(error => {
         throw Error(error);
       });
   },
 onAdditionalDetails: (state, dropin) => {
   // Your function calling your server to make a `/payments/details` request
   makeDetailsCall(state.data)
     .then(response => {
       if (response.action) {
         // Drop-in handles the action object from the /payments response
         dropin.handleAction(response.action);
       } else {
         // Your function to show the final result to the shopper
         showFinalResult(response);
       }
     })
     .catch(error => {
       throw Error(error);
     });
 }
};

Adyen’s own JavaScript then supplies the state object for the onSubmit method, so that my API endpoint gets called with a PaymentRequest object created (somehow) from the state.data.

However, without being able to get a unique order ID into this PaymentRequest object, my server-side code does not know what amount to set. Note that one can set an Amount object in the configuration object but this is just used to display the value on the Drop-in component – the value is not passed to the server.

So how does one pass a unique order ID via the Drop-in component?

Answer

The Adyen docs don’t explicitly provide an example here, but the makePayment() and makeDetailsCall() presume that you will take the state.data and post back to your server. You need to implement your own code here. At that point, you could add additional information like any identifiers.

Here is an example implementation as a reference:

async function makePayment(state_data) {
  const order_id = ""; // You need to provide this however your client  stores it.
  const json_data = {
    order_id,
    state_data,
  };

  const res = await fetch("[url to your server's endpoint]", {
    method: "POST",
    body: JSON.stringify(json_data),
    headers: {
      "Content-Type": "application/json",
    },
  });

  return await res.json();
}

Another helpful resource could be the Adyen node.js/express tutorial. It is more explicit on implementation details so might help remove some ambiguity.