文档章节

JS API微支付的开发-开发阶段

big_cat
 big_cat
发布于 2015/04/23 10:51
字数 2048
阅读 182
收藏 4
点赞 0
评论 3

前期:JSAPI微支付的开发-准备工作

集成:JSAPI微支付的开发-开发阶段

上线:JSAPI微支付的开发-正式上线

看到这篇文章前你应该完了通过了微支付申请,商户平台API证书(下载下来) 和API密钥(在商户平台设置好)也设置好了才对。否则请参考准备工作:JSAPI微支付的开发-准备工作



配置支付测试账号和测试目录

微支付开发必须得在线上,因为涉及到oauth等网页授权跳转,搭建好开发服务器后先正确的配置测试目录和测试帐号:

微支付-开发配置

想必大家都是用的框架吧,框架的话测试目录填写到你的控制器就好,如果没用框架就填写到你的脚本文件。

测试白名单:在没有正式发布前只有测试白名单的微信号能发起正常的支付请求,别忘了把自己的帐号输进去。



下载开发Demo包,进行部署【注意看我绿色的标注】

接下来去微信公众平台-微信支付-支付申请的说明部分有 公众号微信支付申请指引 这里面有demo包的下载地址,拉到最下面就能看到 微信支付接口文档及开发工具  下载第三个 微信支付接口文档及demo(公众账号).zip点击下载 即可

下载好解压:

文档结构

PHP版本

|-- README.txt---------------------使用说明文本

|-- WxPayHelper--------------------微信支付类库及配置文件

|   |-- SDKRuntimeException.php----异常处理类

|   |-- WxPay.pub.config.php-----------商户配置文件

|   |-- WxPayPubHelper.php------------微信支付类库

|   |--cart----------------------------存放证书的文件夹

|-- demo---------------------------例程

|   |-- js_api_call.php------------JSAPI支付例程

|   |-- native_call_qrcode.php-----native支付静态链接二维码例程

|   |-- native_call.php------------native支付后台响应例程

|   |-- native_call.log------------native支付后台响应日志

|   |-- native_dynamic_qrcode.php--native支付动态链接二维码例程

|   |-- notify_url.php-------------支付结果异步通知例程

|   |-- notify_url.log-------------支付结果异步通知日志

|   |-- order_query.php------------订单查询例程

|   |-- refund.php-----------------退款例程

|   |-- download_bill.php----------对账单例程

|   |-- refund_query.php-----------退款查询例程

|   |-- log_.php-------------------日志类

|   |-- qrcode.js------------------二维码生成工具

|-- index.php

这里我们只讲解最基本的完整的支付流程


配置必要参数

需要配置的参数项都在WxPayHelper->WxPay.pub.config.php中

const APPID = 'wx8888888888888888';//公众号开发者中心,肯定都知道

const MCHID = '1888888789';//收到审核通过的邮件时里面的微信支付商户号,现在是10位,之前是8位吧

const KEY = '48888888888888888888888888888886';//商户支付密钥,即我们上一篇中所拿到的API密钥

const APPSECRET = '48888888888888888888888888888887';//公众号开发者中心,肯定都知道

//这个主要是支付界面里判断是否获取到code的机制,若没获取到则会跳转授权页面进行获取,code是我们获取               access_token和openid的必要参数,当然,这里的access_token是说oauth授权中的访问令牌,是用来获取用户             信息的,并不是我们平时调用其他微信接口时必须的那个access_token

const JS_API_CALL_URL = 'http://www.xxxxxx.com/demo/js_api_call.php';

//证书路径,注意应该填写绝对路径,即从你的服务器根目录开始写,注意不能跨域,证书上一篇中我们也讲了怎           么到手

const SSLCERT_PATH = '/xxx/xxx/xxxx/WxPayPubHelper/cacert/apiclient_cert.pem';

const SSLKEY_PATH = '/xxx/xxx/xxxx/WxPayPubHelper/cacert/apiclient_key.pem';

//异步通知url,支付完成后微信服务器会异步推送支付结果,可以做更丰富的开发

const NOTIFY_URL = 'http://www.xxxxxx.com/demo/notify_url.php';

//本例程通过curl使用HTTP POST方法,此处可修改其超时时间,默认为30秒

const CURL_TIMEOUT = 30;


发起支付请求

支付请求的功能主要是在js_api_call.php中实现的

支付请求的步骤为:

1、通过oauth授权获取code,用code获取access_token,用access_token获取openid,想必大家都很了解啦

<?php
//=========步骤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();
	}

2、设置统一支付接口参数,订单号,交易描述,交易金额(注意交易金额以分为单位),并获取prepay_id

//=========步骤2:使用统一支付接口,获取prepay_id============
	//使用统一支付接口
	$unifiedOrder = new UnifiedOrder_pub();
	//设置统一支付接口参数
	//设置必填参数
	//appid已填,商户无需重复填写
	//mch_id已填,商户无需重复填写
	//noncestr已填,商户无需重复填写
	//spbill_create_ip已填,商户无需重复填写
	//sign已填,商户无需重复填写
	$unifiedOrder->setParameter("openid","$openid");//openid
	$unifiedOrder->setParameter("body","贡献一分钱");//商品描述
	$out_trade_no = date('YmdHis').time();//自定义订单号,此处仅作举例
	$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
        //获取prepay_id
	$prepay_id = $unifiedOrder->getPrepayId();

3、获取支付请求数据包,此时的$jsApiParameters已经是一个完整的支付数据包了,将填充到jsApiCall函数中,其实并不是你点支付才去生成数据包,而是你进入支付界面前他就已经生成了必要的参数包,大家做MVC化时注意这点。

$jsApiParameters = $jsApi->getParameters();

4、调用js发起支付请求,jsApiCall里已经填充好了jsApiParameters,官方demo里并没有给出支付结果返回状态的处理,这里我们详细给出

function jsApiCall() {	
	WeixinJSBridge.invoke(
		'getBrandWCPayRequest',
		<?php echo $jsApiParameters;?>,
		function(res){
			WeixinJSBridge.log(res.err_msg);
			switch (res.err_msg) {
			        //支付成功
				case 'get_brand_wcpay_request:ok':
                                   
				break;
				//支付取消
				case 'get_brand_wcpay_request:cancel':
				
				break;
				//支付失败
				case 'get_brand_wcpay_request:fail':
				
				break;
				default:
				break;
			}
		});
}

function callpay() {
	if (typeof WeixinJSBridge == "undefined") {
	        //添加监听事件,兼容写法,ms需要用attacheEvent
		if (document.addEventListener) {
			document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
		} else if (document.attachEvent) {
			document.attachEvent('WeixinJSBridgeReady', jsApiCall); 
			document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
		}
	} else {
	        //调用js请求
		jsApiCall();
	}
}

至于其他的功能我们就不在叙述了,为了提高用户体验你还可以加入收货地址共享组件,获取用户的收货地址自动填写,支付成功异步通知的功能等。

支付流程总结

网页授权获取code

code获取access_token

access_token获取openid

用openid联合预先设置好的相关参数组包获取prepay_id

最终组包成支付请求数据包,传递给jsApiCall函数里的数据位,等待页面调用

jsApiCall会获此次支付的返回状态,ok陈功,cancel取消,failed失败,根据对应的状态进行相关处理即可

友情提示:微信缓存较大,且必须在微信场景下做调试,只能一点点的alert数据好了,按步骤一步步的来,认真配置每一项参数,不会有很大问题。


相关问题:

1、package中的参数partner或prepay_id为空

    此问题较为普遍,据本人经验并不是哪里的参数错填漏填了,而是...你用的开发包有问题....微支付php demo有几版是有问题的,没办法获取prepay_id,你可以先试着更换成官方最新的demo包,文章里我提供的就是可以的,如果还不行那再检查下参数是不是错填漏填了,复制有没有多个空格什么的。

2、微支付V3版MVC化的简述

    发起支付请求1、2两部可放在C中,即获取openid和组装支付请求包,js部分放在V中,将C中组装的数据包传递给V中的jsApiCall即可,其他预配置项放在你的项目配置参数设置中即可。

© 著作权归作者所有

共有 人打赏支持
big_cat
粉丝 46
博文 189
码字总数 141724
作品 0
长宁
后端工程师
加载中

评论(3)

水牛叔叔
水牛叔叔
腾讯的文档的参数采用的驼峰命名,但是他们提供的demo却是下划线命名,我无法适从,搞晕了
big_cat
big_cat

引用来自“水牛叔叔”的评论

帮大忙了,谢谢
我觉得我写的还可以,但阅读量貌似很低啊.....
水牛叔叔
水牛叔叔
帮大忙了,谢谢
PHP学习路线图 最全PHP自学指南

对于广大零基础的PHP自学者,往往不知道如何系统的学习PHP,导致平白浪费了很多时间。本文将为大家带来最详细的php学习路线图,同时还会附上相应的权威教程,让广大PHP自学者少走许多弯路。 ...

W3Cschool小编 ⋅ 04/24 ⋅ 0

来,哥教你提升逼格——EventLoop

开门见山,提升逼格从EventLoop开始!!! 毋庸置疑,大家都很了解js是一门单线程语言,这也就说明JS无法进行多线程,但是JS中异步的功能完全可以模拟多线程,而且效果还杠杠滴。当然,如果想...

小浪哥 ⋅ 05/25 ⋅ 0

学java还是javascript好?哪个更有前途?

  对于哪种语言好这种问题,其实并没有固定的答案,最重要的还是 兴趣!兴趣!兴趣!重要的事情说三遍。无论做什么开发,永远要以兴趣来驱动自己学习。 先大致的说一下,Java学习是一个需要...

W3Cschool小编 ⋅ 04/23 ⋅ 0

学习前端开发,一段心路历程,这个世界根本没有速成的方法

在已经成功的为大家讲解了很多篇有关前端开发的技术文章之后,想跟每一位前端开发人员谈一谈学习前端开发的一些心得。本篇文章我就来给大家说一说我在学习前端开发过程中的一些经验,我把它们...

大数据大佬 ⋅ 06/08 ⋅ 0

高手问答第 199 期 — 不仅是前端,你还可以用 JavaScript 来构建物联网

OSCHINA 本期高手问答(2018 年 5 月 29 日 — 6 月 4 日)我们邀请到了李知周老师@李知周 和大家就关于使用 JavaScript 构建物联网方面的问题进行讨论。 李知周,曾在国际知名投资银行从事基于...

局长 ⋅ 05/28 ⋅ 0

从一道执行题,了解Node中JS执行机制

与浏览器环境有何不同 node环境和浏览器环境,表现出来的事件循环状态,大体表现一致 唯一不同的是: JS引擎存在 monitoring process 进程,会持续不断的检查主线程执行为空,一旦为空,就会...

COC马里奥 ⋅ 06/05 ⋅ 0

Facebook 正在重构 React Native,将重写大量底层

Facebook 五年前为 React Native 框架设计的原则,负面影响了与 JavaScript 代码的整合程度,也加大了某些特性的开发难度。因此 Facebook 现在准备对 React Native 架构进行重构,通过引入更...

局长 ⋅ 06/16 ⋅ 0

如何入门微信小游戏开发,有哪些学习资料?

开发微信小游戏并非难事 1.首先,微信小游戏的开发方法 可以看到微信游戏的开发方式 答主有一些COCOS的开发经验,于是这里我们主要探讨COCOS制作小游戏的方法 2.需要学习什么 JS(JavaScrip...

qq_40126542 ⋅ 05/05 ⋅ 0

React Native SDK for OSS

此文主要介绍 React Native SDK for OSS的方方面面,包括相关基本概念、项目背景、项目方案、环境搭建运行、使用姿势、注意事项等。文末的附件可运行Example Zip压缩包和针对新手的入门实用文...

zuozhao ⋅ 05/18 ⋅ 0

浏览器的event loop和node的event loop

1.什么是event loop event loops也就是事件循环,它是为了协调事件(event),用户交互(user interaction),脚本(script),渲染(rendering),网络(networking),用户代理(user agen...

金大光 ⋅ 05/27 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

HiSDP —— 高效的C++软件开发平台

目前阿里集团每天有近1000PB的数据是通过LogAgent采集的,为了让LogAgent做到资源占用节省和高效采集,背后是基于HiSDP去构建的。 缘由 当决定采用C++编程语言去开发一个软件时,紧接着所面临...

阿里云云栖社区 ⋅ 11分钟前 ⋅ 0

zookeeper-3.4.12 下载与安装教程

一、zookeeper下载地址 http://mirrors.hust.edu.cn/apache/zookeeper/ 二、启动教程 把压缩包放在指定目录下 第三: 进入 conf文件夹底下 zoo_sample.cfg 文件名改成 zoo.cfg 第四步: 进入b...

泉天下 ⋅ 12分钟前 ⋅ 0

Oracle 中文日期转换

SELECT TO_date('2011年11月11日', 'yy"年"mm"月"dd"日"') FROM DUAL; 1. Oracle无法识别中文格式,所以添加双引号。 2. 后面的格式是指字符串在转换前的格式,而不是指转换后的格式。...

江戸川 ⋅ 14分钟前 ⋅ 0

MySell:API Spring Boot

起步 类目 商品 订单

BeanHo ⋅ 16分钟前 ⋅ 0

Spring方法拦截器MethodInterceptor

参考资料 1、Spring方法拦截器MethodInterceptor 2、Sharding JDBC源码分析-JdbcMethodInvocation类的作用

哎小艾 ⋅ 19分钟前 ⋅ 0

正则表达式

元字符 元字符,又叫字符集,就是用一些特殊符号表示特定种类的字符或位置。 匹配字符 . 匹配除换行符以外的任意字符 \w 匹配字母或数字或下划线或汉字 \s 匹配任意的空白符 \d 匹配数字 匹配...

wangchen1999 ⋅ 19分钟前 ⋅ 0

数据库数据导入Elasticsearch案例分享

基于bboss持久层和bboss elasticsearch客户端实现数据库数据导入es案例分享(支持各种数据库和各种es版本) 1.案例对应的源码 https://gitee.com/bboss/bboss-elastic/blob/master/bboss-el...

bboss ⋅ 20分钟前 ⋅ 0

动手---sbt(2)

参考 https://blog.csdn.net/leishangwen/article/details/46225587 建立一个chisel_max目录,文件内容如后面所述,现在开始执行命令: joe@joe-Aspire-Z3730:/media/sdb4/download/scala$ c......

whoisliang ⋅ 27分钟前 ⋅ 0

纯js实现最简单的文件上传(后台使用MultipartFile)

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>XMLHttpRequest上传文件</title> <script type="text/javascript"> //图片上传 var xhr......

孟飞阳 ⋅ 32分钟前 ⋅ 0

iOS宇宙大战游戏、调试工具、各种动画、AR相册、相机图片编辑等源码

iOS精选源码 日期时间选择器,swift Space Battle 宇宙大战 SpriteKit游戏源码 LLDebugTool - 便捷的IOS调试工具(新增截屏功能) 相机扫描or长按识别二维码、FMDB、键盘动态高度、定位等 动画...

sunnyaigd ⋅ 33分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部