实战项目名称:微信小程序实现在线支付功能
- 文章结尾附上微信小程序码,扫码登录后即可体验!!
一、实战步骤
1. 前期准备
注意:对接
微信支付
功能,必须得先有微信支付的商户号
,不然你是测试不了微信支付功能的。
- 原因:
微信官网不提供微信支付的测试账号
- 微信支付一切都以商户号为
基础
,没有商户号一切等于0
需要用到的资料和账号
- AppID(小程序ID),
AppSecret
(小程序密钥) - 商户号(
mchid
) - 微信支付证书源文件,微信支付
API证书
序列号 - 商户号
APIv3
秘钥,用于微信支付成功后回调
2. 添加wechatpay-node-v3和fs插件
- 添加插件示例
// 添加插件示例
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, //换成你的小程序appid
mchid: config.wxpay.mchid, //换成商户号mchid
publicKey: 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. 小程序前端接收数据 并发起支付
-
订阅功能
的实现在我的另一篇文章中,可以点击去看看如何实现,订阅消息通知。
代码如下(示例):文章来源:https://www.toymoban.com/news/detail-489010.html
// 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'
})
}
})
到了这一步,基本的微信支付功能就已经实现,下一期再讲解
解密微信支付回调结果
文章来源地址https://www.toymoban.com/news/detail-489010.html
二、完整源码
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】实现微信小程序在线支付功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!