.NET Framework 4.72中Adyen Drop-in组件状态异常及重置跳转求助

一、前端核心逻辑调整 #

Drop-in组件卡在加载状态，本质是未正确处理onPaymentCompleted和onError回调，重置组件需调用Adyen提供的实例方法。

1. 初始化Drop-in时绑定正确回调 #

初始化组件时需保留实例引用，同时明确支付完成、错误的处理逻辑：

// 全局保存Drop-in实例，用于后续重置
let dropinInstance;

// 初始化Adyen Drop-in
async function initAdyenDropin() {
    const config = {
        environment: 'test', // 生产环境改为'live'
        clientKey: '你的ClientKey',
        paymentMethodsResponse: /* 后端接口返回的支付方式数据 */,
        onPaymentCompleted: (result, component) => {
            // 支付成功判断：以Adyen返回的Authorised状态为准
            if (result.resultCode === 'Authorised') {
                // 跳转至指定成功页面
                window.location.href = '/Payment/Success';
            } else {
                // 处理非授权成功的状态（如Pending）
                showPaymentMessage('支付待确认，请稍后查看订单状态', 'warning');
                // 重置组件
                dropinInstance.reset();
            }
        },
        onError: (error, component) => {
            // 支付失败/错误提示
            showPaymentMessage(`支付失败：${error.message}`, 'error');
            // 重置组件恢复初始状态
            dropinInstance.reset();
        },
        // 替换原makePayment逻辑，调用后端支付接口
        makePayment: (state) => {
            return fetch('/Payment/ProcessPayment', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    paymentMethod: state.data.paymentMethod,
                    amount: { value: 1000, currency: 'EUR' }, // 替换为实际金额和币种
                    orderRef: '你的订单编号'
                })
            }).then(res => res.json())
              .catch(err => {
                  throw new Error('支付请求失败，请重试');
              });
        }
    };

    // 创建并挂载组件
    const checkout = new AdyenCheckout(config);
    dropinInstance = checkout.create('dropin').mount('#dropin-container');
}

// 页面提示工具函数（替换为你项目的提示组件逻辑）
function showPaymentMessage(text, type) {
    const msgEl = document.getElementById('payment-msg');
    msgEl.textContent = text;
    msgEl.className = `msg msg-${type}`;
    msgEl.style.display = 'block';
}

2. 重置组件的关键：调用reset()方法 #

Drop-in实例自带的reset()方法会清空已选支付方式、输入内容，恢复到初始加载状态，直接调用即可解决组件卡在等待的问题。注意：支付成功跳转前无需调用，跳转后页面会重新加载。

二、后端（C#）接口调整 #

确保后端返回的响应符合Adyen前端预期格式，错误场景需构造规范的错误结构，触发前端onError回调：

[HttpPost]
public async Task<JsonResult> ProcessPayment(PaymentRequest req)
{
    var client = new Client("你的API密钥", Adyen.Model.Enum.Environment.Test);
    var checkoutService = new Checkout(client);

    var paymentReq = new Adyen.Model.Checkout.PaymentRequest
    {
        Amount = new Adyen.Model.Checkout.Amount(req.Amount.Currency, req.Amount.Value),
        Reference = req.OrderRef,
        PaymentMethod = req.PaymentMethod,
        ReturnUrl = $"{Request.Url.Scheme}://{Request.Url.Host}/Payment/Result",
        MerchantAccount = "你的MerchantAccount"
    };

    try
    {
        var paymentRes = await checkoutService.PaymentsAsync(paymentReq);
        // 直接返回Adyen原始响应，前端会自动识别状态
        return Json(paymentRes);
    }
    catch (Adyen.HttpClient.HttpClientException ex)
    {
        // 构造符合前端预期的错误格式
        return Json(new { error = new { message = ex.Message } });
    }
}

// 对应的请求模型
public class PaymentRequest
{
    public dynamic PaymentMethod { get; set; }
    public AmountModel Amount { get; set; }
    public string OrderRef { get; set; }
}

public class AmountModel
{
    public long Value { get; set; }
    public string Currency { get; set; }
}

三、常见问题排查 #

• 确认前端makePayment返回的Promise在后端报错时会抛出异常，否则无法触发onError回调。
• 检查ClientKey、API密钥与环境（测试/生产）是否匹配。
• 支付成功判断需严格以Adyen返回的resultCode === 'Authorised'为准，避免误判其他状态。

内容的提问来源于stack exchange，提问作者user16985119