Paytm网关JS Checkout集成求助：无法加载支付方式及银行选项

看起来你在集成Paytm JS Checkout时遇到了支付选项加载失败的问题，我帮你梳理下代码里的几个关键问题，这些很可能是导致问题的核心原因：

1. 重复解析JSON引发的错误 #

你在获取订单数据时，已经通过response.json()把接口响应解析成了JavaScript对象，但之后又执行了JSON.parse(data)——这会直接抛出错误，因为data已经是解析后的对象，不是JSON字符串。这个错误会中断后续的交易令牌获取流程，导致没有有效令牌传入CheckoutJS：

// 错误写法
var data = await fetch(`http://localhost:5000/api/payment`,{...}).then(response=>response.json());
var Jsondata = JSON.parse(data); // 此处会报错，data已经是对象而非JSON字符串

修正方案：
直接使用response.json()返回的对象即可，无需二次解析：

var Jsondata = await fetch(`http://localhost:5000/api/payment`,{
  method:"GET",
  headers:{
    Accept:"application/json",
    "Content-Type":"application/json"
  },
}).then(response=>response.json()).catch(err=>console.error("获取订单数据失败：", err));
// 直接使用Jsondata，不用再做JSON.parse操作

2. 获取交易令牌时的请求格式错误 #

调用Paytm的initiateTransaction接口时，你直接把data（对象类型）作为body参数传递，但fetch要求请求体必须是字符串格式，Paytm服务器无法解析原始对象，会导致返回无效的交易令牌：

// 错误写法
body:data

修正方案：
用JSON.stringify()把订单数据转换成JSON字符串后再传递：

body: JSON.stringify(Jsondata) // 注意这里使用解析后的Jsondata对象

3. 交易令牌的取值错误 #

Paytm的initiateTransaction接口返回的响应中，有效交易令牌存储在body.txnToken字段里，但你直接把整个响应对象赋值给了token变量，导致传入CheckoutJS的是无效令牌：

// 错误写法
var token = await fetch(...).then(response=>response.json());
// 后续config中直接使用token

修正方案：
提取响应里的txnToken字段作为有效令牌：

var tokenResponse = await fetch(`https://securegw-stage.paytm.in/theia/api/v1/initiateTransaction?mid=Muctvj23768431537109&orderId=${Jsondata.body.orderId}`,{
  method:"POST",
  headers:{
    Accept:"application/json",
    "Content-Type":"application/json"
  },
  body: JSON.stringify(Jsondata)
}).then(response=>response.json()).catch(err=>console.error("获取交易令牌失败：", err));

var txnToken = tokenResponse?.body?.txnToken; // 安全提取交易令牌

然后在config中使用正确的令牌：

"data": {
  "orderId": Jsondata.body.orderId,
  "token": txnToken,
  "tokenType": "TXN_TOKEN",
  "amount": "1.00"
},

额外调试建议 #

在关键步骤添加详细的错误捕获，比如检查订单数据、交易令牌是否正常返回，方便快速定位问题：

// 检查订单数据是否获取成功
if (!Jsondata?.body?.orderId) {
  console.error("订单数据格式错误，缺少orderId");
  return;
}

// 检查交易令牌是否有效
if (!txnToken) {
  console.error("未获取到有效交易令牌");
  return;
}

按照上面的修正调整代码后，应该能正确获取有效交易令牌，Paytm CheckoutJS就能正常加载银行和支付选项了。如果问题依然存在，可以查看浏览器控制台的具体错误信息，或者确认你的Paytm商户ID（mid）、订单数据是否符合接口要求。

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