Question

我有一个角度4应用程序。我使用第三方支付系统（名为Tranzila）。 Tranzila使用iframe轻松集成。在iframe中，用户在Tranzila域中执行付款，这节省了构建表单和处理信用卡号码的时间。 Tranzila使我能够在用户提交请求后配置成功和错误发布请求。我的问题是，我想在成功付款请求后关闭iframe，并将用户重定向到我网站中的页面（不在iframe内）。我试图在请求后找到关闭iframe的最佳方法。由于无法使用javascript自定义付款页面，因此我无法在成功请求后操纵其页面以关闭iframe。

我想到了两个选择： 1.使用Tranzila默认＆＃34;付款成功＆＃34;页面并尝试从我的网站收听iframe src更改。 2.自定义其页面以导航到＆＃34;付款成功＆＃34;我域中的页面。添加一个路径到我的域中的页面，该页面将调用在parent中声明的函数，该页面将关闭iframe并导航到成功路径。

现在，我按照以下方式实施app-payment-order：

＆＃13;

 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
  }
  
  
  
  
}

＆＃13;

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

＆＃13;

对这个烂摊子感到抱歉，我希望我能成功地描述这个问题。

Answer 1

你应该总是使用他们的成功＆＃34;或者＆＃34;失败＆＃34;回调以处理交易的结束，这是有原因的。

回调，并在父页面上执行您需要的任何操作。您还应该考虑使用此页面告诉您的服务器新的交易状态。

Angular 4 - 重定向

1 个答案: