公众号从授权到支付开发"/>
微信公众号从授权到支付开发
//第一步授权配置
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>授权</title></head><body><script>window.onload = function() {window.location.href = "请求后台配置好的授权接口?returnUrl=授权成功想让用户看到的回调页面";}</script></body></html>//第二步掉起微信支付
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>掉起支付</title><link rel="stylesheet" href="css/mui.css" /></head><style>* {margin: 0 auto;padding: 0;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif}.pages {padding-top: 20px;}.conts {position: relative;margin: 0 auto;width: 90%;background: #fff;margin-bottom: 20px;padding-bottom: 30px;box-shadow: 0px 0px 2px 2px #f5f5f5;border-radius: 8px;}.cont-head {position: relative;width: 100%;height: 50px;line-height: 50px;border-bottom: 0.5px solid #ddd}.cont-head-block {width: 10px;height: 10px;position: relative;display: inline-block;left: 20px;border-radius: 50%;border: 0.5px solid #ddd;}.cont-head-title {position: absolute;left: 5%;width: 150px;color: #736D8C;}.cont-head-money {position: absolute;right: 20px;font-size: 14px;color: #2B3D44;}.cont-title-view {position: relative;width: 100%;height: 30px;font-size: 13px;padding: 0px 18px;line-height: 30px;}.cont-title-views {position: relative;width: 100%;height: 20px;font-size: 13px;line-height: 20px;margin: 10px 0px;}.cont-title-left {position: absolute;left: 5%;height:20px;font-size: 13px;color: #717171;}.cont-title-right {position: absolute;left:26%;width: 70%;text-align: left;font-size: 13px;color: #717171;}.cont-titles {position: relative;left: 5%;}.cont-title {position: relative;width: 233px;margin: 3px 0px;color: #717171;left: 24%;display: inline-block;}.submit {position: fixed;width: 100%;height: 50px;line-height: 50px;background-color: #40B377;text-align: center;color: #fff;font-size: 18px;bottom: 0;}.mui-tltles {position: relative;width: 100%;height: 40px;line-height: 40px;}.cont-phone-view {position: relative;width: 100%;height: 50px;font-size: 13px;line-height: 50px;color: #040406;border-bottom: 0.5px solid #eee;}.cont-title-vi {position: relative;width: 100%;font-size: 13px;border-bottom: 0.5px solid #eee;}.left-lable {position: absolute;left: 5%;}.right-lable {position: absolute;right: 5%;}#input {position: absolute;width: 135px;text-align: right;height: 49px;right: 0;border: 0;font-size: 13px;margin-bottom: 0;}.message-title-view {position: relative;width: 100%;height: 25px;font-size: 13px;line-height: 25px;}.message-title-view span {margin: 0px 3px;padding-left: 4%;}</style><body><div class="pages"><div class="mui-content" id="app"><div class="cont-tent"><!--折叠--><div class="conts"><div class="cont-head"><span class="cont-head-title">第一分类</span><span class="cont-head-money">0.01元</span></div><div class="cont-title-views"><span class="cont-title-left">匹配人：</span><span class="cont-title-right">3-5岁小孩</span></div><div class="cont-title-views"><span class="cont-title-left">咨询方式：</span><span class="cont-title-right">1383838438</span></div><div class="cont-title-views" style="margin: 0;"><span class="cont-title-left">服务内容：</span><span class="cont-title-right">1小时急速出方案</span></div><div class="cont-title-views" style="margin: 0;"><span class="cont-title-left"></span><span class="cont-title-right">28套以上定制化方案选择</span></div><div class="cont-title-views" style="margin: 0;"><span class="cont-title-left"></span><span class="cont-title-right">免费保险托管服务</span></div><div class="cont-title-views" style="margin: 0;"><span class="cont-title-left"></span><span class="cont-title-right">免费专人理赔协助</span></div><div class="cont-phone-view"><label class="left-lable">手机号 <span style="color:red;">*</span></label><input id="input" type="number" oninput="value=this.value.replace(/\D+/g,'');if(value.length>11)value=value.slice(0,11)" value="" placeholder="请输入手机号" /></div><div class="cont-phone-view"><label class="left-lable">优惠券</label><label class="right-lable">暂无</label></div><div class="cont-phone-view"><label class="left-lable">服务价格 </label><label class="right-lable">0.01元</label></div><div class="message-title-view" style="margin-top:15px;"><span style="color:#5C5D7A;">01 客观中立</span><span style="color: #999;">第三方保险中立咨询平台</span></div><div class="message-title-view"><span style="color:#5C5D7A;">02 专业可靠</span><span style="color: #999;">北美精算师1v1咨询</span></div><div class="message-title-view"><span style="color:#5C5D7A;">03 无忧售后</span><span style="color: #999;">保险理赔管家式服务</span></div></div></div><!--下一步--><div class="submit" v-if="submitID==1" v-on:click="next()">微信支付</div><div class="submit" style="background:#999;" v-else>支付中</div></div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript" src="js/vue.min.js"></script><script type="text/javascript" src="js/jquery-1.8.3.js"></script><script type="text/javascript" charset="utf-8">new Vue({el: '#app',data: {id: 3,index: 0,submitID: 1,list: []},created() {this.getData();},methods: {// 下一步next() {var that = this;//获取openIDvar openid = that.location.href.split("=")[1];var telephone = document.getElementById("input").value;var plans = {"id": that.list.id,};var datas = JSON.stringify({"amount": that.list.price,"openId": openId,"plan": plans});var wxuseratas = JSON.stringify({"openId": openId,"phone": telephone});//这里由于个人需求开发要获取用户手机号传递给后台，后台系统通过手机号获取用户部分信息【不需要的可以忽略】$.ajax({url: "传递手机号到后台的接口",type: "put",headers: {'Content-Type': ' application/json'},data: wxuseratas,success: function(data) {if(data.code == 200) {console.log("手机号接口==>", data);} else {console.error(data.message);}}});if(!(/^1[3456789]\d{9}$/.test(telephone))) {alert("手机号码有误，请重新填写!");return false;} else {that.submitID = 2;$.ajax({url: "创建订单接口",type: "post",headers: {'Content-Type': ' application/json'},dataType: "json",data: datas,success: function(data) {if(data.code == 200) {console.log("data", data.data.id);//调取支付接口$.ajax({url: "获取加密信息接口",type: "get",headers: {'Content-Type': ' application/json'},dataType: "json",success: function(data) {if(data.code == 200) {console.log("支付接口===>", data.data);WeixinJSBridge.invoke('getBrandWCPayRequest', {"appId": data.data.appId, //公众号名称，由商户传入"timeStamp": data.data.timeStamp, //时间戳，自1970年以来的秒数"nonceStr": data.data.nonceStr, //随机串"package": data.data.package,"signType": "MD5", //微信签名方式："paySign": data.data.paySign //微信签名},function(res) {// if (res.err_msg == "get_brand_wcpay_request:ok") {// this.submitID = 1;// location.href = "back.html";// }if(res.err_msg == "get_brand_wcpay_request:ok") {that.submitID = 1;window.location.href = "back.html";} else if(res.err_msg == "get_brand_wcpay_request:cancel") {that.submitID = 1;alert("用户取消支付!");} else if(res.err_msg == "get_brand_wcpay_request：fail") {that.submitID = 1;alert("支付失败!");}// 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回 ok，但并不保证它绝对可靠。});} else {console.error(data.message);}}});} else {console.error(data.message);}}});}return;},}})</script></body></html>
更多推荐
微信公众号从授权到支付开发
发布评论