ABP.IO如何结合Angular UI集成Stripe支付网关？

前置条件 #

• 已基于ABP商业版 + ABP Suite生成项目，包含Angular、Lepton-X、EF Core、SQL Server组件
• 已完成MVC UI端Stripe集成，后端Payment模块配置完成（含Stripe私钥、Webhook等）

步骤1：安装依赖 #

• 安装Stripe Angular官方包：

  npm install @stripe/stripe-angular
  

• 确保@volo/abp.ng.payment包已集成（ABP Suite生成项目默认包含，缺失则执行：abp add @volo/abp.ng.payment）

步骤2：配置Angular模块 #

在app.module.ts（或业务功能模块）中导入并配置相关模块：

import { PaymentModule } from '@volo/abp.ng.payment';
import { StripeModule } from '@stripe/stripe-angular';

@NgModule({
  imports: [
    // 其他已导入模块
    PaymentModule,
    StripeModule.forRoot('pk_test_xxxxxx') // 替换为你的Stripe公钥
  ]
})
export class AppModule {}

步骤3：创建支付组件 #

组件逻辑（stripe-payment.component.ts） #

import { Component, OnInit } from '@angular/core';
import { StripeService, Elements, Element as StripeElement, ElementsOptions } from '@stripe/stripe-angular';
import { PaymentService } from '@volo/abp.ng.payment';

@Component({
  selector: 'app-stripe-payment',
  templateUrl: './stripe-payment.component.html'
})
export class StripePaymentComponent implements OnInit {
  elements: Elements;
  card: StripeElement;
  elementsOptions: ElementsOptions = { locale: 'zh' };

  constructor(
    private stripeService: StripeService,
    private paymentService: PaymentService
  ) {}

  ngOnInit(): void {
    this.stripeService.elements(this.elementsOptions)
      .subscribe(elements => {
        this.elements = elements;
        if (!this.card) {
          this.card = this.elements.create('card', {
            style: {
              base: {
                fontSize: '16px',
                color: '#333',
                lineHeight: '40px'
              }
            }
          });
          this.card.mount('#card-element');
        }
      });
  }

  async handlePayment(): Promise<void> {
    // 1. 从后端获取支付Intent客户端密钥
    const paymentIntentResult = await this.paymentService.createPaymentIntent({
      amount: 1000, // 金额单位：分（示例为10美元）
      currency: 'usd',
      description: '订单支付'
    }).toPromise();

    if (!paymentIntentResult.success || !paymentIntentResult.clientSecret) {
      alert('创建支付会话失败，请重试');
      return;
    }

    // 2. 调用Stripe完成支付确认
    const confirmResult = await this.stripeService.confirmCardPayment(
      paymentIntentResult.clientSecret,
      {
        payment_method: {
          card: this.card,
          billing_details: { name: '用户姓名' }
        }
      }
    ).toPromise();

    if (confirmResult.error) {
      alert(`支付失败：${confirmResult.error.message}`);
    } else if (confirmResult.paymentIntent.status === 'succeeded') {
      alert('支付成功');
      // 此处可调用后端接口更新订单状态
    }
  }
}

组件模板（stripe-payment.component.html） #

<div class="p-4">
  <div id="card-element" class="border p-3 rounded mb-3"></div>
  <div id="card-errors" class="text-danger mb-3" role="alert"></div>
  <button (click)="handlePayment()" class="btn btn-primary">确认支付</button>
</div>

步骤4：后端配置验证 #

确保appsettings.json中Stripe配置正确：

"Payment": {
  "Stripe": {
    "ApiKey": "sk_test_xxxxxx", // 你的Stripe私钥
    "WebhookSecret": "whsec_xxxxxx" // Webhook密钥，用于接收支付异步通知
  }
}

• 后端PaymentIntentAppService需正确实现CreatePaymentIntent方法，调用Stripe SDK生成支付Intent并返回客户端密钥

关键注意事项 #

• 严格区分Stripe公钥（前端使用）和私钥（仅后端配置，禁止暴露到前端）
• 必须通过后端创建支付Intent，禁止直接在前端调用Stripe API
• 配置Stripe Webhook，处理支付成功/失败的异步通知，更新订单状态

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