1，前言

分享一个完整的微信小程序支付流程中，前端要做的模块。

2，流程

在调用wx.requestPayment之前，需要准备一些参数，流程如下

1，调用 wx.login() 获取临时登录凭证code ，并调用wx.request回传到服务端。

2，服务端调用 auth.code2Session 接口，换取用户唯一标识 OpenID 和会话密钥 session_key。

3，前端拿到服务端返还的参数后，调用wx.requestPayment。

下面是我画的一个流程图

3，参数说明

如上，一共五个参数，参数名区分大小写，参数名写错或者参数类型搞错都不行。

4，具体代码

pay () {let _this = this;//此处5个变量为我项目需要，与微信支付无关let { userId, needPay, price, walletNum, classId } = this.data;if(needPay === 0){ //如果还需微信支付的金额为 0 则全部走钱包支付HTTP.buyPay(userId , price, classId).then(res => {if(res.status === "y"){FN.Alert(res.info).then(() => {wx.navigateBack();})};});}else{//进入微信支付FN.wxLogin().then(res => {this.setData({code:res},() => {HTTP.payCourse(userId, classId, walletNum, needPay, res)// 调服务端，拿到支付密匙.then(res => {if(res.status === "y"){let obj = res.infoObject.wxpayInfo;wx.requestPayment({// 调起微信支付timeStamp: obj.timestamp,nonceStr: obj.nonceStr,package: obj.wxPackage,signType: obj.signType,paySign: obj.sign,success (res) {FN.Alert("支付成功").then(() => {wx.navigateBack();})},fail (res) {_this.setData({isShow:false,payPwd:"",pwdFocus:false}, () => {if(res.errMsg.indexOf("cancel") > -1){FN.Toast("取消支付");}else{FN.Toast("支付失败");}})}})}})});}).catch(res => {FN.Toast("获取登录凭证失败");})}}

如果看了觉得有帮助的，我是@鹏多多i，欢迎点赞关注评论；
END

公众号

往期文章

细数JS中实用且强大的操作符&运算符
微信小程序API交互的自定义封装
微信小程序request请求的封装

个人主页

CSDN
GitHub
简书
博客园
掘金

前端调用微信小程序的支付流程相关推荐

微信小程序开发支付流程
微信支付是时下最流行的交易支付方法之一,潜移默化推动着无现今社会的变革.小程序作为微信上的轻应用,同业也开放微信支付的接口,可以通过转账,扫二维码支付.要完成一次具体的订单支付需要完整的支付流程,具体 ...
微信小程序(6)说说微信小程序的支付流程？
一.前言微信小程序为电商类小程序,提供了非常完善.优秀.安全的支付功能在小程序内可调用微信的API完成支付功能,方便.快捷场景如下图所示: 用户通过分享或扫描二维码进入商户小程序,用户选择购买, ...
面试官：说说微信小程序的支付流程？
一.前言微信小程序为电商类小程序,提供了非常完善.优秀.安全的支付功能在小程序内可调用微信的API完成支付功能,方便.快捷场景如下图所示: 用户通过分享或扫描二维码进入商户小程序,用户选择购买, ...
微信小程序之支付流程
本文以微信支付官方文档为例,梳理了一下,支付的流程 [图片详细展示] 文字展示 1.小程序内调用登录接口,获取到用户的openid,api参见公共api[小程序登录API] 2.商户server调用支 ...
微信小程序服务器支付sdk,微信小程序之支付后如何调用SDK的异步通知
微信小程序之支付后如何调用SDK的异步通知发布时间:2021-07-05 10:47:33 来源:亿速云阅读:57 作者:小新这篇文章主要介绍微信小程序之支付后如何调用SDK的异步通知,文中介绍 ...
微信小程序快递java_java调用微信小程序统一下单接口
java调用微信小程序统一下单接口今天项目中对接微信支付这一块,记录一下这是对接微信支付的开发文档地址微信支付流程流程分析: 我们可以看到,前端人员只用给我们一个code,我们通过code去获 ...
微信小程序 iOS支付
微信小程序运营支付规范微信官方针对有虚拟支付功能的小程序下发了整改通知.截至5月8号,平台将对账号屏蔽iOS系统的支付接口调用.我去查了<<微信小程序运营规则>>,如上图.发 ...
微信小程序篇（微信小程序的支付）
微信小程序的支付和微信公众号的支付是类似的,对比起来还比公众号支付简单了一些,我们只需要调用微信的统一下单接口获取prepay_id之后我们在调用微信的支付即可. 今天我们来封装一般node的支付接口 ...
vue 传参微信_小猿圈web前端之微信小程序页面间跳转传参方式总结
原标题:小猿圈web前端之微信小程序页面间跳转传参方式总结最近小程序发展的越来越快,很多大公司也在打造自己的小程序平台以及购物小程序等等,今天小猿圈web前端讲师就总结了关于微信小程序的知识点,首先 ...
ios微信小程序虚拟支付解决办法
ios微信小程序虚拟支付整理介绍目前iOS端暂不支持虚拟支付,微信小程序虚拟支付仅涉及到ios端,安卓端不受影响. 小程序支付规范 https://developers.weixin.qq.com/ ...

前端调用微信小程序的支付流程

目录

1，前言

2，流程

3，参数说明

4，具体代码

前端调用微信小程序的支付流程相关推荐

最新文章

热门文章