apicloud含有微信支付。支付宝支付和苹果内购的代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> <title>我的余额</title> <link rel="stylesheet" type="text/css" href="../css/api.css"/> <link rel="stylesheet" type="text/css" href="../css/mui.min.css"/> <link rel="stylesheet" href="../css/aui.css"/> <link rel="stylesheet" type="text/css" href="../css/app.css"/> <link href="../css/style.css" rel="stylesheet"/> <link rel="stylesheet" href="../css/user_balance.css"/> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-icon mui-icon-left-nav mui-pull-left" onclick="api.closeWin()"></a> <h1 class="mui-title">我的余额</h1> <a class="mui-pull-right detail" onclick="goPage('balance_detail')">明细</a> </header> <div class="aui-content"> <div class="top"> <p class="my-num"> {{myBalance}} </p> <p class="num-text"> 学习币 </p> </div> <div class="con aui-margin-t-10 aui-padded-15"> <div class="con-tit aui-margin-b-10"> 充值 </div> <ul class="recharge-list flex"> <li :recharge-num="item.Price" :recharge-id="item.IapProductId" v-for="item in mealCoin"> <p class="list-name"> {{item.PriceInt}}学习币 </p> <p class="money"> ￥{{item.Price}} </p> </li> <!--<li>--> <!--<p class="list-name">手动输入</p>--> <!--<p class="money" v-if="custom">￥{{rechargeNum}}</p>--> <!--<p class="money" v-else="custom"> </p>--> <!--</li>--> </ul> </div> <div class="bot aui-padded-t-10 aui-padded-l-15 aui-padded-r-15 aui-padded-b-5"> <div class="bot-tit aui-margin-b-10"> 充值说明 </div> <p> 1、充值后可用于直接购买App内虚拟内容，比如课程、电子书。 </p> <p> 2、充值后不能在非ios设备使用，充值请参考 <a href="#">充值流程说明</a>。 </p> <p> 3、充值后没有使用期限，无法提现退款或转赠他人。 </p> <p> 4、如遇无法充值、充值失败问题，可关注“8分钟创伤服务号”联系我们。 </p> </div> <div class="operation"> <!--<div id="exchange-btn" class="aui-btn aui-btn-warning aui-margin-l-10">兑换码</div>--> <div id="invoice-switch" class="aui-padded-l-15 aui-padded-r-15 flex"> <p class="switch-text"> 索要发票 </p> <p> <input id="invoice" type="checkbox" class="aui-switch"> </p> </div> </div> <div id="recharge" class="aui-btn aui-btn-block aui-btn-warning aui-margin-15"> 立即充值 </div> <div class="aui-mask aui-mask-in"></div> <div id="pay-box"> <p class="pay-tit"> 选择支付 </p> <p class="money"> ￥{{rechargeNum}} </p> <ul> <li class="pay-item flex" v-if="wxpay==true"> <div class="pay-l flex aui-margin-l-15"> <div class="pay-icon"><img src="../image/share/wx-pay.png" alt=""> </div> <p class="pay-text"> 微信 </p> </div> <div class="pay-r aui-margin-r-15"> <input class="aui-radio" type="radio" value="wxpay" name="payType" checked> </div> </li> <li class="pay-item flex" v-if="alipay==true"> <div class="pay-l flex aui-margin-l-15"> <div class="pay-icon"><img src="../image/share/zfb-pay.png" alt=""> </div> <p class="pay-text"> 支付宝 </p> </div> <div class="pay-r aui-margin-r-15"> <input class="aui-radio" type="radio" value="alipay" name="payType"> </div> </li> <li class="pay-item flex" v-if="iap==true"> <div class="pay-l flex aui-margin-l-15"> <div class="pay-icon"><img src="../image/share/ios.jpg" alt=""> </div> <p class="pay-text"> 苹果内购 </p> </div> <div class="pay-r aui-margin-r-15"> <input class="aui-radio" type="radio" value="iap" name="payType"> </div> </li> <li class="pay-item flex" v-if="exchange==true"> <div class="pay-l flex aui-margin-l-15"> <div class="pay-icon"><img src="../image/share/exchange.png" alt=""> </div> <p class="pay-text"> 兑换码 </p> </div> <div class="pay-r aui-margin-r-15"> <input class="aui-radio" type="radio" value="exchange" name="payType"> </div> </li> </ul> <div id="pay" class="aui-btn aui-padded-t-5 aui-padded-b-5 aui-margin-b-10 aui-btn-warning" onclick="subOrder(this)"> 立即支付 </div> </div> <!--填写发票信息--> <div id="invoice-box"> <div class="invoice-list flex"> <div class="list-label"> 发票类型 </div> <div class="list-input"> <select id="invoiceType"> <option value="咨询费">咨询费</option> <option value="会务费">会务费</option> <option value="信息服务费">信息服务费</option> </select> </div> </div> <div class="invoice-list flex"> <div class="list-label"> 发票抬头 </div> <div class="list-input"> <input type="text" id="invoiceHead" placeholder="请输入发票抬头"> </div> </div> <div class="invoice-list flex"> <div class="list-label"> 发票内容 </div> <div class="list-input"> <input type="text" id="invoiceCon" placeholder="请输入发票内容"> </div> </div> <div class="invoice-list flex"> <div class="list-label"> 收件人姓名 </div> <div class="list-input"> <input type="text" id="addressee" placeholder="请输入收件人姓名"> </div> </div> <div class="invoice-list flex"> <div class="list-label"> 收件人电话 </div> <div class="list-input"> <input type="text" id="AddresseePhone" placeholder="请输入收件人电话"> </div> </div> <div class="invoice-list flex"> <div class="list-label"> 发票邮寄地址 </div> <div class="list-input"> <input type="text" id="invoiceAddress" placeholder="请输入邮寄地址"> </div> </div> <div class="invoice-list flex"> <div class="list-label"> 纳税人识别号 </div> <div class="list-input"> <input type="text" id="taxpayerNum" placeholder="请输入纳税人识别号"> </div> </div> <div class="invoice-btns aui-padded-b-15 flex"> <div class="aui-btn cannel"> 取消 </div> <div class="aui-btn ok"> 确定 </div> </div> </div> </div> </body> <script src="../script/api.js" type="text/javascript"></script> <script src="../script/mui.min.js" type="text/javascript"></script> <script src="../script/common.js" type="text/javascript"></script> <script src="../script/vue.min.js" type="text/javascript" charset="utf-8"></script> <script src="../script/jquery-1.11.2.min.js" type="text/javascript"></script> <script> var vm = new Vue({ el : ".aui-content", data : { myBalance : '', mealCoin : [], rechargeNum : 0, rechargeId : '', custom : false, systemType : '', iap : false, //苹果内购 wxpay : true, //微信支付 alipay : true, //支付宝支付 exchange : true,//兑换码兑换 } }); apiready = function() { api.ajax({ url : host + "/api/Coin/MyCoinValue", method : "get", headers : { "Authorization" : "Bearer " + token } }, function(ret, err) { if (ret) { if (ret.code == 200) { vm.myBalance = ret.res.data.myCoinValue.toFixed(2); } else { api.alert({ msg : JSON.stringify(ret.res.msg) }); } } else { if (err.body.code == "403") { api.openWin({ url : "user_login_win.html", name : "user_login_win", }) } else { api.alert({ //msg : JSON.stringify(err) msg : JSON.stringify("网络已断开") }); } } }); iosPay(); mealCoin(); }; $(".recharge-list").on("click", "li", function() { var i = $(this).index(); $(".recharge-list li").removeClass("li-active"); $(".recharge-list li").eq(i).addClass("li-active"); var num = $(this).attr('recharge-num'); var id = $(this).attr('recharge-id'); if (num) { vm.custom = false; vm.rechargeNum = num; vm.rechargeId = id; } else { api.prompt({ title : '自定义充值', msg : '请输入想要充值的金额', text : '', type : 'number', buttons : ['取消', '确定'], }, function(ret, err) { var index = ret.buttonIndex; var text = ret.text; if (text) { vm.rechargeNum = text; vm.custom = true; } }) } }); $("#recharge").on("click", function() { vm.systemType = api.systemType; $(".aui-mask").show(); $("#pay-box").show(); }); $("#invoice").on("change", function(e) { if ($(this).is(':checked')) { $(".aui-mask").show(); $("#invoice-box").show() } }); $(".cannel").on("click", function() { $(".aui-mask").hide(); $("#invoice-box").hide(); $("#invoice").prop("checked", false); }); $(".ok").on("click", function() { if (!$("#invoiceHead").val()) { api.toast({ msg : '发票抬头不能为空' }) return; } if (!$("#invoiceCon").val()) { api.toast({ msg : '发票内容不能为空' }) return; } if (!$("#addressee").val()) { api.toast({ msg : '收件人姓名不能为空' }) return; } if (!$("#AddresseePhone").val()) { api.toast({ msg : '收件人电话不能为空' }) return; } if (!$("#invoiceAddress").val()) { api.toast({ msg : '邮寄地址不能为空' }) return; } if (!$("#taxpayerNum").val()) { api.toast({ msg : '纳税人识别号不能为空' }) return; } $(".aui-mask").hide(); $("#invoice-box").hide(); }); $(".aui-mask").on("click", function() { $(".aui-mask").hide(); $("#pay-box").hide(); $("#invoice-box").hide(); $("#invoice").prop("checked", false); }); function goPage(page) { api.openWin({ url : page + ".html", name : page }) } function fillShow() { $("#invoice-con").show(); $("#invoice-con").animate({ top : "0", bottom : "0" }); } function fillHide() { $("#invoice-con").animate({ top : screenHeight, bottom : -screenHeight }, function() { $("#invoice").prop("checked", false); $("#invoice-con").hide(); }); } function subOrder(obj) { obj.disabled = true; var systemType = api.systemType; var payType = $("input[name='payType']:checked").val(); if (payType == 'exchange') { api.prompt({ msg : '请输入兑换码', buttons : ['取消', '确定'] }, function(ret, err) { var index = ret.buttonIndex; var text = ret.text; if (index == 2) { api.ajax({ url : host + "/api/ExchangeCode/Exchange?code=" + text, method : "post", headers : { "Authorization" : "Bearer " + token } }, function(ret, err) { if (ret) { if (ret.code == 200) { api.toast({ msg : ret.res.msg }); location.reload(); } else { api.toast({ msg : ret.res.msg }) } } else { if (err.body.code = "403") { api.openWin({ url : "user_login_win.html", name : "user_login_win", }) } else { api.alert({ //msg : JSON.stringify(err) msg : JSON.stringify("网络已断开") }); } } // alert(JSON.stringify(ret)); }) } }) } else { if (!vm.rechargeNum) { api.toast({ msg : '请选择充值套餐' }) return; } var payData = { body : {} }; payData.body.SystemType = systemType; payData.body.CoinValue = vm.rechargeNum; if ($("#invoice").is(":checked")) { payData.body.InvoiceType = $("#invoiceType").val(); payData.body.InvoiceTitle = $("#invoiceHead").val(); payData.body.InvoiceContent = $("#invoiceCon").val(); payData.body.UserName = $("#addressee").val(); payData.body.UserMobile = $("#AddresseePhone").val(); payData.body.UserAddress = $("#invoiceAddress").val(); payData.body.TaxpayerCode = $("#taxpayerNum").val(); } if (payType == 'wxpay') { // 获取配置 api.ajax({ url : host + '/api/Orders/WxPayUnifiedOrder', method : 'post', headers : { 'Content-Type' : 'application/json;charset=utf-8', 'Authorization' : 'Bearer ' + token }, data : payData }, function(ret, err) { if (ret) { if (ret.Status == 'success') { var wxPay = api.require('wxPay'); var data = JSON.parse(ret.PayData); wxPay.payOrder({ apiKey : data.appId, orderId : data.prepayId, mchId : data.partnerId, nonceStr : data.nonceStr, timeStamp : data.timeStamp, package : 'Sign=WXPay', sign : data.sign }, function(ret, err) { if (ret.status) { alert("支付成功!"); } else { alert("订单支付失败"); } api.closeToWin({ name : 'root' }); obj.disabled = false; }); } } else { api.alert({ msg : JSON.stringify("发起支付失败") }); obj.disabled = false; } }); } else if (payType == 'alipay') { api.ajax({ url : host + '/api/Orders/AliPayUnifiedOrder', method : 'post', headers : { 'Content-Type' : 'application/json;charset=utf-8', 'Authorization' : 'Bearer ' + token }, data : payData }, function(ret, err) { if (ret) { if (ret.Status == 'success') { var aliPayPlus = api.require('aliPayPlus'); var data = ret.PayData aliPayPlus.payOrder({ orderInfo : data.replace(/\"/g, "\'") }, function(ret, err) { if (ret.code == "9000") { alert('支付成功'); } else if (ret.code == "8000") { alert('正在处理中...'); } else if (ret.code == "4000") { alert('支付失败'); } else if (ret.code == "5000") { alert('重复请求'); } else if (ret.code == "6001") { alert('取消支付'); } else if (ret.code == "6002") { alert('网络连接出错'); } else if (ret.code == "6004") { alert('支付结果未知（有可能已经支付成功），请查询商户订单列表中订单的支付状态'); } api.closeToWin({ name : 'root' }); }) } } else { api.alert({ msg : JSON.stringify("发起支付失败") }); api.closeToWin({ name : 'root' }); obj.disabled = false; } }) } else if (payType == 'iap') { var iap = api.require('iap'); //alert(vm.rechargeId) iap.purchase({ productId : vm.rechargeId }, function(ret, err) { if (ret) { //alert(JSON.stringify(ret)); if (ret.state == 1) { api.ajax({ url : host + '/api/Orders/IapNotify', method : 'post', headers : { 'Content-Type' : 'application/json;charset=utf-8', 'Authorization' : 'Bearer ' + token }, data : { body : { IapProductId : ret.productId, TransactionId : ret.transactionId, Receipt : ret.receipt, } } }, function(ret, err) { if (ret) { if (ret.code == 200) { api.alert({ msg : JSON.stringify(ret.res.msg) }); api.closeToWin({ name : 'root' }); } else { api.alert({ msg : JSON.stringify(ret.res.msg) }); } api.closeToWin({ name : 'root' }); } else { if (err.body.code = "403") { api.openWin({ url : "user_login_win.html", name : "user_login_win", }) } else { api.alert({ //msg : JSON.stringify(err) msg : JSON.stringify("网络已断开") }); } } }) } } else { alert("苹果内购发起失败"); //alert(JSON.stringify(err)); } }); } else { alert("请选择支付方式"); } } } function iosPay() { api.ajax({ url : host + '/api/AppConfig/AppConfig', method : 'get', headers : { 'Content-Type' : 'application/json;charset=utf-8', 'Authorization' : 'Bearer ' + token } }, function(ret, err) { if (ret) { if (ret.code == 200) { if (ret.res.data.model.IsAppleAudit && api.systemType == "ios") { vm.iap = true; vm.wxpay = false; vm.alipay = false; vm.exchange = false; } } } else { api.alert({ msg : JSON.stringify("发起支付失败") }); obj.disabled = false; } }) } function mealCoin() { api.ajax({ url : host + '/api/Coin/MyCoinValue', method : 'get', headers : { 'Content-Type' : 'application/json;charset=utf-8', 'Authorization' : 'Bearer ' + token } }, function(ret, err) { if (ret) { if (ret.code == 200) { vm.mealCoin = ret.res.data.iapProductList; } else { api.alert({ msg : JSON.stringify(ret.res.msg) }); } } else { if (err.body.code = "403") { api.openWin({ url : "user_login_win.html", name : "user_login_win", }) } else { api.alert({ //msg : JSON.stringify(err) msg : JSON.stringify("网络已断开") }); } } }) } </script> </html>