升级带3DS的Recurly.js支付页面：如何获取ActionTokenID？

嗨，我来帮你捋清楚在Recurly.js里集成3DS验证时，怎么拿到Action Token的逻辑~

核心要记住：Action Token不是你提前预先生成的，而是在支付流程推进中，Recurly检测到交易需要3DS验证时，通过后端与Recurly API交互后返回的，具体流程是这样的：

• 第一步：你还是按照常规的Recurly.js流程，在前端收集用户的支付信息（卡号、有效期等），生成一个普通的tokenId——这一步和你之前的常规支付流程完全一致。
• 第二步：把这个tokenId传给你的后端服务，由后端调用Recurly的官方API（比如创建订阅、创建单次交易的接口）。这时候Recurly会自动判定这笔交易是否需要3DS验证，如果需要，API的响应里就会包含action_token字段，同时交易状态会标记为待验证状态。
• 第三步：你的后端把拿到的action_token回传给前端，这时候前端就可以用这个token触发3DS验证流程了。

给你一个前端调用3DS验证的简单代码示例：

// 假设从后端接口拿到的action token存在这里
const actionToken = '后端返回的action_token值';

// 回调风格的调用方式
recurly.3ds.invoke(actionToken, (error, result) => {
  if (error) {
    // 处理验证失败的情况，比如提示用户重新尝试
    console.error('3DS验证失败:', error);
  } else {
    // 验证成功后，拿到经过3DS校验的有效token
    const verifiedPaymentToken = result.tokenId;
    // 把这个verifiedPaymentToken传给后端，完成最终的支付/订阅创建流程
  }
});

如果你的项目用了ES6+的Promise语法，也可以用异步函数的写法：

async function handle3DSVerification(actionToken) {
  try {
    const verificationResult = await recurly.3ds.invoke(actionToken);
    const verifiedToken = verificationResult.tokenId;
    // 把这个token传给后端，完成最终支付
  } catch (verificationError) {
    console.error('3DS验证出错:', verificationError);
  }
}

另外要特别注意：Action Token绝对不能直接在前端生成，必须通过后端中转获取，这是支付安全的要求——避免把敏感的Recurly API密钥暴露在前端环境中。

备注：内容来源于stack exchange，提问作者Qasim