如何在Angular 2+指定组件HTML模板中添加Razorpay支付脚本？

刚好之前做过类似的Angular集成Razorpay的需求，我来给你梳理下可行的方案：

首先得明确：Angular组件模板里直接添加<script>标签是行不通的，因为Angular的模板编译器会自动过滤掉脚本标签，这是出于安全和性能优化的考虑，所以直接写在组件HTML里的脚本不会被加载。不过有几种靠谱的方法可以实现只在特定组件加载Razorpay脚本：

这是Angular官方推荐的动态加载外部脚本的方式，还能在组件销毁时清理脚本，避免内存泄漏。

步骤如下：

1. 在组件中导入所需的服务：

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

2. 在组件类中注入服务，并在生命周期钩子中处理脚本的加载与销毁：

declare var Razorpay: any; // 解决TypeScript类型报错

export class PaymentComponent implements OnInit, OnDestroy {
  private razorpayScript: HTMLScriptElement;

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngOnInit(): void {
    // 创建脚本元素
    this.razorpayScript = this.renderer.createElement('script');
    this.razorpayScript.src = 'https://checkout.razorpay.com/v1/checkout.js';
    this.razorpayScript.type = 'text/javascript';

    // 脚本加载完成后初始化Razorpay
    this.razorpayScript.onload = () => {
      console.log('Razorpay脚本加载完成');
      this.initializeRazorpayCheckout();
    };

    // 将脚本添加到当前组件的DOM容器中，作用域更可控
    this.renderer.appendChild(this.el.nativeElement, this.razorpayScript);
  }

  ngOnDestroy(): void {
    // 组件销毁时移除脚本，避免内存泄漏
    if (this.razorpayScript) {
      this.renderer.removeChild(this.el.nativeElement, this.razorpayScript);
    }
  }

  private initializeRazorpayCheckout(): void {
    // 这里写你的Razorpay结账逻辑
    const checkoutOptions = {
      key: 'YOUR_RAZORPAY_KEY',
      amount: '50000', // 金额单位为paisa，这里代表500卢比
      currency: 'INR',
      name: '你的商家名称',
      description: '测试交易',
      handler: (response: any) => {
        // 支付成功后的回调处理
        console.log('支付成功，ID:', response.razorpay_payment_id);
      },
      prefill: {
        name: '测试用户',
        email: 'test@example.com',
        contact: '9999999999'
      }
    };

    const rzpInstance = new Razorpay(checkoutOptions);
    rzpInstance.open();
  }
}

如果觉得手动创建脚本太繁琐，可以用ngx-load-script这个库来简化脚本加载流程：

1. 先安装库：

npm install ngx-load-script --save

2. 在组件中导入并使用：

import { Component, OnInit } from '@angular/core';
import { LoadScriptService } from 'ngx-load-script';

declare var Razorpay: any;

export class PaymentComponent implements OnInit {
  constructor(private loadScriptService: LoadScriptService) {}

  ngOnInit(): void {
    this.loadScriptService.load('https://checkout.razorpay.com/v1/checkout.js')
      .then(() => {
        console.log('Razorpay脚本加载成功');
        this.initializeRazorpayCheckout();
      })
      .catch(error => {
        console.error('脚本加载失败:', error);
      });
  }

  private initializeRazorpayCheckout(): void {
    // 同样的结账初始化逻辑，和方法1一致
    const checkoutOptions = { /* 你的配置 */ };
    const rzpInstance = new Razorpay(checkoutOptions);
    rzpInstance.open();
  }
}

• 两种方法都能确保脚本只在当前组件加载时才被引入，其他页面不会加载这个脚本，完美解决你不想全局加载的问题。
• 如果使用TypeScript时遇到Razorpay未定义的报错，添加declare var Razorpay: any;就能解决类型检查的问题。

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