Angular 17动态加载Przelewy24支付脚本无法关联组件求助

核心问题分析 #

你遇到的问题本质是两个关键点：

1. Angular组件的DOM渲染时机与第三方脚本加载时机不匹配，脚本执行时组件内的P24FormContainer容器可能还未完成渲染
2. 第三方脚本依赖的回调函数（FinishPaymentFunction、PaymentErrorFunction）属于全局作用域，而Angular组件内的函数默认处于私有作用域，无法被外部脚本访问

解决方案步骤 #

1. 将回调函数挂载到全局window对象

Przelewy24的脚本会从全局作用域查找你在data-successCallback和data-failureCallback中指定的函数，因此需要把组件内的回调逻辑暴露到window：

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-payment',
  templateUrl: './payment.component.html'
})
export class PaymentComponent implements OnInit, OnDestroy {
  ngOnInit(): void {
    // 挂载成功回调到全局
    (window as any).FinishPaymentFunction = () => {
      this.handlePaymentSuccess();
    };
    // 挂载失败回调到全局
    (window as any).PaymentErrorFunction = () => {
      this.handlePaymentFailure();
    };
  }

  ngOnDestroy(): void {
    // 组件销毁时清理全局函数，避免内存泄漏
    delete (window as any).FinishPaymentFunction;
    delete (window as any).PaymentErrorFunction;
  }

  private handlePaymentSuccess(): void {
    // 你的支付成功逻辑，比如更新订单状态、跳转页面等
  }

  private handlePaymentFailure(): void {
    // 你的支付失败逻辑，比如提示用户、重置表单等
  }
}

2. 在组件视图初始化后加载脚本

使用Angular的AfterViewInit钩子，确保组件内的P24FormContainer容器已经渲染完成后再加载第三方脚本：

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-payment',
  template: `
    <div
      #p24Container
      id="P24FormContainer"
      [attr.data-sign]="paymentSign"
      [attr.data-dictionary]="safeDictionary"
    ></div>
  `
})
export class PaymentComponent implements AfterViewInit {
  @ViewChild('p24Container') p24Container!: ElementRef;
  paymentSign = 'YOUR_SIGN_FROM_API'; // 从后端接口获取
  paymentToken = 'YOUR_TOKEN_FROM_API'; // 从后端接口获取
  private dictionary = { /* 你的字典配置数据 */ };

  constructor(private sanitizer: DomSanitizer) {}

  get safeDictionary(): SafeHtml {
    // 处理字典JSON的DOM安全校验，避免Angular拦截
    return this.sanitizer.bypassSecurityTrustHtml(JSON.stringify(this.dictionary));
  }

  ngAfterViewInit(): void {
    // 确保容器存在后再加载脚本
    if (!this.p24Container.nativeElement) return;

    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = `https://sandbox.przelewy24.pl/inchtml/ajaxPayment/ajax.js?token=${this.paymentToken}`;

    // 脚本加载完成后，手动触发初始化（如果Przelewy24支持的话）
    script.onload = () => {
      // 部分第三方支付脚本需要手动调用初始化方法，比如：
      // if (window.p24) window.p24.init('P24FormContainer');
      // 可参考Przelewy24官方文档确认是否需要这一步
    };

    // 将脚本追加到<body>标签
    document.body.appendChild(script);
  }
}

3. 组件销毁时清理资源

避免内存泄漏，在组件销毁时移除加载的脚本：

ngOnDestroy(): void {
  // 清理全局函数（之前已写）
  delete (window as any).FinishPaymentFunction;
  delete (window as any).PaymentErrorFunction;

  // 移除加载的Przelewy24脚本
  const targetScript = document.querySelector(`script[src*="ajaxPayment/ajax.js?token=${this.paymentToken}"]`);
  if (targetScript) {
    targetScript.remove();
  }
}

额外排查点 #

• 确认从后端获取的token、sign和字典数据完全正确，可通过浏览器控制台查看容器的data-*属性是否正确渲染
• 如果脚本加载后仍未生成表单，检查浏览器控制台是否有Przelewy24相关的报错，比如令牌无效、签名不匹配等
• 若Przelewy24脚本需要特定的全局变量或初始化参数，可参考官方文档补充对应的逻辑

内容的提问来源于stack exchange，提问作者corosto