本文将介绍如何在 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：
注意事项:
AppMall应用商店
AI应用商店，提供即时交付、按需付费的人工智能应用服务
56 查看详情 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 的获取需要在后端完成，确保安全性。
以上就是使用 Angular 14 实现 Stripe 自定义支付流程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/229035.html
微信扫一扫 
支付宝扫一扫 
