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

问题描述

我有一个付款页面，该页面首先进行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进行发布，并在每次输入字符时进行发布

解决方法

好像是

ar_+aid

单击按钮之前，应先将

称为 ，因为它会设置按钮。目前，您的第一次点击正在设置按钮，而您的第二次点击正在执行付款。

请参见此example，其中在页面加载时调用window.RealexHpp.lightbox.init( "payButtonId","responseUrl",jsonFromRequestEndpoint ); 方法。

编辑：您的axios呼叫也不等待响应，而是继续。 您可以尝试：

RealexHpp.lightbox.init

然后查看它是否可以解决您的问题。