Stripe 是一家流行的第三方支付公司，通过为商家提供易于使用的 API，使其易于集成到各种应用程序中。在本文中，我们将演示如何在 Angular 应用程序中添加 Stripe 支付系统。
步骤 1：创建 Stripe 帐户并获取 API 密钥
首先，我们需要访问 Stripe 官网 并注册一个账户。接下来，我们需要在 Stripe 控制面板中生成 API 密钥。我们可以通过以下步骤来实现：
- 登录到 Stripe 账户。
- 点击“开发者”选项卡。
- 点击“API 密钥”。
- 复制测试密钥或生产密钥。
请注意，测试密钥用于测试环境，而生产密钥用于实际生产环境。
步骤 2：安装 Stripe 库
为了在 Angular 应用程序中使用 Stripe，我们需要安装 Stripe 库。我们可以通过在终端中运行以下命令来完成此操作：
npm install stripe --save
步骤 3：创建 Stripe 服务
接下来，我们需要创建一个 Angular 服务，它将使用我们在步骤 1 中生成的 API 密钥。我们可以通过以下步骤来创建服务：
- 在 Angular 应用程序中创建一个名为
stripe.service.ts的新文件。 - 将以下代码添加到文件中：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------ - ---- ---------
-------------
----------- ------
--
------ ----- ------------- -
------- ------- -------
------------- -
----------- - --- ------------------------------
-
------ ------------ ------ -
------ ------------
-
-请注意，在上面的代码中，我们创建了一个名为 stripe 的私有变量，它将存储 Stripe 对象。在构造函数中，我们将 API 密钥传递给 Stripe 构造函数。我们还创建了一个公共方法 getStripe()，用于返回 Stripe 对象，以便其他组件使用。
步骤 4：创建 PaymentIntent
在使用 Stripe 进行每次支付之前，我们需要先创建一个 PaymentIntent 对象。 PaymentIntent 包含关于付款的所有信息，并将被用于创建实际的付款。
我们可以通过在 stripe.service.ts 中添加以下方法来创建 PaymentIntent：
public async createPaymentIntent(amount: number, currency: string): Promise<string> {
const paymentIntent = await this.stripe.paymentIntents.create({
amount,
currency
});
return paymentIntent.client_secret;
}在上述代码中，我们使用 Stripe 对象中可用的 paymentIntents 函数来创建新的 PaymentIntent，并将付款金额和货币传递给它。最后，我们返回 PaymentIntent 对象中的 client_secret 属性。
步骤 5：创建 Checkout 和处理付款
当我们创建 PaymentIntent 后，我们需要提供一个 Checkout 界面，以便用户输入付款细节。我们可以使用 Stripe 的官方 Checkout 库来轻松完成此操作。
在 index.html 文件的 <head> 部分中添加以下代码：
<script src="https://checkout.stripe.com/checkout.js"></script>
接下来，在需要处理付款的组件中，我们可以创建一个名为 checkout() 的方法，该方法将显示 Checkout 界面并处理付款。请注意，在以下代码中，我们使用上面创建的 stripe.service.ts 中的 createPaymentIntent() 方法来创建 PaymentIntent：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- -------------------
------------
--------- --------------
--------- -------- ----------------------- -- ------------------
--
------ ----- ---------------- -
------------------- -------------- -------------- --
------ ----------- ---- -
----- ------ - -----
----- -------- - ------
---------------------------------------------- --------------------------- -- -
----- ------- - ----------------------------------------
---- ----------------------
------- -------
------ ------- ---- -- -
-- ---- --- ----- -- ---- ------ -- ------ ------
-
---
--------------
----- --- -----
------------ -------- -------------
------- -------
--------- ---------
---------------- -----
--------------- ----
---
---
-
-在上述代码中，我们使用 StripeCheckout 对象来配置并打开 Checkout 界面。在 token() 回调函数中，我们可以通过将 token 和 PaymentIntent 的 client_secret 发送到前端服务器来创建实际的付款。
结论
在本文中，我们展示了如何在 Angular 应用程序中集成 Stripe 支付系统。我们创建了一个 StripeService 服务来处理 Stripe API，使用 Stripe Checkout 库来创建 Checkout 界面以及处理付款。学习了这些基本知识后，您可以开始构建更复杂的支付过程，并灵活地使用 Stripe API 中的其他功能扩展它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676f8a54e9a7045d0d740fc7