139 lines
4.4 KiB
HTML
139 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<title>微信支付</title>
|
||
<style>
|
||
body,
|
||
html {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.success,
|
||
.error {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: none;
|
||
background: #fff;
|
||
}
|
||
|
||
#right {
|
||
width: 150px;
|
||
height: 150px;
|
||
margin: 100px auto 20px;
|
||
border-radius: 50%;
|
||
border: 5px solid rgb(104, 225, 52);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
#right::before {
|
||
content: "";
|
||
display: block;
|
||
width: 88px;
|
||
height: 50px;
|
||
border: 5px solid rgb(104, 225, 52);
|
||
border-right: none;
|
||
border-top: none;
|
||
transform: rotate(-45deg) translate(7px, -10px);
|
||
}
|
||
|
||
.success-txt {
|
||
display: block;
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 18px;
|
||
color: rgb(104, 225, 52);
|
||
}
|
||
|
||
#error {
|
||
width: 150px;
|
||
height: 150px;
|
||
margin: 100px auto 20px;
|
||
border-radius: 50%;
|
||
border: 5px solid rgb(244, 57, 52);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
#error::before {
|
||
content: "\2715";
|
||
display: block;
|
||
color: rgb(244, 57, 52);
|
||
font-size: 100px;
|
||
}
|
||
|
||
.error-txt {
|
||
display: block;
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 18px;
|
||
color: rgb(244, 57, 52);
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="success">
|
||
<span id="right"></span>
|
||
<span class="success-txt">支付成功</span>
|
||
</div>
|
||
<div class="error">
|
||
<span id="error"></span>
|
||
<span class="error-txt">支付失败</span>
|
||
</div>
|
||
<script>
|
||
function onBridgeReady() {
|
||
WeixinJSBridge.invoke(
|
||
'getBrandWCPayRequest', {
|
||
"appId": "{{.appId}}",
|
||
"timeStamp": "{{.timeStamp}}",
|
||
"nonceStr": "{{.nonceStr}}",
|
||
"package": "{{.package}}",
|
||
"signType": "{{.signType}}",
|
||
"paySign": "{{.paySign}}"
|
||
},
|
||
function (res) {
|
||
if (res.err_msg == "get_brand_wcpay_request:ok") {
|
||
// 使用以上方式判断前端返回,微信团队郑重提示：
|
||
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
|
||
document.getElementsByClassName('success')[0].style.display = 'block';
|
||
document.getElementsByClassName('error')[0].style.display = 'none';
|
||
const returnUrl = "{{.returnUrl}}";
|
||
if (returnUrl && returnUrl.length > 0 && returnUrl.includes('http')) {
|
||
window.location.href = returnUrl; // 跳转
|
||
}
|
||
} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
|
||
document.getElementsByClassName('error')[0].style.display = 'block';
|
||
document.getElementsByClassName('success')[0].style.display = 'none';
|
||
document.getElementsByClassName('error-txt')[0].innerHTML = '取消支付';
|
||
} else {
|
||
document.getElementsByClassName('error')[0].style.display = 'block';
|
||
document.getElementsByClassName('success')[0].style.display = 'none';
|
||
document.getElementsByClassName('error-txt')[0].innerHTML = res.err_msg || '支付失败';
|
||
}
|
||
});
|
||
}
|
||
|
||
if (typeof WeixinJSBridge == "undefined") {
|
||
if (document.addEventListener) {
|
||
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
|
||
} else if (document.attachEvent) {
|
||
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
|
||
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
|
||
}
|
||
} else {
|
||
onBridgeReady();
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |