微信点金计划示例
文件引入：https://wx.gtimg.com/pay_h5/goldplan/js/jgoldplan-1.0.0.js<body><s
小编
文件引入：
https://wx.gtimg.com/pay_h5/goldplan/js/jgoldplan-1.0.0.js
<body>
<section class="pay-result">
<div class="order-info">
<div class="item">
<span class="label">订单号</span>
<span class="value" id="orderNo"></span>
</div>
<div class="item">
<span class="label">订单金额</span>
<span class="value" id="payPrice"></span>
</div>
<div class="item">
<span class="label">付款状态</span>
<span class="value" id="payStatus"></span>
</div>
<div class="item">
<span class="label">购买商品</span>
<span class="value" id="payTitle"></span>
</div>
<div class="item">
<span class="label">出货货道</span>
<span class="value" id="payPass"></span>
</div>
<div class="item">
<span class="label">出货状态</span>
<span class="value" id="payPassStatus"></span>
</div>
</div>
<button class="button" id="viewDetail" @click="handleJump">
点击查看订单详情
</button>
</section>
</body>
<script>
/** 点金计划路径 */
var GOIDPLAN_URL = "https://payapp.weixin.qq.com";
/** 点金计划事件列表： 通信方式：iframe postMessage 事件通知 */
var ACTION_LIST = {
/**渲染小票：从加载商家小票到响应 onIframeReady 事件之间的用时不可超过 3s */
onIframeReady: "onIframeReady",
/**外跳：商家页面有外跳需求，且用户主动点击时（此处不可模拟用户点击自动外跳，否则相关能力会被处罚） */
jumpOut: "jumpOut",
};
/** 点金计划需展示的页面 */
/*var DISPLAY_STYLE = {
商家小票: "SHOW_CUSTOM_PAGE",
官方小票: "SHOW_OFFICIAL_PAGE",
};*/
/** onIframeReady 事件配置 */
var onIframeReady = JSON.stringify({
action: ACTION_LIST.onIframeReady,
displayStyle: "SHOW_CUSTOM_PAGE",
});
//获取返回页面参数
function getQueryString(name) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == name) {
return pair[1];
}
}
return null;
}
var out_trade_no = getQueryString("out_trade_no");//商户订单号
var btnEl = document.getElementById("viewDetail");//button
var payPriceEl = document.getElementById("payPrice");//订单金额El
var orderNoEl = document.getElementById("orderNo");//订单号El
var payStatusEl = document.getElementById("payStatus");//订单状态
var payTitleEl = document.getElementById("payTitle");//订单名称
var payPassEl = document.getElementById("payPass");//订单货道
var payPassStatusEl = document.getElementById("payPassStatus");//订单货道状态
parent.postMessage(onIframeReady, GOIDPLAN_URL);
if (out_trade_no){
// 接口地址
var api = "/api/goldens/order_details";
fetch(api, {
method: "POST",
mode: "cors",
headers: {
"Content-Type": "application/json",
clientCode: "CONSUMER",
},
body: JSON.stringify({ payTradeNo: out_trade_no }),
}).then((response) => {
response.json().then((res = {}) => {
console.log("res====>", res);
if (res.code !== 200) return false;
var data = res.data ? res.data : {};
console.log(data);
orderNoEl.innerText = data.goods;
payPriceEl.innerText = data.isfree?"免费":(data.summoney+"元") ;
let devStatus="等待支付通知";
if (data.ispay==2) devStatus="已退款";
else if (data.ispay==1) devStatus="已付款";
payStatusEl.innerText = devStatus;
payTitleEl.innerText=data.title+"*"+data.num;
payPassEl.innerText=data.pass;
payPassStatusEl.innerText=data.ztmsg?data.ztmsg:"执行中..";
});
}).catch((err) => console.error(err));
}
/**查看订单详情*/
btnEl.addEventListener("click", () => {
// var jumpOutUrl = `${location.origin}/#/order-detail?orderSn=${orderNoEl.innerText}`;
var jumpOutUrl = "https://guangeiot.wucaishijie.xyz/api/goldens/wx_ok.html";
var mchData = JSON.stringify({
action: ACTION_LIST.jumpOut,
jumpOutUrl: jumpOutUrl,
});
console.log("jumpOutUrl==>", jumpOutUrl);
parent.postMessage(mchData, GOIDPLAN_URL);
});
</script>调试工具vConsole
/**添加调试工具vConsole*/
new window.VConsole({
theme: "dark",
maxLogNumber: 100,
});