JS API微支付的开发-开发阶段
博客专区 > big_cat 的博客 > 博客详情
JS API微支付的开发-开发阶段
big_cat 发表于3年前
JS API微支付的开发-开发阶段
  • 发表于 3年前
  • 阅读 175
  • 收藏 4
  • 点赞 0
  • 评论 3

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: 微支付的开发阶段,在我们获得支付申请审核通过的邮件后,去商户平台设置好个参数,拿到API证书和API密钥后,进行下面的集成开发

前期: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即可,其他预配置项放在你的项目配置参数设置中即可。

共有 人打赏支持
粉丝 46
博文 178
码字总数 132310
评论 (3)
水牛叔叔
帮大忙了,谢谢
big_cat

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

帮大忙了,谢谢
我觉得我写的还可以,但阅读量貌似很低啊.....
水牛叔叔
腾讯的文档的参数采用的驼峰命名,但是他们提供的demo却是下划线命名,我无法适从,搞晕了
×
big_cat
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: