npm 包 react-native-payments-addon-stripe 使用教程

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：

--- ------- ---------------------------------- ------

添加 Stripe API 密钥

想要使用 react-native-payments-addon-stripe, 需要在项目中添加一个 Stripe API 密钥。在 stripe.com 上注册一个帐户, 添加一个新的应用程序并在应用程序设置中找到“API 密钥”部分。我们需要将此密钥添加到 React Native 项目的常量中，并将其传递给 react-native-payments-addon-stripe. 这可以通过创建一个名为 AppConstants.js 的文件来完成。

-------------- - -

 --------------- ---------------------

--

通过将 KEY_NAME 替换为 Stripe 发行的 API 密钥，使用命令行创建文件并将上面的代码添加到文件中。在需要使用 API 密钥的地方，引用该文件，并从键访问它：

------ ------------ ---- ----------------------------
----- -------------- - ----------------------------

实现 react-native-payments-addon-stripe

我们在示例 React Native 应用程序中使用 react-native-payments-addon-stripe npm 包, 我们将创建一个单独的组件来处理支付请求。让我们先处理应用程序规划，然后继续代码的实现。

------ ----- ---- --------
------ -
  -----
  -----------------
  -----
  -----------
- ---- ---------------

------ ------------ ---- ----------------------------

------ ------ ---- -------------------------------------

----- ------------- ------- --------------- -
  ------------------ -
    -------------

    ---------- - -
      ----------- ---
      --------- ---
      -------- ---
      ---- ---
    --

    -------------------
      --------------- ----------------------------
      ----------- ---
      --------------- -------
    ---
  -

  -------------------- - ------------ -- -
    ----------------------------
  -

  ------------------ - ---------- -- -
    --------------------------
  -

  ----------------- - --------- -- -
    -------------------------
  -

  ------------- - ----- -- -
    ---------------------
  -

  ------------------- - ----- -- -- -
    --- -

      ----- ------- - ----- ------------------------------------
      ----------------------

    - ----- ------- -
      ---------------------
    -
  -

  -------- -
    ------ -
      ----- -------------------------
        ----- -----------------------
          ----- ---- ---- -------
        -------
        ----------
          --------------------
          ----------------- -------
          -----------------------------
          ----------------------------------------
          ----------------------
        --
        ----- -------------------
          ----------
            --------------------- ------------------
            ----------------- ------
            ---------------------------
            --------------------------------------
            ----------------------
          --
          ----------
            --------------------- ------------------
            ----------------- -----
            --------------------------
            -------------------------------------
            ----------------------
          --
        -------
        ----------
          --------------------
          -----------------
          ----------------------
          ---------------------------------
          ----------------------
        --
        -----------------
          ------------------------
          ----------------------------------
        -
          ----- -----------------------------
            ---
          -------
        -------------------
      -------
    --
  -
-

----- ------ - -------------------
  ---------- -
    ----- --
    ---------------- ----------
    ----------- ---
    ------------------ ---
  --
  -------- -
    --------- ---
    ----------- -------
    --------------- ---
  --
  ---- -
    -------------- ------
    --------------- ----------------
  --
  ------ -
    ------- ---
    ------------------ ---
    ------------- --
    ------------ --
    ------------ ----------
    --------------- ---
  --
  ---------- -
    ------ ------
  --
  ---------- -
    ---------------- ----------
    ------------- --
    ---------------- ---
    ---------- ---
  --
  -------------- -
    ------ ----------
    ----------- -------
    ---------- ---------
  --
---

------ ------- --------------

在此代码中，我们使用 react-native-payments-addon-stripe 完成了以下操作：

  1. 通过设置 publishableKey，将 Stripe API 密钥传递给 react-native-payments-addon-stripe。
  2. 处理 cardNumber，expMonth，expYear 和 cvc 输入的值，并在页面上熏染。
  3. 创建 _onPayButtonPressed 标准方法并尝试处理支付请求。
  4. 以示例形式渲染了组件。

结论

使用 react-native-payments-addon-stripe，我们可以轻松将支付功能集成到应用 程序中。在本文中，我们一步一步地展示了如何安装和使用 react-native-payments-addon-stripe npm 包，并提供了一个使用示例。无论是创建一个简单的购物车应用程序还是一个完整的电商平台，react-native-payments-addon-stripe 可以方便地处理支付请求，让你的用户流畅地完成购买。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005726181e8991b448e88db

阅读全文

猜你喜欢

  • npm 包 @sarahjs/memory 使用教程

    在前端开发中，我们常常需要对数据进行处理并将其保存在内存中，以便在页面间共享或使用。而 npm 包 @sarahjs/memory 就是一款封装了内存操作的工具包，使其更加易用。

    3 年前
  • npm 包 marvel-wrapper 使用教程

    Marvel Comics 是漫威旗下的一个系列，拥有众多的超级英雄和反派角色。如果你是一个前端开发人员，并且想要使用 Marvel API 来开发一个相关应用程序，那么 Marvel-Wrapper...

    3 年前
  • npm 包 meepo-minirefresh 使用教程

    近年来，前端技术的飞速发展使得开发效率不断提高，其中一个重要的原因就是 npm 包的广泛应用。npm 包是一个在 Node.js 世界中的包管理器，有着庞大的客户端、开发服务器和库文件的生态系统。

    3 年前
  • npm 包 randor 使用教程

    在前端开发中，我们经常需要随机生成一些数据，在 JavaScript 中我们可以使用 Math 对象自带的函数实现，例如 Math.floor()、Math.random()等。

    3 年前
  • npm 包 conan-appium-uiautomator2-driver 使用教程

    前言 随着移动端应用程序的快速发展，自动化测试越来越成为测试流程中不可或缺的一部分。这时候 Appium 就成为了一个非常不错的选择。而在 Appium 中占据关键位置的是 driver，因为它决定了...

    3 年前
  • npm 包 pg-bricks-onode 使用教程

    #npm 包 pg-bricks-onode 使用教程 简介 pg-bricks-onode 是一个针对 PostgreSQL 数据库的 Node.js 封装，它提供了很多简单实用的操作方式，让我们可...

    3 年前
  • npm 包 youtube-audio-grabber 使用教程

    在 Web 前端开发中，音频成为越来越重要的一部分。因此，提供一个稳定、易用、全面的音频工具包是至关重要的。而 npm 是全球最大的软件注册表，那么 youtube-audio-grabber 这个 ...

    3 年前
  • npm 包 json2db 使用教程

    前言 在前端开发中，我们经常将数据以 json 格式存储，同时需要将这些数据存储到数据库中。此时，我们需要将 json 数据转换成数据库保存的格式。这个过程比较繁琐，需要额外编写代码，加大开发成本。

    3 年前
  • npm 包 super-repo 使用教程

    在前端开发中，我们经常需要用到各种不同的 npm 包来帮助我们完成一些任务。其中一个非常有用的 npm 包就是 super-repo，它为我们提供了很多方便的功能，可以帮助我们更轻松地管理我们的项目。

    3 年前
  • npm 包 vest-ui 使用教程

    介绍 npm 包 vest-ui 是一个基于 React 和 TypeScript 的 UI 组件库，提供了一系列常用组件及其样式。其提供的组件有基础组件如 Button、Input 等，还包括表格、...

    3 年前
  • npm 包 GitLine 使用教程

    GitLine 是一款强大的前端工具包，它可以帮助我们更轻松地展示 Git 仓库的代码历史记录。本文将为大家介绍如何使用 GitLine，并提供相关的示例代码和指导意义。

    3 年前
  • npm 包 studio-cli 使用教程

    npm 包是方便前端开发者共享和使用代码的工具，其中 studio-cli 是一个能够快速创建 Web 开发项目的 npm 包。本文将介绍 studio-cli 的使用方法，并包含示例代码。

    3 年前
  • npm 包 imeepos-core 使用教程

    前言 随着前端技术的不断发展和革新，越来越多的开发者希望能够利用前端技术来实现更为复杂和高效的应用程序。在开发过程中，我们常常会使用各种各样的第三方库和框架，以加速项目的开发过程。

    3 年前
  • npm 包 node-shgbit-xy-api 使用教程

    前言 node-shgbit-xy-api 是一个针对上海工程技术大学校园网的 API 接口封装的 npm 包，可以方便地获取校园网的相关信息，如校园网的上网状态、账户信息等。

    3 年前
  • npm 包 sheen 使用教程

    前言 Node.js 的包管理器 npm 提供了数以百万计的开源包，供前端开发者使用。在这些包中，sheen 是一个非常实用的包，它提供了一种快速、简单的方式来创建 CSS 渐变动画。

    3 年前
  • npm 包 tea-cli 使用教程

    什么是 tea-cli？ tea-cli 是一个基于 Node.js 开发的命令行工具，它能够快速搭建一个 React 项目的脚手架，可以帮助开发者快速搭建开发环境，以及提供包含 Babel、Webp...

    3 年前
  • npm 包 terminal-scrapearange 使用教程

    npm 包 terminal-scrapearange 使用教程 在前端开发过程中，我们经常需要在终端中输入命令来执行一些任务，例如生成静态文件，打包代码等等。但是，当命令需要输入很长的参数时，我们往...

    3 年前
  • npm 包 @rrc/watermark 使用教程

    在前端开发中，水印是一种很常见的需求。使用 npm 包 @rrc/watermark 可以轻松地实现图片和文本水印。本文将详细介绍如何使用该 npm 包，包括安装、使用和示例代码。

    3 年前
  • npm 包 github2slack 使用教程

    什么是 github2slack github2slack 是一个 npm 包，它可以将 GitHub 上指定仓库的 push，pull request 等事件发送到您的 Slack 频道上。

    3 年前
  • npm 包 meepo-base 使用教程

    简介 meepo-base 是一款基于 Angular 的前端组件库，包含了众多常用组件，如输入框、按钮、弹框、列表等。使用 meepo-base，可以快速搭建前端页面，提高开发效率。

    3 年前

相关推荐

    暂无文章