Why does my Hpp payment function take two clicks to open?

I have a payment page which first does an axios call to get the required HPP model data. I then call the Hpp function to open the hosted page but it takes 2 clicks to complete the action. I have tried putting the code direct from the hpp function but the same thing happens. Any help is appreciated.

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>

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

It seems like

window.RealexHpp.lightbox.init(
  "payButtonId",
  "responseUrl",
  jsonFromRequestEndpoint
);

should be called before the button is clicked, as it sets up the button. At the moment your 1st click is setting up the button, and your 2nd click is executing the payment.

See this example where the RealexHpp.lightbox.init method is called on page load.

EDIT: Your axios call also isn't waiting for a response, it just continues. You can try:

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

And see if it fixes your issue.