【微信支付】微信JSAPI支付流程

日期：2022-08-08 栏目：程序人生浏览：次

官方文档

JS-SDK说明文档

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1

JSAPI支付文档

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1

准备工作公众号配置

绑定域名（可在该域名下调用微信开放的JS接口，这里配置前端域名）先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

填写接口配置信息（用于配合微信服务器认证）

开发-基本配置，配置URL，Token和生成EncodingAESKey，配置完了这时候点击提交是不行的，需要后端写好接口与配合微信认证,如下代码。

@ApiOperation("微信认证地址")
@GetMapping("/baseCallback")
public String baseCallback(String signature,String timestamp,String nonce,String echostr) throws Exception {
return echostr;
}

配置ip白名单

获取普通accessToken时，请登录“微信公众平台-开发-基本配置”提前将服务器IP地址添加到IP白名单中，否则将无法调用成功

商户平台配置

设置支付目录（配置了才能拉起微信收银台,配置前端域名，否则会报当前页面的Url未注册的错误）

登录微信支付商户平台（pay.weixin.qq.com）-->产品中心-->开发配置，设置后一般5分钟内生效。支付授权目录校验说明如下：

1、如果支付授权目录设置为顶级域名（例如：https://www.weixin.com/ ），那么只校验顶级域名，不校验后缀；

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/

流程步骤 JSSDK使用步骤

这个文档主要看 1概述和14微信支付，如下图；

【微信支付】微信JSAPI支付流程

主要步骤

前端获取注入参数

前端支付前请求后台获取上图步骤三所需参数，并注入成功，前端最好配置全局，因为业务可能会扩展，其他接口会需要，如分享接口

前端获取唤起微信收银台所需参数

注入成功后->前端点击微信支付->后端向微信下单->下单成功后得到prepay_id->返回所需参数给前端->唤起收银台

后端代码实现引入依赖   
   <dependency>
    <groupId>com.github.wxpay</groupId>
    <artifactId>wxpay-sdk</artifactId>
    <version>0.0.3</version>
   </dependency>
配置参数

application.yml

# 微信相关配置
wx:
  #商户 ID（微信支付平台-账户中心-个人信息）
  MCH_ID:
  # APP_ID(微信开放平台或公众号查找)
  H_APP_ID:
  # 秘钥(微信开放平台或公众号查找)
  H_APP_SECRET:
  # 消息加解密所用到的解密串（微信公众号-基本配置查找）
  H_ENCODINGAESKEY:
  # token（微信公众号-基本配置查找）
  H_TOKEN:
  # 支付秘钥KEY（微信支付平台-账户中心-api安全-api秘钥）
  H_KEY:
  # 支付商户证书所载目录（微信支付平台-账户中心-api安全-API证书）
  H_CERT_PATH:
  #支付成功回调地址
  WX_CALLBACK_URL:

YmlParament

@Component
@Data
public class YmlParament {
/*微信相关字段*/
@Value("${wx.H_APP_ID}")
private String h_app_id;
@Value("${wx.H_APP_SECRET}")
private String h_app_secret;
@Value("${wx.H_ENCODINGAESKEY}")
private String h_encodingaeskey;
@Value("${wx.H_TOKEN}")
private String h_token;
@Value("${wx.MCH_ID}")
private String mch_id;
@Value("${wx.H_KEY}")
private String h_key;
@Value("${wx.H_CERT_PATH}")
private String h_cert_path;
@Value("${wx.WX_CALLBACK_URL}")
private String wx_callback_url;

获取前端config接口配置参数（查看jssdk文档附录1）

转载注明出处：https://www.heiqu.com/zgwgyy.html

【微信支付】微信JSAPI支付流程

相关推荐