Laravel集成braintree/braintree_php包后PayPal表单无法显示问题

问题修复方案 #

核心原因

你遇到的表单不显示问题主要是三个原因导致：

1. 新版braintree/braintree_php扩展和你用的1.13.0旧版Dropin JS不兼容，旧站点因为用的是对应旧版PHP扩展所以正常
2. 令牌生成失败时$paypalToken为空，直接导致组件初始化失败
3. 手动删除信用卡DOM的代码会在组件未渲染完成时触发报错，中断JS执行

分步修复

步骤1：确认令牌生成正常

在CheckoutController.php中捕获异常时输出日志，确认令牌是否生成成功：

try {
    $paypalToken = $gateway->ClientToken()->generate();
} catch (\Exception $e) {
    // 临时加日志排查，确认是否是密钥/网络问题导致令牌生成失败
    \Log::error('Braintree令牌生成失败：'.$e->getMessage());
    $paypalToken = null;
}

同时确认config/services.php中已添加braintree配置项，密钥与环境匹配，没有混用沙箱/生产密钥。

步骤2：升级Dropin JS版本

将blade中的JS脚本地址版本替换为1.42.0，兼容新版PHP扩展：

<script src="https://js.braintreegateway.com/web/dropin/1.42.0/js/dropin.min.js"></script>

步骤3：优化支付方式过滤逻辑

删掉手动删除信用卡DOM的代码，在初始化时直接指定仅加载PayPal选项，避免DOM操作报错：
修改后的完整JS代码如下：

var form = document.querySelector('#paypal-payment-form');
var client_token = "{{ $paypalToken }}";

if (!client_token) {
    alert('支付组件初始化失败，请刷新页面重试');
}

braintree.dropin.create({
  authorization: client_token,
  selector: '#bt-dropin',
  // 指定仅展示PayPal选项，无需事后删除其他支付方式
  paymentOptionPriority: ['paypal'],
  paypal: {
    flow: 'vault'
  }
}, function (createErr, instance) {
  if (createErr) {
    console.log('Create Error', createErr);
    alert('支付组件加载失败：' + createErr.message);
    return;
  }

  form.addEventListener('submit', function (event) {
    event.preventDefault();

    instance.requestPaymentMethod(function (err, payload) {
      if (err) {
        console.log('Request Payment Method Error', err);
        alert('支付请求失败：' + err.message);
        return;
      }

      document.querySelector('#nonce').value = payload.nonce;
      form.submit();
    });
  });
});

兜底排查

如果按以上步骤修改后还是异常，打开浏览器控制台查看具体报错，优先检查：

• Braintree后台是否已开启PayPal支付权限
• 商户账号是否完成了PayPal的绑定验证
• 浏览器是否安装了广告拦截插件拦截了Braintree的脚本加载

内容的提问来源于stack exchange，提问作者eee aaa