微信支付 全套流程看完就会 pc扫码支付

一:前期微信支付扫盲知识

前提条件是已经有申请了微信支付功能的公众号,然后我们需要得到公众号APPID和微信商户号,这个分别在微信公众号和微信支付商家平台上面可以发现。其实在你申请成功支付功能之后,微信会通过邮件把Mail转给你的,有了这些信息之后,我们就可以去微信支付服务支持页面:https://pay.weixin.qq.com/service_provider/index.shtml

打开这个页面,点击右上方的链接【开发文档】会进入到API文档说明页面,看起来如下

选择红色圆圈的扫码支付就是我们要做接入方式,鼠标移动到上面会提示你去查看开发文档,如果这个都不知道怎么查看,可以洗洗睡了,你真的不合适做程序员,地址如下:

https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=6_1在浏览器中打开之后会看到

一:前期微信支付扫盲知识

前提条件是已经有申请了微信支付功能的公众号,然后我们需要得到公众号APPID和微信商户号,这个分别在微信公众号和微信支付商家平台上面可以发现。其实在你申请成功支付功能之后,微信会通过邮件把Mail转给你的,有了这些信息之后,我们就可以去微信支付服务支持页面:https://pay.weixin.qq.com/service_provider/index.shtml

打开这个页面,点击右上方的链接【开发文档】会进入到API文档说明页面,看起来如下

选择红色圆圈的扫码支付就是我们要做接入方式,鼠标移动到上面会提示你去查看开发文档,如果这个都不知道怎么查看,可以洗洗睡了,你真的不合适做程序员,地址如下:

https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=6_1在浏览器中打开之后会看到

我们重点要关注和阅读的内容我已经用红色椭圆标注好了,首先阅读【接口规则】里面的协议规范,开玩笑这个都不读你就想做微信支付,这个就好比你要去泡妞,得先收集点基本背景信息,了解对方特点,不然下面还怎么沟通。事实证明只有会泡妞得程序员才是好销售。跑题了我们接下来要看一下【场景介绍】中的案例与规范,只看一下记得一定要微信支付的LOGO下载下来,是为了最后放到我们自己的扫码支付网页上,这样看上去比较专业一点。之后重点关注【模式二】

我们这里就是要采用模式二的方式实现PC端页面扫码支付功能。

微信官方对模式二的解释是这样的“商户后台系统先调用微信支付的统一下单接口,微信后台系统返回链接参数code_url,商户后台系统将code_url值生成二维码图片,用户使用微信客户端扫码后发起支付。注意:code_url有效期为2小时,过期后扫码不能再发起支付”。看明白了吧就是我们首先要调用微信提供统一下单接口,得到一个关键信息code_url(至于这个code_url是什么鬼,我也不知道),然后我们通过自己的程序把这个URL生成一个二维码,生成二维码我这里用了Google的zxing库。然后把这个二维码显示在你的PC端网页上就行啦。这样终端用户一扫码就支付啦,支付就完成啦,看到这里你肯定很激动,发现微信支付如此简单,等等还有个事情我们还不知道,客户知道付钱了,我们服务器端还不知道呢,以微信开发人员的智商他们早就想到这个问题了,所以让你在调用统一下单接口的时候其中有个必填的参数就是回调URL,就是如果客户端付款成功之后微信会通过这个URL向我们自己的服务器提交一些数据,然后我们后台解析这些数据,完成我们自己操作。这样我们才知道客户是否真的已经通过微信付款了。这样整个流程才结束,这个就是模式二。微信用一个时序图示这样表示这个过程的。

表达起来比较复杂,看上去比较吃力,总结一下其实我们服务器该做的事情就如下件:

1. 通过统一下单接口传入正确的参数(当然要包括我们的回调URL)与签名验证,从返回数据中得到code_url的对应数据

2. 根据code_url的数据我们自己生成一个二维码图片,显示在浏览器网页上

3. 在回调的URL中添加我们自己业务逻辑处理。

至此扫盲结束了,你终于知道扫码支付什么个什么样的流程了,下面我们就一起来扒扒它的相关API使用,做好每步处理。

二:开发过程

在开发代码之前,请先准备几件事情。

1. 添加ZXing的maven依赖   也可以直接在前端使用第三方库  生成二维码

2. 添加jdom的maven依赖

3.下载Java版本SDK演示程序,地址在这里

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

我们需要MD5Util.java和XMLUtil.java两个文件

4. 我们使用HttpClient版本是4.5.1,记得添加Maven依赖

上面准备工作做好以后,继续往下看:

首先我们要调用微信的统一下单接口,我们点击【API列表】中的统一下单会看到这样页面:

我们重点要关注和阅读的内容我已经用红色椭圆标注好了,首先阅读【接口规则】里面的协议规范,开玩笑这个都不读你就想做微信支付,这个就好比你要去泡妞,得先收集点基本背景信息,了解对方特点,不然下面还怎么沟通。事实证明只有会泡妞得程序员才是好销售。跑题了我们接下来要看一下【场景介绍】中的案例与规范,只看一下记得一定要微信支付的LOGO下载下来,是为了最后放到我们自己的扫码支付网页上,这样看上去比较专业一点。之后重点关注【模式二】

我们这里就是要采用模式二的方式实现PC端页面扫码支付功能。

微信官方对模式二的解释是这样的“商户后台系统先调用微信支付的统一下单接口,微信后台系统返回链接参数code_url,商户后台系统将code_url值生成二维码图片,用户使用微信客户端扫码后发起支付。注意:code_url有效期为2小时,过期后扫码不能再发起支付”。看明白了吧就是我们首先要调用微信提供统一下单接口,得到一个关键信息code_url(至于这个code_url是什么鬼,我也不知道),然后我们通过自己的程序把这个URL生成一个二维码,生成二维码我这里用了Google的zxing库。然后把这个二维码显示在你的PC端网页上就行啦。这样终端用户一扫码就支付啦,支付就完成啦,看到这里你肯定很激动,发现微信支付如此简单,等等还有个事情我们还不知道,客户知道付钱了,我们服务器端还不知道呢,以微信开发人员的智商他们早就想到这个问题了,所以让你在调用统一下单接口的时候其中有个必填的参数就是回调URL,就是如果客户端付款成功之后微信会通过这个URL向我们自己的服务器提交一些数据,然后我们后台解析这些数据,完成我们自己操作。这样我们才知道客户是否真的已经通过微信付款了。

这样整个流程才结束,这个就是模式二。微信用一个时序图示这样表示这个过程的。


package com........util;

import java.util.Iterator;

import java.util.Map;

import java.util.Set;

import java.util.SortedMap;

import javax.servlet.http.HttpServletRequest;

public class ConstantUtil {

/**

* 商家可以考虑读取配置文件

*/

public static String GATEURL = "https://api.mch.weixin.qq.com/pay/unifiedorder";//获取预支付id的接口url

public static String QUERYURL = "https://api.mch.weixin.qq.com/pay/orderquery";//获取微信支付订单支付情况url

public static String BODY="";//支付介绍看微信介绍

//微信扫码支付配置--start--微信公众平台APPID

public static String WECHAT_APP_ID="";//公司提供

public static String WECHAT_MCH_ID="";//公司提供

public static String WECHAT_APP_KEY="";//公司提供微信公众平台支付商户平台系统内的API密钥

public static String WECHAT_NOTIFY_URL="http://www.*******.com/weixinPayReturn";//微信扫码支付配置   回调路径--end--

public static String createSign(String Encoding, SortedMap<String, String> parameters){

StringBuffer sb = new StringBuffer();

Set es = parameters.entrySet();

Iterator it = es.iterator();

while(it.hasNext()) {

Map.Entry entry = (Map.Entry)it.next();

String k = (String)entry.getKey();

Object v = entry.getValue();

if(null != v && !"".equals(v) && !"sign".equals(k) && !"key".equals(k)) {

sb.append(k + "=" + v + "&");

}

}

sb.append("key=" + ConstantUtil.WECHAT_APP_KEY);

String sign = MD5Util.MD5Encode(sb.toString(), Encoding).toUpperCase();

return sign;

}

public static boolean IsNumeric(String str) {

return str.matches("\\d *");

}

public  static String parametersToXml(Map<String, String> parameters) {

String xml = "<xml>";

Set es = parameters.entrySet();

Iterator it = es.iterator();

while(it.hasNext()) {

Map.Entry entry = (Map.Entry)it.next();

String key = (String)entry.getKey();

String val = (String)entry.getValue();

if(IsNumeric(val)) {

xml = xml + "<" + key + ">" + val + "</" + key + ">";

} else {

xml = xml + "<" + key + "><![CDATA[" + val + "]]></" + key + ">";

}

}

xml = xml + "</xml>";

return xml;

}

public static String generateString(int length) {

StringBuffer sb = new StringBuffer();

Random random = new Random();

for (int i = 0; i < length; i++) {

sb.append(ALLCHAR.charAt(random.nextInt(ALLCHAR.length())));

}

return sb.toString();

}

public static String getIpAddress(HttpServletRequest request) {

String ip = request.getHeader("x-forwarded-for");

if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {

ip = request.getHeader("Proxy-Client-IP");

}

if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {

ip = request.getHeader("WL-Proxy-Client-IP");

}

if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {

ip = request.getHeader("HTTP_CLIENT_IP");

}

if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {

ip = request.getHeader("HTTP_X_FORWARDED_FOR");

}

if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {

ip = request.getRemoteAddr();

}

return ip.equals("0:0:0:0:0:0:0:1")?"127.0.0.1":ip;

}

}


先准备下单接口

window.location.href = "weixinPay?Oid=" + data;


@RequestMapping(value = "/weixinPay", method = RequestMethod.GET, produces = MediaType.ALL_VALUE)

public String weixinPay(Model model,String Oid) {

System.out.println("\n*****************开启微信扫码界面******\n");

// 付款金额,必填

/*JSONObject jObject =new JSONObject();*/

long date = System.currentTimeMillis();

SortedMap<String, String> sParaTemp = new TreeMap<String, String>();

sParaTemp.put("appid", ConstantUtil.WECHAT_APP_ID);

sParaTemp.put("mch_id", ConstantUtil.WECHAT_MCH_ID);

sParaTemp.put("nonce_str", date + ConstantUtil.generateString(10));//最好是当前时间在随机数

sParaTemp.put("sign_type", "MD5");

sParaTemp.put("body", ConstantUtil.BODY);

sParaTemp.put("out_trade_no", Oid);//此处改成商城orderID

sParaTemp.put("total_fee", "1");    //为一分钱

sParaTemp.put("spbill_create_ip", ConstantUtil.getIpAddress(request));

sParaTemp.put("trade_type", "NATIVE");

sParaTemp.put("notify_url", ConstantUtil.WECHAT_NOTIFY_URL);//notify_url

String signString = ConstantUtil.createSign("utf-8", sParaTemp);

sParaTemp.put("sign", signString);

String paramXml = ConstantUtil.parametersToXml(sParaTemp);

try {//一下发送请求至微信的下单接口

CloseableHttpClient httpClient = HttpClientBuilder.create().build();

HttpPost post = new HttpPost(ConstantUtil.GATEURL);

post.addHeader("Content-Type", "text/xml; charset=UTF-8");

StringEntity xmlEntity = new StringEntity(paramXml, ContentType.APPLICATION_JSON);//UTF-8

post.setEntity(xmlEntity);

CloseableHttpResponse httpResponse = httpClient.execute(post);

String responseXML = EntityUtils.toString(((org.apache.http.HttpResponse) httpResponse).getEntity(), "UTF-8");

@SuppressWarnings("unchecked")

Map<String, String> resultMap = XMLUtil.parseXmlToMap(responseXML);

if (resultMap.get("return_code").equals("SUCCESS") && resultMap.get("result_code").equals("SUCCESS")) {

String codeurl = resultMap.get("code_url");

if (codeurl != null && !"".equals(codeurl)) {

model.addAttribute("data", codeurl);//一切正常返回一个url 页面接收生成二维码

} else {

model.addAttribute("data", "");

}

}

post.releaseConnection();

} catch (Exception e) {

e.printStackTrace();

}

return "/weixinPay";

}

//发送的请求主要是注意验签那块。只要告诉提供的信息没有问题。一切都ok


页面展示

weixinPay.jsp

获取以上的data页面使用第三方工具库生成二维码

<script src="${pageContext.request.contextPath}/resources/js/jquery-1.12.0.min.js" type="text/javascript"></script>

<script src="${pageContext.request.contextPath}/resources/js/jquery.qrcode.min.js" type="text/javascript"></script>

$(function(){

var str = toUtf8("${data}");//展示二维码

$("#code").qrcode({

render: "canvas", // 渲染方式有table方式和canvas方式

width: 220,   //默认宽度

height: 200, //默认高度

text: str, //二维码内容

typeNumber: -1,   //计算模式一般默认为-1

correctLevel: 2, //二维码纠错级别

background: "#ffffff",  //背景颜色

foreground: "#000000"  //二维码颜色

});

})

到最后一步微信的二维码就展示在页面上了。  然后还有扫码回调和订单查询不懂的可以留言
时间: 2024-10-08 18:26:54

微信支付 全套流程看完就会 pc扫码支付的相关文章

微信支付----PC扫码支付(查询微信支付订单判断是否支付成功)

c#webapi建议前端轮番查询订单状态     #region  查询扫码订单状态         /// <summary>         /// 查询扫码支付状态         /// </summary>         /// <param name="out_trade_no">支付订单号</param>         /// <returns></returns>         [HttpGe

微信支付—— 扫码支付

个人认为扫码支付比Jsapi支付从开发和使用上要顺心的多.扫码支付不用担心是PC端还是移动浏览器还是微信客户端访问的问题,生成一个二维码,扫描支付即可. 一些配置和代码SDK以及SDK存在的错误可以参考上一篇 微信支付的文章 http://blog.csdn.net/m0sh1/article/details/45199711 友情提示以下内容实在简陋 - -# 如果你跑通了 Jsapi支付,那么扫码支付其实没什么太特别的. 扫码支付发起支付的文件在 example SDK 中的 native.

支付宝当面付扫码支付接口开发

最近公司要做一个有关支付的相关项目,需要对接支付宝的支付接口,实现扫描二维码支付功能,为此研究了一下支付宝相关业务.主要依据就是支付宝的相关接口文档: https://docs.open.alipay.com/catalog,重点关注如下红色方框部分 先看一下支付宝扫描二维码支付的业务流程,直接摘出来如下: 扫码支付(接入指引) 扫码支付,指用户打开支付宝钱包中的"扫一扫"功能,扫描商家展示在某收银场景下的二维码并进行支付的模式.该模式适用于线下实体店支付.面对面支付等场景. 业务流程

支付宝支付开发—当面付条码支付和扫码支付

关键字:支付宝 当面付 条码支付 扫码支付 二维码支付 订单查询 退款作者:方倍工作室 本文介绍支付宝中当面付下属的条码支付.扫码支付.订单查询.退款申请的集成开发过程. 本文分为以下五个部分: 条码支付和扫码支付介绍 申请应用 密钥生成及配置 API及SDK集成 条码支付.扫码支付.订单查询.退款申请 一.条码支付及二维码支付介绍 1. 条码支付 条码支付是支付宝给到线下传统行业的一种收款方式.商家使用扫码枪等条码识别设备扫描用户支付宝钱包上的条码/二维码,完成收款.用户仅需出示付款码,所有收

支付宝支付开发——当面付条码支付和扫码支付

关键字:支付宝 当面付 条码支付 扫码支付 二维码支付 订单查询 退款作者:方倍工作室原文: http://www.cnblogs.com/txw1958/p/alipay-f2fpay.html 本文介绍支付宝中当面付下属的条码支付.扫码支付.订单查询.退款申请的集成开发过程. 本文分为以下五个部分: 条码支付和扫码支付介绍 申请应用 密钥生成及配置 API及SDK集成 条码支付.扫码支付.订单查询.退款申请 注: 支付宝支付开发有一定的门槛,如果您愿意为知识付费来节省您宝贵的时间,请直接见底

关于微信扫码支付的流程

前言:由于没有商户相关的id信息,只能测试这个扫码的功能,但是这个也是我们日常常用到的功能 (一) 前期准备 从微信官方网站下载最新的支付的接口 1.首先在:https://pay.weixin.qq.com/wiki/doc/api/native_sl.php?chapter=11_1  平台下载第三方接口文件(我下载的是PHP) 2.把项目放到入口文件中去查看效果(如下) 3.点击扫码支付(注意路径问题) 这是模式二无法显示图片,但是其实也是不影响我们项目的运行的 (二) 集成到我的项目中去

微信原生支付 Native扫码支付( V3.3.7 版本)

[尊重别人的劳动成果,转载请注明出处:一缕晨光工作室,www.wispdawn.com] 前言 辛苦研究三天,遇到各种困难,最终还是克服了,把我的理解和思路分享给需要帮助的人,如果你觉的好,请帮我分享一下,谢谢. 在没有做之前,我以为和支付宝,以及银联一样,会在官网找到相应的demo,照葫芦画瓢即可,没有什么复杂的,真正去做的时候,发现各种错误,很多时候都莫名其妙找不到北, 在网上搜了不知道多少遍,有V3版的,不过都是js api版本的,没有找到原生扫码支付,下了几个V2版本的微信支付c#dem

ThinkPHP微信扫码支付接口

最近折腾微信扫码支付,看了微信官方文档,找了很多网页,发现和文档/demo不匹配,现在自己算是弄出来了(文件名称有所更改),贴出来分享一下 一.将有用的官方lib文件和使用的相关文件放置到vendor当中 二.调用同一支付接口 WechatController //调用同一支付接口public function native($v_oid='',$v_amount=''){ ini_set('date.timezone','Asia/Shanghai'); error_reporting(E_E

微信支付教程系列之扫码支付

微信支付教程系列之扫码支付 http://www.cnblogs.com/nangong/p/9fa625bfb92a986125f0ba72704c46ec.html 今天,我们来一起探讨一下这个微信扫码支付.何为扫码支付呢?这里面,扫的码就是二维码了,就是我们经常扫一扫的那种二维码图片,例如,我们自己添加好友的时候,可以通过输入对方的微信号,也可以扫一扫对方的二维码.扫码支付,作为,微信支付里面,不可或缺的一个功能,对商品的支付提供了极为方便的体验,用途也非常的多.例如我们在地铁.公交站常见