角4 - リダイレクト後のiframeを閉じる

Question

私は角4のアプリを持っています。 私はTranzilaという名前の第三者支払いシステムを使用しています。 Tranzilaはiframeを使って簡単に統合できます。 iframe内で、ユーザーはTranzilaドメインで支払いを行っているため、フォームを作成してクレジットカード番号を処理する時間が節約されます。 Tranzilaは、ユーザーが要求を送信した後、成功とエラーの投稿要求を構成する機能を私に提供します。 私の問題は、正常な支払い要求の後にiframeを閉じて、そのサイトをiframe内ではなくページにリダイレクトすることです。 リクエスト後にiframeを閉じる最善の方法を探しています。支払いページはjavascriptでカスタマイズすることができないので、成功したリクエストの後にiframeを閉じるためにページを操作することはできません。

私は約2つのオプションを考えました： 1.トランジラのデフォルトの「支払い成功」ページを使用して、私のサイトからiframe srcの変更を聞くことを試みます。 2.自分のページをカスタマイズして、自分のドメインの「お支払い成功」ページに移動します。 親で宣言された関数を呼び出す、自分のドメイン内のページへのルートを追加します。これにより、iframeが閉じられ、成功したルートに移動します。今の

、 私は次のようにアプリ決済注文を実装：

import { Credentials } from '../_models/credentials.model'; 
 

 
import { CredentialsStorageService } from '../_services/credentials-storage.service'; 
 
import { ItemOverview } from '../_models/item-overview.interface'; 
 
import { OrderItemsOverview } from '../_models/order-overview.interface'; 
 
import { OrderDto } from '../_models/order-dto.model'; 
 
import { Component, Input, OnInit } from '@angular/core'; 
 

 
@Component({ 
 
    selector: 'app-order-payment', 
 
    templateUrl: './order-payment.component.html', 
 
    styleUrls: ['./order-payment.component.scss'] 
 
}) 
 
export class OrderPaymentComponent { 
 
    @Input('order') 
 
    public order:OrderDto; 
 

 
    constructor(private readonly credentials: CredentialsStorageService) { 
 
    //Option 2 - Add function to window. this function will be called from the iframe after loading a special page from my domain which will call parent.paymentSuccess 
 
    window.paymentSuccess =() => { 
 
    //Redirect to success page 
 
    } 
 
    } 
 

 

 
    get iframeSrc(): string { 
 
    let userCredentials: Credentials = this.credentials.get(); 
 
    return "https://myTranzilaMockUrl.com/iframe.php?sum={0}&currency=1&cred_type=1&orderId={1}&email={2}" 
 
     .format(this.order.price.toString(), this.order.id, userCredentials && userCredentials.email); 
 
    } 
 
    
 
    //Option 1 - try to listen to iframe source change 
 
    onIframeSrcChange() { 
 
     //if iframe source changed to success page than redirect 
 
    } 
 
    
 
    
 
    
 
    
 
}

<div class="order-payment-container" *ngIf="order != null"> 
 
<!-- <iframe [src]="iframeSrc | safe" scrolling="no" class="app-tranzila-iframe" ></iframe>--> 
 
</div>

混乱については申し訳ありません、私はうまく問題を記述することに成功したいと考えています。

Answer 1

トランザクションの終了を処理するには、常に「成功」​​または「失敗」コールバックを使用する必要があります。理由はあります。

コールバックで、親ページで必要な処理を行います。 このページを使用して、サーバーにトランザクションの新しいステータスを伝えることも検討する必要があります。