Angular 5集成PayPal支付遇组件报错，求解决方案

你遇到的红色下划线问题很明确——Component、NgModule、ElementRef、NgZone这些Angular核心类没有被导入，所以TypeScript无法识别它们。接下来我会一步步帮你修正这个问题，并且给出完整的PayPal集成流程：

第一步：确认依赖与基础配置 #

首先确保你已经安装了必要的依赖：

npm install paypal-checkout --save
npm install xcomponent --save # PayPal Angular驱动依赖的工具库

同时保留index.html中的PayPal官方脚本：

<script src="https://www.paypalobjects.com/api/checkout.js"></script>

第二步：修复app.module.ts的代码错误 #

在app.module.ts中，你需要先导入所需的Angular核心类，再创建PayPal按钮模块。完整代码如下：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component, ElementRef, NgZone } from '@angular/core'; // 新增核心类导入
import { AppComponent } from './app.component';

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

// 创建PayPal按钮模块
export const PayPalButtonModule = paypal.Button.driver('angular2', {
  Component,
  NgModule,
  ElementRef,
  NgZone
});

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    PayPalButtonModule // 将PayPal模块加入导入列表
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这样红色下划线的问题就解决了，TypeScript现在能识别这些导入的核心类了。

第三步：在组件中使用PayPal结账按钮 #

接下来在你的业务组件（比如app.component.ts）中配置付款参数，并在模板中调用按钮组件：

组件逻辑代码（app.component.ts）： #

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 配置PayPal付款核心参数
  paypalConfig = {
    env: 'sandbox', // 测试环境用sandbox，生产环境替换为production
    client: {
      sandbox: '你的PayPal沙箱客户端ID', // 替换成你自己的沙箱ID
      production: '你的生产环境客户端ID'
    },
    commit: true,
    payment: (data: any, actions: any) => {
      return actions.payment.create({
        transactions: [
          {
            amount: { total: '9.99', currency: 'USD' } // 自定义付款金额与币种
          }
        ]
      });
    },
    onAuthorize: (data: any, actions: any) => {
      return actions.payment.execute().then((payment: any) => {
        // 付款成功后的业务逻辑，比如跳转成功页面、保存订单记录等
        console.log('付款成功！', payment);
      });
    }
  };
}

组件模板代码（app.component.html）： #

<h1>欢迎使用PayPal结账</h1>
<!-- 绑定配置参数，渲染PayPal按钮 -->
<paypal-button [config]="paypalConfig"></paypal-button>

替代方案：无需驱动的手动集成方式 #

如果你觉得使用官方驱动的方式太繁琐，也可以直接在组件中手动渲染PayPal按钮，步骤更简洁：

1. 同样安装paypal-checkout并在index.html加入官方脚本；
2. 组件代码如下：

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

declare const paypal: any;

@Component({
  selector: 'app-root',
  template: '<div #paypalContainer></div>'
})
export class AppComponent implements AfterViewInit {
  @ViewChild('paypalContainer') paypalContainer!: ElementRef;

  ngAfterViewInit(): void {
    paypal.Button.render({
      env: 'sandbox',
      client: {
        sandbox: '你的沙箱客户端ID'
      },
      payment: (data: any, actions: any) => {
        return actions.payment.create({
          transactions: [{ amount: { total: '9.99', currency: 'USD' } }]
        });
      },
      onAuthorize: (data: any, actions: any) => {
        return actions.payment.execute().then((payment: any) => {
          console.log('付款成功', payment);
        });
      }
    }, this.paypalContainer.nativeElement);
  }
}

这种方式无需额外创建模块，适合简单的结账场景。

最后提醒：记得去PayPal开发者平台申请专属的客户端ID，沙箱环境用于测试，正式上线前要切换到生产环境配置。

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