前端微信支付流程

1. 微信支付前提

1. 需要绑定微信商户平台（微信商户平台是微信支付相关的商户功能集合，包括参数配置、支付数据查询与统计、在线退款、代金券或立减优惠运营等功能）

微信商户平台是由微信支付提供的一款商户管理平台，为商家提供在线支付、退款、结算、数据分析等一系列服务。商家可以通过微信商户平台快速地接入微信支付，并管理自己的交易数据和账户信息。

微信商户平台的主要功能包括：

商户入驻：商家可以在微信商户平台上进行商户入驻，完成身份验证、信息录入、签约等一系列操作，即可快速接入微信支付。

交易管理：商家可以在微信商户平台上查看自己的交易记录，包括订单号、交易金额、交易状态等信息，并对订单进行管理，如退款、撤销等操作。

账户管理：商家可以在微信商户平台上管理自己的账户信息，包括账户余额、结算记录、手续费等信息。

数据统计：微信商户平台提供数据统计功能，商家可以查看自己的交易数据、收入、退款率等信息，以便做出更好的经营决策。

通过微信商户平台，商家可以更加便捷地接入微信支付，管理自己的账户信息和交易数据，提高运营效率和营销效果。

1. 只有认证的公众号才有支付权限
   【微信支付官方文档】

2. 需要在商户后台开通支付

   

3. 商户和微信公众号关联
    

   

   

4. 设置ip白名单

   

   2. 支付场景

3. 名词解释

1、
微信公众平台
微信公众平台是微信公众账号申请入口和管理后台。商户可以在公众平台提交基本资料、业务资料、财务资料申请开通微信支付功能。

平台入口：http://mp.weixin.qq.com。

2、
微信开放平台

微信开放平台是商户APP接入微信支付开放接口的申请入口，通过此平台可申请微信APP支付。

平台入口：http://open.weixin.qq.com。

3、
微信商户平台

微信商户平台是微信支付相关的商户功能集合，包括参数配置、支付数据查询与统计、在线退款、代金券或立减优惠运营等功能。

平台入口：http://pay.weixin.qq.com。

4、
微信企业号

微信企业号是企业号的申请入口和管理后台，商户可以在企业号提交基本资料、业务资料、财务资料申请开通微信支付功能。

企业号入口：http://qy.weixin.qq.com。

5、
微信支付系统

微信支付系统是指完成微信支付流程中涉及的API接口、后台业务处理系统、账务系统、回调通知等系统的总称。

6、
商户收银系统

商户收银系统即商户的POS收银系统，是录入商品信息、生成订单、客户支付、打印小票等功能的系统。接入微信支付功能主要涉及到POS软件系统的开发和测试，所以在下文中提到的商户收银系统特指POS收银软件系统。

7、
商户后台系统

商户后台系统是商户后台处理业务系统的总称，例如：商户网站、收银系统、进销存系统、发货系统、客服系统等。

8、
扫码设备

一种输入设备，主要用于商户系统快速读取媒介上的图形编码信息。按读取码的类型不同，可分为条码扫码设备和二维码扫码设备。按读取物理原理可分为红外扫码设备、激光扫码设备。

9、
商户证书

商户证书是微信提供的二进制文件，商户系统发起与微信支付后台服务器通信请求的时候，作为微信支付后台识别商户真实身份的凭据。

10、
签名

商户后台和微信支付后台根据相同的密钥和算法生成一个结果，用于校验双方身份合法性。签名的算法由微信支付制定并公开，常用的签名方式有：MD5、SHA1、SHA256、HMAC等。

11、
JSAPI网页支付

JSAPI网页支付即前文说的公众号支付，可在微信公众号、朋友圈、聊天会话中点击页面链接，或者用微信“扫一扫”扫描页面地址二维码在微信中打开商户HTML5页面，在页面内下单完成支付。

12、
Native原生支付

Native原生支付即前文说的扫码支付，商户根据微信支付协议格式生成的二维码，用户通过微信“扫一扫”扫描二维码后即进入付款确认界面，输入密码即完成支付。

13、
支付密码

支付密码是用户开通微信支付时单独设置的密码，用于确认支付完成交易授权。该密码与微信登录密码不同。

14、
Openid

用户在公众号内的身份标识，不同公众号拥有不同的openid。商户后台系统通过登录授权、支付通知、查询订单等API可获取到用户的openid。主要用途是判断同一个用户，对用户发送客服消息、模版消息等。企业号用户需要使用企业号userid转openid接口将企业成员的userid转换成openid。

4. jsAPI支付

【jsapi支付文档地址】

4.1 支付前的准备条件

4.1.1 一、设置支付目录

支付授权目录说明：

1、商户最后请求拉起微信支付收银台的页面地址我们称之为“支付目录”，例如：https://www.weixin.com/pay.php。

2、商户实际的支付目录必须和在微信支付商户平台设置的一致，否则会报错“当前页面的URL未注册：”

支付授权目录设置说明：

登录微信支付商户平台（pay.weixin.qq.com）–>产品中心–>开发配置，设置后一般5分钟内生效。

支付授权目录校验规则说明：

1、如果支付授权目录设置为顶级域名（例如：微信，是一个生活方式 ），那么只校验顶级域名，不校验后缀；

2、如果支付授权目录设置为多级目录，就会进行全匹配，例如设置支付授权目录为https://www.weixin.com/abc/123/，则实际请求页面目录不能为https://www.weixin.com/abc/，也不能为https://www.weixin.com/abc/123/pay/，必须为https://www.weixin.com/abc/123/

支付目录配置

图7.7 微信JSAPI支付-支付目录配置

4.2.2 二、设置授权域名

开发JSAPI支付时，在统一下单接口中要求必传用户openid，而获取openid则需要您在公众平台设置获取openid的域名，只有被设置过的域名才是一个有效的获取openid的域名，否则将获取失败。具体界面如图7.8所示：

5. 支付实现

5.1 微信支付步骤

5.2 微信支付时序图

5.3 支付逻辑

首先，用户需要在开发者的系统中下单，完成下单行为后向开发者的服务器发送请求，这个请求能够携带商品信息等数据，在服务器接收到请求时，需要向微信服务器发送请求，以完成一个预支付的行为，在发送请求前需要按照微信服务器的规则生成一些必要的参数，微信服务器在接收到请求时，会对签名进行验证，随后会返回一个支付url,开发者服务器需要将链接处理成为二维码供用户扫码支付之后，用户在扫码后微信服务器会验证连接真实性及有效性，在完成支付行为后，微信服务器会以一种异步的形式，向开发者服务器发送请
求，以通知开发者服务器支付状态，方便开发者执行后续操作。

5.4 微信支付实现

获取openid 获取加密信息 完成支付操作

5.4.1 相关接口

jsapi支付api

• 请求路径：/wx/pay/paySign
• 请求方式：get

获取openId的api

通过该接口获取用户唯一标识

• 请求路径：/wx/user/getOpenId
• 请求方式：get

h5页面支付
发起支付

• 请求路径：/wx/pay/wap2
• 请求方式：get
• 请求参数：无

5.4.2 代码实现

<template>
  <div>
    <button @click="payNow">支付0.01元{{ openid }}</button>
  </div>
</template>
 
<script>
// appid  开发者的appid
var appid = "wx7640ff0e16925d0d",
  appsecret = "cfb13164490e0b50f7c787e343929d95",
  // redirect_uri 重定向地址  引导用户打开授权页之后 重定的地址 就是你当前的页面地址
  redirect_uri = "http://bufantec.natapp1.cc/jspay",
  // scope  网页授权的两种类型 snsapi_base snsapi_userinfo
  scope = "snsapi_userinfo";
 
import axios from "axios";
export default {
  data() {
    return {
        openid:""
    };
  },
  computed: {},
  created() {
 
    var code = this.$route.query.code;
 
    if (code) {
      // 03  获取用户信息 注意  获取用户信息之前应提前在服务端保存好appid及appsecret
      axios
        .get("http://bufantec.com/wx/user/getUserInfo", {
          params: {
            appid: appid,
            code: code,
          },
        })
        .then((res) => {
          console.log(res);
          this.openid = res.data.data.openid
            sessionStorage.setItem("wx-openid",res.data.data.openid)
        });
      return;
    }
 
    // 01 引导用户进行授权   引导之后 将会在地址栏返回code 可以通过this.$route.query.code 获取
    window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=${scope}&state=STATE#wechat_redirect`;
  },
  destroyed () {
      sessionStorage.clear();
      localStorage.clear()
  },
  mounted() {},
  methods: {
    payNow() {
        axios.get("http://bufantec.com/wx/pay/paySign",{
            params:{
                openId:sessionStorage.getItem("wx-openid")
            }
        })
        .then(res =>{
            var result = JSON.parse(res.data.data)
            console.log(JSON.parse(res.data.data));
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', result,
                function(res){
                if(res.err_msg == "get_brand_wcpay_request:ok" ){
                // 使用以上方式判断前端返回,微信团队郑重提示：
                        //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                } 
            }); 
        })
    },
  },
};
</script>