npm包 weixin-payment-sdk 使用教程

在微信小程序开发中,支付功能是一个必不可少的部分。weixin-payment-sdk 是一个 Node.js 的npm包,它为微信小程序提供了统一的支付接口。在本教程中,我们将介绍如何使用 weixin-payment-sdk 安装和配置支付接口,并提供一些示例代码,让你快速上手微信小程序的支付功能。

安装和配置

1. 安装 npm 包

安装 weixin-payment-sdk, 命令如下:

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

2. 获取微信支付配置

在开始之前,我们需要获取微信支付的配置信息,包括商户ID、API密钥、回调地址等等。获取微信支付的配置信息,你需要做两件事情:

注意,获取微信支付配置信息需要实名认证,只有个人或企业实名认证后,才有资格使用微信支付的服务。

3. 配置 weixin-payment-sdk

在项目中引入 weixin-payment-sdk 后,我们需要设置微信支付所需的所有参数。在下面的代码中,我们将会演示如何配置 weixin-payment-sdk 去处理微信支付。

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

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

你需要将自己的微信小程序 APPID、商户ID、API密钥 和证书文件路径替换到代码中。

完整的 weixin-payment-sdk 配置请参见官方文档。

支付流程

在配置好 weixin-payment-sdk 后,我们可以开始了解微信支付的整个流程。

1. 创建订单

在获取了商品信息和价格等支付信息后,你需要根据这些信息创建一个微信支付订单。

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

需要提交给微信支付 API 的参数包含了商品描述,订单号,总金额,发起支付的 IP 地址,支付回调通知地址,支付方式 (JSAPI、NATIVE 或 APP),以及用户的 openid 等信息。调用 unifiedOrder API,我们可以得到微信支付的一些返回参数,包括 prepay_idtimestamp 等。

2. 获取支付签名

在微信支付签名中,我们需要使用微信支付所需的所有参数,使用 API 密钥进行签名,并将签名信息返回到小程序中。

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

getPayParams 方法中,我们传递了时间戳,随机字符串,预支付ID等信息,方法会自动的生成签名并返回给我们。

3. 调起支付

将签名信息返回到微信小程序内部,通过 wx.requestPayment 方法调用微信支付接口进行支付。

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

当用户通过支付接口完成支付后,微信支付将会通过「notify_url」进行回调,接下来就要处理微信支付的回调了。

4. 处理微信支付回调

微信支付回调指的是微信支付完成后向预先设定的回调地址(即我们提交订单时设置的支付回调通知地址)发送数据,我们需要使用 Node.js 的 HTTP 接收回调,解析收到的数据,并返回正确的状态码和消息。

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

以上代码,我们通过调用 weixin-payment-sdk 的 notify 方法,传入微信支付回调的xml数据,解析出相应的支付信息,并返回正确的状态码和消息。

示例代码

下面是一个完整的微信支付示例代码。示例中我们演示了如何创建订单,获取支付签名,调起支付,处理微信支付回调等操作。

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

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

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

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

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

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

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

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

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

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

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

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

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

总结

在本文中,我们介绍了如何使用 npm 包 weixin-payment-sdk 来为微信小程序添加支付功能。通过逐步的介绍支付流程,我们了解了如何配置微信支付参数,如何创建订单,获取支付签名,调起支付,处理微信支付回调等操作。希望这篇文章能对你在微信小程序支付开发中起到指导作用,并且让你在接下来的开发过程中更加流畅。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60055ea381e8991b448dbfc4


猜你喜欢

  • npm 包 fif-ng2-flow-id 使用教程

    在现代 Web 开发中,前端技术得到了越来越广泛的应用。其中,npm 包作为我们开发过程中必不可少的工具,更是被广泛和深度地应用于我们的项目开发中。在今天的文章中,我们将介绍一款名为 fif-ng2-...

    2 年前
  • npm 包 my-easy-crypto 使用教程

    当我们在前端领域需要进行加密操作时,往往需要使用到复杂的加密算法及其对应的代码。为了解决这个问题,一些库和工具被打造出来,其中最为优秀的之一就是 my-easy-crypto。

    2 年前
  • NPM 包 ramplatzom 使用教程

    在前端开发中,我们常常需要使用各种各样的包来帮助我们完成相应的任务,而 NPM 包是一个非常重要的资源库。在本文中,我们将会介绍一个非常实用的 NPM 包:ramplatzom。

    2 年前
  • npm 包 vertical-db 使用教程

    简介 vertical-db 是一款适用于前端开发的 npm 包,它提供了一个可视化的数据库管理工具,可以实现对本地数据的增删改查操作,支持多张表的创建、删除、修改等操作。

    2 年前
  • npm 包 rc-steps-image 使用教程

    在前端开发中,我们通常需要为用户设计一个引导流程(Wizard),让用户更好地理解我们应用的界面以及操作步骤。rc-steps-image 是一个基于 React 的 npm 包,它提供了一个优秀的引...

    2 年前
  • npm 包 react-native-ui-text-column 使用教程

    写前端页面时,常常需要显示多个文本,而文本又常常需要排版成多列。如果自己用原生的 react-native 组件实现多列布局,往往需要写一些复杂的计算代码。本文介绍一个 npm 包 react-nat...

    2 年前
  • npm 包 mode-coms 使用教程

    1. 什么是 mode-coms mode-coms 是一个基于 Node.js 的前端组件工具,用于在 Web 开发中实现组件之间的通信和数据共享。它可以让我们以更快、更可靠的方式开发出高质量的前端...

    2 年前
  • npm 包 react-native-verify-code 使用教程

    在移动应用开发过程中,短信验证码验证是常见的功能需求。而在 React Native 中,通常需要引入第三方库来实现该功能。本文将介绍一个 npm 包 react-native-verify-code...

    2 年前
  • npm 包 gun-mysql 使用教程

    介绍 npm 包 gun-mysql 是一个基于 gun db 实现的 mysql 存储方案的库,可以轻松地通过 gun db 来管理 mysql 数据库。 这个库的主要功能是将 gun db 和 m...

    2 年前
  • npm 包 passwordjs 使用教程

    前言 在网站开发中,因为用户账号的安全性以及其他多种原因,我们会需要将用户的密码进行加密存储。此时,我们可以使用 npm 包 passwordjs 来实现加密和验证密码的功能。

    2 年前
  • npm 包 truopt 使用教程

    在前端开发中,随着技术的不断发展,前端工程化已经日趋成熟,npm 包的使用也变得越来越常见。在这里,我们介绍一款常用的 npm 包 truopt,它是一个用于优化图片的工具,可以让我们减少页面加载时间...

    2 年前
  • npm 包 cordova-plugin-dialog-plus 使用教程

    随着移动开发不断发展和普及,开发者们对于提高用户体验的需求也越来越高。而对于移动端应用来说,经常需要使用对话框来与用户进行交互,例如提示框、确认框、输入框等等。在 Apache Cordova 这个移...

    2 年前
  • npm 包 hubot-celery-man 使用教程

    前言 hubot-celery-man 是一个基于 Hubot 的轻量级任务管理工具,能够方便地管理 Celery 任务。本文将介绍如何使用该 npm 包,为开发者提供详细的学习和使用指导。

    2 年前
  • npm 包 res-json 使用教程

    在前端开发中,我们经常需要向服务器请求数据,并将其以 JSON 格式返回给前端页面。此时,我们可以使用 npm 包 res-json 来简化这个过程。 什么是 res-json res-json 是一...

    2 年前
  • npm 包 policy 使用教程

    在前端开发中,我们经常需要使用第三方库来提高开发效率和增加功能。而 npm 是最流行的 JavaScript 包管理器之一。大量的 npm 库可以供我们使用,但是也存在潜在的危害,如 XSS 攻击,恶...

    2 年前
  • npm 包 tqb-component-city-picker 使用教程

    在 web 开发中,选择和输入城市信息是一个常见的需求。而 tqb-component-city-picker 是一个适用于 React 的城市选择器组件,它可以方便地将城市信息转换为省市区三级联动选...

    2 年前
  • npm 包 wfk-roboto 使用教程

    什么是 wfk-roboto? wfk-roboto 是一款基于 Roboto 字体库的字体管理工具。该工具可以快速帮助开发者在项目中使用 Roboto 字体,且支持自定义字体大小和样式。

    2 年前
  • npm 包 simply-gulp-rev 使用教程

    今天我们来介绍一款非常实用的 npm 包:simply-gulp-rev。如果你是一名前端开发者且有一定的经验,你一定会知道,在前端开发中,版本管理是至关重要的,因为它能够确保在项目迭代过程中,代码的...

    2 年前
  • npm 包 xauto-plugin-babel 使用教程

    在现代的前端开发中,使用 Babel 已经成为了标配。它可以将现代 JavaScript 代码转换为浏览器可以理解的代码。在项目中,为了避免重复编写 Babel 配置,我们可以使用 xauto-plu...

    2 年前
  • npm包 @glimpse/glimpse-common 使用教程

    介绍 @glimpse/glimpse-common 是一个前端技术的npm包,它是Glimpse项目的一个子模块,主要提供用于构建Web应用程序的共同组件。该包包含许多常用的函数和工具来处理日常的开...

    2 年前

相关推荐

    暂无文章