调用API时报Cannot read properties of undefined (reading 'dataResponse')错误求助

报错核心原因 #

你当前的报错是因为手动调用了作为回调函数的callback，且调用时没有传入参数，导致函数内部读取data.dataResponse时，data是undefined，直接触发类型错误。
你引入的transactions.js支付SDK的设计逻辑是：交易完成后SDK会自动调用你定义的callback函数，并且自动将交易结果作为参数传入，该函数不应该作为按钮点击的触发事件直接调用。

修复步骤 #

• 替换按钮点击事件：你配置了data-button=false，即SDK不会自动生成支付按钮，你需要把自己写的按钮的点击事件，替换为SDK暴露的交易触发方法（这类支付SDK通常会暴露如launchTransaction()、initPay()这类触发交易的全局方法，直接调用对应方法即可触发支付流程）。
• 给回调函数加参数校验，避免异常场景下的报错。

修复后参考代码 #

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <title>Duke Business School</title>
    <script
    data-user="user(user@test.com) "
    data-password="(password 'sha256Hex')"
    data-button=false
    data-response=true
    data-amount="100.01"
    data-commerce="Affinitas"
    src="http://52.22.36.22:9020/js/transactions.js">
   </script> 
  </head>
  <body>
    <!-- 替换onclick为SDK暴露的支付触发方法，示例为launchTransaction，可确认SDK文档的对应方法名 -->
    <button onclick="launchTransaction();"> pagar</button>
      </div>
    </section>

   <script>
    function callback(data){
      // 先加参数校验，避免异常报错
      if(!data || !data.dataResponse) {
        alert("未获取到有效交易结果");
        return;
      }
      alert("RESPUESTA OBTENIDA EN HTML");
      alert("Operación: " + data.dataResponse.description + " Autorización: " + data.dataResponse.authorization)
    }
   </script>
  </body>
</html>

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