public/index.html

<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>