Vue集成PayHere支付网关问题：无法在方法中为data对象的payment属性赋值并传递

看起来你遇到的核心问题是PayHere支付请求触发了服务器500错误，同时你误以为payment值没传入Vue的data属性——其实赋值是生效的，问题出在你构建的payment参数本身有错误，导致PayHere服务器无法正确处理请求，进而抛出JSON解析错误。

下面是具体的修复步骤和解释：

1. 修复payment对象的参数错误 #

你的代码里有几个明显的参数问题，这是导致500错误的直接原因：

• 重复的items键：你在payment对象里写了两次items属性，后面的会覆盖前面的，这种重复键会让PayHere的API无法正确解析请求体
• 无效的amount值：你写了amount: "cart.price"，这是一个字符串字面量，而不是实际的金额数值。PayHere需要的是具体的金额字符串（比如"1000.00"），你应该使用组件里的total变量（也就是模板中显示的总金额）
• 必填参数未提供：return_url和cancel_url被设为undefined，PayHere的API要求这两个参数必须存在，哪怕是占位的有效URL

修改后的payment对象应该是这样的：

this.payment = {
  sandbox: true,
  merchant_id: "1218995", // 替换为你的实际商户ID
  return_url: "http://your-domain.com/payment-success", // 替换为你的实际成功回调URL
  cancel_url: "http://your-domain.com/payment-cancel", // 替换为你的实际取消回调URL
  notify_url: "http://sample.com/notify",
  order_id: "order123", // 建议生成唯一的订单ID，比如用时间戳+用户ID
  items: "Door bell wireless",
  amount: this.total.toString(), // 使用组件中的total变量，转为字符串
  currency: "LKR",
  first_name: "Cahill",
  last_name: "Sam",
  email: "sam@mail.com",
  phone: "012345xxxxx",
  address: "address,123",
  city: "Colombo",
  country: "Sri Lanka",
};

2. 确保PayHere SDK正确加载 #

要确认你的项目中已经正确引入了PayHere的JavaScript SDK，通常是在index.html中添加：

<script src="https://www.payhere.lk/lib/payhere.js"></script>

如果SDK没有正确加载，payhere对象会不存在，也会触发错误。

3. 优化订单ID的生成（可选但推荐） #

硬编码order_id: "order123"在生产环境会导致重复订单ID的问题，建议生成唯一的订单ID，比如：

order_id: `order_${Date.now()}_${this.profile?.id || 'guest'}`,

4. 验证参数的响应式（针对你提到的“值无法传入data”的疑惑） #

Vue中直接给this.payment赋值是可以触发响应式更新的，你可以在赋值后添加console.log(this.payment)来确认参数是否正确设置。之前的错误不是因为值没传进去，而是参数格式错误导致PayHere服务器拒绝请求。

5. 增强错误排查 #

你可以在onError回调中打印更详细的错误信息，帮助定位问题：

payhere.onError = function onError(error) {
  console.error("PayHere错误详情:", error);
  alert("支付初始化失败，请稍后重试");
};

完成这些修改后，重新测试支付请求，应该能解决500错误和参数传递的问题。

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