为什么我的Hpp支付功能需要点击两次才能打开？

Question

我有一个支付页面，它首先调用 axios 来获取所需的 HPP 模型数据。然后我调用 Hpp 函数打开托管页面，但需要单击 2 次才能完成操作。我曾尝试直接从 hpp 函数中放置代码，但同样的事情发生了。任何帮助表示赞赏。

paymentFunction(){  
  const data = {
      //my passed data
  };

  const response = axios ({
    url: "Myserverapitogetmodeldata",
    data: data,
    method: "POST"
  })  

  //open the hosted page
  this.hppFunction(response.data.id);

}

  hppFunction(i) {
$.getJSON("serverapimodeldata" + i, function (
  jsonFromRequestEndpoint
) {
  debugger;
  window.RealexHpp.setHppUrl("realexpaymentsapi");
  window.RealexHpp.lightbox.init(
    "payButtonId",
    "responseUrl",
    jsonFromRequestEndpoint
  );
});

}

 <MDBBtn id="payButtonId" onClick={() =>this.paymentFunction()}>Pay Now</MDBBtn>

如果我使用 onClick={this.paymentFunction()} 调用初始函数，这可行，但它正在使用 onchange 向 Db 发布并在每次输入字符时发布

Answer 1

好像

window.RealexHpp.lightbox.init(
  "payButtonId",
  "responseUrl",
  jsonFromRequestEndpoint
);

应该在单击按钮之前调用，因为它设置了按钮。目前，您的第一次点击正在设置按钮，而您的第二次点击正在执行付款。

查看此example，其中在页面加载时调用RealexHpp.lightbox.init 方法。

编辑：您的 axios 调用也不在等待响应，它只是继续。 你可以试试：

axios({
  url: "Myserverapitogetmodeldata",
  data: data,
  method: "POST"
})
.then(response => {
  //open the hosted page
  this.hppFunction(response.data.id);
});  

看看它是否能解决你的问题。