发起支付（JS） - 微擎二次开发手册、文档、教程

发起支付（JS版）

在PHP中发起支付时，粉丝在支付时界面会跳转至系统的收银台界面中（PHP版中文末的图），对于希望能在当前页面直接处理的开发者，微擎提供了利用JS发起支付的方式，该方式如果是微信支付会直接在当前页面中支付，如果是百度钱包、支付宝其它支付则会直接跳转至支付方进行支付。

util.pay(option)

option 参数列表

名称	类型	说明
orderFee	decimal	要支付的金额
payMethod	string	发起的支付类型，分别为微信支付（wechat）、百度钱包（baifubao）、支付宝（alipay）、银联支付（unionpay）
orderTitle	string	支付标题
orderTid	string	充值模块中的订单号，此号码用于业务模块中区分订单，保证在业务中是唯一即可
goodsTag	string	订单优惠标记（代金券标识）
module	string	发起支付的模块，支付成功后会通知该模块
success	string	支付成功回调函数
fail	string	支付失败时回调函数
complete	string	支付完成（成功和失败）时回调函数

注意：orderTid 业务订单号此值，在调用util.pay方法之前应当先ajax请求一个订单号，然后再发起支付。

示例

<button type="button" class="mui-btn mui-btn-block mui-disabled js-wechat-pay">微信支付（加载中）</button>
<button type="button" onclick="dopayBaidu()" class="mui-btn mui-btn-block">百度钱包</button>

<script type="text/javascript">

//发起微信支付，微信支付依赖于 WeixinJSBridge 组件，所以发起时应该在ready事件中进行
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
	$('.js-wechat-pay').removeClass('mui-disabled');
	$('.js-wechat-pay').click(function(){
    	//先通过AJAX获取最新的订单号
    	$.getJSON("xxxx.php", function(data, status){
			if(status == 'success'){
				util.pay({
					orderFee : data.fee,
					payMethod : 'wechat',
					orderTitle : '充值' + data.fee + '元',
					orderTid : data.ordertid,
					goodsTag : data.goodsTag,
					module : 'recharge',
					success : function(result) {
						alert('支付成功');
					},
                    fail : function(result) {
                        alert('fail : ' + result.message);
                    },
					complete : function(result) {
						location.reload();
					}
				});
			}
		});
	});
	$('.js-wechat-pay').html('微信支付');
});

//百度钱包和其它支付则无浏览器组件要求，可直接使用
function dopayBaidu() {
		util.pay({
			orderFee : 0.01,
			payMethod : 'baifubao',
			orderTitle : '充值10元',
			orderTid : 1234567104,
			module : 'recharge',
			success : function(res) {
				alert('支付成功');
			},
			fail : function(result) {
				alert('fail : ' + result.message);
			},
			complete : function(result) {
				alert('complete : ' + result.message);
			}
		});
}
</script>

效果如下: