微信支付h5客户端开发步骤

第一步:用户同意授权,获取code

在确保微信公众账号拥有授权作用域(scope参数)的权限的前提下

服务号获得高级接口后,默认拥有scope参数中的snsapi_base和snsapi_userinfo),引导关注者打开如下页面:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

给用户推送消息的时候,把点击的url设为上面那个,把需要用户真正进入的个人网页地址放在REDIRECT_URI处,这样,当用户点击了该链接,会从微信获取对应的CODE值,并传递和跳转到自己定义的跳转地址REDIRECT_URI.

不过,该跳转地址似乎需要微信授权,引用-这个网页授权需要登录微信公众平台,点击左侧菜单“开发者中心”,在右侧“权限列表”中找到“网页账号”,点击最右侧的修改,把测试的网址写进去,注意不要加http。填好后,这个坑就趟过去了。参见http://blog.csdn.net/molaifeng/article/details/42968673

你需要在跳转地址的页面里如php,jsp等里获取到对应的CODE值。

需要给上面那个url传递的参数,分别为appid-公众号,redirect_uri-你想要用户看到和支付的个人网页地址,

response_type-code返回类型,这里填code

Scope-snsapi_base 只可以获取用户端的openid

Scope-snsapi_userinfo 可以获取用户的个人信息,微信会弹出提醒用户是否授权的界面,用户自行选择,默认会获取openid

State重定向后微信会将该产生传递给你自己的页面,会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节

#wechat_redirect 必须带

第二步:通过code换取网页授权access_token

上面微信处理完后,会跳转到你自定义的页面,并向你传递code和state参数

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

这时候,你要通过ajax(http:GET(请使用https协议)向上面这个地址发送四个数据,并请求json数据,appid为公众号,secret为公众号的appsecret,code为微信传递给你的,

Grant_type为授予类型 填为authorization_code

那么怎么获取appsecret呢,见百度经验 http://jingyan.baidu.com/album/6525d4b12af618ac7c2e9468.html

appid和appsecret是微信公众平台服务号才有的,如果自己的公众平台不是服务号,需要升级为服务号。

首先登录服务号,登录“服务”条目,“服务中心”,看到自定义菜单一栏,选择开发模式,下翻页面,就可以看到自己公众平台帐号的appid和appsecret,其中appsecret,自己可以重新设置

好了这样,你准备好了向微信传递的四个参数,发送ajax请求,如果正确响应时获得对应的返回值如下:

{

"access_token":"ACCESS_TOKEN",

"expires_in":7200,

"refresh_token":"REFRESH_TOKEN",

"openid":"OPENID",

"scope":"SCOPE",

"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"

}

这时候,我们最后支付传递给微信或者传递给后台(不必需)所需要的openid已经在里面了,

access_token主要用来在scope为snsapi_userinfo 时,用来获取用户个人资料。

Openid是用户的标识,用来识别是具体哪个用户在使用微信支付,access_token,网页授权接口调用凭证

错误时会返回如下

{"errcode":40029,"errmsg":"invalid code"}

各种错误码对应的含义,可以参见 http://mp.weixin.qq.com/wiki/17/fa4e1434e57290788bde25603fa2fcbd.html

第三步:拉取用户信息(需scope为 snsapi_userinfo)

如果第一步scope填写的snsapi_userinfo, 并且用户在微信弹出的授权页面里授予你获取个人信息的权限

那么通过第二步获得的access_token和openid,还可以获取用户的个人信息

当然,考虑支付的话,只需要openid和access_token就够了,如果需要根据用户信息个性化支付界面和后续的支付完成失败等页面,

则需要通过ajax get方法传递第二步获得的openid和access_token请求下面的链接,并获得相应的json数据进行处理:

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

正确时获得的json数据如下:

{

"openid":" OPENID",

" nickname": NICKNAME,  //用户昵称

"sex":"1",   //性别

"province":"PROVINCE"   //省份

"city":"CITY",   //所在城市

"country":"COUNTRY",  //所在国家

"headimgurl":   //用户头像     "http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",

"privilege":[

"PRIVILEGE1"

"PRIVILEGE2"

],

"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"  //多平台,手机,ios, android公用的唯一id

}

第一步到第三步请参考 http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html

第四步:获取用户购买商品信息,通知后台拉起统一支付,获取相应的prepay_id和签名, 随机串, 时间戳

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

折腾了这么久,终于要进入支付的主题了。

前面三个步骤,我们已经获得了openid和access_token, 然后等待用户选择相应的商品。

等我们的用户选择了想要购买的商品,我们获得相应的商品名字,金额,

在正式的微信支付交互前,我们还需要先传递到服务器后台获得一个prepay_id 和 签名。

那么我们需要向后台要求一个请求prepay_id和签名的网络地址,这个地址个人服务器提供,并通过ajax get 或者Post向后台请求

那么后台怎么得到这个prepay_id和签名呢,后台需要向微信通过https://api.mch.weixin.qq.com/pay/unifiedorder这个地址发起请求,发送的数据如下,不明白为什么是xml而不是json

<xml>

<appid>wx2421b1c4370ec43b</appid>

<attach>支付测试</attach>

<body>JSAPI支付测试</body>

<mch_id>10000100</mch_id>

<nonce_str>1add1a30ac87aa2db72f57a2375d8fec</nonce_str>

<notify_url>http://wxpay.weixin.qq.com/pub_v2/pay/notify.v2.php</notify_url>

<openid>oUpF8uMuAJO_M2pxb1Q9zNjWeS6o</openid>

<out_trade_no>1415659990</out_trade_no>

<spbill_create_ip>14.23.150.211</spbill_create_ip>

<total_fee>1</total_fee>

<trade_type>JSAPI</trade_type>

<sign>0CB01533B8C1EF103065174F50BCA001</sign>

</xml>

我们发现后台需要前台传递的数据有 appid(公众号id), mch_id(商户号)  openid(第二步获取的)body(商品描述)  total_fee(个人定义支付页面里用户选择购买的商品金额) spbill_create_ip(用户终端ip) trad_type() JSAPI

很奇怪的是openid竟然不是后台统一支付必须要传递给微信的参数,那么我们获取了openid干嘛

而后台拉起统一支付后获得的prepay_id 和sign, code_url和微信返回的随机字符串nonce_str则可以传递给前台进行使用

Code_url为前台显示给用户商品要进行的扫一扫支付需要的二维码

后台需要在notify_url参数里填写用户在前台点击支付,并在微信支付成功后通知后台成功的网页地址,便于进一步处理

这时我们发现,尽管后台在生成预支付prepaid_id请求的过程中并不必须传递openid,但是在支付成功回调里会收到openid的返回值,用来确定是哪个用户付款成功,这说明微信支付的思路是:对于某个具体商品,在用户支付成功前,后台并不需要知道对方是谁。

相应的错误码和原始页面见https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1

这时候在统一支付成功之后,后台向前端返回请求的prepay_id,签名或者code_url

这个时候,前端就获取了进行支付所需要的信息,可以进行下一步了

第五步:h5页面前端和微信达成支付功能

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

当用户点击支付,我们发现利用下面的方法就可以进行支付了,所需要的数据是appid(公众号)

Package就是后台传回的prepay_id,paySign签名,后台传递,nonceStr随机串后台传递

function onBridgeReady(){

WeixinJSBridge.invoke(

‘getBrandWCPayRequest‘, {

"appId" : "wx2421b1c4370ec43b",     //公众号名称,由商户传入

"timeStamp":" 1395712654",         //时间戳,自1970年以来的秒数

"nonceStr" : "e61463f8efa94090b1f366cccfbbb444", //随机串

"package" : "prepay_id=u802345jgfjsdfgsdg888",

"signType" : "MD5",         //微信签名方式:

"paySign" : "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名

},

function(res){

if(res.err_msg == "get_brand_wcpay_request:ok" ) {}     // 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回    ok,但并不保证它绝对可靠。

}

);

}

if (typeof WeixinJSBridge == "undefined"){

if( document.addEventListener ){

document.addEventListener(‘WeixinJSBridgeReady‘, onBridgeReady, false);

}else if (document.attachEvent){

document.attachEvent(‘WeixinJSBridgeReady‘, onBridgeReady);

document.attachEvent(‘onWeixinJSBridgeReady‘, onBridgeReady);

}

}else{

onBridgeReady();

}

时间: 2024-11-07 15:35:00

微信支付h5客户端开发步骤的相关文章

关于微信网页/H5游戏开发中二维码无法识别的解决方法

我接触微信H5开发已经有一年多了,做过很多案例也遇到很多的问题.今天我把困扰我半年之久的问题分享出来,也就是关于微信网页/H5游戏开发中二维码无法识别的解决方法. 我在百度搜索了许久,关于微信H5网页/游戏开发问题以及解决方案的相关文章少之又少,在相关前端交流群中问别人,一问三不知,平时这些群就会上班吹牛逼,真正交流问题的人少又少,真是揪心啊,最后还是得靠自己解决了. [这里,我先举个栗子] 上面这个页面,相信从事微信H5开发的人应该很熟悉,就是常见的分享到朋友圈的页面,通常以[引导分享图标]+

微信支付.NET版开发总结(JS API),好多坑,适当精简

前2天,做一个手机网页的微信支付的项目,费了好些周折,记录一下.接下来,按照开发步骤,细数一下,我遇到的那些坑. [坑1]官方邮件中下载的demo只有PHP版本,其他版本没有给链接.可能让人误以为只有PHP版本,事实上,各种版本都有. 拿到了腾讯发给客户的,微信支付商户资料,邮件中提示:证书的详细使用方案,请查看微信支付开发接口文档.根据邮件微信支付开发接口文档的链接,定向到一个新的邮件附件,里面的内容: 3. 使用公众号发起支付请求 使用JS API在微信的网页中发起支付请求,详细方法见文档中

微信支付.NET版开发总结(JS API),好多坑,适当精简。

前2天,做一个手机网页的微信支付的项目,费了好些周折,记录一下.接下来,按照开发步骤,细数一下,我遇到的那些坑. [坑1]官方邮件中下载的demo只有PHP版本,其他版本没有给链接.可能让人误以为只有PHP版本,事实上,各种版本都有. 拿到了腾讯发给客户的,微信支付商户资料,邮件中提示:证书的详细使用方案,请查看微信支付开发接口文档.根据邮件微信支付开发接口文档的链接,定向到一个新的邮件附件,里面的内容: 3. 使用公众号发起支付请求 使用JS API在微信的网页中发起支付请求,详细方法见文档中

微信支付服务端开发

前言 最近应公司业务需求,把微信支付完成了,当然已经顺利上线.但是开发的过程是也是踩了很多坑,下面我就先说说开发流程,以及在开发中遇到的大大小小的坑. 开发流程 首先,看一下微信开方平台关于支付的一个时序图,如下: 微信支付时序图https://pay.weixin.qq.com/wiki/doc/api/app/app.php 商户系统和微信支付系统主要交互说明: 步骤1:用户在商户APP中选择商品,提交订单,选择微信支付. 步骤2:商户后台收到用户支付单,调用微信支付统一下单接口.参见[统一

微信公众号可通过现金红包接口发放微信支付现金红包(附开发教程)

农历新年将至,支付宝红包打了一仗,微信在朋友圈屏蔽了它的分享,但单防守还不行,进攻才是最好的防守.昨日,微信支付现金红包接口正式开放,只需开通微信支付,即可接入现金红包.微信公众号也可以发放现金红包了! 通过现金红包接口,公众号开发者可以策划相关运营活动,向用户发放微信支付现金红包,更好的达到品牌推广及回馈用户的效果. 1.商户调用接口时,通过指定发送对象以及发送金额的方式发放红包,这样的方式,允许商户灵活的应用于各种各样丰富的活动场景 2.领取到红包后,用户的资金直接进入微信零钱,避免繁复的领

微信支付.NET版开发总结,好多坑

前2天,做一个手机网页的微信支付的项目,费了好些周折,记录一下. [坑1]官方邮件中下载的demo只有PHP版本,其他版本没有给链接.可能让人误以为只有PHP版本,事实上,各种版本都有. 拿到了腾讯发给客户的,微信支付商户资料,邮件中提示:证书的详细使用方案,请查看微信支付开发接口文档.根据邮件微信支付开发接口文档的链接,定向到一个新的邮件附件,里面的内容: 3. 使用公众号发起支付请求 使用JS API在微信的网页中发起支付请求,详细方法见文档中有关JS API的章节. 微信支付接口文档及de

微信硬件H5面板开发(一) ---- 调用openApi

微信硬件平台是微信推出连接物与人,物与物的IOT解决方案.也就是说可以通过微信控制各种智能设备.比如一些蓝牙设备.空调.电视等等. 我本身不懂硬件(虽然是电子信息专业),硬件是北航的两个研究生在弄,小团队里我负责开发H5自定义面板,刚开始看官方文档各种迷糊,对于jssdk.jsapi.Airkiss.openApi.直连SDK都不知道该用哪个做,官方论坛问问题基本上没结果,加了几个微信硬件群问问题,发现好些开发者和我一样,同一个问题,发到几个群里问,画面好心酸.给wxthings发邮件问,能回复

能挣钱的微信JSSDK+H5混合开发

H5喊了那么久,有些人都说不实用,有些人却利用在微信中开发H5应用赚得盆满钵满.微信JSSDK + HTML 5,让移动Web开发与微信结合轻而易举!跨平台.零成本,让大众创业变得更方便. 我觉得现在大众创业就要从一个微信公众号开始,这个公众号可以有基本的1-3个功能,拿“悠泊停车”来说,刚开始就只有一个微信公众号,它代替了所有的Native APP功能,让“悠泊停车”迅速打开了市场,并拉来百万美元投资. 目前微信公众号开发已经遍地都是,但真正H5场景应用还少得可怜,大部分小企业都只有简单的菜单

微信支付----维权接口开发!(转掌眼)

最近比较忙,没多少时间写!所以这篇可能比较乱,请理解.. 1.你需确定维权URL通知地址: 在“商户功能→商户信息→修改→维权通知URL”查看维权通知URL.(区分大小写) 2.添加用户维权入口 在服务号自定义菜单添加名称叫“维权”的菜单,该菜单不分层级,不分位置,微信自动跳转到维权页面.. 3.获取维权通知XML数据. 在ResponseHandler类(微信支付----没我想的那么难)添加获取XML参数的方法: /**获取XML参数**/ public string getMpParamet