【微信支付】精选干货带你使用微信公众号调起微信支付

简介: 最近搞了个微信公众号拉起微信支付的功能项目,看了微信官方文档之后,我从不懂变成了迷糊,又看了几遍之后,发现我从迷糊变成了懵逼状态。

前言

最近搞了个微信公众号拉起微信支付的功能项目,看了微信官方文档之后,我从不懂变成了迷糊,又看了几遍之后,发现我从迷糊变成了懵逼状态。加上和后端开发人员沟通之后,各自的理解方式是真的不一样呀。

下面就结合官方文档和自己的理解,整理出一份干货文档。(由于我是使用vue开发的,所以下面的文章会结合vue来进行说明。)

安装和引入jssdk

在需要调用 JS 接口的页面引入如下 JS 文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.6.0.js

如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)。

根据官方文档中的说明,我们可以直接引入以上两个js文件中的一个。

如果你使用了npm包管理工具的话,是可以直接使用npm进行安装的,这样就不需要配置安全域名、白名单之类的了。

npm install weixin-js-sdk

页面中添加支付按钮

👉 没有任何样式的按钮,这里使用的是vant按钮组件

<template>
  <div class="pay">
    <van-button type="primary" @click="handlePay">支付</van-button>
  </div>
</template>

生命周期中配置config

👉 官方文档中,需要引入wx.config、wx.ready等方法

网络异常,图片无法展示
|

👉 我们可以在vue生命周期函数 - beforeCreate方法中引用这些配置方法

在使用wx.config等方法时,需要在当前页面中引入jssdk哦。

import wx from "weixin-js-sdk"

beforeCreate() {
    payjsapi().then((res) => {
      console.log(res);
      this.wxData = res.data;
      this.wxData.package = "prepay_id=" + res.data.prepay_id;
      wx.config({
        appId: res.data.appid, // 必填,公众号的唯一标识
        timestamp: res.data.timestamp, // 必填,生成签名的时间戳
        nonceStr: res.data.nonce_str, // 必填,生成签名的随机串
        signature: res.data.sign, // 必填,签名
        jsApiList: ["chooseWXPay"], // 必填,需要使用的JS接口列表
      });
      wx.ready(() => {});
      wx.error((e) => {
        console.error(e);
      });
    });
}
  • payjsapi是后端接口,用axios封装的,可以根据自己的需求来定义

由于微信支付参数原因,前端需要将prepay_id字段配置成package

this.wxData.package = "prepay_id=" + res.data.prepay_id;

  • jsApiList中配置的是微信支付的js接口方法

支付方法

👉 根据文档中的描述,微信支付分为两个版本,而且两个版本的文档简直是天差地别呀。

网络异常,图片无法展示
|

👉 点击进入微信支付V2开发文档

👉 点击进入微信支付V3开发文档

👉 点击支付按钮时,请求微信支付方法

methods: {
    handlePay() {
      wx.chooseWXPay({
        timeStamp: this.wxData.timestamp,
        nonceStr: this.wxData.nonce_str,
        package: this.wxData.package, 
        signType: "RSA",
        paySign: this.wxData.sign,
        appId: this.wxData.appid,
        success: function (res) {
          // 支付成功后的回调函数
          console.log("支付成功回调", res);
        },
        fail: function (res) {
          console.log("支付失败回调", res);
        },
      });
    },
  }
  • signType在v2文档中,默认是MD5,但是实际默认是HMAC-SHA256
  • 但是不管你使用哪种方式进行签名加密,都会提示你签名方式不对,所以我就去采用了V3文档中的RSA方式
  • 大家可以打开微信签名校验工具试试两种签名是否可以验证成功。
  • 鉴于V2文档中的签名算法规则后端人员看起来比较懵逼,所以就采用了V3文档中的方式。

签名算法文档说明

V2文档

V3文档

V2 和 V3 差异对比

V3 规则差异 V2
JSON 参数格式 XML
POST、GET、PUT、PATCH、DELETE 提交方式 POST
AES-256-GCM加密 回调加密 无需加密
RSA加密 敏感加密 RSA加密
UTF-8 编码方式 UTF-8
非对称密钥SHA256-RSA 签名方式 MD5或HMAC-SHA256

👉 对比之后,发现V3的规则比较适合后端开发人员查看,相对来说比较简洁。

网络异常,图片无法展示
|

有一个需要特别注意的点就是,参数需要加 \n, 参数需要加 \n, 参数需要加 \n 重要的事情说三遍

总结一下

微信支付功能不难,但是旧版本的文档对于开发人员来说不是特别友好(可能对于我来说是不太友好的)。

注意一下

在请求微信支付时,所有的参数均需要后端返回,返回参数需要和生成签名的参数一致,包括随机字符和时间戳。

相关文章
|
5月前
|
小程序 PHP
微信公众号开发(一)打通服务器与微信之间的通信
说来惭愧PHP做了这么久,好像就没有从头开发过一个微信公众号,这次刚好有机会从头接入开发一个完整的公众号,也不能说完整,但是这些微信的接口我基本上都试一试~看看大概是什么情况。 首先:打通服务器与微信之间的通信。
64 0
|
9天前
|
小程序 Java API
微信小程序和springboot实现微信支付
微信小程序和springboot实现微信支付
20 0
|
9天前
|
小程序 API
微信小程序-微信支付
微信小程序-微信支付
11 0
|
9天前
|
JSON Java API
微信支付JSAPI3微信支付开发API V3
微信支付JSAPI3微信支付开发API V3
29 0
|
9天前
|
前端开发 开发者
【微信公众号对接】有关签名一直报错,提示invalid signature问题(我的签名和使用微信开发者工具验证返回的签名的是一致的)但还是报错!!!
【微信公众号对接】有关签名一直报错,提示invalid signature问题(我的签名和使用微信开发者工具验证返回的签名的是一致的)但还是报错!!!
55 0
|
9天前
|
小程序 前端开发 API
微信小程序中微信支付流程
微信小程序中微信支付流程
44 0
|
5月前
|
XML 移动开发 小程序
微信公众号开发(七)微信h5跳转小程序及小游戏示例
最近公司做活动,需要从h5页面跳转至微信小游戏。 当时接到这个需求的时候,就在想,这玩意能相互跳转么? 后来百度了一下,还真行。
124 1
|
5月前
|
小程序 PHP
微信公众号开发(六)微信支付(发红包、企业支付到零钱)需要证书请求示例
这里最主要的就是curlpost请求的时候需要带上证书。否则请求会失败。
75 0
|
5月前
|
JSON 小程序 数据库
微信公众号开发(二)微信公众号的access_token
微信对用户使用开放了很多的功能,如:自定义菜单接口、客服接口、获取用户信息接口、用户分组接口、群发接口,但是为了保证用户访问这些功能相对安全,每次访问都需要带上一个秘钥去验证身份。那么这个秘钥就是access_token。
76 0
|
7月前
|
小程序 前端开发 安全
从零玩转系列之微信支付实战Uni-App微信授权登录和装修下单页面和搭建下单接口以及发起下单请求1
从零玩转系列之微信支付实战Uni-App微信授权登录和装修下单页面和搭建下单接口以及发起下单请求
66 0
从零玩转系列之微信支付实战Uni-App微信授权登录和装修下单页面和搭建下单接口以及发起下单请求1

热门文章

最新文章