如何通过Drop-in UI和3DS2实现Braintree订阅并获取所需第二个nonce？

你需要调整现有交互流程，在客户端完成3DS校验后再将最终有效nonce传给服务端，无需先传普通nonce到服务端再回传，具体步骤如下：

第一步：调整Drop-in UI初始化配置 #

初始化时提前开启3DS校验能力，配置需和后续订阅扣费金额保持一致：

// 客户端初始化示例（以Web端JS为例）
braintree.dropin.create({
  authorization: '你的客户端授权token（client token/tokenization key）',
  container: '#dropin-container',
  // 新增3DS配置
  threeDSecure: {
    amount: '订阅首笔/固定扣费金额' // 必须和后续实际扣费金额完全匹配
  }
}, (createErr, instance) => {
  // 保留原有初始化成功后的逻辑
})

第二步：客户端获取并校验nonce #

用户提交支付信息时，先拿普通nonce，紧接着触发3DS校验，拿到第二个可用nonce：

// 绑定你的提交按钮点击事件
document.querySelector('#submit-button').addEventListener('click', () => {
  instance.requestPaymentMethod((requestErr, payload) => {
    if (requestErr) {
      // 处理支付方式获取失败逻辑
      return
    }
    // 此处payload.nonce是首次拿到的普通单次nonce，直接用于3DS校验
    instance.threeDSecure.verifyCard({
      nonce: payload.nonce,
      amount: '和初始化时填写的金额保持一致'
    }, (verifyErr, verificationResult) => {
      if (verifyErr) {
        // 处理3DS校验失败、用户取消等异常
        return
      }
      // 校验通过后判断责任转移是否生效，确保3DS有效
      if (verificationResult.liabilityShifted) {
        // *verificationResult.nonce 就是你需要的第二个支持3DS的有效nonce*
        // 直接将这个nonce传给服务端即可
      }
    })
  })
})

第三步：服务端完成订阅创建 #

拿到客户端传的3DS校验通过的nonce后，按以下流程操作即可：

• 调用支付方式创建接口，用该nonce生成落库的支付方式token，该操作消耗nonce为正常逻辑
• 直接用生成的支付方式token调用订阅创建接口，不会再触发unvaulted payment method报错

注意：如果后续订阅的扣费金额发生调整，需要重新走一次3DS校验流程，生成新的有效nonce更新支付方式后再执行扣费，避免交易失败。

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