Heim > Artikel > WeChat-Applet > Den WeChat-Zahlungsprozess aus einer Front-End-Perspektive ordnen
Empfohlen: WeChat Mini-Programmentwicklungs-Tutorial
Aufgrund geschäftlicher Anforderungen wurde die WeChat-Zahlungsfunktion entwickelt, die drei Zahlungen umfasst Methoden:
WeChat Payment-Access Guide
orderId
und zurück code
über wx.login()orderId
并返回code
code
和orderId
请求后端接口,获取支付所需数据async function wxPay(goodId) { // 1. 创建订单 获取orderId let orderId = await ajax("POST", "/api/OrderProgram/CreateTheOrder", { goodId, // 商品id }); // 2. 获得 code let code = await wxlogin(); // 基于pr封装的wx.login()方法 // 3. 获取支付的数据 let payData = await ajax("POST", "/api/OrderProgram/WxXcxPay", { orderId, code, }); // 4. 发起支付 let res = await payment(payData); // 基于pr封装的wx.requestPayment()方法 // 5. 判断是否支付成功 let payResult = res.errMsg; if (payResult == "requestPayment:ok") { console.log("支付成功"); } else if (payResult == "requestPayment:fail cancel") { console.log("用户取消支付"); } else { console.log("支付失败"); } }
orderId
并返回orderId
请求支付接口,获得 mweb_url
,mweb_url
会跳转微信自动调用微信支付async function wxH5Pay(goodId) { // 1. 创建订单 获取orderId let orderId = await ajax("POST", "/api/OrderProgram/CreateTheOrder", { goodId, // 商品id }); // 2. 获取支付跳转的URL let mweb_url = await ajax("POST", "/api/OrderProgram/WxH5Pay", { orderId }); // 3. 跳转URL去微信支付 if (mweb_url) { location.href = mweb_url; } else { console.log("回调地址出错"); } // 4. 支付后返回支付页,判断是否支付成功 // 4.1 刷新页面,获取最新的订单(商品)状态。 // 4.2 设置一个"我已支付"的按钮,让用户点击之后查询状态。 }
redirect_url
进行urlencode
处理orderId
orderId
跳转到支付页,获取 code
code
code
,请求数据跳转授权页面,code
会通过回调地址一起返回回来code
,发送给后端,后端解析到 openid
,保存好。点击确定支付按钮,触发 wxPay()
方法
orderId
给后端,获取 wxData
wxData
中包含 wx.config
和 wx.chooseWXPay
两个接口的数据。wx.config()
然后在调用 wx.chooseWXPay()
,如果一切正常,支付页面就会弹出。// 1. 创建订单 获取orderId let orderId = await ajax("POST", "/api/OrderProgram/CreateTheOrder", { goodId, // 商品id }); // 2. 携带id 跳转到支付页 this.$router.push({ name: "wx_pay_page", params: { orderId: id } });
main.js
Das Applet erhält diesen code
und orderIdFordern Sie die Backend-Schnittstelle an, um die für die Zahlung erforderlichen Daten abzurufen
// main.js 引入 js-sdk import wx from "weixin-js-sdk";Notizen
Bewerben Sie sich für ein WeChat Mini-Programm-Konto
Wenn Sie sich erfolgreich bewerben, erhalten Sie die AppID (Mini-Programm-ID) und das AppSecret (Mini-Programmschlüssel)
Der Antragstyp ist Unternehmenstyp. Andernfalls können Sie nicht auf WeChat Pay zugreifen ein Händlerplattformkonto
AppID im ersten Schritt erforderlich
Wenn Sie sich erfolgreich bewerben, können Sie MchID (Händler-ID) und MchKey (Händlerschlüssel) erhalten
orderId
zu erhalten und zurückzugeben 🎜🎜Das Front-End fordert die Zahlungsschnittstelle an mit orderId
, erhält mweb_url
, 🎜🎜springt dann zu mweb_url
und springt zu WeChat. Rufen Sie WeChat Pay automatisch auf 🎜🎜 und kehren Sie zur Zahlungsseite zurück nach der Zahlung, um festzustellen, ob die Zahlung erfolgreich war (eine Anfrage muss an die Back-End-Abfrage gesendet werden)<template> <p> <button @click="wxPay">点击支付</button> </p> </template>🎜Hinweise🎜🎜🎜Stellen Sie den richtigen Zahlungsdomänennamen auf der Händlerplattform ein🎜🎜Das Debuggen muss online erfolgen. Wenn Sie es als problematisch empfinden, können Sie die Intranet-Penetration (Ngrok oder Peanut Shell) verwenden 🎜Korrektur erforderlich:
redirect_url
führt urlencode
-Verarbeitung durch🎜🎜H5 Die Zahlung kann nicht direkt im WeChat-Client initiiert werden, bitte rufen Sie sie in einem externen Browser auf. 🎜🎜🎜Referenz🎜🎜🎜WeChat Payment-H5 Payment-Entwicklungsschritte🎜🎜🎜JSAPI Payment (Webseitenzahlung innerhalb von WeChat)🎜🎜Entwicklungsprozess🎜🎜🎜Produktseite🎜🎜🎜🎜Erstellen Sie eine Bestellung auf der Front-End-Produktseite und Vereinheitlichen Sie es im Backend. Nachdem Sie die Bestellung aufgegeben haben, erhalten Sie orderId
🎜🎜Das Frontend springt zur Zahlungsseite mit orderId
, 🎜🎜🎜Zahlungsseite🎜 🎜🎜🎜🎜Holen Sie sich code🎜🎜🎜Stellen Sie beim ersten Betreten der Seite fest, ob sich <code>code
im Pfad befindet. 🎜🎜Wenn kein vorhanden ist Code
, Daten anfordern, um zur Autorisierungsseite zu springen, code
wird zusammen über die Rückrufadresse zurückgegeben. Holen Sie sich code
und senden Sie ihn an das Backend Das Backend analysiert es in openid
und speichert es. 🎜🎜🎜🎜Klicken Sie auf die Schaltfläche „Zahlung bestätigen“, um die Methode wxPay()
auszulösen. 🎜🎜🎜Senden Sie orderId
an das Backend und erhalten Sie wxData code> 🎜🎜<code>wxData
enthält Daten von zwei Schnittstellen: wx.config
und wx.chooseWXPay
. 🎜🎜Rufen Sie zuerst wx.config()
und dann wx.chooseWXPay()
auf. Wenn alles normal ist, wird die Zahlungsseite angezeigt. 🎜🎜🎜Der Zahlungsstatus wird über das Backend abgefragt🎜🎜Pseudocode🎜🎜🎜Produktseite🎜🎜// Vue data(){ return { orderId: this.$route.params.orderId, // 订单id url: '',// 获取code的url wxData: null,// js-sdk接口所需的数据 } }, mounted(){ // 判断是否有code this.getCode() } methods: { getCode() { var code = this.getUrlPram("code"); if (code != null) { this.code = code; // 拿到 code 发给 后端 this.sendCode(code); } else { // 去拿code this.getUrl(); } }, getUrl() { // 请求后端拿到url所需数据,然后跳转页面在通过回调地址返回,获取code. this.axios .post("/api/OrderProgram/GetOpenidAndAccessToken", { orderId: this.orderId, }) .then((data) => { this.url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${data.appId}&redirect_uri=${data.redirect_uri}&response_type=${data.response_type}&scope=${data.scope}&state=${data.state}`; window.location.href = this.url; }) .catch((err) => { console.log(err); }); }, sendCode(code) { // 发送code给后端 后端解析出openid this.axios .post("/api/OrderProgram/GetOpenidAndAccessTokenFromCode", { code: code, }) .then((res) => { console.log(res); }) .catch((err) => { console.log(err); }); }, wxPay: async function() { // 发送orderid,获取wx.chooseWXPay和wx.config所需的参数 this.wxData = await this.axios.post( "/api/OrderProgram/WxJSAPIPay", { orderId: this.orderId } ); let wxConfigData = this.wxData.wxConfigData // 获取wx.chooseWXPay()所需数据 let wxPayData = this.wxData.wxPayData;// 获取wx.config()所需数据 this.$wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: wxConfigData.appId, // 必填,公众号的唯一标识 timestamp: wxConfigData.timeStamp, // 必填,生成签名的时间戳 nonceStr: wxConfigData.nonceStr, // 必填,生成签名的随机串 signature: wxConfigData.paySign, // 必填,签名 jsApiList: [ "chooseWXPay", ], }); // 执行支付 this.$wx.chooseWXPay({ timestamp: wxPayData.timeStamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符 nonceStr: wxPayData.nonceStr, // 支付签名随机串,不长于 32 位 package: wxPayData.package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*) signType: wxPayData.signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5' paySign: wxPayData.paySign, // 支付签名 success: (res) => { this.$toast("支付成功"); }, fail: (err) => { this.$toast("支付失败"); }, }); }, }🎜🎜Eintragsdatei (
main.js
)🎜🎜// 在创建订单之后,就判断环境使用哪种方法支付。 if (isWx()) { this.WXPay(orderId); // 带着orderId跳转到支付页逻辑 } else { this.H5Pay(orderId); // 执行上面H5支付中的创建订单之后的逻辑 } // 判断是否是微信浏览器 function isWx() { let uAgent = navigator.userAgent.toLowerCase(); reutrn(/micromessenger/.test(uAgent)) ? true : false; }🎜 🎜🎜Zahlungsseite HTML🎜🎜🎜
https://open.weixin.qq.com/connect/oauth2/authorize ?appid=你的appid &redirect_uri=你的回调地址(拿到code后返回) &response_type=code(返回类型,默认code) &scope=snsapi_base(授权范围,静默授权拿到openid) &state=STATE(自定义状态,非必填) #wechat_redirect(重定向使用必须携带)🎜🎜Zahlungsseite JS🎜🎜
// Vue data(){ return { orderId: this.$route.params.orderId, // 订单id url: '',// 获取code的url wxData: null,// js-sdk接口所需的数据 } }, mounted(){ // 判断是否有code this.getCode() } methods: { getCode() { var code = this.getUrlPram("code"); if (code != null) { this.code = code; // 拿到 code 发给 后端 this.sendCode(code); } else { // 去拿code this.getUrl(); } }, getUrl() { // 请求后端拿到url所需数据,然后跳转页面在通过回调地址返回,获取code. this.axios .post("/api/OrderProgram/GetOpenidAndAccessToken", { orderId: this.orderId, }) .then((data) => { this.url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${data.appId}&redirect_uri=${data.redirect_uri}&response_type=${data.response_type}&scope=${data.scope}&state=${data.state}`; window.location.href = this.url; }) .catch((err) => { console.log(err); }); }, sendCode(code) { // 发送code给后端 后端解析出openid this.axios .post("/api/OrderProgram/GetOpenidAndAccessTokenFromCode", { code: code, }) .then((res) => { console.log(res); }) .catch((err) => { console.log(err); }); }, wxPay: async function() { // 发送orderid,获取wx.chooseWXPay和wx.config所需的参数 this.wxData = await this.axios.post( "/api/OrderProgram/WxJSAPIPay", { orderId: this.orderId } ); let wxConfigData = this.wxData.wxConfigData // 获取wx.chooseWXPay()所需数据 let wxPayData = this.wxData.wxPayData;// 获取wx.config()所需数据 this.$wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: wxConfigData.appId, // 必填,公众号的唯一标识 timestamp: wxConfigData.timeStamp, // 必填,生成签名的时间戳 nonceStr: wxConfigData.nonceStr, // 必填,生成签名的随机串 signature: wxConfigData.paySign, // 必填,签名 jsApiList: [ "chooseWXPay", ], }); // 执行支付 this.$wx.chooseWXPay({ timestamp: wxPayData.timeStamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符 nonceStr: wxPayData.nonceStr, // 支付签名随机串,不长于 32 位 package: wxPayData.package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*) signType: wxPayData.signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5' paySign: wxPayData.paySign, // 支付签名 success: (res) => { this.$toast("支付成功"); }, fail: (err) => { this.$toast("支付失败"); }, }); }, }
// 在创建订单之后,就判断环境使用哪种方法支付。 if (isWx()) { this.WXPay(orderId); // 带着orderId跳转到支付页逻辑 } else { this.H5Pay(orderId); // 执行上面H5支付中的创建订单之后的逻辑 } // 判断是否是微信浏览器 function isWx() { let uAgent = navigator.userAgent.toLowerCase(); reutrn(/micromessenger/.test(uAgent)) ? true : false; }
www.xx.com/pay
,最后获取的 code 会拼在此回调地址后返回,返回后如www.xx.com/pay?code=xxxx
获取 code
code
:https://open.weixin.qq.com/connect/oauth2/authorize ?appid=你的appid &redirect_uri=你的回调地址(拿到code后返回) &response_type=code(返回类型,默认code) &scope=snsapi_base(授权范围,静默授权拿到openid) &state=STATE(自定义状态,非必填) #wechat_redirect(重定向使用必须携带)
redirect_uri
参数要和你在微信公众号里设置的回调域名一致(例如:www.xx.com/pay
),需要注意的是这 url 需要urlEncode
。
请求这个地址之后,code
会以你设置的redirect_uri
地址里的参数带回来,拿到之后传给后端就行了。
前端引入 js-skd
script
引入js-sdknpm
包weixin-js-sdkwx.config
的参数wx.chooseWXPay
所需的参数整个流程走下来,给我的体验是:小程序支付最方面(因为配置少),其次是 H5,JSAPI 支付最麻烦(文章一多半都在写它)
在微信支付功能开发过程中,其实最麻烦的不是开发流程,而是他的各种配置和授权流程,为了拿到所需的参数而来回折腾。
开发过程中的一些参数是经常用到的,如 appid、openid、orderId
支付流程大径相同,先获取到用户的 openid,知道你是谁,然后统一下单拿到 orderId 再去处理不同平台的支付方式
开发时候用到的相关文档,一定要仔细阅读二遍以上为止!!
遇到问题不要死刚,多百度多 Google,说不准你遇到的问题已经有无数的人遇到过并且已经有成熟的解决方案了。
前端和后端要多沟通,有什么问题(难点)随时反馈,需要什么参数好好说,遇到观点不一致的时候千万要注意控制住情绪,切莫撕逼(.——.)。
因为本人水平有限,对后端流程懂得不多,只能以前端的角度来梳理整个支付流程。
以上,希望对你有所帮助。
Das obige ist der detaillierte Inhalt vonDen WeChat-Zahlungsprozess aus einer Front-End-Perspektive ordnen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!