72 lines
3.1 KiB
HTML
72 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
<title>微信支付</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f7f7f7; }
|
|
.wrap { max-width: 420px; margin: 0 auto; padding: 56px 24px; text-align: center; }
|
|
.logo { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 14px; background: #07c160; color: #fff; font-size: 34px; line-height: 64px; font-weight: 700; }
|
|
.title { font-size: 20px; font-weight: 600; color: #111; margin-bottom: 10px; }
|
|
.sub { font-size: 14px; color: #888; line-height: 1.6; margin-bottom: 36px; }
|
|
.btn {
|
|
display: block; width: 100%; padding: 16px; font-size: 17px; font-weight: 600;
|
|
border: none; border-radius: 10px; background: #07c160; color: #fff; text-decoration: none;
|
|
}
|
|
.err .title { color: #333; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap {% if error %}err{% endif %}">
|
|
{% if error %}
|
|
<div class="title">暂时无法支付</div>
|
|
<div class="sub">{{ error }}</div>
|
|
{% elif pay %}
|
|
<div class="logo">微</div>
|
|
<div class="title">微信支付</div>
|
|
<div class="sub" id="tip">正在调起支付...</div>
|
|
<button class="btn" type="button" id="payBtn">立即支付</button>
|
|
<script>
|
|
(function () {
|
|
var pay = {
|
|
appId: '{{ pay.appId|escapejs }}',
|
|
timeStamp: '{{ pay.timeStamp|escapejs }}',
|
|
nonceStr: '{{ pay.nonceStr|escapejs }}',
|
|
package: '{{ pay.package|escapejs }}',
|
|
signType: '{{ pay.signType|escapejs }}',
|
|
paySign: '{{ pay.paySign|escapejs }}'
|
|
};
|
|
function invokePay() {
|
|
if (typeof WeixinJSBridge === 'undefined') {
|
|
document.getElementById('tip').innerText = '请在微信内打开并点击「立即支付」';
|
|
return;
|
|
}
|
|
WeixinJSBridge.invoke('getBrandWCPayRequest', pay, function (res) {
|
|
var msg = (res && res.err_msg) || '';
|
|
if (msg === 'get_brand_wcpay_request:ok') {
|
|
document.getElementById('tip').innerText = '支付成功，请返回小程序查看';
|
|
} else if (msg === 'get_brand_wcpay_request:cancel') {
|
|
document.getElementById('tip').innerText = '已取消支付，可再次点击下方按钮';
|
|
} else {
|
|
document.getElementById('tip').innerText = '支付未完成，请重试';
|
|
}
|
|
});
|
|
}
|
|
document.getElementById('payBtn').onclick = invokePay;
|
|
if (typeof WeixinJSBridge === 'undefined') {
|
|
document.addEventListener('WeixinJSBridgeReady', invokePay, false);
|
|
} else {
|
|
setTimeout(invokePay, 100);
|
|
}
|
|
})();
|
|
</script>
|
|
{% else %}
|
|
<div class="title">支付已失效</div>
|
|
<div class="sub">请返回小程序重新发起支付</div>
|
|
{% endif %}
|
|
</div>
|
|
</body>
|
|
</html>
|