opay
Version:
opay library for Open Payment Protocol
215 lines (197 loc) • 9.77 kB
HTML
<html>
<head>
<script src="./qrcode.min.js"></script>
<style>
body {
}
.content {
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
background: #fff;
}
.content .header {
height: 30px;
line-height: 30px;
text-align: center;
}
.content .main {
display: flex;
align-items: center;
flex-direction: row;
height: 100%;
}
.content .wallet {
width: 50%;
height: 80%;
border-right: 1px solid #ddd;
display: flex;
flex-direction: column;
}
.content .witem {
flex: 1;
margin: 20px 10px;
text-align: center;
}
.content .btn {
background-color: DodgerBlue;
border: none;
/* Remove borders */
color: white;
/* White text */
cursor: pointer;
width: 80%;
padding: 10px 10px;
}
.content .qr {
width: 50%;
align-items: center;
align-content: center;
}
.content .qr img {
margin-left: auto;
margin-right: auto;
display: block;
}
</style>
</head>
<body onload="onload()">
<button style="float:right;border-width:0px;background:#fff" onclick="opay_close()" id="close">❌</button>
<main class="content">
<div class="header" tid="title">Click Wallet or Scan QR</div>
<div class="main">
<div class="wallet">
<div class="witem">
<button class="btn" id='vbox' onclick="onPay('vbox')" tid="vbox">VBox</button>
<div style="font-size:10px;color:red" tid="vinstall">Not found, click to install</div>
</div>
<div class="witem"><button class="btn" id='dot' onclick="onPay('dot')" tid="dot">DotWallet</button></div>
</div>
<div class="qr"><div id="qrcode" align="center"></div></div>
</div>
<span align="right" style="float: right;cursor: pointer;color: lightgray;" onclick="window.open('https://nbdomain-doc.glitch.me/#/help?id=_2-what-wallet-can-be-used-with-nbdomain','target=_blank')">❓</span>
</main>
<script>
/**
postmate - A powerful, simple, promise-based postMessage library
@version v1.6.0
@link https://github.com/dollarshaveclub/postmate
@author Jacob Kelley <jakie8@gmail.com>
@license MIT
**/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).Postmate=t()}(this,function(){"use strict";var h="application/x-postmate-v1+json",r=0,n={handshake:1,"handshake-reply":1,call:1,emit:1,reply:1,request:1},p=function(e,t){return("string"!=typeof t||e.origin===t)&&(!!e.data&&(("object"!=typeof e.data||"postmate"in e.data)&&(e.data.type===h&&!!n[e.data.postmate])))},c=function(){function e(e){var a=this;this.parent=e.parent,this.frame=e.frame,this.child=e.child,this.childOrigin=e.childOrigin,this.events={},this.listener=function(e){if(!p(e,a.childOrigin))return!1;var t=((e||{}).data||{}).value||{},n=t.data,i=t.name;"emit"===e.data.postmate&&i in a.events&&a.events[i].forEach(function(e){e.call(a,n)})},this.parent.addEventListener("message",this.listener,!1)}var t=e.prototype;return t.get=function(e){var a=this;return new l.Promise(function(n){var i=++r;a.parent.addEventListener("message",function e(t){t.data.uid===i&&"reply"===t.data.postmate&&(a.parent.removeEventListener("message",e,!1),n(t.data.value))},!1),a.child.postMessage({postmate:"request",type:h,property:e,uid:i},a.childOrigin)})},t.call=function(e,t){this.child.postMessage({postmate:"call",type:h,property:e,data:t},this.childOrigin)},t.on=function(e,t){this.events[e]||(this.events[e]=[]),this.events[e].push(t)},t.destroy=function(){window.removeEventListener("message",this.listener,!1),this.frame.parentNode.removeChild(this.frame)},e}(),s=function(){function e(e){var d=this;this.model=e.model,this.parent=e.parent,this.parentOrigin=e.parentOrigin,this.child=e.child,this.child.addEventListener("message",function(t){if(p(t,d.parentOrigin)){var e,n,i,a=t.data,r=a.property,s=a.uid,o=a.data;if("call"!==t.data.postmate)(e=d.model,n=r,i="function"==typeof e[n]?e[n]():e[n],l.Promise.resolve(i)).then(function(e){return t.source.postMessage({property:r,postmate:"reply",type:h,uid:s,value:e},t.origin)});else r in d.model&&"function"==typeof d.model[r]&&d.model[r](o)}})}return e.prototype.emit=function(e,t){this.parent.postMessage({postmate:"emit",type:h,value:{name:e,data:t}},this.parentOrigin)},e}(),l=function(){function e(e){var t=e.container,n=void 0===t?void 0!==n?n:document.body:t,i=e.model,a=e.url,r=e.name,s=e.classListArray,o=void 0===s?[]:s;return this.parent=window,this.frame=document.createElement("iframe"),this.frame.name=r||"",this.frame.classList.add.apply(this.frame.classList,o),n.appendChild(this.frame),this.child=this.frame.contentWindow||this.frame.contentDocument.parentWindow,this.model=i||{},this.sendHandshake(a)}return e.prototype.sendHandshake=function(a){var r,s=this,o=function(e){var t=document.createElement("a");t.href=e;var n=4<t.protocol.length?t.protocol:window.location.protocol,i=t.host.length?"80"===t.port||"443"===t.port?t.hostname:t.host:window.location.host;return t.origin||n+"//"+i}(a),d=0;return new e.Promise(function(n,i){s.parent.addEventListener("message",function e(t){return!!p(t,o)&&("handshake-reply"===t.data.postmate?(clearInterval(r),s.parent.removeEventListener("message",e,!1),s.childOrigin=t.origin,n(new c(s))):i("Failed handshake"))},!1);var e=function(){d++,s.child.postMessage({postmate:"handshake",type:h,model:s.model},o),5===d&&clearInterval(r)},t=function(){e(),r=setInterval(e,500)};s.frame.attachEvent?s.frame.attachEvent("onload",t):s.frame.addEventListener("load",t),s.frame.src=a})},e}();return l.debug=!1,l.Promise=function(){try{return window?window.Promise:Promise}catch(e){return null}}(),l.Model=function(){function e(e){return this.child=window,this.model=e,this.parent=this.child.parent,this.sendHandshakeReply()}return e.prototype.sendHandshakeReply=function(){var r=this;return new l.Promise(function(i,a){r.child.addEventListener("message",function e(t){if(t.data.postmate){if("handshake"!==t.data.postmate)return a("Handshake Reply Failed");r.child.removeEventListener("message",e,!1),t.source.postMessage({postmate:"handshake-reply",type:h},t.origin),r.parentOrigin=t.origin;var n=t.data.model;return n&&Object.keys(n).forEach(function(e){r.model[e]=n[e]}),i(new s(r))}},!1)})},e}(),l});
</script>
<script>
const toolServer = "https://nb-namecheck.glitch.me"
var pay_options = null;
var options4wallet = null;
var auto_pay=false;
var current_orderID = 0;
var state = {};
let el_vbox = document.querySelector("#vbox");
//let el_dot = document.querySelector("#radiodot");
//let el_auto = document.querySelector("#autopay");
let el_tab1 = document.querySelector("#radiofortab1");
let el_tab2 = document.querySelector("#radiofortab2");
let el_count_down = document.querySelector("#count_down");
var expireObj = {};
var log=console.log;
Postmate.debug = true;
const handshake = new Postmate.Model({
// Expose your model to the Parent. Property values may be functions, promises, or regular values
//height: () => document.height || document.body.offsetHeight,
setUI:(UI)=>{
log("setUI:",UI);
if(UI.close != 'undefined'){
log("setClose");
document.querySelector("#close").style.display = UI.close ? "block" : "none";
}
if(UI.VBox){
//el_vbox.disabled=false;
}
},
setup:(option)=>{
log("setup option:",option);
//setup state
if(option.state){
state = option.state;
/* if(state.wallet=="vbox"){
el_vbox.checked=true;
el_dot.checked=false;
}
if(state.wallet=="dot"){
el_vbox.checked=false;
el_dot.checked=true;
}
auto_pay = state.autopay;
*/
}
//setup QRcode
if(option.strQR){
const strQR = option.strQR;
var typeNumber = 0;
var errorCorrectionLevel = 'L';
var qr = qrcode(typeNumber, errorCorrectionLevel);
qr.addData(strQR);
qr.make();
let strImgTag = qr.createImgTag();
document.querySelector('#qrcode').innerHTML = strImgTag;
}
},
});
function onload(){
//console.log("iframe loaded");
translate();
}
function translate(){
if(navigator.language.toLowerCase()!="zh-cn") return;
var cntext = {
webPay:"网页",
qrPay:"扫码",
vbox:"傲游 VBox",
dot:"打点钱包",
title:"点击钱包或扫码",
vinstall:"未检测到，点击安装"
}
var items = document.querySelectorAll("[tid]");
for(let i=0;i<items.length;i++){
const item = items[i];
const tid = item.attributes['tid'].value;
item.innerText = cntext[tid];
}
}
function onPay(name){
handshake.then(parent => {
parent.emit('opay_frm_cmd', {cmd:"wallet",name:name,state:getState()});
});
}
function getState(){
const status = 0
return status;
}
function opay_close(){
handshake.then(parent => {
parent.emit('opay_frm_cmd', {cmd:"close",state:getState()});
});
}
function opay_ok(){
if(el_vbox.checked){
if(!VBox) return;
handshake.then(parent => {
parent.emit('opay_frm_cmd', {cmd:"wallet",name:"vbox",state:getState()});
});
}
if(el_dot.checked){
handshake.then(parent => {
parent.emit('opay_frm_cmd', {cmd:"wallet",name:"dot",state:getState()});
});
}
}
// When parent <-> child handshake is complete, events may be emitted to the parent
/*handshake.then(parent => {
parent.emit('some-event', 'Hello, World!');
});*/
</script>
</body>
</html>