从零开始对接微信支付

码支付5个月前 (11-20)新闻资讯67

前言

微信支付业务，针对小程序、微信浏览器和非微信浏览器中的网页的三种场景，我们可以分别通过官方提供的小程序支付、JSAPI支付、H5支付来开发。

准备工作

开通微信商户号、微信公众号然后按照步骤准备一堆资料审核，然后设置相关配置。

所以最好提前准备资料审核以免耽误开发进度。

配置的步骤：官方文档，直接按照官方文档配置就行了。

需要特别注意的是配置商户号的支付授权目录和公众号的授权域名必须一致，不然会调起支付失败的！

参考资料：JSAPI支付配置文档H5支付配置文档小程序支付JS-SDK

H5支付开发流程

请求创建订单接口拿到订单数据(orderId，订单号，支付金额)

带orderId请求支付接口，获得mweb_url

跳转到微信支付中间页mweb_url，然后自动调用微信支付

支付成功后跳转到配置的返回页（请求支付时携带的参数redirectUrl）

参考文档

实现代码

伪代码?

asyncwxPayByH5(){//商品信息letgoodsList={goodsId:1};letparams={goodsList:goodsList,}//1.创建订单letdata=awaitcreateOrder(params);//获得订单id：orderId；订单总金额：orderTotalPrice；订单号：orderNolet{orderId,orderTotalPrice,orderNo}=data;letparamsPay={orderId,//redirectUrl：支付完成后返回的页面redirectUrl:`${}/orderList`};//2.请求支付let{mweb_url}=awaitwxPay(params);//3.跳转微信支付中间(mweb_url);},注意事项

商户号的支付授权目录和公众号的授权域名必须一致

需对redirect_url进行urlencode处理（让后端处理吧?）

调试需在线上环境（需要部署到公网服务器并映射到公众号配置的安全域名）

H5支付只能在非微信浏览器中调起，JSAPI支付是在微信浏览器环境调起的

JSAPI支付开发流程

请求创建订单接口拿到订单数据(订单id，订单号，支付金额)

通过微信网页授权，携带授权code重定向到订单支付页，并把订单数据拼接在重定向的地址后面（因为此步骤只适合history路由模式下，如果你项目是hash路由建议此步骤看这篇文章）

到支付页后

先通过js-sdk提供的()注入权限验证配置

再通过()接口处理成功验证

再通过()判断客户端版本是否支持指定JS接口

再在()里成功回调函数中调用()发起微信支付请求

获取地址栏上的code、订单数据（orderId）,

然后请求支付接口获得我们需要的数据（该数据保函了和两个方法需要的传参）

通过js-sdk提供的方法发起支付

通过()支付成功回调：cancel:function(res){}，支付失败回调：fail:function(err){}，取消支付回调cancel:function(res){}分别处理不同支付结果

参考文档JS-SDK

实现代码

封装好获取微信授权code的方法和获取地址栏中指定参数的方法

/***@description截取url中的指定参数*@param{*}queryName需要截取的参数*@returns*/exportconstgetUrlParam=(queryName)=>{returndecodeURIComponent((newRegExp([?|&]+queryName+=+([^&;]+?)(&|#|;|$))()||[,])[1](/\+/g,%20))||null}/***获取微信支付的code，并传入回调地址*@param{*}url*/exportfunctiongetWxCode(url){letwxUrlStart=}

在订单页创建订单，并且微信授权拿到code，重定向到订单支付页（地址栏携带orderId，订单金额等订单数据和code）

asynccreateOrder(){//商品信息letgoodsList={goodsId:1};letparams={goodsList:goodsList,}//1.创建订单letdata=awaitcreateOrder(params);//获得订单id：orderId；订单总金额：orderTotalPrice；订单号：orderNolet{orderId,orderTotalPrice,orderNo}=data;//微信网页授权后的重定向地址leturl=`${}/pay?orderTotalPrice=${orderTotalPrice}&orderNo=${orderNo}&orderId=${orderId}`//上面封装的微信授权网页方法getWxCode(url);},

支付页的代码

//jsapi支付asyncwxPayByJsApi(){let_this=this;//获取订单数据和授权codeconst{orderTotalPrice,orderNo,orderId}=_this.$;={orderTotalPrice,orderNo,orderId,orderSource}_=getUrlParam(code);letparams={orderId:_,code:_,//授权微信拿到的code}//请求后端接口支付letresp=awaitwxPay(params);//调用后台接口({debug:false,//开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId:wechatAppId,//必填，公众号的唯一标识,//必填，生成签名的时间戳,//必填，生成签名的随机串,//必填，签名jsApiList:[chooseWXPay]//必填，需要使用的JS接口列表});//doc:注入权限验证配置(function(){//判断当前客户端版本是否支持指定JS接口({jsApiList:[chooseWXPay],//需要检测的JS接口列表，所有JS接口列表见附录2,success:(res)=>{//以键值对的形式返回，可用的api值true，不可用为false//如：{checkResult:{chooseImage:true},errMsg:checkJsApi:ok}//发起微信支付请求({,//支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符,//支付签名随机串，不长于32位,//统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）,//微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致,//支付签名success:(res)=>{//支付成功后的回调函数_this.$({path:/payResult,query:{orderTotalPrice:_,orderNo:_,orderId:_}});},fail:(err)=>{_this.$(-1);},cancel:function(err){//用户取消支付_this.$(-1);},});}});});(err=>{_this.$(-1);})},小程序支付开发流程

小程序端请求创建订单接口，后端统一下单获取orderId并返回

小程序端获取通过()获取code

小程序端拿这code和orderId请求后端接口，获取支付所需数据

获取支付所需数据之后，小程序端调用()接口，直接调用起支付页面

判断是否支付成功后的逻辑

小程序文档()小程序文档()

实现代码asyncfunctionwxPay(goodId){//1.创建订单获取orderIdletCreateTheOrder={goodId,//商品id}letorderId=awaitcreateOrder(params);//2.获得codeletcode=awaitwxlogin();//基于pr封装的()方法//3.获取支付的数据letparamsPay={orderId,code,}letpayData=awaitwxXcxPay(paramsPay);//4.发起支付letres=awaitpayment(payData);//基于pr封装的()方法//5.判断是否支付成功letpayResult=;if(payResult==requestPayment:ok){(支付成功);}elseif(payResult==requestPayment:failcancel){(用户取消支付);}else{(支付失败);}}注意事项

申请微信小程序账号申请成功可拿到AppID（小程序id）和??AppSecret（小程序密钥）申请类型为企业性质，否则无法接入微信支付

微信小程序认证通过认证的小程序才能接入微信支付和绑定商户平台

申请商户平台账号需要第一步申请的AppID申请成功可拿到MchID（商户id）和MchKey（商户密钥）

信小程序关联商户号微信和商户都认证成功后，在微信后台微信支付菜单中进行关联接入微信支付

在微信后台微信支付菜单中进行接入

写在最后