介绍
react-stripe-elements-universal 是一个用于 React 的 Stripe 支付库。它为你提供了一个简单的方法来在 React 应用程序中处理付款。这个包适用于所有类型的 React 应用：
- 服务端渲染的应用程序
- 客户端渲染的应用程序
在这篇文章中，我们将会学习如何使用 react-stripe-elements-universal，并且展示如何构建一个简单的支付表单。
安装
要使用 react-stripe-elements-universal，你需要先安装 Stripe 的 JavaScript 库。
npm install stripe
然后，你可以使用以下命令安装 react-stripe-elements-universal：
npm install react-stripe-elements-universal
集成步骤
接下来，我们将会把 react-stripe-elements-universal 集成到我们的 React 应用程序中。按照以下步骤操作：
步骤一：创建一个 Stripe 账户
在开始之前，请确保你已经申请了一个 Stripe 账户。
步骤二：引入 Stripe 模块
在你的 React 组件中，创建一个 Stripe 对象，并使用 process.env.STRIPE_PUBLIC_KEY 替换为你的 Stripe 公钥：
import React from 'react'; import Stripe from 'stripe'; const stripe = Stripe(process.env.STRIPE_PUBLIC_KEY);
步骤三：创建一个支付表单
使用 react-stripe-elements-universal 中的 CardElement 组件，创建一个简单的支付表单：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------------ ------------ - ---- ----------------------------------
----- ------------ - -- ------ -- -- -
----- ------ -------- - -------------
----- ------- --------- - -------------
----- ------------ - ----- --- -- -
-------------------
----- - ----- - - ----- --------------------
----- -----
------ ------
---
-------------------
--
------ -
----- ------------------------
-------
-----
------ ----------- ------------ ------------- -- ------------------------ --
--------
-------
------
------ ------------ ------------- ------------- -- ------------------------- --
--------
------------ --
------- --------------------------
-------
--
--
------ ------- ---------------------------步骤四：渲染支付表单
在你的 React 组件中，渲染支付表单组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------ ---- -----------------
----- --- - -- -- -
------ -
-----
-----------------
------------- --
------
--
--
------ ------- ----完成上述步骤后，你的 React 应用程序将会具备处理付款的功能。
API
react-stripe-elements-universal 的主要 API 在 react-stripe-elements 中可用。如果你还不熟悉它的 API，请查看 https://stripe.com/docs/stripe-js/elements/quickstart。
结论
在本文中，我们讲解了如何使用 react-stripe-elements-universal 来集成 Stripe 支付服务。我们还创建了一个简单的支付表单，演示了如何使用 Stripe API 来生成付款令牌。
现在，你可以将 react-stripe-elements-universal 应用于你自己的 React 应用程序，开始接收付款。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668181e8991b448e2a66