React Native 是一种用于编写本机移动应用程序(以 JavaScript 编写)的框架, 此外它还可以利用各种可用的 npm 包扩展应用程序的功能。在本文中，我们将了解一个称为 react-native-payments-addon-stripe 的 npm 包, 它提供了一个方便的 API，用于与支付网关 Stripe 进行交互。
Stripe 是什么?
Stripe 是一个全球支付处理公司，总部位于美国旧金山，受到了多家知名公司的掌握和推荐，例如 Amazon、Google 和 Microsoft 等。Stripe 可以让用户更加轻松地接收和处理支付，提供了简单易用的 API 和用户界面。我们将使用 Stripe API，通过 react-native-payments-addon-stripe npm 包，将支付功能嵌入到 React Native 应用程序中。
安装 react-native-payments-addon-stripe
要使用 react-native-payments-addon-stripe npm 包, 我们需要在项目中安装它。使用以下命令安装 react-native-payments-addon-stripe：
npm install react-native-payments-addon-stripe --save
添加 Stripe API 密钥
想要使用 react-native-payments-addon-stripe, 需要在项目中添加一个 Stripe API 密钥。在 stripe.com 上注册一个帐户, 添加一个新的应用程序并在应用程序设置中找到“API 密钥”部分。我们需要将此密钥添加到 React Native 项目的常量中，并将其传递给 react-native-payments-addon-stripe. 这可以通过创建一个名为 AppConstants.js 的文件来完成。
module.exports = {
STRIPE_API_KEY: 'YOUR_STRIPE_API_KEY'
};通过将 KEY_NAME 替换为 Stripe 发行的 API 密钥，使用命令行创建文件并将上面的代码添加到文件中。在需要使用 API 密钥的地方，引用该文件，并从键访问它：
import AppConstants from '../constants/AppConstants'; const STRIPE_API_KEY = AppConstants.STRIPE_API_KEY;
实现 react-native-payments-addon-stripe
我们在示例 React Native 应用程序中使用 react-native-payments-addon-stripe npm 包, 我们将创建一个单独的组件来处理支付请求。让我们先处理应用程序规划，然后继续代码的实现。
-- -------------------- ---- -------
------ ----- ---- --------
------ -
-----
-----------------
-----
-----------
- ---- ---------------
------ ------------ ---- ----------------------------
------ ------ ---- -------------------------------------
----- ------------- ------- --------------- -
------------------ -
-------------
---------- - -
----------- ---
--------- ---
-------- ---
---- ---
--
-------------------
--------------- ----------------------------
----------- ---
--------------- -------
---
-
-------------------- - ------------ -- -
----------------------------
-
------------------ - ---------- -- -
--------------------------
-
----------------- - --------- -- -
-------------------------
-
------------- - ----- -- -
---------------------
-
------------------- - ----- -- -- -
--- -
----- ------- - ----- ------------------------------------
----------------------
- ----- ------- -
---------------------
-
-
-------- -
------ -
----- -------------------------
----- -----------------------
----- ---- ---- -------
-------
----------
--------------------
----------------- -------
-----------------------------
----------------------------------------
----------------------
--
----- -------------------
----------
--------------------- ------------------
----------------- ------
---------------------------
--------------------------------------
----------------------
--
----------
--------------------- ------------------
----------------- -----
--------------------------
-------------------------------------
----------------------
--
-------
----------
--------------------
-----------------
----------------------
---------------------------------
----------------------
--
-----------------
------------------------
----------------------------------
-
----- -----------------------------
---
-------
-------------------
-------
--
-
-
----- ------ - -------------------
---------- -
----- --
---------------- ----------
----------- ---
------------------ ---
--
-------- -
--------- ---
----------- -------
--------------- ---
--
---- -
-------------- ------
--------------- ----------------
--
------ -
------- ---
------------------ ---
------------- --
------------ --
------------ ----------
--------------- ---
--
---------- -
------ ------
--
---------- -
---------------- ----------
------------- --
---------------- ---
---------- ---
--
-------------- -
------ ----------
----------- -------
---------- ---------
--
---
------ ------- --------------在此代码中，我们使用 react-native-payments-addon-stripe 完成了以下操作：
- 通过设置 publishableKey，将 Stripe API 密钥传递给 react-native-payments-addon-stripe。
- 处理 cardNumber，expMonth，expYear 和 cvc 输入的值，并在页面上熏染。
- 创建 _onPayButtonPressed 标准方法并尝试处理支付请求。
- 以示例形式渲染了组件。
结论
使用 react-native-payments-addon-stripe，我们可以轻松将支付功能集成到应用 程序中。在本文中，我们一步一步地展示了如何安装和使用 react-native-payments-addon-stripe npm 包，并提供了一个使用示例。无论是创建一个简单的购物车应用程序还是一个完整的电商平台，react-native-payments-addon-stripe 可以方便地处理支付请求，让你的用户流畅地完成购买。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005726181e8991b448e88db