为什么我的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
);

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

请参阅此示例，其中在页面加载时调用RealexHpp.lightbox.init方法。

编辑：您的axios呼叫也没有等待响应，它只是继续。你可以试试：

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

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