江苏省网站建设,网址域名注册,2023年防疫新政策,微信注册网站目录
支付页面
接口
后端实现
前端实现
支付页面
步骤一#xff1a;创建 flow3.vue组件 步骤二#xff1a;引入第三方资源#xff08;js、css#xff09;
script
import TopNav from ../components/TopNav
import Footer from …目录
支付页面
接口
后端实现
前端实现
支付页面
步骤一创建 flow3.vue组件 步骤二引入第三方资源js、css
script
import TopNav from ../components/TopNav
import Footer from ../components/Footerexport default {head: {title: 首页,link: [{rel:stylesheet,href: /style/success.css},],script: []},components: {TopNav,Footer,},
}
/script
接口
POST http://localhost:10010/order-service/pay
{sn : 1255513323915579400
} 后端实现
步骤一编写 PayRequest用于封装数据 package com.czxy.changgou4.vo;import lombok.Data;/*** author 桐叔* email liangtongitcast.cn*/
Data
public class PayRequest {private Long sn;
}步骤二检查order服务yml文件中是否有微信配置 sc:pay:appID: wx8397f8696b538317mchID: 1473426802key: T6m9iK73b0kn9g5v426MKfHQH7X8rKwbhttpConnectTimeoutMs: 5000httpReadTimeoutMs: 10000步骤三编写PayProperties用于加载微信配置 package com.czxy.changgou4.config;import com.github.wxpay.sdk.WXPayConfig;
import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;import java.io.InputStream;/*** author 桐叔* email liangtongitcast.cn*/
Data
ConfigurationProperties(prefix sc.pay)
public class PayProperties implements WXPayConfig {private String appID; // 公众账号IDprivate String mchID; // 商户号private String key; // 生成签名的密钥private int httpConnectTimeoutMs; // 连接超时时间private int httpReadTimeoutMs; // 读取超时时间Overridepublic InputStream getCertStream() {//加载证书需要通过账号中心生成return null;}}
步骤四编写PayState自定义支付状态 package com.czxy.changgou4.utils;import lombok.Getter;/*** 自定义支付状态微信支持多种状态此处统一四种* SUCCESS—支付成功、NOTPAY—未支付、CLOSED—已关闭、PAYERROR--支付失败* author 桐叔* email liangtongitcast.cn*/
Getter
public enum PayState {NOT_PAY(0,未支付),SUCCESS(1,支付成功),CLOSED(2,已关闭),PAY_ERROR(3,支付失败);PayState(int code,String desc) {this.code code;this.desc desc;}private int code; //自定义编码private String desc; //描述信息
}
步骤五编写PayHelper用于微信操作的工具类
package com.czxy.changgou4.utils;import com.czxy.changgou4.config.PayProperties;
import com.github.wxpay.sdk.WXPay;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.boot.context.properties.EnableConfigurationProperties;
import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;import java.util.HashMap;
import java.util.Map;/*** author 桐叔* email liangtongitcast.cn*/
Component
EnableConfigurationProperties(PayProperties.class)
public class PayHelper {private WXPay wxPay;Beanpublic WXPay wxPay(PayProperties payProperties){if(wxPay null){wxPay new WXPay(payProperties);}return wxPay;}private static final Logger logger LoggerFactory.getLogger(PayHelper.class);public PayHelper() {}public PayHelper(PayProperties payProperties) {wxPay new WXPay(payProperties);}public String createPayUrl(Long sn) {String key pay.url. sn;try {MapString, String data new HashMap();// 商品描述data.put(body, 商城测试);// 订单号data.put(out_trade_no, sn.toString());//货币data.put(fee_type, CNY);//金额单位是分data.put(total_fee, 1);//调用微信支付的终端IP商城的IPdata.put(spbill_create_ip, 127.0.0.1);//回调地址data.put(notify_url, http://test.jingxi.com/wxpay/notify);// 交易类型为扫码支付data.put(trade_type, NATIVE);//商品id,使用假数据data.put(product_id, 1234567);MapString, String result this.wxPay.unifiedOrder(data);if (SUCCESS.equals(result.get(return_code))) {if(SUCCESS.equals(result.get(result_code))){String url result.get(code_url);return url;} else {logger.error(创建预交易订单失败错误信息{}, result.get(err_code_des));return null;}} else {logger.error(创建预交易订单失败错误信息{}, result.get(return_msg));return null;}} catch (Exception e) {logger.error(创建预交易订单异常, e);return null;}}/*** 查询订单状态* 交易状态参考(trade_state)SUCCESS—支付成功REFUND—转入退款NOTPAY—未支付CLOSED—已关闭REVOKED—已撤销付款码支付USERPAYING--用户支付中付款码支付PAYERROR--支付失败(其他原因如银行返回失败)* param sn* return*/public PayState queryOrder(Long sn) {MapString, String data new HashMap();// 订单号data.put(out_trade_no, sn.toString());try {MapString, String result this.wxPay.orderQuery(data);if(SUCCESS.equals(result.get(return_code))){if(SUCCESS.equals(result.get(result_code))) {String tradeState result.get(trade_state);if (SUCCESS.equals(tradeState)) {return PayState.SUCCESS;}if (NOTPAY.equals(tradeState)) {return PayState.NOT_PAY;}if (CLOSED.equals(tradeState)) {return PayState.CLOSED;}}}return PayState.PAY_ERROR;} catch (Exception e) {logger.error(查询订单状态异常, e);return PayState.PAY_ERROR;}}
}步骤五编写PayService调用工具类用于生成支付接口 package com.czxy.changgou4.service;import com.czxy.changgou4.vo.PayRequest;/*** author 桐叔* email liangtongitcast.cn*/
public interface PayService {public String pay(PayRequest payRequest);
}
package com.czxy.changgou4.service.impl;import com.czxy.changgou4.service.PayService;
import com.czxy.changgou4.utils.PayHelper;
import com.czxy.changgou4.vo.PayRequest;
import org.springframework.stereotype.Service;import javax.annotation.Resource;/*** author 桐叔* email liangtongitcast.cn*/
Service
public class PayServiceImpl implements PayService {Resourceprivate PayHelper payHelper;Overridepublic String pay(PayRequest payRequest) {//根据sn查询订单//获得微信支付路径String payUrl payHelper.createPayUrl(payRequest.getSn());//返回支付路径return payUrl;}
}
步骤六编写PayController根据sn生产微信支付路径 package com.czxy.changgou4.controller;import com.czxy.changgou4.service.PayService;
import com.czxy.changgou4.vo.BaseResult;
import com.czxy.changgou4.vo.PayRequest;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import javax.annotation.Resource;/*** author 桐叔* email liangtongitcast.cn*/
RestController
RequestMapping(/pay)
public class PayController {Resourceprivate PayService payService;PostMappingpublic BaseResult pay(RequestBody PayRequest payRequest){//获得支付路径String payUrl payService.pay(payRequest);//返回return BaseResult.ok(二维码生产成功).append(wxurl,payUrl);}}
前端实现 步骤一修改apiclient.js文件生成位置支付路径 pay : ( params ) {return axios.post(/order-service/pay ,params )}步骤二拷贝qrcode.min.js 用于生成二维码 步骤三导入qrcode.min.js script: [{ type: text/javascript, src: /js/qrcode.min.js }]
步骤四页面加载成功把微信支付路径生产二维码 data() {return {sn: this.$route.query.sn,}},async mounted() {let {data} await this.$request.pay({sn:this.sn})new QRCode( document.getElementById(qrcode) , data.other.wxurl )},步骤五确定二维码生成的位置 pdiv idqrcode stylewidth:256px;margin: 0 auto;/div
/p
步骤六优化添加样式
style#qrcode img {background-color: #fff;padding: 6px;}
/style
