npm包@adeteejay/angular-stripe使用教程

简介

Stripe是一家面向开发者的在线支付平台，此npm包提供了angular框架的Stripe集成，使得开发者能够在angular应用中快速实现Stripe支付的功能。

安装

使用npm安装此包：

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

导入模块

在使用前先导入模块：

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

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

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

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

配置文件

在安装Stripe后，需要配置Stripe的公钥：

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

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

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

创建token

创建Stripe卡片支付需要客户端先将敏感数据（如信用卡号）转换成token，然后将token发送到服务器进行支付。使用此包可轻松实现token的创建。

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

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

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

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

处理支付结果

支付操作完成后，Stripe服务器将返回一个结果。如果收到的结果中包含了paymentIntent，表示已收到付款，并且我们需要使用paymentIntent的数据来处理该订单。

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

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

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

示例

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

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

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

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

总结

此npm包提供了angular框架的Stripe集成，使得开发者能够在angular应用中快速实现Stripe支付的功能。在使用中需要注意导入模块、配置公钥、设置Card元素选项、创建Token以及处理支付结果等步骤。需按照以上步骤操作，方可实现Stripe支付功能。

注：代码示例中的 pk_test_xxxxxxxxxxxxxxxx 为个人公钥，使用时请替换成自己的公钥。

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

阅读全文

猜你喜欢

  • npm 包 stream-fs-cache 使用教程

    在前端开发过程中，处理海量数据是相当普遍的。而在处理数据的过程中，频繁地从远程接口中请求数据会增加服务器的负载并降低页面性能。为了解决这个问题，我们通常会采用一些常见的技术，比如缓存。

    3 年前
  • npm 包 @rgba-image/create-image-browser 使用教程

    前言 在前端开发中，我们经常需要使用图片进行美化页面或展示信息等。而随着互联网的发展，我们对于图片的要求也越来越高，不仅需要图片精美、清晰，还需要适应不同尺寸的设备，加载速度快等等。

    3 年前
  • npm 包 hitbtc-node-sdk 使用教程

    在进行前端开发时，有时候需要与后端服务器进行交互来获取一些数据。在这种情况下，使用 REST API 是最常见的方法之一。而为了更方便地发起 REST API 请求，我们可以使用 npm 包 hitb...

    3 年前
  • npm 包 react-native-cloudkit 使用教程

    前言 在移动端开发中，数据的存储和同步显得尤为重要。iCloud 是苹果公司提供的数据同步服务，而 CloudKit 则是通过 iCloud 来存储和同步数据的云平台服务。

    3 年前
  • npm 包 jsonlint-newline-fork 使用教程

    概述 在前端开发过程中，JSON 数据的处理相当常见。而使用 npm 包 jsonlint-newline-fork 则可以方便地验证和格式化 JSON 数据。这篇文章将详细介绍如何安装和使用该 np...

    3 年前
  • npm 包 standalone-html 使用教程

    随着前端技术的快速发展，我们慢慢开始使用各种神奇的构建工具、模板引擎、自动化工具等等来提高我们的开发效率。但有时候我们确实需要一个简单的工具来快速生成一些静态页面或者简单的 HTML 片段。

    3 年前
  • npm包justows.conn.log.console使用教程

    介绍 justows.conn.log.console是一款适用于前端项目的npm包，它可以将前端项目中的日志信息输出到浏览器控制台中，方便开发者对项目进行调试。本文将介绍如何在项目中使用justow...

    3 年前
  • npm 包 mdx-hast-reduction 使用教程

    在前端开发中，我们通常需要处理不同类型的文本，如 Markdown 文件、代码文本等。而实现这些任务需要借助一些工具。mdx-hast-reduction 是一个比较常用的工具之一，它可以帮助我们快速...

    3 年前
  • NPM 包 codecomp-npm-module-boilerplate 使用教程

    简介 codecomp-npm-module-boilerplate 是一个提供快速搭建 npm 包基础结构的脚手架。当您需要创建新的 npm 包时，使用该脚手架可以大幅减少构建时间，避免繁琐的文件结...

    3 年前
  • npm 包 @iamstarkov/listr-update-renderer 使用教程

    在前端开发中，我们常常需要使用各种 npm 包来辅助我们完成工作。其中，@iamstarkov/listr-update-renderer 是一款非常实用的 npm 包，它可以帮助我们快速搭建一个列表...

    3 年前
  • npm 包 local-range 使用教程

    local-range 是一个 npm 包，可以对范围内的本地文件进行特定操作，例如在指定目录下查找符合规则的文件或目录，或在指定范围内进行文件或目录的复制、删除或移动等操作。

    3 年前
  • npm 包 santosmelan-palindrome 使用教程

    简介 npm 是一个 Node.js 的包管理器，其中有大量的 npm 包供我们使用。santosmelan-palindrome 就是一个可以判断字符串是否回文的 npm 包，本篇教程将详细介绍它的...

    3 年前
  • npm包 @vgm/rsvg 使用教程

    前言 在前端开发过程中，经常需要使用图形、图标等不同类型的矢量图形元素，而SVG（Scalable Vector Graphics）文件格式的出现为我们处理这类图形提供了很好的解决方案。

    3 年前
  • npm 包 gatsby-plugin-tslint 使用教程

    什么是 gatsby-plugin-tslint？ gatsby-plugin-tslint 是一个 Gatsby 插件，用于在 Gatsby 的开发环境中使用 TSLint 进行代码检查。

    3 年前
  • npm 包 generator-joomla-template 使用教程

    前言 在前端开发中，很多时候我们需要定制化一些模板，例如创建一个 Joomla 模板。这时候一个好用的生成器会是我们工作的好帮手。在这篇文章中，我们将介绍一个基于 npm 包的 Joomla 模板生成...

    3 年前
  • npm 包 genererbasesqlite 使用教程

    介绍 genererbasesqlite 是一款基于 Node.js 平台的 npm 包，可以帮助前端开发者快速生成 SQLite 数据库基础结构，同时支持自定义属性、数据类型等。

    3 年前
  • npm 包：native-ui-toolkit 的使用教程

    在现代 Web 应用程序中，前端领域的发展日新月异。开发者既要考虑兼容性，也要考虑性能和设计。为了方便前端的开发者们更快更好的开发出好的应用程序，优雅地解决兼容性的问题以及一些其他的问题，npm 包的...

    3 年前
  • npm 包 redux-action-processor 使用教程

    前言 Redux 是一种可预测的状态管理容器，而 Redux Action 是为了描述数据的变化而发送给 Redux Store 的普通 JavaScript 对象。

    3 年前
  • npm包：tre-string 使用教程

    在Web开发中，为了方便将代码分离成小块，并可重用，开发者通常使用npm（Node.js包管理器）来下载各种包，以在项目中使用。 Tre-string就是其中一种方便的包，它可以解析来自HTML，CS...

    3 年前
  • npm 包 tru_sqlite 使用教程

    介绍 tru_sqlite 是一个基于 SQLite 的 JavaScript 包，它可以在浏览器和 Node.js 环境中调用 SQLite 数据库。该包使用 promises 和 async/aw...

    3 年前

相关推荐

    暂无文章