在 Angular 14 中集成 Stripe 实现自定义支付流程

本文旨在指导开发者如何在 Angular 14 项目中集成 Stripe，实现自定义的支付流程，避免使用 stripe-ngx 库的默认弹窗设计。我们将探讨如何在 Angular 组件中捕获支付成功事件，无需重定向到新的 URL，并解决使用 Stripe JS Checkout 过程中可能遇到的 clientSecret 缺失问题。

集成 Stripe 到 Angular 14 项目

在 Angular 14 项目中集成 Stripe，你可以直接使用 Stripe 提供的 JavaScript 库，以便更灵活地控制支付流程。以下步骤将引导你完成集成：

1. 安装 Stripe JavaScript 库:

   首先，通过 npm 或 yarn 安装 Stripe JavaScript 库：

   npm install @stripe/stripe-js

   或者

   yarn add @stripe/stripe-js

2. 在 Angular 组件中引入 Stripe:

   在需要使用 Stripe 的 Angular 组件中，引入 Stripe JavaScript 库。你需要使用你的 Stripe 公钥初始化 Stripe 实例。

   import { Component, OnInit } from '@angular/core'; import { loadStripe, Stripe } from '@stripe/stripe-js';  @Component({   selector: 'app-payment',   templateUrl: './payment.component.html',   styleUrls: ['./payment.component.css'] }) export class PaymentComponent implements OnInit {   stripe: Stripe | null = null;   emailAddress: string = ''; // 假设你从用户那里获取了邮箱地址    async ngOnInit() {     this.stripe = await loadStripe('YOUR_STRIPE_PUBLIC_KEY'); // 替换为你的 Stripe 公钥   }    // ... 其他代码 }

3. 创建 Payment Element:

   Payment Element 是 Stripe 提供的一个 UI 组件，可以处理各种支付方式。你需要在 HTML 模板中创建一个容器来渲染 Payment Element。

   <div id="payment-element">   <!-- Payment Element 将会渲染在这里 --> </div>

4. 初始化 Payment Element:

   在组件中初始化 Payment Element。确保在 ngOnInit 或适当的生命周期钩子中执行此操作，并在 Stripe 加载完成后进行。

   import { AfterViewInit, ElementRef, ViewChild } from '@angular/core';  // ...  @ViewChild('paymentElement') paymentElement: ElementRef;  async ngAfterViewInit() {     if (!this.stripe) {         return;     }      const elements = this.stripe.elements({         clientSecret: 'YOUR_CLIENT_SECRET', // 替换为你的 Client Secret     });      const paymentElement = elements.create('payment');     paymentElement.mount(this.paymentElement.nativeElement); }

   请确保替换 YOUR_STRIPE_PUBLIC_KEY 和 YOUR_CLIENT_SECRET 为你实际的 Stripe 公钥和 Client Secret。Client Secret 通常在服务器端创建 Payment Intent 时生成。

5. 处理支付:

   当用户提交支付信息后，你需要调用 stripe.confirmPayment 方法来确认支付。

   async handleSubmit(event: any) {   event.preventDefault();    if (!this.stripe) {     return;   }    const elements = this.stripe.elements();    const { error } = await this.stripe.confirmPayment({     elements,     confirmParams: {       receipt_email: this.emailAddress,     },     redirect: "if_required" // 根据需要设置 redirect 选项   });    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) {     // 显示消息，例如使用 Angular Material 的 Snackbar     console.log(message); }

   在这个例子中，redirect: “if_required” 选项告诉 Stripe 在需要时才进行重定向，例如需要进行 3D Secure 认证时。

捕获支付成功事件

要捕获支付成功事件，你需要在 confirmPayment 方法的回调函数中处理。如果 error 为 null，则表示支付成功。你可以在回调函数中执行后续操作，例如更新订单状态、发送邮件等。

解决 “clientSecret” 缺失问题

如果在调用 stripe.confirmPayment 时遇到 “clientSecret” 缺失的错误，请确保以下几点：

1. Client Secret 的正确传递： 确保你正确地从服务器端获取了 Client Secret，并将其传递给了 Angular 组件。
2. Payment Intent 的创建： 确保在服务器端正确创建了 Payment Intent，并且 Client Secret 是从该 Payment Intent 中获取的。
3. Stripe Elements 的初始化： 确保在调用 stripe.confirmPayment 之前，正确地初始化了 Stripe Elements，并将 Client Secret 传递给了 stripe.elements 方法。

示例代码 (服务器端 – Node.js):

const stripe = require('stripe')('YOUR_STRIPE_SECRET_KEY'); // 替换为你的 Stripe Secret Key  exports.createPaymentIntent = async (req, res) => {   try {     const paymentIntent = await stripe.paymentIntents.create({       amount: 1099, // 支付金额，以分为单位       currency: 'usd',       automatic_payment_methods: {         enabled: true,       },     });      res.json({ clientSecret: paymentIntent.client_secret });   } catch (e) {     return res.status(400).send({       error: {         message: e.message,       },     });   } };

注意事项:

• 永远不要在客户端存储或处理 Stripe Secret Key。
• 确保你的服务器端代码安全可靠，以防止未经授权的访问。
• 在生产环境中，使用 HTTPS 协议来保护支付信息的安全。
• 仔细阅读 Stripe 官方文档，了解更多关于集成 Stripe 的信息。

总结

通过以上步骤，你可以在 Angular 14 项目中成功集成 Stripe，实现自定义的支付流程。记住，安全是至关重要的，请务必遵循 Stripe 的最佳实践，并采取适当的安全措施来保护用户的支付信息。通过自定义支付流程，你可以更好地控制用户体验，并提供更灵活的支付选项。