陪玩系統原始碼開發，H5頁面中呼叫支付功能的實現

最近在陪玩系統原始碼開發工作中，有個H5頁面需要實現微信支付和支付寶支付的功能，現在已經完成，抽個時間寫出來，分享給有需要的人。

第一步：先判斷當前環境

判斷陪玩系統原始碼中使用者所屬環境，根據環境不同，執行不同的支付程式。

if (/MicroMessenger/.test(window.navigator.userAgent)) {
			// alert('微信');
		} else if (/AlipayClient/.test(window.navigator.userAgent)) {
			//alert('支付寶');
		} else {
			//alert('其他瀏覽器');
		}

第二步：如果是微信環境，需要先進行網頁授權

網頁授權的詳細介紹可以檢視微信相關文件。這裡不做介紹。

第三步：

1、微信支付

陪玩系統原始碼實現微信支付有兩種方法：
1：呼叫微信瀏覽器提供的內建介面WeixinJSBridge
2：引入微信jssdk，使用wx.chooseWXPay方法，需要先通過config介面注入許可權驗證配置。
我這裡使用的是第一種，在從後臺拿到簽名、時間戳這些資料後，直接呼叫微信瀏覽器提供的內建介面WeixinJSBridge即可完成陪玩系統原始碼中的微信支付功能。

getRequestPayment(data) {
				function onBridgeReady() {
					WeixinJSBridge.invoke(
						"getBrandWCPayRequest", {
							"appId": data.appId, //公眾號ID，由商戶傳入     
							"timeStamp": data.timeStamp, //時間戳，自1970年以來的秒數     
							"nonceStr": data.nonceStr, //隨機串     
							"package": data.package,
							"signType": data.signType, //微信簽名方式：     
							"paySign": data.paySign //微信簽名 
						},
						function(res) {
							alert(JSON.stringify(res));
							// get_brand_wcpay_request
							if (res.err_msg == "get_brand_wcpay_request:ok") {
								// 使用以上方式判斷前端返回,微信團隊鄭重提示：
								//res.err_msg將在使用者支付成功後返回ok，但並不保證它絕對可靠。
							}
						}
					);
				}
				if (typeof WeixinJSBridge == "undefined") {
					if (document.addEventListener) {
						document.addEventListener(
							"WeixinJSBridgeReady",
							onBridgeReady,
							false
						);
					} else if (document.attachEvent) {
						document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
						document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
					}
				} else {
					onBridgeReady();
				}
			},

2、支付寶支付

支付寶支付相對於微信來說，前端這塊工作更簡單 ，陪玩系統原始碼後臺會返回給前端一個form表單，我們要做的就是把這個表單進行提交即可。相關程式碼如下：

this.$api.alipayPay(data).then((res) => {
				// console.log('支付寶引數', res.data)
				if (res.code == 200) {
					var resData =res.data					const div = document.createElement('div')
					div.id = 'alipay'
					div.innerHTML = resData
					document.body.appendChild(div)
					document.querySelector('#alipay').children[0].submit() // 執行後會喚起支付寶
				}
			}).catch((err) => {
			})

以上便是“陪玩系統原始碼開發，H5頁面中呼叫支付功能的實現”的全部內容，希望能給大家帶來幫助。

本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理
原文連結：