使用Braintree集成PayPal沙箱时出现客户端ID相关401错误

问题背景 #

我编写了一段简易PHP脚本实现PayPal弹窗支付按钮，代码如下：

<!-- Load the required checkout.js script -->
<script src="https://www.paypalobjects.com/api/checkout.js" data-version-4></script>

<!-- Load the required Braintree components. -->
<script src="https://js.braintreegateway.com/web/3.87.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.87.0/js/paypal-checkout.min.js"></script>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script>
<?php 
require_once 'vendor/lib/Braintree.php';

$access_token = 'access_token$sandbox$...3';

$gateway = new Braintree\Gateway([
    'accessToken' => $access_token,
]);

$clientToken = $gateway->clientToken()->generate();
?>

paypal.Button.render({
  braintree: braintree,
  client: {
    //production: '<?= $clientToken ?>',
    sandbox: '<?= $clientToken ?>'
  },
  env: 'sandbox', 
  style: {
          shape: 'rect',
          color: 'blue',
          layout: 'horizontal',
          label: 'pay',
        },
  payment: function (data, actions) {
    return actions.braintree.create({
      flow: 'checkout', // Required
      amount: 10.00, // Required
      currency: 'USD', // Required
      intent: 'sale',
      enableShippingAddress: false
    });
  },
  onAuthorize: function (payload) {
    $.ajax({
     url : 'verify.php',
     type : 'POST',
     data: { 
        "payment_method_nonce": payload.nonce
      },
     success : function (result) {
        alert(result);
     },
     error : function () {
        alert(result);
     }
   });
  },
}, '#paypal-button');
</script>

<div id="paypal-button"></div>

目前包括结算在内的所有支付流程均可正常运行，但出现了来自PayPal服务器的客户端ID相关401状态码JS错误。查阅了PayPal与Braintree的官方文档，但未找到正确传递客户端ID的方法，现有手册均针对旧版SDK。

解决方案 #

1. 移除冲突的旧版PayPal脚本 #

直接删除旧版checkout.js的引用——这是触发401错误的核心原因：你使用的是Braintree封装的PayPal集成，不需要单独加载PayPal原生的checkout脚本，后者会自动尝试读取PayPal客户端ID，与Braintree的Client Token产生冲突。

<!-- 移除这一行 -->
<script src="https://www.paypalobjects.com/api/checkout.js" data-version-4></script>

2. 改用Braintree官方推荐的初始化流程 #

替换原有的paypal.Button.render代码，采用Braintree客户端+PayPal新版Buttons的集成方式，彻底避免客户端ID冲突：

// 初始化Braintree客户端
braintree.client.create({
  authorization: '<?= $clientToken ?>' // 直接传入Braintree生成的Client Token，无需区分环境
}, function (clientErr, clientInstance) {
  if (clientErr) {
    console.error('Braintree客户端初始化失败:', clientErr);
    return;
  }

  // 初始化PayPal Checkout组件
  braintree.paypalCheckout.create({
    client: clientInstance
  }, function (paypalCheckoutErr, paypalCheckoutInstance) {
    if (paypalCheckoutErr) {
      console.error('PayPal组件初始化失败:', paypalCheckoutErr);
      return;
    }

    // 渲染新版PayPal按钮
    paypal.Buttons({
      style: {
        shape: 'rect',
        color: 'blue',
        layout: 'horizontal',
        label: 'pay'
      },
      createOrder: function(data, actions) {
        return paypalCheckoutInstance.createPayment({
          flow: 'checkout',
          amount: '10.00',
          currency: 'USD',
          intent: 'sale',
          enableShippingAddress: false
        });
      },
      onApprove: function(data, actions) {
        return paypalCheckoutInstance.tokenizePayment(data).then(function(payload) {
          // 发送支付凭证到后端验证
          $.ajax({
            url: 'verify.php',
            type: 'POST',
            data: {
              "payment_method_nonce": payload.nonce
            },
            success: function(result) {
              alert(result);
            },
            error: function() {
              alert('支付验证失败，请重试');
            }
          });
        });
      },
      onError: function(err) {
        console.error('PayPal支付错误:', err);
        alert('支付过程出现错误，请稍后再试');
      }
    }).render('#paypal-button');
  });
});

3. 版本兼容性说明 #

当前使用的Braintree 3.87.0版本完全兼容上述新版集成方式，若后续更新SDK，需确保client.min.js和paypal-checkout.min.js的版本保持一致，避免出现兼容性问题。

内容的提问来源于stack exchange，提问作者Mostafa Norouzi