React Native集成Adyen 3DS2支付后无响应问题排查求助

问题概述 #

集成Adyen 3DS2支付功能时，用户在WebView完成身份认证输入密码后，系统无任何成功/错误响应，无法向用户展示结果提示。结合你提供的前后端代码，以下是具体排查方向和解决方法：

核心原因分析 #

1. Return URL跳转未被正确拦截与处理 #

你在前后端都配置了sixtleasinguae://drawer_navigator/tab_navigator/home_tab/home作为returnUrl，但存在两个问题：

• App未正确注册该自定义URL Scheme，导致Adyen完成认证后无法唤起App；
• 前端WebView未监听导航事件，无法捕获跳转至returnUrl的动作，也就无法触发后续的支付状态查询逻辑。

2. 缺少支付结果主动查询机制 #

当前流程仅停留在初始化3DS支付并打开WebView，没有在用户完成认证后主动查询Adyen的最终支付状态：

• 后端未提供根据pspReference查询支付状态的接口；
• 前端未在WebView跳转后调用状态查询接口，完全依赖跳转回调的响应（但跳转本身不携带状态信息）。

3. Adyen请求参数配置冲突 #

后端请求Adyen的参数存在两处不合理配置：

• channel: 'web'：实际是React Native App环境，应设置为'ios'或'android'，否则Adyen的回调逻辑可能异常；
• nativeThreeDS: 'preferred'与threeDS2DataOnly: true冲突：前者优先使用原生3DS组件，后者强制仅用3DS2数据，导致WebView流程异常。

解决方法 #

1. 配置自定义URL Scheme并拦截跳转 #

• 注册URL Scheme：在iOS的Info.plist或Android的AndroidManifest.xml中注册sixtleasinguae，确保App能被该Scheme唤起；
• WebView监听导航事件：拦截returnUrl跳转，触发状态查询：

// 前端WebView示例代码
<WebView
  source={{ uri: redirectUrl }}
  onShouldStartLoadWithRequest={(request) => {
    if (request.url.startsWith('sixtleasinguae://')) {
      // 拦截跳转，查询支付结果
      checkPaymentStatus(pspReference);
      return false; // 阻止WebView跳转
    }
    return true;
  }}
/>

2. 实现支付状态查询逻辑 #

• 后端新增查询接口：调用Adyen的/payments/details接口查询状态：

// 后端示例接口
static async getPaymentStatus(req: Request, res: Response) {
  try {
    const { pspReference } = req.query;
    const response = await axios.post(`${API_URL}/payments/details`, {
      merchantAccount: ADYEN_MERCHANT_ACCOUNT,
      pspReference
    }, {
      headers: {
        'X-API-Key': ADYEN_API_KEY,
        'Content-Type': 'application/json'
      }
    });
    res.json(response.data);
  } catch (error: any) {
    console.error('查询支付状态失败:', error.response?.data || error);
    res.status(500).json({ error: '查询支付状态失败' });
  }
}

• 前端调用查询接口并展示结果：

const checkPaymentStatus = async (pspReference) => {
  try {
    const response = await fetch(`https://your-api-url/v1/payment/status?pspReference=${pspReference}`);
    const data = await response.json();
    if (data.resultCode === 'Authorised') {
      Alert.alert('成功', '卡片添加成功！');
    } else {
      Alert.alert('错误', `支付失败: ${data.resultCode}`);
    }
  } catch (error) {
    console.error('查询状态出错:', error);
    Alert.alert('错误', '无法查询支付状态');
  }
};

3. 修正Adyen请求参数 #

调整后端请求Adyen的参数，消除配置冲突：

// 修正后的后端请求参数
const requestBody = {
  merchantAccount: ADYEN_MERCHANT_ACCOUNT,
  amount: {
    currency: 'USD',
    value: 70000,
  },
  reference: leaseId.toString(),
  paymentMethod: updatedPaymentMethod,
  returnUrl: 'sixtleasinguae://drawer_navigator/tab_navigator/home_tab/home',
  authenticationData: {
    threeDSRequestData: {
      nativeThreeDS: 'disabled', // 强制使用WebView完成认证
    },
  },
  additionalData: {
    allow3DS2: true,
    executeThreeD: true,
  },
  channel: 'ios', // 根据平台切换为'android'或动态获取
  shopperReference: `user-${userId}`,
  shopperInteraction: 'Ecommerce',
  recurringProcessingModel: 'CardOnFile',
};

4. 配置Adyen Webhook（可选但推荐） #

在Adyen后台配置Webhook，当支付状态更新时，Adyen会主动通知你的后端，后端将状态存入数据库，前端查询时直接读取本地存储的状态，避免依赖跳转回调的不确定性。

内容的提问来源于stack exchange，提问作者burak kılınç