微信支付开发(1) JS API支付
关键字:微信支付 微信支付v3 jsapi支付 统一支付 Native支付 prepay_id
作者:方倍工作室
原文: http://www.cnblogs.com/txw1958/p/wxpayv3-jsapi.html
本文介绍微信支付下的jsapi实现流程
前言
微信支付现在分为v2版和v3版,2014年9月10号之前申请的为v2版,之后申请的为v3版。V3版的微信支付没有paySignKey参数。v2的相关介绍请参考方倍工作室的其他文章。本文介绍的微信支付v3。
流程实现
1. OAuth2.0授权
JSAPI 支付前需要调用 登录授权接口获取到用户的 Openid 。所以需要做一次授权,这次授权是不弹出确认框的。
其实质就是在用户访问
http://www.fangbei.org/wxpay/js_api_call.php
时跳转到
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx8888888888888888&redirect_uri=http://www.fangbei.org/wxpay/js_api_call.php&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect
以此来获得code参数,并根据code来获得授权access_token及openid
其实现的详细流程可参考 微信公众平台开发(71)OAuth2.0网页授权
在微信支付的Demo中,其代码为
//使用jsapi接口
$jsApi = new JsApi_pub(); //=========步骤1:网页授权获取用户openid============
//通过code获得openid
if (!isset($_GET['code']))
{
//触发微信返回code码
$url = $jsApi->createOauthUrlForCode(WxPayConf_pub::JS_API_CALL_URL);
Header("Location: $url");
}else
{
//获取code码,以获取openid
$code = $_GET['code'];
$jsApi->setCode($code);
$openid = $jsApi->getOpenId();
}
这一步的最终结果就是获得了当前用户的openid
ou9dHt0L8qFLI1foP-kj5x1mDWsM
2. 统一支付
统一支付是JSAPI/NATIVE/APP各种支付场景下生成支付订单,返回预支付订单号的接口,目前微信支付所有场景均使用这一接口
统一支付中以下参数从配置中获取,或由类自动生成,不需要用户填写
$this->parameters["appid"] = WxPayConf_pub::APPID;//公众账号ID
$this->parameters["mch_id"] = WxPayConf_pub::MCHID;//商户号
$this->parameters["spbill_create_ip"] = $_SERVER['REMOTE_ADDR'];//终端ip
$this->parameters["nonce_str"] = $this->createNoncestr();//随机字符串
$this->parameters["sign"] = $this->getSign($this->parameters);//签名
在JSAPI支付中,另外填写以下参数
//统一支付接口中,trade_type为JSAPI时,openid为必填参数!
$unifiedOrder->setParameter("openid","$openid");//商品描述
$unifiedOrder->setParameter("body","方倍工作室");//商品描述
//自定义订单号,此处仅作举例
$timeStamp = time();
$out_trade_no = WxPayConf_pub::APPID."$timeStamp";
$unifiedOrder->setParameter("out_trade_no","$out_trade_no");//商户订单号
$unifiedOrder->setParameter("total_fee","1");//总金额
$unifiedOrder->setParameter("notify_url",WxPayConf_pub::NOTIFY_URL);//通知地址
$unifiedOrder->setParameter("trade_type","JSAPI");//交易类型
其他为选填参数
//非必填参数,商户可根据实际情况选填
//$unifiedOrder->setParameter("sub_mch_id","XXXX");//子商户号
//$unifiedOrder->setParameter("device_info","XXXX");//设备号
//$unifiedOrder->setParameter("attach","XXXX");//附加数据
//$unifiedOrder->setParameter("time_start","XXXX");//交易起始时间
//$unifiedOrder->setParameter("time_expire","XXXX");//交易结束时间
//$unifiedOrder->setParameter("goods_tag","XXXX");//商品标记
//$unifiedOrder->setParameter("openid","XXXX");//用户标识
//$unifiedOrder->setParameter("product_id","XXXX");//商品ID
这些参数最终组成了这样的xml数据,
<xml>
<openid><![CDATA[ou9dHt0L8qFLI1foP-kj5x1mDWsM]]></openid>
<body><![CDATA[方倍工作室]]></body>
<out_trade_no><![CDATA[wx88888888888888881414411779]]></out_trade_no>
<total_fee>1</total_fee>
<notify_url><![CDATA[http://www.fangbei.org/wxpay/notify_url.php]]></notify_url>
<trade_type><![CDATA[JSAPI]]></trade_type>
<appid><![CDATA[wx8888888888888888]]></appid>
<mch_id>10012345</mch_id>
<spbill_create_ip><![CDATA[61.50.221.43]]></spbill_create_ip>
<nonce_str><![CDATA[60uf9sh6nmppr9azveb2bn7arhy79izk]]></nonce_str>
<sign><![CDATA[2D8A96553672D56BB2908CE4B0A23D0F]]></sign>
</xml>
将这些数据提交给统一支付接口
https://api.mch.weixin.qq.com/pay/unifiedorder
将获得返回 如下数据
<xml>
<return_code><![CDATA[SUCCESS]]></return_code>
<return_msg><![CDATA[OK]]></return_msg>
<appid><![CDATA[wx8888888888888888]]></appid>
<mch_id><![CDATA[]]></mch_id>
<nonce_str><![CDATA[Be8YX7gjCdtCT7cr]]></nonce_str>
<sign><![CDATA[885B6D84635AE6C020EF753A00C8EEDB]]></sign>
<result_code><![CDATA[SUCCESS]]></result_code>
<prepay_id><![CDATA[wx201410272009395522657a690389285100]]></prepay_id>
<trade_type><![CDATA[JSAPI]]></trade_type>
</xml>
其中包含了最重要的预支付ID参数,prepay_id,值为
wx201410272009395522657a690389285100
3、JS API支付
前面的准备工作做好了以后,JS API根据prepay_id生成jsapi支付参数
生成代码如下
//=========步骤3:使用jsapi调起支付============
$jsApi->setPrepayId($prepay_id);
$jsApiParameters = $jsApi->getParameters();
生成的json数据如下
{
"appId": "wx8888888888888888",
"timeStamp": "1414411784",
"nonceStr": "gbwr71b5no6q6ne18c8up1u7l7he2y75",
"package": "prepay_id=wx201410272009395522657a690389285100",
"signType": "MD5",
"paySign": "9C6747193720F851EB876299D59F6C7D"
}
在微信浏览器中调试起js接口,代码如下
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>微信安全支付</title>
<script type="text/javascript">
//调用微信JS api 支付
function jsApiCall()
{
WeixinJSBridge.invoke(
'getBrandWCPayRequest',
<?php echo $jsApiParameters; ?>,
function(res){
WeixinJSBridge.log(res.err_msg);
//alert(res.err_code+res.err_desc+res.err_msg);
}
);
} function callpay()
{
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', jsApiCall);
document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
}
}else{
jsApiCall();
}
}
</script>
</head>
<body>
</br></br></br></br>
<div align="center">
<button style="width:210px; height:30px; background-color:#FE6714; border:0px #FE6714 solid; cursor: pointer; color:white; font-size:16px;" type="button" onclick="callpay()" >贡献一下</button>
</div>
</body>
</html>
当用户点击“贡献一下”按钮时,将弹出微信支付插件,用户可以开始支付。
4、支付通知
支付成功后,通知接口中也将收到支付成功的xml通知
<xml>
<appid><![CDATA[wx8888888888888888]]></appid>
<bank_type><![CDATA[CFT]]></bank_type>
<fee_type><![CDATA[CNY]]></fee_type>
<is_subscribe><![CDATA[Y]]></is_subscribe>
<mch_id><![CDATA[]]></mch_id>
<nonce_str><![CDATA[60uf9sh6nmppr9azveb2bn7arhy79izk]]></nonce_str>
<openid><![CDATA[ou9dHt0L8qFLI1foP-kj5x1mDWsM]]></openid>
<out_trade_no><![CDATA[wx88888888888888881414411779]]></out_trade_no>
<result_code><![CDATA[SUCCESS]]></result_code>
<return_code><![CDATA[SUCCESS]]></return_code>
<sign><![CDATA[0C1D7F2534F1473247550A5A138F0CEB]]></sign>
<sub_mch_id><![CDATA[]]></sub_mch_id>
<time_end><![CDATA[]]></time_end>
<total_fee>1</total_fee>
<trade_type><![CDATA[JSAPI]]></trade_type>
<transaction_id><![CDATA[]]></transaction_id>
</xml>
notify_url收到以后,再返回确认成功消息给微信服务器
<xml>
<return_code><![CDATA[SUCCESS]]></return_code>
</xml>
演示与源代码
演示地址,微信扫描下方二维码即可体验支付0.1分钱
内容更新及源码下载
本节最新的教程说明及源代码已在《微信公众平台开发最佳实践(第3版)》一书中发布,详细介绍及购买地址:http://www.cnblogs.com/txw1958/p/buy-ebook.html
微信支付开发(1) JS API支付的更多相关文章
- 微信支付开发(3) JS API支付
由于微信支付接口更新,本文档已过期,请查看新版微信支付教程.地址 http://www.cnblogs.com/txw1958/category/624506.html 本文介绍如何使用JS API支 ...
- 微信支付开发(1) JS API支付V3版(转)
http://www.cnblogs.com/txw1958/p/wxpayv3-jsapi.html 本文介绍微信支付下的jsapi实现流程 前言 微信支付现在分为v2版和v3版,2014年9月10 ...
- 微信支付v2开发(3) JS API支付
本文介绍如何使用JS API支付接口完成微信支付. 一.JS API支付接口(getBrandWCPayRequest) 微信JS API只能在微信内置浏览器中使用,其他浏览器调用无效.微信提供get ...
- 微信支付.NET版开发总结(JS API),好多坑,适当精简
前2天,做一个手机网页的微信支付的项目,费了好些周折,记录一下.接下来,按照开发步骤,细数一下,我遇到的那些坑. [坑1]官方邮件中下载的demo只有PHP版本,其他版本没有给链接.可能让人误以为只有 ...
- 微信支付.NET版开发总结(JS API),好多坑,适当精简。
前2天,做一个手机网页的微信支付的项目,费了好些周折,记录一下.接下来,按照开发步骤,细数一下,我遇到的那些坑. [坑1]官方邮件中下载的demo只有PHP版本,其他版本没有给链接.可能让人误以为只有 ...
- 微信 JS API 支付教程
最近一个项目中用到了微信开发,之前没有做过支付相关的东西,算是拿这个来练练手,刚开始接触支付时候很懵逼,加上微信支付开发文档本来就讲得不清楚,我是彻底蒙圈了,参考了很多代码之后,算是有一点思路了. 用 ...
- 微信支付开发 c# SDK JSAPI支付开发的流程和微信大坑
微信支付开发流程 1. 开通微信支付功能 省略 2. 下载微信的C#版的微信SDK 下载连接:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chap ...
- PHP微信支付开发实例
这篇文章主要为大家详细介绍了PHP微信支付开发过程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 PHP微信支付开发过程,分享给大家,供大家参考,具体内容如下 1.开发环境 Thinkphp 3. ...
- 微信支付开发(1) 微信支付URL配置
由于微信支付接口更新,本文档已过期,请查看新版微信支付教程.地址 http://www.cnblogs.com/txw1958/category/624506.html 本文介绍微信支付申请时如何设置 ...
随机推荐
- js去掉字符串的空格
//去左空格; function ltrim(s){ return s.replace(/(^s*)/g, ""); } //去右空格; function rtrim(s){ re ...
- arcgis server10.2.2之地理编码服务发布
1.地理编码工具(Geocoding Tools)locator制作 打开arcCatalog,找到工具箱ArcToolbox中的Geocoding Tools---Create Addres ...
- JavaScript下的setTimeout(fn,0)意味着什么?
近期在研究异步编程的我对于setTimeout之类的东西异常敏感.在SegmentFault上看到了一个问题<关于SetTimeout时间设为0时>:提问者读了一篇文章,原文解释setTi ...
- hyperv 创建虚拟以太网交换机失败
问题: hyperv 创建虚拟以太网交换机失败 解决办法: 取消无线共享,重新创建虚拟以太网交换机即可
- jQuery修改class属性和CSS样式
jQuery修改class属性和CSS样式 class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有一个c ...
- Activity详解二 activity数据传递
首先看效果图: 1.Bundle类的作用 Bundle类用作携带数据,它类似于Map,用于存放key-value名值对形式的值.相对于Map,它提供了各种常用类型的putXxx()/getXxx()方 ...
- 【强烈推荐】XCODE的插件之王
有许多关于Xcode的插件,在这里强烈推荐的是Alcatraz插件.因为我们可以通过这个插件来安装其他插件 1.Alcatraz插件. Alcatraz是一个方便我们安装各种那个插件的插件.插件之王? ...
- iOS 动画绘制线条颜色渐变的折线图
效果图 .................... 概述 现状 折线图的应用比较广泛,为了增强用户体验,很多应用中都嵌入了折线图.折线图可以更加直观的表示数据的变化.网络上有很多绘制折线图的demo,有 ...
- 1-学习前言&C语言概述
[C语言]01-学习前言&C语言概述 参考自 http://www.cnblogs.com/mjios/archive/2013/03/12/2956508.html#label2 C语言是我 ...
- BitSet构造函数的两种特例
C++11之后,bitset的构造函数新加了两种形式: bitset<bits>::bitset (const string& str, string::size_type str ...