Braintree Drop-in：能否实现选择支付方式后自动提交表单？

嘿，这个反复点击的繁琐流程确实闹心！完全可以实现选完支付方式后自动提交表单，不用再点OK又点结账～我来给你改改代码，一步步说清楚：

核心思路 #

Braintree Drop-in提供了paymentMethodSelected事件，当用户完成支付方式的选择/填写（比如信用卡信息输入完成、选中已保存的支付方式，或是第三方支付如PayPal授权完成返回后），这个事件会被触发。我们可以利用这个事件，自动获取支付所需的nonce并提交表单。

修改后的完整代码 #

var form = document.querySelector('#payment-form');
var nonceInput = document.querySelector('#nonce');

braintree.dropin.create({
  authorization: '{你的授权码}', // 替换成你的实际授权值
  container: '#dropin-container' // 注意：这里要指定Drop-in的容器ID，原代码可能漏了这个
}, function (createErr, instance) {
  if (createErr) {
    console.error('创建Drop-in实例失败:', createErr);
    return;
  }

  // 监听「支付方式已选中」事件，触发自动提交
  instance.on('paymentMethodSelected', function () {
    // 自动请求支付nonce（提交到后端的关键参数）
    instance.requestPaymentMethod(function (requestErr, payload) {
      if (requestErr) {
        // 处理错误，比如给用户提示
        alert('支付信息验证失败，请检查后重试');
        console.error('获取支付nonce失败:', requestErr);
        return;
      }

      // 将nonce填入隐藏输入框
      nonceInput.value = payload.nonce;
      // 自动提交表单
      form.submit();
    });
  });

  // 保留手动提交的逻辑（可选，兼容用户手动点击结账按钮的场景）
  form.addEventListener('submit', function (e) {
    e.preventDefault();
    instance.requestPaymentMethod(function (requestErr, payload) {
      if (requestErr) {
        alert('支付信息验证失败，请检查后重试');
        console.error('获取支付nonce失败:', requestErr);
        return;
      }
      nonceInput.value = payload.nonce;
      form.submit();
    });
  });
});

关键细节说明 #

• paymentMethodSelected事件：这是实现自动提交的核心，它会在用户确认支付方式后立即触发（比如信用卡输入完点击OK、选中已保存的支付方式、PayPal授权完成返回页面时）。
• requestPaymentMethod方法：必须调用这个方法来获取有效的支付nonce，这是后端处理支付的必要参数，不能直接跳过这一步。
• 错误处理：一定要加上错误提示，避免用户操作失败后不知道原因。
• 保留手动提交逻辑：如果用户习惯手动点击结账按钮，这部分代码可以确保流程依然正常工作，让你的实现更健壮。

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