微信小程序支付

微信支付有哪些方式？

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

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. 需要獲取商戶秘鑰才能進行支付。（需要申請一個商戶號，同時要和微信小程序綁定上，綁定之后在微信公眾平台能看見綁定的商戶號。)

寫在最后的話

有問題，多看文檔。雖然微信小程序有些文檔寫得有點簡單。但是重復的看，慢慢就懂了。
就好比書讀百遍其義自見。

同時如有發現不對的地方。還請留言糾正。