微信支付demo

微信支付接入网址:https://pay.weixin.qq.com/index.php/core/home/login?return_url=%2F

微信公众号网址:https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN&token=

随机密码生成:https://suijimimashengcheng.bmcx.com/

获取密钥—>生成证书

项目实现:

1.依赖注入:

<!--        Swagger-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.7.0</version>
        </dependency>
<!--        Swagger ui-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>2.7.0</version>
        </dependency>

2.swagger配置:

@Configuration
@EnableSwagger2
public class Swagger2Config {

  @Bean
  public Docket docket(){

    return new Docket(DocumentationType.SWAGGER_2)
            .apiInfo(new ApiInfoBuilder().title("微信支付开发文档").build());
  }
}


// 之后访问 http://localhost:8090/swagger-ui.html#/

3.sql语句:

create database payment_demo;
USE `payment_demo`;
/*Table structure for table `t_order_info` */
 
DROP TABLE IF EXISTS `t_order_info`;
CREATE TABLE `t_order_info` (
    `id` BIGINT(11) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT '订单id',
    `title` VARCHAR(256) DEFAULT NULL COMMENT '订单标题',
    `order_no` VARCHAR(50) DEFAULT NULL COMMENT '商户订单编号',
    `user_id` BIGINT(20) DEFAULT NULL COMMENT '用户id',
    `product_id` BIGINT(20) DEFAULT NULL COMMENT '支付产品id',
    `total_fee` INT(11) DEFAULT NULL COMMENT '订单金额(分)',
    `code_url` VARCHAR(50) DEFAULT NULL COMMENT '订单二维码连接',
    `order_status` VARCHAR(10) DEFAULT NULL COMMENT '订单状态',
    `create_time` DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
    `update_time` DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间' ,
     PRIMARY KEY (`id`)
) ENGINE=INNODB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4;
 
 
DROP TABLE IF EXISTS `t_payment_info`;
CREATE TABLE `t_payment_info`(
    `id` BIGINT(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT '支付记录id',
    `order_no` VARCHAR (50) DEFAULT NULL COMMENT '商户订单编号',
    `transaction_id` VARCHAR(50) DEFAULT NULL COMMENT '支付系统交易编号',
    `payment_type` VARCHAR(20) DEFAULT NULL COMMENT '支付类型',
    `trade_type` VARCHAR (20) DEFAULT NULL COMMENT '交易类型',
    `trade_state` VARCHAR(50) DEFAULT NULL COMMENT '交易状态',
    `payer_total` INT(11) DEFAULT NULL COMMENT '支付金额(分)',
    `content` TEXT COMMENT '通知参数',
    `create_time` DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间' ,
    `update_time` DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
    PRIMARY KEY (`id`)
) ENGINE=INNODB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4;
 
 
DROP TABLE IF EXISTS `t_product`;
CREATE TABLE `t_product` (
    `id` BIGINT(20) NOT NULL AUTO_INCREMENT COMMENT '商Bid',
    `title` VARCHAR(20) DEFAULT NULL COMMENT '商品名称',
    `price` INT(11) DEFAULT NULL COMMENT '价格(分)',
    `create_time` DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
    `update_time` DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
    PRIMARY KEY (`id`)
) ENGINE=INNODB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4;
 
/*Data for the table 't_product' */
INSERT INTO `t_product` (`title`, `price`) VALUES ('Java程',1);
INSERT INTO `t_product` (`title`, `price`) VALUES ('大数据课程', 1);
INSERT INTO `t_product` (`title`,`price`) VALUES ('前端端程', 1);
INSERT INTO `t_product` (`title`, `price`) VALUES ('UI程' ,1);
 
/*Table structure for table it_refund_info' */
DROP TABLE IF EXISTS `t_refund_info`;
CREATE TABLE `t_refund_info`(
    `id` BIGINT(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT '款单id',
    `order_no` VARCHAR (50) DEFAULT NULL COMMENT '商户订单编号',
    `refund_no` VARCHAR(50) DEFAULT NULL COMMENT '商户退款单编号',
    `refund_id` VARCHAR(50) DEFAULT NULL COMMENT '支付系统退款单号',
    `total_fee` INT(11) DEFAULT NULL COMMENT '原订单金额(分)',
    `refund` INT(11) DEFAULT NULL COMMENT '退款金额(分)',
    `reason` VARCHAR(50) DEFAULT NULL COMMENT '退款原因',
    `refund_status` VARCHAR(10) DEFAULT NULL COMMENT '退款状态',
    `content_return` TEXT COMMENT '申请退款返回参数',
    `content_notify` TEXT COMMENT '退款结果通知参数',
    `create_time` DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
    `update_time` DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
    PRIMARY KEY (`id`)
) ENGINE=INNODB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

4.yml配置:

server:
  port: 8090

spring:
  application:
    name: payment-demo

  mvc:
    pathmatch:
      matching-strategy: ANT_PATH_MATCHER

  jackson:
    date-format: yyyy-MM-dd HH:mm:ss

  datasource:
    url: jdbc:mysql://localhost:3306/payment_demo?serverTimezone=UTC&useUnicode=true&characterEncoding=utf8
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: chen123456

mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  mapper-locations: classpath:mapper/*.xml

5.微信支付配置:

# 微信支付相关参数
# 商户号
wxpay.mch-id=1558950191
# 商户API证书序列号
wxpay.mch-serial-no=34345964330B66427E0D3D28826C4993C77E631F
#商户私钥文件
wxpay.private-key-path=apiclient_key.pem
#APIv3密钥
wxpay.api-v3-key=UDuLFDcmy5Eb6o0nTNZdu6ek4DDh4K8B
#APPID
wxpay.appid=wx74862e0dfcf69954
#微信服务器地址
wxpay.domain=https://api.mch.weixin.qq.com
#接收结果通知地址
wxpay.notify-domain=https://7d92-115-171-63-135.ngrok.io

6.生成自定义的元素数据配置信息

<!--       生成自定义配置的元素数据信息 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
        </dependency>

7.SDK配置:

访问地址:

https://github.com/wechatpay-apiv3/wechatpay-apache-httpclient

引入依赖
<!--        微信支付SDK-->
        <dependency>
            <groupId>com.github.wechatpay-apiv3</groupId>
            <artifactId>wechatpay-apache-httpclient</artifactId>
            <version>0.4.5</version>
        </dependency>

8.定时更新平台证书功能配置

 /**
   * 获取签名验证其器
   * @return
   */
  @Bean
  public Verifier getVerifiers(){
    //获取商户私钥
    PrivateKey privateKey = getPrivateKey(privateKeyPath);
    // 私钥签名对象
    PrivateKeySigner keySigner = new PrivateKeySigner(mchSerialNo, privateKey);
    // 身份认证对象
    WechatPay2Credentials wechatPay2Credentials = new WechatPay2Credentials(mchId, keySigner);

    // 获取证书管理器实例
    CertificatesManager certificatesManager = CertificatesManager.getInstance();
    // 向证书管理器增加需要自动更新平台证书的商户信息
    try {
      certificatesManager.putMerchant(mchId, wechatPay2Credentials,
              apiV3Key.getBytes(StandardCharsets.UTF_8));
    } catch (IOException | GeneralSecurityException | HttpCodeException e) {
      e.printStackTrace();
    }
    // ... 若有多个商户号,可继续调用putMerchant添加商户信息
    Verifier verifier = null;
    try {
      verifier = certificatesManager.getVerifier(mchId);
    } catch (NotFoundException e) {
      e.printStackTrace();
    }
    return verifier;
  }

  /**
   * 获取http请求对象
   * @return
   */
  @Bean
  public CloseableHttpClient getWxPayClient(Verifier verifier){
    //获取商户私钥
    PrivateKey privateKey = getPrivateKey(privateKeyPath);
    // 从证书管理器中获取verifier
    WechatPayHttpClientBuilder builder = WechatPayHttpClientBuilder.create()
            .withMerchant(mchId, mchSerialNo, privateKey)
            .withValidator(new WechatPay2Validator(verifier));
    // ... 接下来,你仍然可以通过builder设置各种参数,来配置你的HttpClient

    // 通过WechatPayHttpClientBuilder构造的HttpClient,会自动的处理签名和验签,并进行证书自动更新
    CloseableHttpClient httpClient = builder.build();

    return httpClient;
  }

9.二维码弹窗的实现:

<!--package.json中配置依赖 -->
"dependencies": {
    "vue-qriously": "^1.1.1",
}
// 在main.js中进行引入
// 二维码生成器
import VueQriously from 'vue-qriously'
Vue.use(VueQriously)

可以使用标签: 引入二维码

<!-- 在div标签中的实现 -->

<!-- 微信支付二维码 -->
    <el-dialog
      :visible.sync="codeDialogVisible"
      :show-close="false"
      @close="closeDialog"
      width="350px"
      center>
     <qriously :value="codeUrl" :size="300"/>
        <!-- <img src="../assets/img/code.png" alt="" style="width:100%"><br> -->
        使用微信扫码支付
    </el-dialog>

<script>

    export default{
       data () {
          return {
            codeDialogVisible: false, //微信支付二维码弹窗
    }
  },

</script>

  <!-- 在微信支付时打开弹窗-->
//打开二维码弹窗
 this.codeDialogVisible = true

10.签名认证过程:

Authorization: 认证类型,签名信息

签名信息:

  • 发起请求的商户(包括直连商户,服务商户)
  • 商户API证书序列号serial_no
  • 请求随机串nonce_str
  • 时间戳timestamp
  • 签名值signature

11.内网穿透

内网穿透,也即 NAT 穿透,进行 NAT 穿透是为了使具有某一个特定源 IP 地址和源端口号的数据包不被 NAT 设备屏蔽而正确路由到内网主机。

内网穿透工具:ngrok.com 访问注册

下载windows版解压:
// 配置访问令牌
ngrok config add-authtoken 29EYy38ronN63XiZnlu146Ksmze_5nYH1g8kKJuq8gvJEJbtd

// 默认的下载地址
C:\Users\86183\AppData\Local/ngrok/ngrok.yml

// 帮助文档
ngrok help

// 创建映射地址
ngrok http 8090

演示结果:
首页
在这里插入图片描述
支付页:
在这里插入图片描述
具体的代码讲解到这里找环环老师:
https://www.bilibili.com/video/BV1US4y1D77m?spm_id_from=333.1007.top_right_bar_window_default_collection.content.click

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: H5微信支付是指在移动端网页上集成微信支付功能,使用户可以直接在手机浏览器中完成支付操作。下面是一个H5微信支付的简单示例: 首先,我们需要在页面中引入微信支付的相关JavaScript文件和CSS样式,以便使用微信支付的功能和界面。 然后,用户在填写订单信息后,点击支付按钮触发支付事件。在支付事件中,我们需要通过调用微信支付的API来获取预支付交易会话标识。 接着,我们将获取到的预支付交易会话标识发送给服务器进行签名,以确保支付请求的安全性。服务器返回签名后的数据给前端。 最后,前端使用微信支付SDK中的接口,调起微信支付界面。用户在微信支付界面中完成支付操作后,支付结果会通过回调函数返回到前端,我们可以根据支付结果进行相应的处理,如展示支付成功或失败的页面。 需要注意的是,H5微信支付接口的使用需要满足一定的条件,如商户需要先进行微信支付的相关注册及配置,获取到相应的商户号、密钥等信息。 以上就是H5微信支付的简单 demo。通过集成H5微信支付功能,我们可以在移动端网页上方便地实现微信支付,为用户提供更加便捷的支付方式。 ### 回答2: H5 微信支付 Demo 是一个可以在移动端网页上使用微信支付功能的示例项目。通过该示例项目,开发者可以学习和了解如何在自己的移动网页中集成微信支付功能,并快速上线自己的移动网页应用。 在 H5 微信支付 Demo 中,主要包含以下几个步骤: 1. 创建订单:用户在移动网页上选择商品并确认购买后,网页应用将生成一个唯一的订单号,并将相关订单信息发送给服务端。 2. 统一下单:服务端通过调用微信支付接口,将上一步生成的订单信息传递给微信支付平台。平台根据接收到的信息,生成一个预支付会话标识(prepay_id)并返回给服务端。 3. 调起支付:服务端将预支付会话标识返回给移动网页,网页通过 JavaScript API 调用微信支付 SDK,发起支付请求。移动网页上将出现微信支付的界面,用户可以使用微信钱包完成支付。 4. 支付结果查询:支付完成后,微信支付平台会将支付结果通知给服务端。服务端通过查询支付结果接口,获取支付结果并返回给移动网页。移动网页根据支付结果显示支付成功或失败的页面。 在 H5 微信支付 Demo 中,开发者需要了解的主要是如何生成订单、调用微信支付接口以及处理支付结果的逻辑。通过参考该示例项目,开发者可以快速集成微信支付功能,提升移动网页应用的付款体验,以及更好地满足用户需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值