一、微信支付(H5,微信小程序)
通常一些电商项目使用到微信支付操作,所以简单地介绍一下微信支付的具体流程。
1.1 什么是微信支付?在什么业务场景会使用到微信支付?
微信支付是微信内置微信浏览器(其他浏览器不支持)或者微信小程序的支付接口,主要负责用户对商家执行支付操作的流程。
例如常见的电商在下单环节,就需要通过使用微信支付接口,唤醒支付金额以及输入支付密码界面。再通过支付是否成功,跳转到相应的支付成功,支付取消或者支付失败页面。
1.2 通常微信的支付流程
通常支付会分成两种形式:
一、在商品详情页跳转到下单页面去执行支付(此时订单未创建),对应以下的1.2.1 订单未创建的下单支付流程。
二、在订单页面处于待支付去支付(此时订单已经创建了),对应以下的1.2.2 订单已创建的下单支付流程。
1.2.1 订单未创建的下单支付流程
具体大概流程如下所述:
在下单页面,用户通过表单输入自己的收货信息等。点击下单按钮,按钮事件中通过接口post请求把用户的收货信息等放在body内,后端会返回一个订单编号给前端。(订单创建接口)前端拿到此订单编号时,再通过接口post请求把第2步拿到的订单编号放在body内,后端会返回一组支付签名的数据给前端。(订单支付签名接口)前端再使用微信自带支付接口(以JSAPI 支付接口为例子),使用此接口时,把第3步获得的支付签名数据参数传给微信支付服务器。此时用户界面上会唤起支付页面,就是用户输入支付密码的界面。在接口JSAPI 支付接口返回,书写三种if的判断条件:① 用户点击关闭支付密码界面,JSAPI 支付接口就会返回res.err_msg=“get_brand_wcpay_request:cancel”,即用户取消支付,前端书写跳转路由跳到支付取消页面;
② 用户支付密码输错后,JSAPI 支付接口就会返回res.err_msg == “get_brand_wcpay_request:fail”,即用户支付失败,前端书写跳转路由跳到支付失败页面;
③ 用户支付密码正确后,JSAPI 支付接口就会返回res.err_msg == “get_brand_wcpay_request:ok”,即用户支付成功,前端书写跳转路由跳到支付成功页面;
1.2.2 订单已创建的下单支付流程
具体大概流程如下所述:
用户进入待支付的订单列表页面,此时后端会通过接口把所有的该用户待支付的订单以及它对应的订单编号传给前端(用户订单列表接口),前端做列表展示。用户点击其中一个待支付的订单中继续支付的按钮。按钮事件先把一个待支付的订单的订单编号拿出来。接着继续进行1.2.1的第3-6步操作,直至这个订单完成支付流程。1.3 微信的支付接口
现在一般微信的支付接口会分成两种:
一、JSAPI 支付接口
二、