React JS, Having to double click to open Hpp payment function

[seamy20]

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