如何在React Web应用中集成PayPal Here SDK实现刷卡支付功能

1. 修正脚本加载逻辑 #

你当前的脚本插入代码没有监听加载完成事件，无法确认SDK是否就绪，修改后的useEffect代码如下：

const [sdkReady, setSdkReady] = useState(false);
const [sdkLoadError, setSdkLoadError] = useState(false);

useEffect(() => {
  const script = document.createElement("script");
  script.src = "https://www.paypalobjects.com/pph/websdk/js/pphwebsdk-1.1.14.min.js";
  script.async = true;

  // 脚本加载完成回调
  script.onload = () => {
    // SDK加载完成后会挂载到window全局对象，可在此处做初始化
    console.log("PayPal Here SDK 加载完成", window.PPHWebSDK);
    setSdkReady(true);
  };

  // 脚本加载失败处理
  script.onerror = () => {
    console.error("PayPal Here SDK 加载失败，请检查网络或使用其他支付方式");
    setSdkLoadError(true);
  };

  document.body.appendChild(script);

  return () => {
    document.body.removeChild(script);
  };
}, []);

2. 核心调用流程 #

SDK就绪后，按以下流程实现支付功能：

• 初始化SDK：传入你的商户认证信息完成初始化，需要提前在PayPal开发者后台申请对应的权限凭据
• 连接读卡器：调用SDK的读卡器连接方法，完成硬件配对
• 触发支付：用户点击刷卡按钮时，传入订单总金额、税费等信息，唤起刷卡流程
• 处理支付结果：监听SDK返回的支付成功/失败回调，更新订单状态到你的后端
  示例支付触发代码：

const handleCardPay = async (totalAmount, taxAmount) => {
  if (!window.PPHWebSDK || !sdkReady) {
    alert("支付SDK未就绪，请稍后再试");
    return;
  }
  try {
    // 初始化实例，替换为你自己的商户配置
    const pphClient = window.PPHWebSDK.init({
      merchantId: "你的商户ID",
      accessToken: "后端接口返回的有效访问令牌"
    });
    // 发起支付请求
    const paymentResult = await pphClient.pay({
      amount: totalAmount,
      currency: "USD",
      tax: taxAmount
    });
    if (paymentResult.status === "SUCCESS") {
      // 支付成功，处理后续订单逻辑
      alert("支付成功");
      clearCart();
    }
  } catch (err) {
    console.error("支付失败", err);
    alert(`支付失败：${err.message}`);
  }
};

3. 注意事项 #

• 该SDK仅支持HTTPS环境运行，本地开发时需要开启HTTPS服务，否则会出现功能异常
• 商户访问令牌不要硬编码在前端代码中，需要由后端接口鉴权后返回，避免信息泄露
• 建议添加降级方案，当SDK加载失败时，引导用户跳转PayPal Here应用完成支付，避免影响正常收款

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