前言
有这样一种场景：我们的应用需要接入 Stripe 进行支付，但我们又不想直接引入 Stripe 框架，而是希望通过第三方封装的库来实现。对于使用 React 的开发者来说，mkellyclare-react-stripe 这个 npm 包是一个不错的选择。它提供了 Stripe 封装好的组件，轻松地集成 Stripe 支付体验到 React 应用中。本篇文章主要介绍如何使用 mkellyclare-react-stripe 这个 npm 包。
安装
我们可以使用 npm/Yarn 安装 mkellyclare-react-stripe：
- -- --- -- --- ------- ------------------------ ------ - -- ---- -- ---- --- ------------------------
初始化
首先，我们需要在应用中引入 Stripe 和 mkellyclare-react-stripe 相关的模块：
-- -- ------ ------ ------ ---- --------- -- -- ------------------------ ------ - -------- - ---- -------------------------- ------ - ---------- - ---- ------------------------- -- --- ------ ----- ------------- - ----------------------------------------------------
在这里，我们使用 loadStripe 方法来初始化 Stripe，并返回一个 Promise，Promise 的结果是一个 Stripe 对象。此外，我们还需要定义一个 react-stripe-js 的 Elements 集合，集成了 react-stripe-js 包中的内置组件。
请注意，我们还需要在环境变量中定义 Stripe 公钥：
-----------------------------------------
实现一个简单的结账表单
在我们使用 Stripe 支付之前，我们需要实现一个界面来获取用户的付款信息。因此，我们需要创建一个简单的 checkout 表单，并将其包装在 Elements 中。
--------- ----------------------- ------------- -- -----------
以下是如何编写 test/CheckoutForm.js 组件：
------ ------ - -------- - ---- --------
------ - ------------ ---------- ----------- - ---- --------------------------
----- ------------ - -- -- -
----- ------ - ------------
----- -------- - --------------
----- ------------ -------------- - ----------------
----- ------------ - ----- ------- -- -
-----------------------
-- -------- -- ---------- -
-------
-
--------------------
----- - ------ ------------- - - ----- ----------------------------
----- -------
----- ---------------------------------
---
---------------------
-- ------- -
---------------------- -------
- ---- -
------------------------------ ---------------
-
--
------ -
----- ------------------------
------------ --
------- ------------- -------------------
----------- - --------------- - ------
---------
-------
--
--
------ ------- -------------在这里，我们将使用 useStripe 和 useElements 方法来获取 Stripe 和 Elements 对象。我们使用 CardElement 组件为用户显示 Stripe 的默认输入框，最后，使用 Stripe API 来创建 PaymentMethod 对象。
集成更高级的 Stripe API 功能
mkellyclare-react-stripe提供了许多通过另外几个组件使用更高级 Stripe API 功能的方法。
例如，我们可以使用PaymentRequestButtonElement组件创建 Apple Pay、Google Pay 或 Masterpass 的结账按钮等。
----- ------- - -
--------------- -
-------- -----
--------- ------
------ -
------ ----- -------
------- -----
--
----------------- -----
------------------ -----
--
------ -
--------------------- -
----- ------
------ -------
------- -------
--
--
--
---------------------------- ----------------- --请注意，此功能并不是所有集成 Stripe 的网站都能使用的，必须在后台设置才能使用。
在 mkellyclare-react-stripe中还提供了其他功能，包括收费信息的存储、使用本地化消息、支付请求的筛选等等。
将每个功能单独列出来超出了本文的范围，读者可以在 mkellyclare-react-stripe 的 GitHub 页面中了解更多。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055ad581e8991b448d870e