实习生妹子问我怎么对接微信支付(H5、JSAPI、小程序)

andyhu
4,535 阅读4分钟

前言

ps: 文章点赞数量远远不及收藏量😭，各位看官大佬们，收藏的时候把赞也点上吧！

微信支付业务，针对小程序、微信浏览器和非微信浏览器中的网页的三种场景，我们可以分别通过官方提供的 小程序支付、JSAPI支付、H5支付来开发。这是篇非常实用的文章，建议收藏。

准备工作

开通微信商户号、微信公众号然后按照步骤准备一堆资料审核，然后设置相关配置。所以最好提前准备资料审核以免耽误开发进度。配置的步骤：官方文档，直接按照官方文档配置就行了。需要特别注意的是配置商户号的支付授权目录和公众号的授权域名必须一致，不然会调起支付失败的！

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

H5 支付

开发流程

  1. 请求创建订单接口拿到订单数据(orderId，订单号，支付金额)
  2. 带orderId请求支付接口，获得 mweb_url
  3. 跳转到微信支付中间页 mweb_url ，然后自动调用微信支付
  4. 支付成功后跳转到配置的返回页（请求支付时携带的参数redirectUrl）

参考文档

实现代码

伪代码😂

async wxPayByH5() {
  // 商品信息
  let goodsList = { goodsId: 1 };
  let params = {
    goodsList: goodsList,
  }
  // 1. 创建订单
  let data = await createOrder(params);
  // 获得 订单id：orderId；订单总金额：orderTotalPrice；订单号：orderNo
  let { orderId, orderTotalPrice, orderNo } = data;
  
  let paramsPay = {
    orderId,
    // redirectUrl： 支付完成后返回的页面
    redirectUrl: `${location.origin}/orderList`
  };
  // 2.请求支付
  let { mweb_url } = await wxPay(params);
  // 3.跳转微信支付中间页
  window.location.replace(mweb_url);
},

注意事项

  • 商户号的支付授权目录和公众号的授权域名必须一致
  • 需对 redirect_url 进行 urlencode 处理（让后端处理吧🤭）
  • 调试需在线上环境（需要部署到公网服务器并映射到公众号配置的安全域名）
  • H5 支付只能在非微信浏览器中调起，JSAPI 支付是在微信浏览器环境调起的

JSAPI 支付

开发流程

  1. 请求创建订单接口拿到订单数据(订单id，订单号，支付金额)
  2. 通过微信网页授权，携带授权 code 重定向到订单支付页，并把订单数据拼接在重定向的地址后面（因为此步骤只适合history路由模式下，如果你项目是 hash 路由 建议此步骤看这篇文章）
  3. 到支付页后
    1. 获取地址栏上的 code、订单数据（orderId）,
    2. 然后请求支付接口获得我们需要的数据（该数据保函了wx.config和wx.chooseWXPay两个方法需要的传参）
    3. 通过 js-sdk 提供的方法发起支付
      1. 先通过 js-sdk 提供的 wx.config() 注入权限验证配置
      2. 再通过 wx.ready() 接口处理成功验证
      3. 再通过 wx.checkJsApi() 判断客户端版本是否支持指定JS接口
      4. 再在 wx.checkJsApi() 里成功回调函数中调用 wx.chooseWXPay() 发起微信支付请求
  4. 通过 wx.chooseWXPay() 支付成功回调：cancel: function(res){}，支付失败回调：fail: function(err){}，取消支付回调 cancel: function(res){}分别处理不同支付结果

参考文档 JS-SDK

实现代码

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

/**
 * @description 截取url中的指定参数
 * @param {*} queryName 需要截取的参数
 * @returns 
 */
export const getUrlParam = (queryName) => {
  return decodeURIComponent((new RegExp('[?|&]' + queryName + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
}

/**
 * 获取微信支付的code，并传入回调地址
 * @param {*} url 
 */
export function getWxCode(url) {
  let wxUrlStart = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + wechatAppId + '&redirect_uri=';
  let wxUrlEnd = '&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect';
  let redirect_uri = encodeURIComponent(url);
  let allUrl = wxUrlStart + encodeURIComponent(redirect_uri) + wxUrlEnd;
  window.location.replace(allUrl);
}

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

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

支付页的代码

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

小程序支付

开发流程

  1. 请求创建订单接口，后端统一下单获取 orderId 并返回
  2. 通过 wx.login() 获取 code
  3. 携带 code 和 orderId 参数请求接口，获取支付所需数据
  4. 获取支付所需数据之后，调 wx.requestPayment() 接口，调用起微信支付页面
  5. 根据支付结果做相应操作

小程序文档wx.login()
小程序文档wx.requestPayment()

参考代码文章

实现代码

async function wxPay(goodId) {
  // 1. 创建订单 获取orderId
  let CreateTheOrder = {
    goodId, // 商品id
  }
  let orderId = await createOrder(params);
  // 2. 获得 code
  let code = await wxlogin(); // 基于promise封装的wx.login()方法
  let paramsPay = {
    orderId,
    code,
  }
  // 3. 获取支付的数据
  let payData = await wxXcxPay(paramsPay);
  // 4. 发起支付
  let res = await payment(payData); // 基于promise封装的wx.requestPayment()方法
  // 5. 判断是否支付成功
  let payResult = res.errMsg;
  if (payResult == "requestPayment:ok") {
    console.log("支付成功");
  } else if (payResult == "requestPayment:fail cancel") {
    console.log("用户取消支付");
  } else {
    console.log("支付失败");
  }
}

注意事项

  1. 申请微信小程序账号拿到的 AppID（小程序 id）和 AppSecret（小程序密钥）申请类型必须为企业性质，否则无法接入微信支付
  2. 先要微信认证才能接入微信支付和绑定商户平台
  3. 用第一步拿到的 AppID 来申请商户平台账号拿到 MchID（商户 id）和 MchKey（商户密钥）
  4. 小程序关联商户号微信和商户都认证成功后，在微信后台微信支付菜单中进行关联接入微信支付
  5. 在微信后台微信支付菜单中进行接入

写在最后

我是 AndyHu，目前暂时是一枚前端搬砖工程师。

文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注呀😊

未经许可禁止转载💌

speak less，do more.

avatar
文章
阅读
粉丝
相关推荐
H5呼起微信支付（个人实践总结）
9.7k阅读
 · 
35点赞
前端支付流程-微信支付&支付宝支付
8.1k阅读
 · 
22点赞
手把手教你快应用接入微信H5网页支付
4.8k阅读
 · 
19点赞
Vue项目H5微信支付（js-sdk）和支付宝支付功能
3.1k阅读
 · 
4点赞
支付宝生活号H5接入支付宝支付流程
3.6k阅读
 · 
11点赞