H5游戏前端⽀付参考处理⽅案⽀付⽂档
该⽂档⽤作前端处理H5游戏⽀付参考⽂档，游戏引擎为egret
H5游戏⽀付不同于web⽀付，H5只有单界⾯，不能通过路由寻址的⽅式跳转到对应的游戏界⾯
因此，在⽀付中需要注意要在不打断游戏进程的情况下完成⽀付拉起，这个时候需要对⽀付流程
做特殊处理，不展⽰各平台的⽹关页⾯，⽽是从中抽取能够拉起⽀付的deeplink,
通过iframe来进⾏重定向，从⽽实现拉起，注意的是不同的平台，对不同的设备，在处理上有差异
需要单独做差异化的处理
⽀付流程（⼤概）
客户端服务端商户平台⽀付平台
发起订单----------------------------->-------------->统⼀下单
订单记录<-----------订单信息<--------
获取订单数据<-------------------------
订单数据差异化处理
拉起⽀付-----------------------------------------------
⽀付结果通知<-----处理⽀付结果<-----⽀付结果重定向---------
⽀付结果处理
⼿机运⾏平台分类（暂不包括native端）
PC
WEB_ANDROID
WEB_IOS
WEB_ANDROID_WECHAT
WEB_IOS_WECHAT
⽀付
差异化处理（关于部分特殊浏览器的⽀付处理⽅案，在特殊问题中描述）：
PC
展⽰⽀付⼆维码
WEB_ANDROID
抽取deepLink，iframe展⽰，具体见**deeplink抽取**
WEB_IOS
抽取deepLink，window.location.href替换，具体见**deeplink抽取**
WEB_ANDROID_WECHAT
WEB_IOS_WECHAT
接通jsspi，通过进⾏⽀付
⽀付宝⽀付
差异化处理（关于部分特殊浏览器的⽀付处理⽅案，在特殊问题中描述）
PC
展⽰⽀付⼆维码
WEB_ANDROID
抽取deepLink，iframe展⽰，具体见**deeplink抽取**
WEB_IOS
抽取deepLink，window.location.href替换，具体见**deeplink抽取**
WEB_ANDROID_WECHAT
WEB_IOS_WECHAT
待定
deepLink抽取
需要抽取deeplink的部分，平台返回的数据为的⽹关页⽂本，核⼼内容为
<script type="text/javascript">
var is_postmsg="";
if( 0!==0 && is_postmsg=="1" )
{
parent.postMessage(JSON.stringify({
action : "send_deeplink_fail",
data : {
deeplink : ""
},
error : {
error_code : "0",
error_msg : "ok"
}
}), "");
}
if( 0===0)
{
{
/
/ var fp=new Fingerprint2();
// fp.get(function(result)
{
// var fingerprint="";
/* if(fingerprint!=result && fingerprint)
{
<div class="text_area"> \
<h2 id="111" class="title"> '+result+'缃戠粶鐜 鏈 兘閫氳繃瀹⼢叏楠岃瘉锛岃 绋嶅悗鍐嶈瘯</h2> \
</div>';
return;
}*/
var is_postmsg="";
if(is_postmsg=="1")
{
parent.postMessage(JSON.stringify({
action : "send_deeplink",
data : {
deeplink : "weixin://wap/pay?prepayid%3Dwx18124723988137f5141f245333fe250000&package=1371992231&noncestr=16004044 44&sign=a733c49509892bfc49cfd6299d9a87c3"
}
}), "");
}
else
{
var url="weixin://wap/pay?prepayid%3Dwx18124723988137f5141f245333fe250000&package=1371992231&noncestr=1600404444&sign =a733c49509892bfc49cfd6299d9a87c3";
var redirect_url="";
;
if(redirect_url)
{
setTimeout(
function(){
;
},
5000
);
}
else
{
setTimeout(
function(){
window.history.back();
},
5000);
}
}
}
// );
}
}
</script>
</body>
</html>
处理⽅案为：
```
private handleH5Response(response: PayParam) {
let data = response.Parameters;
let lines = data.split('\n');
for (let line of lines) {
if (line != "" && line.indexOf('deeplink') != -1 && line.indexOf('weixin://wap/pay') != -1) {
let index = line.indexOf(":");
line = line.slice(index + 1, line.length)
line = line.split(`"`)[1]
line = line.split(`"`)[0]
return line;
}
}
return undefined;
}
```
⽀付宝
⽀付宝⽀付会返回⼀个表单，需要把表单提交转化成post请求来获取到⽹关页，具体为:
```
let url = `openapi.alipay/gateway.do?charset=UTF-8`;
let xhr = new XMLHttpRequest()
xhr.open('post', url);
if (adyState == 4) {
if (xhr.status == 200) {
//⽤iframe打开
this.sponse);
}
}
}
let fd = new FormData();
//这⼀步是解析表单⾥⾯的数据，把参数解析出来
let datas = data.split("<input");
for (let i = 1; i < datas.length - 1; i++) {
let params = datas[i].split("/>")[0];
params = params.split(" type='hidden'")[1]
let values = params.split(" value=")
let names = values[0]
let value = values[1]
let name = names.split(" name=")[1]
name = im().slice(1, name.length - 1)
value = im().slice(1, value.length - 1)
fd.append(name, value);
}
xhr.send(fd);
```
其中，openIframe的部分实际包括两个部分
抽取deepLink以及差异化展⽰
本节重点是抽取deeplink
通过post请求返回的页⾯⽂本核⼼内容为
```
(function(){
var _AP = {}
var ua = LowerCase(),
locked = false,
domLoaded = adyState==='complete',
delayToRun;
function customClickEvent() {
var clickEvt;
if (window.CustomEvent) {
clickEvt = new window.CustomEvent('click', {
canBubble: true,
cancelable: true
});
} else {
clickEvt = ateEvent('Event');
clickEvt.initEvent('click', true, true);
}
return clickEvt;
}
function getAndroidVersion() {
var match = ua.match(/android\s([0-9\.]*)/);
return match ? match[1] : false;
}
var noIntentTest = /aliapp|360 aphone|weibo|windvane|ucbrowser/.test(ua); var hasIntentTest = /chrome|samsung/.test(ua);
var isAndroid = /android|adr/.test(ua) && !(/windows phone/.test(ua));
var canIntent = !noIntentTest && hasIntentTest && isAndroid;
var clientBtn
// 确定浏览器类型
var isChrome = false;
var isWebview = false;
if (ua.match(/(?:chrome|crios)\/([\d\.]+)/)) {
isChrome = true;
if (ua.match(/version\/[\d+\.]+\s*chrome/)) {
isWebview = true;
}
}
var isOriginalChrome = isAndroid && isChrome && !isWebview;
if (ua.indexOf('m353')>-1 && !noIntentTest) {
canIntent = false;
}
// 安卓⾛iframe⽅式唤起
if (ua.indexOf('android')>-1 && !noIntentTest) {
canIntent = false;
}
/**
* open client
*/
_AP.open = function (params) {
if (!domLoaded && (ua.indexOf('360 aphone')>-1 || canIntent)) {
var arg = arguments;
delayToRun = function () {
delayToRun = function () {
_AP.open.apply(null, arg);
delayToRun = null;
};
return;
javascript游戏引擎}
if (locked) {
return;
}
locked = true;
var o;
if (typeof params === 'object') {
o = {
'ios': encodeURIComponent(JSON.stringify(params)),
'android': encodeURIComponent(params.dataString)
};
} else {
<('params error, pls use JSON format!')
}
/
/ params fault tolerance
if (typeof o.ios !== 'string') {
o.ios = '';
} else if(typeof o.android !== 'string') {
o.android = '';
}
// nonsupport Android intent
if (!canIntent) {
if(isAndroid) {
var alipaysUrl = 'alipays://platformapi/startApp?appId=20000125&orderSuffix=' + o.android +'#Intent;scheme=alipays;android.Al ipayGphone;end';
}
//fix for iOS QQ browser
else if (ua.indexOf('mqqbrowser') > -1) {
var alipaysUrl = 'alipay://alipayclient/?' + o.android;
}
else {
var alipaysUrl = 'alipay://alipayclient/?' + o.ios;
}
//FIXME: 直接判断ios，不判断os版本号
if ( ua.indexOf('qq/') > -1 || ( ua.indexOf('safari') > -1 && ua.indexOf('os 9_') > -1 ) || ( ua.indexOf('safari') > -1 && ua.indexOf('os 10_') > -1 ) || ( ua.i ndexOf('safari') > -1 && ua.indexOf('os 11_') > -1 ) || ( ua.indexOf('safari') > -1 && ua.indexOf('os 12_') > -1 ) || ( ua.indexOf('safari') > -1 && ua.indexOf('os 13_') > -1 ) || ( ua.indexOf('safari') > -1 && ua.indexOf('os 14_') > -1 ) ) {
var openSchemeLink = ElementById('openSchemeLink');
if (!openSchemeLink) {
openSchemeLink = ateElement('a');
openSchemeLink.id = 'openSchemeLink';
openSchemeLink.style.display = 'none';
document.body.appendChild(openSchemeLink);
}
//openSchemeLink.href = alipaysUrl;
// oppo浏览器兼容写法
window.location.href = alipaysUrl;
};
// trigger click
openSchemeLink.dispatchEvent(customClickEvent());
}
else {
var ifr = ateElement('iframe');
ifr.src = alipaysUrl;
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论