本文将介绍如何在 Angular 14 项目中集成 Stripe 支付，并实现自定义支付流程，避免使用 stripe-ngx 库及其默认弹窗样式。我们将重点讲解如何在 Angular 组件中捕获支付成功事件，避免页面跳转，以及解决使用 Stripe JS checkout 时可能遇到的 clientSecret 错误。
集成 Stripe JS 到 Angular 项目
首先，需要在 Angular 项目中引入 Stripe JS 库。可以通过在 index.html 文件中添加以下代码来实现：
或者，在 angular.json 文件中配置 scripts 数组：
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"scripts": [
"node_modules/stripe/stripe-js/dist/stripe.js"
]
}
}
}接下来，在需要使用 Stripe 的 Angular 组件中，注入 Stripe 实例。建议创建一个 Stripe 服务来封装 Stripe 相关逻辑，以便在多个组件中复用。
import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
@Injectable({
providedIn: 'root'
})
export class StripeService {
stripe: any;
constructor() {
this.stripe = Stripe(environment.stripePublicKey); // 替换为你的 Stripe 公钥
}
getStripeInstance() {
return this.stripe;
}
}在 environment.ts 文件中配置你的 Stripe 公钥：
export const environment = {
production: false,
stripePublicKey: 'pk_test_YOUR_STRIPE_PUBLIC_KEY' // 替换为你的 Stripe 公钥
};实现自定义支付流程
在组件中，获取 Stripe 实例，并创建支付元素。
import { Component, OnInit, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
import { StripeService } from './stripe.service';
@Component({
selector: 'app-payment',
templateUrl: './payment.component.html',
styleUrls: ['./payment.component.css']
})
export class PaymentComponent implements OnInit, AfterViewInit {
@ViewChild('cardElement') cardElement: ElementRef;
stripe: any;
elements: any;
card: any;
emailAddress: string = 'test@example.com'; // 示例邮箱
constructor(private stripeService: StripeService) {
this.stripe = this.stripeService.getStripeInstance();
}
ngOnInit(): void {
}
ngAfterViewInit(): void {
this.elements = this.stripe.elements();
this.card = this.elements.create('card');
this.card.mount(this.cardElement.nativeElement);
}
async confirmPayment() {
const { error } = await this.stripe.confirmPayment({
elements: this.elements,
confirmParams: {
receipt_email: this.emailAddress,
},
redirect: "if_required" // 添加 redirect: "if_required"
});
if (error && (error.type === "card_error" || error.type === "validation_error")) {
this.showMessage(error.message);
} else if (error) {
this.showMessage("An unexpected error occurred.");
} else {
// 支付成功，可以在这里处理后续逻辑
this.showMessage("Payment succeeded!");
}
}
showMessage(message: string) {
// 显示消息的逻辑，例如使用 alert 或 Angular Material Snackbar
alert(message);
}
}在 HTML 模板中，添加一个元素用于挂载 Stripe Card Element：
注意事项:
抖猫高清去水印微信小程序，源码为短视频去水印微信小程序全套源码，包含微信小程序端源码，服务端后台源码，支持某音、某手、某书、某站短视频平台去水印，提供全套的源码，实现功能包括：1、小程序登录授权、获取微信头像、获取微信用户2、首页包括：流量主已经对接、去水印连接解析、去水印操作指导、常见问题指引3、常用工具箱：包括视频镜头分割（可自定义时长分割）、智能分割（根据镜头自动分割）、视频混剪、模糊图片高
- redirect: "if_required"：这个配置告诉 Stripe 在需要重定向时才进行重定向，例如进行 3D Secure 验证。
解决 clientSecret 错误
如果在调用 stripe.confirmPayment 时遇到 clientSecret 找不到的错误，请确保以下几点：
clientSecret 的正确获取: clientSecret 是在服务器端创建 PaymentIntent 或 SetupIntent 时生成的。 你需要通过你的后端 API 获取到这个 clientSecret。 确保你的后端代码正确地创建了 PaymentIntent 或 SetupIntent，并将其 clientSecret 返回给前端。
正确传递 clientSecret: 在调用 stripe.confirmPayment 时，clientSecret 必须正确地传递给 Stripe。 通常，clientSecret 是通过 elements 对象传递的，而不是直接作为参数传递。 确保你正确地创建了 elements 对象，并且已经将其传递给了 stripe.confirmPayment。
检查 elements 对象: 在调用 stripe.confirmPayment 之前，使用 console.log(this.elements) 检查 elements 对象是否正确创建。 确保 elements 对象包含了 Stripe Card Element 的信息。
示例 (假设从后端获取了 clientSecret):
// ...
async confirmPayment() {
// 假设 this.clientSecret 从后端获取
const { error } = await this.stripe.confirmPayment({
elements: this.elements,
confirmParams: {
receipt_email: this.emailAddress,
// payment_method: {
// card: this.card
// },
// client_secret: this.clientSecret // 不要在这里直接传递 clientSecret
},
redirect: "if_required"
});
// ...
}总结:
通过以上步骤，你可以在 Angular 14 项目中成功集成 Stripe 支付，并实现自定义的支付流程。 关键在于正确地引入 Stripe JS 库，创建 Stripe Card Element，以及正确地调用 stripe.confirmPayment 方法。 注意处理可能出现的错误，例如 clientSecret 找不到的错误，并根据 Stripe 的文档进行调试。 记住，PaymentIntent 或 SetupIntent 的创建和 clientSecret 的获取需要在后端完成，确保安全性。
