众圈小程序

1. 开通支付

如果小程序需要集成统一聚合支付，则需要在小程序商户平台进行支付签约。

2. 小程序支付流程

小程序支付流程图

2.1 创建支付通信通道

小程序与收银台之间通信，需要创建一个专属的通信通道，可通过以下方式创建

const payChannel = new BroadcastChannel('sysPayChannel')
payChannel.onmessage = function (e) {
  console.log("origin: " + JSON.stringify(e));
}

参见： BroadcastChannel

2.2 拉起收银台

拉起收银台，小程序在创建订单前，需要拉起收银台获取支付渠道及支付令牌。必须传递通信通道名、订单标题、订单金额。

示例代码

var sys = weex.requireModule('sys');
sys.pay({
	'orderDesc': '这是一个测试订单1',
	'totalAmount': 1,
	'channelName': 'sysPayChannel'
}, (ret) => {
	if(!ret.ok) {
		modal.toast({message: "参数非法, orderDesc, totalAmount, channelName必填"});
	}
});

参见： sys模块

2.3 收银台创建通信通道

拉起收银台后，收银台会根据小程序传递的通信通道名，建立同名的BroadcastChannel，并展示支持的支付渠道供用户选择。

2.4 返回支付渠道、支付令牌

用户在收银台选择完支付渠道，点击收银台中的确认支付按钮后，会通过通信通道通知小程序。

消息参数：

  • cmd：固定值payChannelSelected
  • channel：支付渠道
    • wx.appPreOrder：表示微信
    • trade.precreate：表示支付宝
    • uac.appOrder：表示云闪付
    • applepay.order：表示ApplePay
  • paytoken： 支付令牌，创建订单时，需要传给小程序开放平台，令牌校验失败则会拒绝本次交易

传递内容示例

payChannel.postMessage({
	'cmd': 'payChannelSelected',
	'channel': 'wx.appPreOrder',
	'paytoken': '_ROVplmq8J0hdiF2FjtexbVS-N2zA0S_TvZjqkmEV4vea_GKyMewutD4xwkExVZXDFqGMqhZm9cq76ITSayJYPoFgvxdUrgBdLfUqBQANGtaDTvem8Rs31Jum-BTe7-Y'
});

2.5 创建订单

小程序在接收到收银台的支付渠道及支付令牌后，则调用自己的订单系统进行下单，订单系统需要向小程序开放平台下单，然后将订单信息通过通信通道返回给收银台

接收收银台消息示例

payChannel.onmessage = function (e) {
	console.log("origin: " + JSON.stringify(e));

	let data = e.data;
	if('payChannelSelected' == data['cmd']) {
		// 支付渠道选择完成，去下单
		// sample code
		this.onPayChannelSelected(data['channel'], data['paytoken']);
	}
}

2.6 传递订单信息至收银台

小程序下单成功后，将订单信息传递给收银台

消息参数：

  • cmd：固定值orderCreated
  • result：success表示下单成功，fail表示下单失败
  • channel：支付渠道
    • wx.appPreOrder：表示微信
    • trade.precreate：表示支付宝
    • uac.appOrder：表示云闪付
    • applepay.order：表示ApplePay
  • appPayRequest： 订单信息中的appPayRequest，当result为success时存在
  • message：当result为fail时，用于告之收银台错误描述

传递内容示例

// 云闪付或AndroidPay订单
payChannel.postMessage({
	'cmd': 'orderCreated',
	'result': 'success',
	'channel': 'uac.appOrder',
	'appPayRequest': {
		"tn":"747349220915532638217"
	}
});

2.7 跳转支付

收银台在接收到订单信息后，进行处理后，跳转到相应的支付渠道，由用户完成付款。

2.8 用户选择是否完成支付

由于收银台无法通过回调确定支付结果，故需要小程序自己通过订单查询接口确认支付结果。用户完成支付后，跳转回收银台，会弹出对话框，让用户选择是否完成支付。

2.9 传递用户选择结果、关闭收银台

用户选择后，收银台会通知小程序

消息参数：

  • cmd：固定值payEnd
  • errorCode：success表示已完成付款，cancel表示付款遇到问题

传递内容示例

payChannel.postMessage({
	'cmd': 'payEnd',
	'errorCode': 'success'
});

小程序接收到结果后，建议进行如下处理：

  • success：已完成付款，查询一次，如果结果为失败也需要跳转结果页，让用户可以主动查询结果，结果确认主动权交于用户
  • cancel：付款遇到问题，至少查询一次支付结果，决定跳转逻辑

3. 错误处理

收银台，如果发生错误时，会通知小程序

消息参数：

  • cmd：固定值onError
  • errorCode：
    • cancel：用户主动取消
    • generate pay token failed：生成支付令牌失败
    • connect broadcast channel failed：建立支付通道失败
    • channel unsupport：暂不支持此支付渠道
    • illegal channel：非法的支付渠道
    • app not installed：根据支付渠道，提醒用户安装对应APP
    • start wxmp error：跳转支付失败
    • get pay channel failed: 获取支付渠道失败
  • errorMessage：错误描述

传递内容示例

payChannel.postMessage({
	'cmd': 'onError',
	'channel': '',
	'errorCode': 'cancel',
	'errorMessage': '交易取消'
});

4. Demo

参见： 聚合支付 Demo

← 开放平台API →