微信小程序-微信小程序支付

目录

• 微信支付有哪些方式？
• 微信小程序支付有哪些流程？
• 前端如何调起支付？
• 支付的坑
• 写在最后的话

微信支付有哪些方式？

在讲微信小程序支付之前，先了解下微信还有哪些支付方式.

1. 付款码支付

付款码支付是用户展示微信钱包内的“刷卡条码/二维码”给商户系统扫描后直接完成支付的模式。主要应用线下面对面收银的场景。
2. Native支付

Native支付是商户系统按微信支付协议生成支付二维码，用户再用微信“扫一扫”完成支付的模式。该模式适用于PC网站支付、实体店单品或订单支付、媒体广告支付等场景。
3. JSAPI支付

JSAPI支付是用户在微信中打开商户的H5页面，商户在H5页面通过调用微信支付提供的JSAPI接口调起微信支付模块完成支付。应用场景有：

• 用户在微信公众账号内进入商家公众号，打开某个主页面，完成支付
• 用户的好友在朋友圈、聊天窗口等分享商家页面连接，用户点击链接打开商家页面，完成支付
• 将商户页面转换成二维码，用户扫描二维码后在微信浏览器中打开页面后完成支付

4. APP支付

APP支付又称移动端支付，是商户通过在移动端应用APP中集成开放SDK调起微信支付模块完成支付的模式。
5. H5支付

H5支付主要是在手机、ipad等移动设备中通过浏览器来唤起微信支付的支付产品。
6. 小程序支付

小程序支付是专门被定义使用在小程序中的支付产品。目前在小程序中能且只能使用小程序支付的方式来唤起微信支付。

对比栏目	JSAPI	JSSDK	小程序
统一下单	都需要先获取到Openid，调用相同的API
调起数据签名	五个字段参与签名(区分大小写)：appId,nonceStr,package,signType,timeStamp
调起支付页面协议	HTTP或HTTPS	HTTP或HTTPS	HTTPS
支付目录	有	有	无
授权域名	有	有	无
回调函数	有	success回调 complete、fail、success回调函数

微信小程序支付有哪些流程？

推荐看下微信支付的开发文档
里面的这个时序图。讲明了前后端在小程序的支付的时候应该干些什么事情。

这张图通俗的说就是：

1. 前端(微信小程序)首先将物品单价，数量，总价通过接口给后端。
2. 后端获取到上一步的前端传的值之后，去微信后台，调用小程序登录的API返回用户的openid,生成商户订单需要的数据，然后去调微信后台的支付统一下单的API
3. 然后微信后台返回预付单信息（prepay_id），将组合的数据再次签名，返回给前端支付参数（timeStamp，nonceStr，package，signType，paySign）
4. 前端通过wx.requestPayment发起支付。
5. 前端支付完了之后，后端等着微信后台通知自己，然后更新订单。

前端如何调起支付？

	// res 此时应该返回调起微信支付的必填参数。
	// 参数说明： 
	// timeStamp:时间戳从1970年1月1日00:00:00至今的秒数,即当前的时间
	// nonceStr:随机字符串，不长于32位。
	// package:统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=wx2017033010242291fcfe0db70013231072
	// signType:签名类型，默认为MD5，支持HMAC-SHA256和MD5。注意此处需与统一下单的签名类型一致
	// paySign:签名
	// var obj = {
	//   appId: 'wx08cd0bc0951c8abf',
	//   nonceStr: 'uID1GiUVqydDsaKnkJjCCcPm78OcM6AX',
	//   package: 'prepay_id=wx03171725082931027c32cfa01043087700',
	//   paySign: '77EE32C56FC7CE0351EB74FBE784CB12',
	//   signType: 'MD5',
	//   timeStamp: '1591175843'
	// }
	wx.requestPayment({
		appId: res.data.appId,
		nonceStr: res.data.nonceStr,
		package: res.data.package,
		paySign: res.data.sign,
		signType: res.data.signType,
		timeStamp: res.data.timeStamp,
		'success': function(res) { // 调用支付成功
			paySuccess(that.data.condition).then(res => {
				wx.reLaunch({
					url: '/pages/contractManage/sendSuccess/sendSuccess'
				})
			})
		},
		'fail': function(res) { // 接口调用失败
			console.log(res)
			wx.showToast({
				icon: 'none',
				title: '取消支付!',
			})
		},
		'complete': function(res) { // 接口调用结束的回调函数
			console.log(res)
		}
	})

支付的坑

1. 前端调用wx.requestPayment传递的参数都是由后端返回。（原因是时间戳前端生成的话会和下单的时候的时间戳不一致。导致支付的时候报错。）
2. 前后端在请求微信接口的时候一定要注意字段的大小写。
3. 后端在拼接参数信息的时候，注意按参数名拼音的顺序来排序。
4. 需要获取商户秘钥才能进行支付。（需要申请一个商户号，同时要和微信小程序绑定上，绑定之后在微信公众平台能看见绑定的商户号。)

写在最后的话

有问题，多看文档。虽然微信小程序有些文档写得有点简单。但是重复的看，慢慢就懂了。
就好比书读百遍其义自见。

同时如有发现不对的地方。还请留言纠正。