Nuxt(Vue2)集成Braintree DropIn如何将最后使用的存储信用卡设为加载默认激活项

Braintree DropIn 组件本身未提供直接配置默认选中支付方式的参数，你可以通过两步实现需求：

步骤1：持久化存储最近使用的支付方式标识 #

每次用户完成支付后，将本次使用的信用卡对应的paymentMethodToken存储下来：

• 优先存在后端对应用户的属性字段中，可实现跨设备同步
• 简单场景也可存在前端localStorage中

// 支付成功回调中执行存储逻辑
// 假设当前支付返回的支付方式对象为paymentMethod
localStorage.setItem('lastUsedPayToken', paymentMethod.token)

步骤2：DropIn 初始化后手动触发选中 #

初始化DropIn实例后，匹配最近使用的支付方式并触发选中：

// 原有的DropIn初始化逻辑保持不变，仅补充下方逻辑
braintree.dropin.create({
  authorization: '你的客户端授权token',
  container: '#dropin-container',
  // 其余原有配置项不变
}, (err, dropinInstance) => {
  if (err) throw err

  // 从本地/后端接口获取存储的最近使用支付token
  const lastToken = localStorage.getItem('lastUsedPayToken')
  if (lastToken) {
    // 遍历所有已存储的支付方式匹配对应token
    dropinInstance.getAvailablePaymentMethods().forEach(payMethod => {
      // 仅匹配信用卡类型的支付方式，需要包含其他支付方式可删除type判断
      if (payMethod.type === 'CreditCard' && payMethod.token === lastToken) {
        dropinInstance.selectPaymentMethod(payMethod)
      }
    })
  }

  // 原有后续逻辑保持不变
})

补充说明 #

• 如果token存储在后端，只需在初始化DropIn前先请求接口获取到最近使用的token，再执行上述匹配逻辑即可
• 若匹配不到对应token（如用户删除了该存储信用卡），组件会自动回退到默认选中第一张信用卡的逻辑，无需额外兼容

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