Adyen Drop-in - 如何传递唯一的订单 ID？

如何解决Adyen Drop-in - 如何传递唯一的订单 ID？

我一直在尝试使用 Adyen Drop-in 组件在我正在开发的 Razor 页面站点上付款。我有一个测试版本正在运行，它可以支付硬编码金额，但我还没有弄清楚如何将唯一的订单 ID 传递给我发出支付请求的 API 端点。

以 https://docs.adyen.com/online-payments/drop-in-web 中的示例为例，嵌入式组件是使用 JavaScript 通过 JavaScript 挂载的

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

其中 configuration 对象是用类似的东西创建的

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 自己的 JavaScript 然后为 state 方法提供 onSubmit 对象，以便使用从 PaymentRequest 创建（以某种方式）的 state.data 对象调用我的 API 端点.

但是，由于无法在此 PaymentRequest 对象中获取唯一的订单 ID，我的服务器端代码不知道要设置多少金额。请注意，可以在 Amount 对象中设置 configuration 对象，但这仅用于在 Drop-in 组件上显示值 - 该值不会传递到服务器。

那么如何通过 Drop-in 组件传递唯一的订单 ID？

解决方法

Adyen 文档在此处没有明确提供示例，但 makePayment() 和 makeDetailsCall() 假定您将获取 state.data 并回发到您的服务器。您需要在此处实现自己的代码。此时，您可以添加其他信息，例如任何标识符。

这是一个示例实现作为参考：

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();
}

另一个有用的资源可能是 Adyen node.js/express tutorial。它在实现细节上更加明确，因此可能有助于消除一些歧义。