Iframe not showing in the first click of the button

[rahulkmurali]

Using RealexHpp embedded in an ionic 4 project.

ngOnInit() {
RealexHpp.setHppUrl('https://pay.sandbox.realexpayments.com/pay');
}

The configuration data is coming from the server and initialising the function in the subscription.

submit() {
this.service.getConfig().subscribe((config)=> {
RealexHpp.embedded.init("payButtonId", "targetIframe", "https://example.com/response", config);
});
}
<button id="payButtonId" type="button" (click)="submit()">Pay

<iframe id="targetIframe" style="display:none;"></iframe>

Issue:

The Iframe is not showing in the first click. Can see the iframe in the second click on the Pay button. Why? Please help