基于PHP后端+Angular前端的网站集成Razorpay时浏览器不支持问题

• 检查Razorpay脚本版本与加载方式
  不要使用本地缓存的旧版脚本，直接加载官方最新版脚本，旧版本可能对localhost环境兼容性不足。可在Angular的index.html中添加：

  <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
  

• 切换到HTTPS环境测试
  Razorpay部分支付逻辑要求页面处于HTTPS环境，即使是localhost也需要配置。使用Angular命令启动HTTPS服务：

  ng serve --ssl true
  

  之后访问https://localhost:4200再测试支付流程。

• 排查浏览器环境限制
  确保浏览器未禁用JavaScript、Cookie或第三方脚本，这些是Razorpay运行的必要条件。同时切换到Chrome、Firefox等主流最新版浏览器测试，避免使用小众或旧版本浏览器。

• 验证Razorpay初始化参数
  确认初始化时使用的是测试密钥而非生产密钥，且参数格式正确。Angular组件中初始化示例：

  const options = {
    key: '你的测试密钥',
    amount: '100', // 最小测试金额，单位为对应货币的最小单位（如印度卢比的派萨）
    currency: 'INR',
    name: '测试商户',
    description: '测试交易',
    handler: (response: any) => {
      // 支付成功回调逻辑
    },
    prefill: {
      name: '测试用户',
      email: 'test@example.com',
      contact: '9999999999'
    }
  };
  const rzp = new window.Razorpay(options);
  rzp.open();
  

• 检查后端订单生成逻辑
  确保PHP后端生成的Razorpay订单order_id有效，且签名验证逻辑正确。无效订单信息会导致前端脚本异常。后端生成订单示例：

  $api = new Razorpay\Api\Api('你的密钥ID', '你的密钥秘钥');
  $orderData = [
    'receipt'         => 'rcptid_11',
    'amount'          => 100 * 100, // 金额转换为最小单位
    'currency'        => 'INR',
    'payment_capture' => 1
  ];
  $order = $api->order->create($orderData);
  echo json_encode(['order_id' => $order['id']]);
  

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