最近在开发一个微信的商城项目, 给大家分享一下关于微信支付的相关的把, 先说说商城开发的流程, 商城不管是否用微信登录, 都应该可以浏览, 一直到支付之前才会调用微信登录. 微信登录可以参考我之前的一片博客, 里面写了纯前端的微信登录 (特殊需求, 正常应该走后台),
先说说完整的微信支付的流程把:
首先, 应该调用后台的一个接口, 达到创建订单, 接口要返回订单号, 订单需要支付的金额.
第二步, 调用后台的接口实现微信支付, 返回微信 jsapi 所需要的 appid,timestamp,noncestr,package,signtype,paysign
第三步调用微信 jsapi 唤起微信支付. 回调函数来判断支付成功, 失败, 取消
第四步根据不同状态进行不同操作, 成功前往成功页面, 失败和取消调用取消订单, 将支付中改为代付款
流程就是这样, 当然每个项目都要根据具体情况来实现, 比如我们就是通过用户的 userId 后台在数据库检索 appid 分享一下我们的流程把
- $.ajax({
- type: "POST",
- url: "http://ip:port/order/create",
- crossDomain: true,
- data: JSON.stringify({
- userCode: this.userId,
- shopCode: this.$route.query.shopId,
- distributionType: pstype,
- addressProvince: arr[0],
- addressCity: arr[1],
- addressBlock: arr[2],
- addressStreet: this.AddressObj.address,
- contactPhone: this.AddressObj.phone,
- contactName: this.AddressObj.name,
- isFreightInsurance: 0,
- expressAmount: 0,
- description: this.liuyan,
- orderCargoList: [
- {
- cargoCode: this.$route.query.cargoId,
- cargoCount: this.num,
- presentPrice: 1,
- originalPrice: 1,
- cargoSpec: this.pug,
- cargoTitle: this.goodtitle,
- cargoPicture: this.checkimgUrl
- }
- ]
- }),
- contentType: "application/json",
- success: res => {
- let data = JSON.stringify({
- userCode: this.userId,
- orderNumber: res.data.orderNumber,
- paymentAmount: res.data.paymentAmount,
- paymentMode: 2,
- paymentSource: "JSAPI",
- });
- $.ajax({
- type: "POST",
- url: "http://ip:port/order/payment",
- crossDomain: true,
- data: data,
- contentType: "application/json",
- success: result => {
- console.log(result);
- WeixinJSBridge.invoke(
- "getBrandWCPayRequest",
- {
- appId: result.data.appId,
- timeStamp: result.data.timeStamp,
- nonceStr: result.data.nonceStr,
- package: result.data.package,
- signType: result.data.signType,
- paySign: result.data.paySign
- },
- function(wxres) {
- alert(wxres.err_msg);
- if (wxres.err_msg == "get_brand_wcpay_request:ok") {
- // 支付成功
- } else if (wxres.err_msg == "get_brand_wcpay_request:cancel") {
- // 支付取消
- alert(JSON.stringify(wxres));
- alert('已经取消 准备发送 ajax');
- alert(res.data.orderNumber);
- $.ajax({
- url:"http://ip:port/order/payment/cancel",
- type : "post",
- data:JSON.stringify({
- paymentMode:2,
- orderNumber:res.data.orderNumber,
- message:"用户取消支付",
- }),
- contentType: "application/json",
- success:res=>{
- alert('ajax 成功')
- this.tipText = "支付取消",
- this.tip = true;
- setTimeout(()=>{
- this.tip = false;
- },1000);
- },
- error:err=>{
- alert('ajax 失败')
- console.log(err);
- }
- })
- } else {
- alert('失败')
- $.ajax({
- url:"http://ip:port/order/payment/cancel",
- data:JSON.stringify({
- paymentMode:2,
- orderNumber:res.data.orderNumber,
- message:"用户取消支付",
- }),
- type : "post",
- success:res=>{
- this.tipText = "支付取消",
- this.tip = true;
- setTimeout(()=>{
- this.tip = false;
- },1000);
- },
- error:err=>{
- console.log(err);
- }
- })
- }
- }
- );
- },
- error: err => {
- alert('支付出现问题了')
- console.log(err);
- },
- dataType: "json"
- });
- },
- error: err => {
- alert('创建订单出现问题了');
- console.log(err);
- },
- dataType: "json"
- });
这个就是微信支付的流程, 每一步都需要异步去操作, 当然可以把 ajax 封装好, 直接调用即可.
ps: 本文仅作为我们当前项目的需要, 所传参数不一定所有都是如此调用, 重点看流程.
来源: https://www.cnblogs.com/jinzhenzong/p/9257016.html