如何在Angular 11组件中引入script实现MercadoPago支付结账功能

Angular出于安全策略会自动移除组件模板内的<script>标签，所以你直接在模板里写的初始化脚本不会执行，同时如果没有提前加载MercadoPago的SDK，也会触发控制台未定义类报错。你可以按照以下步骤修复问题：

步骤1：加载MercadoPago SDK #

优先选择全局引入方式，在项目根目录的index.html的<head>标签内添加SDK引入代码：

<script src="https://sdk.mercadopago.com/js/v2"></script>

步骤2：编写组件逻辑 #

在你要集成支付的子组件TS文件中，按以下规则编写代码：

1. 先在组件类外部声明MercadoPago全局变量，规避TS类型校验报错
2. 把初始化逻辑放在ngAfterViewInit生命周期中执行，确保渲染容器DOM已经加载完成

完整代码示例：

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

// 声明全局MercadoPago变量
declare const MercadoPago: any;

@Component({
  selector: 'app-pay-checkout',
  templateUrl: './pay-checkout.component.html',
  styleUrls: ['./pay-checkout.component.css']
})
export class PayCheckoutComponent implements AfterViewInit {

  ngAfterViewInit(): void {
    // 替换为你自己的MercadoPago公钥
    const mp = new MercadoPago('PUBLIC_KEY', {
      locale: 'es-AR'
    });
    // 渲染支付按钮
    mp.checkout({
      preference: { id: 'YOUR_PREFERENCE_ID' },
      render: {
        container: '.cho-container',
        label: 'Pay',
      }
    });
  }

}

步骤3：添加模板渲染容器 #

在子组件的HTML模板中添加支付按钮对应的挂载容器：

<div class="cho-container"></div>

注意事项 #

• 确认使用的公钥是MercadoPago后台对应环境的公钥，测试环境和生产环境公钥不通用
• 确认YOUR_PREFERENCE_ID是后端调用MercadoPago接口生成的有效偏好ID
• 生产环境使用时需将站点域名添加到MercadoPago后台的安全域名白名单中

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