payjs 源码_GitHub - wlijie/payjs_test: PAYJS 小程序支付框架与示例
PAYJS 小程序支付框架与示例
本示例采用了框架 + 示例调用的形式,用于使用 PAYJS 的小程序支付
注:根据微信规范,iOS 系统上不能使用虚拟支付
注:最低基础库为 2.4.0,请注意修改小程序后台设置中的最低基础库版本和开发者工具中的调试基础库版本
测试
克隆本仓库后使用微信开发者工具加载本项目源码,注意在创建项目时将 appid 修改为自己的
在 utils/util.js 中
// 在下面设置商户号
const mchid = ''
// 在下面设置密钥
// 特别注意:此项设置应该仅供测试,生产环境下请在后端完成签名,切忌在小程序内暴露商户密钥
const secret = ''
这两个部分分别设置为自己的商户号和密钥(不设置的话你测试用的钱结算到我这里我不还)
生产环境
Step 1
在 app.json 文件中加入
"navigateToMiniProgramAppIdList": [
"wx959c8c1fb2d877b5"
]
Step 2
将 components/payjs/* 整个文件夹复制到你的项目中的相同结构文件夹
Step 3
在需要用到支付功能的页面的 .json 文件中加入
"usingComponents": {
"payjs": "/components/payjs/payjs"
}
Step 4
在需要用到支付功能的页面的 .wxml 文件最底端加入
Step 5
在需要用到支付功能的页面的 .js 文件中的 data 数据内加入以下三个数据
{
orderParams: {}, // 支付发起参数
preparePay: false, // 控制 payjs 组件的创建与销毁
paying: false, // 可选:如需知晓用户是否「已经跳转到了 PAYJS 小程序还未返回」的状态则可通过事件处理函数监听事件内的 paying 数据
}
数据名称可以更改,但是更改时请注意保证和上面的 .wxml 文件内数据绑定及下面的事件处理函数中保持一致
orderParams 用于放置发起支付的参数(必填)
preparePay 用于控制 payjs 支付组件的创建与销毁
在此页面加入四个事件处理函数
/**
* 支付成功的事件处理函数
*
* res.detail 为 PAYJS 小程序返回的订单信息
*
* 可通过 res.detail.payjsOrderId 拿到 PAYJS 订单号
* 可通过 res.detail.responseData 拿到详细支付信息
*/
bindPaySuccess (res) {
console.log('success', res)
console.log('[支付成功] PAYJS 订单号:', res.detail.payjsOrderId)
this.setData({
orderResults: res.detail,
needRefreshOrderParams: true
})
wx.showModal({
title: '支付成功',
content: 'PAYJS 订单号:' + res.detail.payjsOrderId,
showCancel: false
})
},
/**
* 支付失败的事件处理函数
*
* res.detail.error 为 true 代表传入小组件的参数存在问题
* res.detail.navigateSuccess 代表了是否成功跳转到 PAYJS 小程序
* res.detail.info 可能存有失败的原因
*
* 如果下单成功但是用户取消支付则可在 res.detail.info.payjsOrderId 拿到 payjs 订单号
*/
bindPayFail (res) {
console.log('fail', res)
if (res.detail.error) {
console.error('发起支付失败', res.detail.info)
} else if (res.detail.navigateSuccess) {
console.log('[取消支付] PAYJS 订单号:', res.detail.info.payjsOrderId)
}
},
/**
* 支付完毕的事件处理函数
*
* 无论支付成功或失败均会执行
* 应当在此销毁 payjs 组件
*/
bindPayComplete () {
console.log('complete')
this.setData({
preparePay: false, // 销毁 payjs 组件
})
},
/**
* 【可选】组件内部数据被修改时的事件
*
* 当前仅用于监听 paying 数据
* 当用户跳转到 PAYJS 小程序并等待返回的过程中 paying 值为 true
*/
bindDataChange (res) {
if (res.detail.paying) {
this.setData({
paying: res.detail.paying
})
}
}
Step 6
为支付页面的支付按钮绑定以下事件
发起支付
onTapPay: function() {
// 事件处理函数 - 点击支付按钮
this.setData({
preparePay: true,
orderParams: {
// 这里传入【后端返回并签名完毕】的支付发起参数
}
})
},
写在最后 & 免责声明
订单信息的生成、签名与订单支付状态的判断都应该在后端返回和判断,小程序的返回值仅应作为参考使用,应以为准
如在使用过程中有问题,请阅读代码,如仍有问题,请发 Issue
本人不保证此框架可一直可用也不为此框架所产生的任何问题负责
payjs 源码_GitHub - wlijie/payjs_test: PAYJS 小程序支付框架与示例相关推荐
- 点微同城系统整站源码 带pc端与小程序端+49款插件
介绍: 点微同城系统整站源码 带pc端与小程序端+49款插件 下载 百度网盘 请输入提取码百度网盘为您提供文件的网络备份.同步和分享服务.空间大.速度快.安全稳固,支持教育网加速,支持手机端.注册使用 ...
- 小程序源码:求职招聘微信小程序源码下载v4.1.78
1.多城市招聘平台2.职位版块 3.人才版块 4.招聘会(支持企业在线报名参加招聘会) 5.职场资讯6.企业登录(在手机端可操作企业信息编辑.发布职位.查收简历.通知面试) 7.企业VIP套餐购买功能 ...
- 小程序源码:求职招聘微信小程序-多玩法安装简单
1.多城市招聘平台2.职位版块 3.人才版块 4.招聘会(支持企业在线报名参加招聘会) 5.职场资讯6.企业登录(在手机端可操作企业信息编辑.发布职位.查收简历.通知面试) 7.企业VIP套餐购买功能 ...
- 小程序源码整理最新的学习小程序的源码清单包含前后台
微信小程序疯狂猜成语小程序源码UI美观 知识答题类小程序源码 200多套微信小程序源码带后台+教程+源码 校园小情书小程序前端+后端源码 微信版flappybird小游戏源码下载,经典像素鸟小游戏源码 ...
- 省钱兄校园跑腿源码(公众号+APP+小程序+Android+IOS)校园跑腿社区跑腿同城跑腿任务兼职小程序uniapp前端模版
开源代码是用户端uniapp部分源码,使用hbuilder导入即可运行 只提供参考学习使用!已经获得软著!不可商业使用!感谢支持 h5体验地址 h5:https://paotui.xianmxkj.c ...
- 九宫格心形拼图小程序源码/带流量主微信小程序源码
九宫格心形拼图小程序源码/带流量主微信小程序源码 ☑️ 编号:ym476 ☑️ 品牌:无 ☑️ 语言:微信小程序 ☑️ 大小:500KB ☑️ 类型:九宫格心形拼图 ☑️ 支持:微信小程序
- 【微信小程序】去水印小程序源码,微信和QQ小程序都能用!
比较火的去水印小程序源码,微信和QQ小程序都能用! 独立后台,可以很好的管理小程序 简单修改和管理流量主广告无需修改源码 小程序源码下载地址:(30条消息) [微信小程序]去水印小程序源码,微信和QQ ...
- WordPress微信壁纸小程序源码 高清壁纸下载小程序
源码介绍 WordPress微信壁纸小程序源码 高清壁纸下载小程序 [功能特点] 精美的壁纸展示页面,搜索喜欢的壁纸,下载壁纸需观看激励视频广告,看一次,可免费下一天,热门壁纸榜单,壁纸收藏.分享功能 ...
- 【小程序源码】检讨书生成微信小程序工具源码-安装搭建简单
对于经常写检讨的小伙伴来说,福音来了 因为这是一款检讨书生成小程序 所以再也不用为了写检讨而烦恼了哦 支持自定义字数下线,主题自定义 支持多种类型检讨比如:学生党的,男朋友,领导演讲稿,共青团申请书等 ...
最新文章
- Android:你好,androidX!再见,android.support
- linux监听9080,基于UPnP发现与组播技术的IPTV终端实现
- 【Android】Java回调原理并结合Android源码进行理解
- 【Android 逆向】修改运行中的 Android 进程的内存数据 ( Android 系统中调试器进程内存流程 | 编译内存调试动态库以及调试程序 )
- linux的备份和恢复命令,Linux基本命令——备份与恢复文档
- sql server 配置管理器里为什么是32位_死磕 Nginx 系列:Nginx 限流配置
- i5 11300H和i5 10300H 的区别
- spring java配置_Spring基于java的配置
- 提前还清贷款为什么还要付违约金?
- Java编程思想学习笔记-第11章
- JUnit执行单元测试用例成功,mvn test却失败的问题和解决方法
- 云服务器配置ssh登陆(putty + puttygen)
- 放大电路、单管共发射极放大电路结构、工作原理、lceda仿真
- discuz手机版常见问题
- 智邦国际CRM系统实现企业信息化管理成功实施
- php 中 normdist,2021年,先进光学卫星ALOS-3将由H3-22运载火箭从种子岛宇宙中心发射...
- linux开机启动grub rescue,开机出现 grub rescue的解决方法探索
- mahout实现协同过滤推荐算法
- 霞浦职业中专学校计算机专业,霞浦职业中专学校
- 扁平风轮播图大屏展示html页面源码
热门文章
- 关于如何在win 10 中完成 ie 11 浏览器使用的解决方案(win7 升级 ie 11)
- 向量组是否相关与行列式,方程组,秩的联系。
- 学驾照考交规去上海公安培训总部考试全过程
- Layui upload上传文件
- Python攻城师的成长————css语法、伪元素选择器(部分)
- c语言设计计算器的意义,C语言结课设计之计算器功能
- 插入图片的时候,总是只是能漏出一点点其他部分都看不到,改变格式从插入型改成浮于文字上方才能完全显示,但浮于文字上方的格式最后不好排版和编辑,稍微一改,整个就乱了,求助如何让插入型的文字图片完全显示出来
- 离职原因该怎么说才比较好 ?
- 因无聊用python写了个爬取蓝奏云直链的爬虫(含注释并包装为函数)
- 程序员做外包有前途吗?谈谈外包的利与弊,字字扎心