CODEWITHSUNDEEP
javascriptangular
bl4cksta
bl4cksta

Reputation: 684

Dynamic iframe source with angular

I am trying to use payment system with Angular. In the payment gateway API, 3D Secure Page exposing as an html in json. I am trying to put this html in an iframe. The main problem is html is not shown. When I try to inspect element on browser, there are html code in the iframe but not shown. What is the reason of it? How can I solve this?

payment.component.ts:

this.applicationService.pay(this.card).subscribe((data: any) => {
    this.modalContent = data.content;
}

payment.component.html

<iframe [innerHTML]="modalContent | sanitizeHtml" frameborder="0"></iframe>

3d secure content example:

<!doctype html>↵<html lang="en">↵<head>↵    <title>iyzico Mock 3D-Secure Processing Page</title>↵</head>↵<body>↵<form id="iyzico-3ds-form" action="https://sandbox-api.iyzipay.com/payment/mock/init3ds" method="post">↵    <input type="hidden" name="orderId" value="mock64-7127975743472898iyziord">↵    <input type="hidden" name="bin" value="405418">↵    <input type="hidden" name="successUrl" value="https://sandbox-api.iyzipay.com/payment/iyzipos/callback3ds/success/37">↵    <input type="hidden" name="failureUrl" value="https://sandbox-api.iyzipay.com/payment/iyzipos/callback3ds/failure/37">↵    <input type="hidden" name="confirmationUrl" value="https://sandbox-api.iyzipay.com/payment/mock/confirm3ds">↵    <input type="hidden" name="PaReq" value="66e28140-1079-4f29-81c6-0220c720620e">↵</form>↵<script type="text/javascript">↵    document.getElementById("iyzico-3ds-form").submit();↵</script>↵</body>↵</html>

Upvotes: 0

Views: 3431

Answers (1)

Sunil
Sunil

Reputation: 11243

Use the following code snippet -

ts

@ViewChild('iframe') iframe: ElementRef;

this.applicationService.pay(this.card).subscribe((data: any) => {
    this.setIframe(this.iframe);
}

private setIframe(iframe: ElementRef): void {
   const win: Window = iframe.nativeElement.contentWindow;
   const doc: Document = win.document;
   doc.open();
   doc.write(this.modalContent);
   doc.close()
}

html

<iframe #iframe frameborder="1"></iframe>

Working copy is here - https://stackblitz.com/edit/angular-jc3qew

Upvotes: 3

Related Questions