1、移动网页支付
- 支付宝开放平台中申创建移动网页应用；
- 前端比较省事
1、若后台返回的是form表单执行以下代码，每次用完及时销毁；
当然不想写承载页的还有其他方法调起支付，具体逻辑具体分析，根据不同的业务类型去变通比如：
const div = document.createElement('div');
div.innerHTML = (res.data); //res.data是返回的表单
document.body.appendChild(div);
document.forms.alipaysubmit.submit();
2、若直接就是自己前端拼接请求地址，需要自己封装请求(同样需要及时销毁，并且一定要在)
如：
that.formUrl = dataServerURL + '/painting/api/alipay?ordernum=' + res.ordernum + '&amount=' + that.payPrice
if(that.formUrl) {
const form = document.createElement('form');
form.action = that.formUrl;//此处form就是后台返回接收到的数据
form.method = 'post';//此处form就是后台返回接收到的数据
document.body.appendChild(form);
console.log('document.forms[0]');
console.log(document.forms[0]);
// alert(JSON.stringify(document.forms[0]));
document.forms[0].submit();
}
3.支付完成的回调地址、以及唤起支付宝的中转页面都是后台配置好的，前端只需要调后台接口即可；
4、PC网页与移动网页一样；
2、PC网页支付
3、混合APP支付
第一步：beecloud、以及支付宝开放平台，均申请了对应的应用，开通对应权限；
集成mui； 并且初始化mui.init(); 参考文章：mui Hello mui =》 beecloud
mui地址
第二步：1、使用beecloud支付：
2、引入对应的js
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/beecloud.js">
3、主要代码
<script type="text/javascript">
mui('.mui-content-padded').on('tap', '.pay', function() {
var channel_id = null;
switch (this.id) {
case 'alipay':
// 支付宝支付
channel_id = 'ALI_APP';
break;
case 'wxpay':
// 微信支付
channel_id = 'WX_APP';
break;
case 'UN_WEB':
// 银联支付
channel_id = 'UN_WEB';
break;
default:
break;
}
beecloudPay(channel_id);
document.getElementById("channel").innerHTML = channel_id;
document.getElementById("total_fee").innerHTML = document.getElementById('total').value;
document.getElementById("bill_no").innerHTML = beecloud.genBillNo();
})
function beecloudPay(bcChannel) {
//因DCloud尚未申请银联账号，故支付宝、微信使用的是DCloud的appid，银联暂时使用BeeCloud的appid，开发者这里无需判断，直接写一个appid即可；
var _appid = bcChannel == "UN_WEB" ? "c37d661d-7e61-49ea-96a5-68c34e83db3b":"44f01a13-965f-4b27-ba9f-da678b47f3f5"
/*
* 构建支付参数
*
* app_id: BeeCloud控制台上创建的APP的appid，必填
* title: 订单标题，32个字节，最长支持16个汉字；必填
* total_fee: 支付金额，以分为单位，大于0的整数，必填
* bill_no: 订单号，8~32位数字和/或字母组合,确保在商户系统中唯一，必填
* optional: 扩展参数,可以传入任意数量的key/value对来补充对业务逻辑的需求;此参数会在webhook回调中返回; 选填
* bill_timeout: 订单失效时间,必须为非零正整数，单位为秒，必须大于360。选填
*/
var payData = {
app_id: 'a8d42122-1664-452d-a40b-11f2b81d48c1',
channel: bcChannel,
title: "DCloud项目捐赠",
total_fee: document.getElementById('total').value * 100,
bill_no: beecloud.genBillNo(),
optional: {
'uerId': 'beecloud',
'phone': '4006280728'
},
bill_timeout: 360,
return_url: "http://www.dcloud.io/demo/pay" //wap支付成功后的回跳地址
};
/*
* 发起支付
* payData: 支付参数
* cbsuccess: 支付成功回调
* cberror: 支付失败回调
*/
beecloud.payReq(payData, function(result) {
document.getElementById("status").innerHTML = 'success';
document.getElementById("status").style.color = 'green'
document.getElementById("status_msg").innerHTML = "-------- 支付成功 --------" + "\n感谢您的支持,我们会继续努力完善产品";
console.log(result);
}, function(e) {
document.getElementById("status").innerHTML = 'failed';
document.getElementById("status").style.color = 'red'
document.getElementById("status_msg").innerHTML = "-------- 支付失败 --------\n" + "错误码：" + e.code + '\n' + e.message;
});
}
</script>
第三步：1、使用原生支付宝支付：
支付宝开放平台创建了 移动应用app
集成mui 参考文档： mui H5+ payment
2、引入需要的js 参考文章 mui H5+ => payment
<script type="text/javascript" src="../js/common.js"></script>
3、初始化mui 并且所有的mui方法一定要在
// 一定要在plusRready中执行 vue在 mounted中执行；
mui.plusReady(() => {
that.plusReadyFun();
})
4、相关代码 （同时支持唤起微信支付）
<script type="text/javascript">
// 支付通道对应的对象（手机中所有支持的支付通道）
// 存储信息如：{'id':'alipay', 'description':'支付宝', 'serviceReady': 'true'}
var pays={}; **这个必须有**
function plusReady(){
// 获取支付通道
plus.payment.getChannels(function(channels){
for(var i in channels){
var channel=channels[i];
if(channel.id=='qhpay'||channel.id=='qihoo'){ // 过滤掉不支持的支付通道：暂不支持360相关支付
continue;
}
pays[channel.id]=channel;
checkServices(channel);
}
},function(e){
outLine('获取支付通道失败：'+e.message);
});
}
//
document.addEventListener('plusready', plusReady, false);
// 检测是否安装支付服务
function checkServices(pc){
if(!pc.serviceReady){
var txt=null;
switch(pc.id){
case 'alipay':
txt='检测到系统未安装“支付宝快捷支付服务”，无法完成支付操作，是否立即安装？';
break;
default:
txt='系统未安装“'+pc.description+'”服务，无法完成支付，是否立即安装？';
break;
}
plus.nativeUI.confirm(txt, function(e){
if(e.index==0){
pc.installService();
}
}, pc.description);
}
}
var w=null;
/**
@param [String] PAYSERVER:后台提供的请求路径
*/
var PAYSERVER='http://demo.dcloud.net.cn/payment/?payid=';
// 支付
function pay(id){
if(w){return;}//检查是否请求订单中
if(id==='appleiap'){
outSet('应用内支付');
clicked('payment_iap.html');
return;
}
outSet('----- 请求支付 -----');
var url=PAYSERVER;
/**
mui中固定参数： alipay：支付宝 wxpay：微信支付
*/
if(id=='alipay'||id=='wxpay'){
url+=id;
}else{
plus.nativeUI.alert('当前环境不支持此支付通道！', null, '捐赠');
return;
}
var appid=plus.runtime.appid;
// appid:不是申请支付平台生成的appid；而是HBuilder打包时自动生成的appid；
if(navigator.userAgent.indexOf('StreamApp')>=0){
appid='Stream';
}
url+='&appid='+appid+'&total=';
w=plus.nativeUI.showWaiting();
// 请求支付订单
// amount: 将要支付的金额精确到小数点后两位，元为单位；
var amount = document.getElementById('total').value;
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
switch(xhr.readyState){
case 4:
w.close();w=null;
if(xhr.status==200){
outLine('----- 请求订单成功 -----');
outLine(xhr.responseText);
var order=xhr.responseText;
plus.payment.request(pays[id],order,function(result){
outLine('----- 支付成功 回调 -----');
outLine(JSON.stringify(result));
plus.nativeUI.alert('支付成功：',function(){
back();
},'捐赠');
},function(e){
outLine('----- 支付失败 回调 -----');
outLine('['+e.code+']：'+e.message);
plus.nativeUI.alert('更多错误信息请参考支付(Payment)规范文档：http://www.html5plus.org/#specification#/specification/Payment.html', null, '支付失败：'+e.code);
});
}else{
outLine('----- 请求订单失败 -----');
outLine( xhr.status );
plus.nativeUI.alert('获取订单信息失败！', null, '捐赠');
}
break;
default:
break;
}
}
xhr.open('GET',url+amount);
outLine('请求支付订单：'+url+amount);
xhr.send();
}
</script>
