i have the address input fields which when entered does an axios post to my server and returns the customers details and with that post id i can use a get method for the request endpoint. The issue i have is i want the both to happen in the one click but i am having to click twice to bring up the hosted page. Below is my code, is there a simple fix to this?
paymentFunction(){
const data = {
//my passed data
};
//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
if i call the initial function with onClick={this.paymentFunction()}, this works but it is doing the post to the Db with the onchange and posting each time a character is entered
i have the address input fields which when entered does an axios post to my server and returns the customers details and with that post id i can use a get method for the request endpoint. The issue i have is i want the both to happen in the one click but i am having to click twice to bring up the hosted page. Below is my code, is there a simple fix to this?
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
if i call the initial function with onClick={this.paymentFunction()}, this works but it is doing the post to the Db with the onchange and posting each time a character is entered