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

时间:2020-10-06 09:04:16

标签: javascript reactjs rxjs global-payments-api

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

1 个答案:

答案 0 :(得分:0)

好像是

ar_+aid
单击按钮之前,应先将

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

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

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

RealexHpp.lightbox.init

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