Permalink
Branch: master
Find file Copy path
3bc77bc Oct 22, 2018
1 contributor

Users who have contributed to this file

94 lines (85 sloc) 3.13 KB
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>个人网站即时支付解决方案 | 许杨淼淼</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<meta name="description" content="个人网站收款 个人收款 个人网站支付 个人支付 在线支付 在线付款 即使到账接口 嵌入支付">
<style>
body {
text-align: center;
background-color: #e0e0e0
}
#app {
margin: 0 auto
}
#app h2 {
padding-top: 3%
}
#intro {
padding-top: 2%;
text-align: center
}
#app img {
padding-top: 3%;
width: 280px
}
#app input {
margin: 1%
}
</style>
</head>
<body>
<div id="app">
<h2>在线收款Demo</h2>
<div id="intro">
1. 支持支付宝、微信、储蓄卡,扫码付款<br>
2. 无需公司资质、无需接入支付宝、微信<br>
3. 基于有赞云可信赖,费率低每笔交易1%<br>
</div>
<img v-bind:src="qrcode">
<div id="input_price">
金额(单位:分):<input v-model="price"><br/>
收款理由描述:<input v-model="desc"><br/>
<button v-on:click="generate">点此生成支付二维码</button>
</div>
</div>
<a href="https://github.com/xu42/pay"><img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
</body>
<script src="//cdn.staticfile.org/vue/2.2.6/vue.min.js"></script>
<script>var clientId = "";
var ws = new WebSocket("wss://pay.xu42.cn:11942");
var app = new Vue({
el: "#app",
data: {
qrcode: "https://img.yzcdn.cn/upload_files/2017/11/25/FlaMfOlko4gdrls7LmdfHDtoACxK.jpg",
price: 100,
desc: "Demo By Xu42"
},
methods: {
generate: function () {
clientId = Math.random().toString(36).substr(2);
ws.send(clientId + "," + app.price + "," + app.desc)
}
}
});
ws.onmessage = function (response) {
var responseObj = JSON.parse(response.data);
if (responseObj.code !== 200) {
alert(responseObj.msg);
return
}
if (responseObj.event === "pay") {
if (responseObj.data === "WAIT_BUYER_PAY") {
app.qrcode = "https://img.yzcdn.cn/upload_files/2017/11/25/FqZjK96_t4g3PYC7m58RHXQ4PCRm.png"
}
if (responseObj.data === 'TRADE_SUCCESS' || responseObj.data === "PAID" || responseObj.data === "TRADE_PAID") {
app.qrcode = "https://img.yzcdn.cn/upload_files/2017/11/25/FnFa-_giR389G_rtBBWspFw8esc7.png"
}
}
if (responseObj.event === "create") {
app.qrcode = responseObj.data.qr
}
};</script>
</html>