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 包 webhook-catcher 使用教程

    webhook 是一种很常见的网络调用方式，可以用于实现各种自动化任务。webhook-catcher 是一个 npm 包，可以方便地在本地调试 webhook，同时也可以用于生产环境中的 webho...

    3 年前
  • npm 包 Genesis-Seed-Tiller 使用教程

    Genesis-Seed-Tiller 是一个 Node.js 的命令行工具，用于向 Genesis-Seed 脚手架添加一些常用的自定义配置。本文将为大家详细介绍该工具的使用方法，包括安装、配置以及...

    3 年前
  • npm 包 homebridge-esp1 使用教程

    HomeKit 是 Apple 公司推出的开源智能家居平台，homebridge 是一个可以将非 HomeKit 设备接入 HomeKit 系统的开源桥接软件。homebridge-esp1 是一个 ...

    3 年前
  • npm 包 squib 使用教程

    前言 如果你是一名前端工程师，那么一定知道 npm，一个包管理器，它允许你轻松地下载和安装开发所需的库、工具和框架。在这篇文章中，我们将探讨 squib 这个 npm 包的使用方法。

    3 年前
  • npm 包 cordova-plugin-qrscanner3 使用教程

    QRScanner 是一种 Cordova 插件，该插件提供了一种安全的方式来在移动设备上使用扫描二维码的功能。QRScanner3 是 QRScanner 的最新版本，其特点是快速、简单、灵活易用。

    3 年前
  • npm 包 generator-react-boost-start 使用教程

    介绍 generator-react-boost-start 是一款 NPM 包，它可以帮助我们快速生成一个 React 项目的脚手架。这个脚手架包含了 React 的组件结构和基础配置，可以让我们快...

    3 年前
  • npm 包 @cus/chartjs-node 使用教程

    简介 npm 包 @cus/chartjs-node 是一个基于 Chart.js 和 Node.js 的数据可视化工具包。它提供了在 Node.js 环境中生成数据可视化图表的能力，支持多种图表类型...

    3 年前
  • npm 包 gulp-penthouse 使用教程

    简介 gulp-penthouse 是一个能够提取关键CSS的NPM包，它能够以网页的DOM树结构为基础，通过分析CSS中哪些是输出关键CSS来生成关键CSS样式表，以减少网站的加载时间。

    3 年前
  • npm 包 generator-wx-react 使用教程

    简介 generator-wx-react 是一个基于 Yeoman 的 npm 包，提供了在微信小程序中使用 React 开发的模板文件和生成器。 通过 generator-wx-react，我们可...

    3 年前
  • npm 包 Valli 使用教程

    什么是 Valli Valli 是一个轻量级的 JavaScript 表单验证库。它的目标是提供简单可靠的表单验证方法，使开发者可以快速构建出拥有高质量输入验证的表单。

    3 年前
  • NPM 包 node-livy-client 使用教程

    在前端开发中，我们经常需要调用第三方 API 来获取一些数据，而 Livy 就是一个用于远程访问 Apache Spark 集群的 API。而 npm 包 node-livy-client 就提供了一...

    3 年前
  • npm 包 nodefocusable 使用教程

    随着前端技术的发展，越来越多的开发工具和框架被推出市场。而其中，npm 包成为了一个十分重要的工具。今天我们将介绍一个名为 nodefocusable 的 npm 包，它可以帮助我们实现一个可聚焦的界...

    3 年前
  • npm 包 Best-fitting-plane 使用教程

    本文将介绍 npm 包 Best-fitting-plane ，它可以帮助你在三维空间中找到最合适的平面。 什么是 Best-fitting-plane ？ Best-fitting-plane 是一...

    3 年前
  • npm 包 web-animation.css 使用教程

    在前端开发中，我们可能需要使用一些动画效果来增加用户体验和页面交互性。web-animation.css 是一款基于 CSS3 的动画库，可用于在网页中添加高质量的动画效果，而且使用起来非常简单。

    3 年前
  • npm 包 generator-typescript-boilerplate 使用教程

    generator-typescript-boilerplate是一个npm包，它提供了一个基本的TypeScript项目模板，使得开发者可以快速搭建一个新的TypeScript项目。

    3 年前
  • npm 包 @worldbank/translation-manager 使用教程

    在前端开发中，国际化是一个非常重要的概念。在一些具有多语言需求的项目中，通过使用翻译文件管理不同语言版本的文本字符串变得十分关键。针对这一需求，@worldbank/translation-manag...

    3 年前
  • npm包probot-auto-assigner的使用教程

    什么是Probot Auto Assigner？ Probot Auto Assigner是一个npm模块，它可以为GitHub Issue或Pull请求自动生成指定的角色或成员的自动分配。

    3 年前
  • npm 包 defy 使用教程

    npm（Node Package Manager）是前端开发中重要的工具之一，它可以方便地管理 JavaScript 代码库及其依赖项，使前端开发变得更加高效。defy 是一种基于 npm 开发的工具...

    3 年前
  • npm 包 st_wx 使用教程

    前言 在现代化的 Web 开发中，前端开发人员经常需要使用各种工具来帮助自己完成任务，其中，npm 是一个十分常用的工具，它可以用来管理各种 JavaScript 的包，其中包括了一些非常有用的前端开...

    3 年前
  • npm 包 metal-jest-serializer 使用教程

    在前端开发中，我们使用 Jest 进行单元测试时，有时需要比较复杂对象的匹配，但 Jest 默认的 serializer 对于一些特定对象（如自定义组件）的字符串展示比较差，以至于无法正确匹配对象。

    3 年前

相关推荐

    暂无文章