实战项目名称:微信小程序实现在线支付功能
- 文章结尾附上微信小程序码,扫码登录后即可体验!!

文章目录

  • 一、实战步骤
    • 1. 前期准备
    • 2. 添加`wechatpay-node-v3`和`fs`插件
    • 3. 预设微信下单的数据
    • 4. 将上一步骤的下单信息返回给前端
    • 5. 小程序前端接收数据 并发起支付
  • 二、完整源码
  • 三、在线体验

一、实战步骤

1. 前期准备

注意:对接微信支付功能,必须得先有微信支付的商户号,不然你是测试不了微信支付功能的。

  • 原因:
  1. 微信官网不提供微信支付的测试账号
  2. 微信支付一切都以商户号为基础,没有商户号一切等于0

需要用到的资料和账号

  • AppID(小程序ID),AppSecret(小程序密钥)
  • 商户号(mchid)
  • 微信支付证书源文件,微信支付API证书序列号
  • 商户号APIv3秘钥,用于微信支付成功后回调

2. 添加wechatpay-node-v3fs插件

  • 添加插件示例
// 添加插件示例
yarn add wechatpay-node-v3 fs
//或者
npm install wechatpay-node-v3 fs
  • 使用代码示例
// 使用插件示例
import WxPay from 'wechatpay-node-v3'
import fs from 'fs'  //读取async startPay(){const pay = new WxPay({appid: config.app.appid,      //换成你的小程序appidmchid: config.wxpay.mchid,    //换成商户号mchidpublicKey: fs.readFileSync('./apiclient_cert.pem'), // 微信支付证书公钥privateKey: fs.readFileSync('./apiclient_key.pem'), // 微信支付证书秘钥});}

3. 预设微信下单的数据

注意: 微信支付成功的回调notify_url地址千万别写错,关于更多的回调通知,请点击访问该地址了解更多。

记得一定要检查APIv3秘钥有设定,不然就算你写一万行代码支付通知API也不起作用!!!

代码如下(示例):

const params = {description: name, // 订单描述out_trade_no: order_id, // 订单号,一般每次发起支付都要不一样,可使用随机数生成notify_url: 'https://cccccccc/notify_url', //支付成功后,微信会向该地址发起请求amount: {total: total, // 支付金额,单位为分},attach:`[{"amount":"${amount}"},{"remark":"${remark}" },{"product_id":"${product_id}"}]`,   //一些自定义的数据payer: {openid: openid, // 微信小程序用户的openid,一般需要前端发送过来},scene_info: {payer_client_ip: 'ip', // 支付者ip,这个不用写也没有问题},};

4. 将上一步骤的下单信息返回给前端

利用插件的transactions_jsapi方法进行处理

代码如下(示例):

 const result = await pay.transactions_jsapi(params);

5. 小程序前端接收数据 并发起支付

  • 订阅功能的实现在我的另一篇文章中,可以点击去看看如何实现,订阅消息通知。

代码如下(示例):

// this.message就是后端返回的数据,下面是示例的数据结构 //{//  appId: '******',
//    timeStamp: '******',
//    nonceStr: '******',
//    package: '******',
//    signType: 'RSA',
//    paySign: '******'
//}wx.requestPayment({timeStamp: this.message.timeStamp,nonceStr: this.message.nonceStr,package: this.message.package,signType: this.message.signType,paySign: this.message.paySign,success(res) {uni.showToast({title: '支付成功'})that.close()// 支付成功后,可以添加一个订阅功能uni.requestSubscribeMessage({// 模板id:可以在微信公众平台 -> 功能 -> 订阅信息进行选择tmplIds: ['1FcVK9Vp86j7l8_mlLTepX4A6hwhRvW2uDDRr1tP5Io'],success: res => {console.log(res)},fail: e => {console.log(e)}})},fail(res) {uni.showToast({title: '支付失败',icon:'error'})}})

到了这一步,基本的微信支付功能就已经实现,下一期再讲解解密微信支付回调结果


二、完整源码

import fs from 'fs'
import WxPay from 'wechatpay-node-v3'async startPay(_, { openid,name,total,amount,remark,product_id }) {const pay = new WxPay({appid: config.app.appid,mchid: config.wxpay.mchid,publicKey: fs.readFileSync('./apiclient_cert.pem'), // 公钥privateKey: fs.readFileSync('./apiclient_key.pem'), // 秘钥});// console.log(pay)// console.log(order_id)// let openid = 'xxxxx'; 可以自定义一个测试const params = {description: name, // 订单描述out_trade_no: order_id, // 订单号,一般每次发起支付都要不一样,可使用随机数生成notify_url: 'https://xxxxxxxx/notify_url',amount: {total: total, // 支付金额,单位为分},attach:`[{"amount":"${amount}"},{"remark":"${remark}" },{"product_id":"${product_id}"}]`,payer: {openid: openid, // 微信小程序用户的openid,一般需要前端发送过来},scene_info: {payer_client_ip: 'ip', // 支付者ip,这个不用写也没有问题},};// console.log(params)const result = await pay.transactions_jsapi(params);// console.log(result)//将数据返回给前端return result},

三、在线体验

  • 扫下方微信小程序码即可体验,支付后相关源码也是会正常发送到你留言的邮箱的。

【Node.js】实现微信小程序在线支付功能相关推荐

  1. 小白也能看懂的教程:微信小程序在线支付功能开通详细流程(图文介绍)

    微信小程序不仅是一个展示平台,更多会用到小程序的电商功能,当然了,支付目前而言需要接入微信支付,那么具体而言,微信小程序要怎么开通支付功能呢?最近需要在微信小程序中用到在线支付功能,于是看了一下官方的 ...

  2. PHP完成微信小程序在线支付功能

    微信支付现在用到的地方越来越多,从公众号支付,扫码支付一直到现在的小程序支付等等六种快捷支付方式,公司要求开发小程序商城,就只能我上手处理接口支付问题了,使用最常规的第三方模式,第三方帮特约商户申请商 ...

  3. 十 Node.js实现微信小程序支付功能

    十 Node.js实现微信小程序支付功能 一 开发前提 二 支付流程介绍 三 上代码 1.小程序端发起后台请求,完成统一下单 1.1 小程序端发起后台请求 1.2 Node.js后台接收请求,完成统一 ...

  4. node.js基于微信小程序的外卖订餐系统 uniapp 小程序

    美食是人类永恒的话题,无论是在古代还是现代人们对美食都有一种非常的热爱在里面,但是随着时代的发展,人们可能没有更多的时间去研究美食,很多时候人们在下班或者放学之后更希望通过网络来进行订餐,为此我开发了 ...

  5. node.js基于微信小程序的校园失物招领毕业设计源码072343

    微信小程序的校园失物招领系统 摘  要 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序的校 ...

  6. node.js基于微信小程序的校园失物招领系统毕业设计源码072343

    微信小程序的校园失物招领系统 摘  要 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序的校 ...

  7. Ubuntu 16.04 下部署Node.js+MySQL微信小程序商城

    本文档为微信小程序商城NideShop服务端api的安装部署教程 服务端api : https://github.com/tumobi/nideshop 微信小程序端 : https://github ...

  8. Ubuntu 16.04 下部署Node.js+MySQL微信小程序商城 1

    本文档为微信小程序商城NideShop服务端api的安装部署教程 服务端api : https://github.com/tumobi/nideshop 微信小程序端 : https://github ...

  9. 微信小程序实现支付功能

    小程序支付,没有封装支付代码:直接上一段可用的流程代码吧: 微信小程序支付官网文档有详细的说明,这里我就不再赘述啦: 客户端js: wx.request({ url:'https://www.xxxx ...

最新文章

  1. [每日一题] OCP1z0-047 :2013-08-14 如何理解USING INDEX?...................................41
  2. eclipse 中 安装git 插件和使用git 插件
  3. android 串口一直打开_实例 | 使用Python串口实时显示数据并绘图
  4. 【JS 逆向百例】webpack 改写实战,G 某游戏 RSA 加密
  5. python3 logging模块_python3中使用logging模块写日志,中文乱码,如何解决?
  6. android开发之android:padding和android:margin的区别
  7. Quotations
  8. 《恋上数据结构第1季》二叉树基础、真二叉树、满二叉树、完全二叉树、二叉树的遍历(重点)
  9. 从0到1实现Web端H.265播放器:视频解码篇
  10. CNNIC:第35次中国互联网络发展状况统计报告
  11. 苹果手机聊天记录恢复方法有哪些?这2个恢复技巧值得收藏
  12. java五子棋小游戏含免费源码
  13. 北漂三年多 我选择离开,眼神更加坚定!
  14. 基于STC15系列单片机课程中讲到的汇编指令(一)
  15. IDEA快速移动光标到行首或行尾;
  16. FXLMS主动降噪的simulink建模与仿真
  17. Unity中如何判断两个向量的旋转角?
  18. SSM前后端分离技术
  19. vnx 服务器映射,主机到VNX系统的常见注册方式
  20. 初识CCS,创建工程、选择芯片、简单调试及烧录

热门文章

  1. springboot+vue项目合同申报系统java
  2. KubeCon Keynote演讲:Kubernetes如何赋能可再生能源产业提升10倍效率
  3. omv检查硬盘坏道_用MHDD检测到硬盘出现X坏道时最佳的解决方法!
  4. PostgreSQL入门
  5. 推荐算法学习笔记--DIN篇
  6. android 红外手机,如果你不懂红外摄影,那现在你就该懂了
  7. 发明专利申请流程和时间
  8. 计算机毕业设计开题报告基于SpringBoot的校淘二手网站
  9. java分数的加法_分数加法
  10. python之利用Pygal+2010年世界人口=绘制世界地图