-
Notifications
You must be signed in to change notification settings - Fork 0
/
javascript-hub.html
155 lines (137 loc) · 6.89 KB
/
javascript-hub.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="./assets/demo.css">
<script src="assets/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pay2my.app@latest/dist/pay2my.app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lucchetto/dist/lucchetto.js"></script>
</head>
<body>
<div id="demo-front-end">
<style>
pay2myapp-appsell {
width: 60%;
}
.visa {
position: fixed;
top: 0px;
right: 0px;
z-index: 50;
opacity: 0;
transition: opacity 1s ease-in 1s;
pointer-events: none;
}
</style>
<img class="visa" id="visa" src="./assets/visa.png">
<div class="w3-bar w3-border w3-light-grey">
<div class="w3-right">
<pay2myapp-status></pay2myapp-status>
</div>
</div>
<!-- info note-->
<div class="w3-container note-container"><div class="w3-card w3-sand w3-margin note">
<img class="w3-left info" src="./assets/info.png">
<p>Same as the basic demo except the <em>pay2myapp-hub</em> component is not wired up throught the DOM, but through JavaScript. This approach is useful when wireing up the widgets in a framework — where everything happens through JavaScript.</p>
<p>Shows off all widgets. Using features causes back-end endpoint invocations with authorization checks.</p>
<p>In the top-right we see the <em>pay2myapp-status</em> widget — allows (re)login, transaction check, logout, and payments refresh.</p>
<p>Just below we see an explicit "login" button (<em>pay2myapp-appsell</em> widget). This button always allows (re)login and never starts a feature flow.</p>
<p>At the bottom we see three feature buttons (<em>pay2myapp-appsell</em> widgets). These cause initial login and feature flows — through the backe-end — at different payment tiers.</p>
<p>⚠ No bitcoin support in this demo as it uses <a href="https://www.npmjs.com/package/lucchetto" target="_blank">lucchetto.js</a> connecting to an <a href="https://overhide.io#baas" target="_blank">overhide.io back-end as a service</a> — which only supports the Ethereum address space (for dollars and cryptos).</p>
<p><a href="https://github.com/overhide/pay2my.app#demos" class="source" target="_blank"><img src="assets/icons8-github-96.png"></img><span>back to demos</span></a><a href="https://github.com/overhide/pay2my.app/blob/master/demo-front-end/javascript-hub.html" class="source" target="_blank"><img src="assets/icons8-github-96.png"></img><span>view the source</span></a></p>
</div></div>
<pay2myapp-login overhideSocialMicrosoftEnabled
overhideSocialGoogleEnabled
overhideWeb3Enabled
ethereumWeb3Enabled
bitcoinEnabled
overhideSecretTokenEnabled>
</pay2myapp-login>
<div class="w3-row w3-padding-64"><div class="w3-col s4"> </div><div class="w3-col s4 w3-center">
<pay2myapp-appsell
loginMessage="Login">
</pay2myapp-appsell>
</div></div>
<div class="w3-row" style="display: flex; align-content: stretch;">
<div class="w3-col s4 w3-center">
<pay2myapp-appsell
sku="free-feature"
priceDollars="0"
authorizedMessage="Use Feature"
unauthorizedTemplate="Login to Use Free Feature"
bitcoinAddress="tb1qr9d7z0es86sps5f2kefx5grpj4a5yvp4evj80z"
ethereumAddress="0x046c88317b23dc57F6945Bf4140140f73c8FC80F"
overhideAddress="0x046c88317b23dc57F6945Bf4140140f73c8FC80F">
</pay2myapp-appsell>
</div>
<div class="w3-col s4 w3-center">
<pay2myapp-appsell
sku="paid-feature"
priceDollars="2"
authorizedMessage="Use Feature"
unauthorizedTemplate="Add Feature ($${topup})"
bitcoinAddress="tb1qr9d7z0es86sps5f2kefx5grpj4a5yvp4evj80z"
ethereumAddress="0x046c88317b23dc57F6945Bf4140140f73c8FC80F"
overhideAddress="0x046c88317b23dc57F6945Bf4140140f73c8FC80F">
</pay2myapp-appsell>
</div>
<div class="w3-col s4 w3-center">
<pay2myapp-appsell
sku="subscribed-feature"
priceDollars="3"
authorizedMessage="Use Feature"
unauthorizedTemplate="Subscribe Feature For 30 Minutes ($${topup})"
bitcoinAddress="tb1qr9d7z0es86sps5f2kefx5grpj4a5yvp4evj80z"
ethereumAddress="0x046c88317b23dc57F6945Bf4140140f73c8FC80F"
overhideAddress="0x046c88317b23dc57F6945Bf4140140f73c8FC80F"
withinMinutes="30">
</pay2myapp-appsell>
</div>
</div>
<div class="w3-row" style="display: flex; justify-content: center; margin-top: 12em;">
<div id="messages" class="w3-col s8 w3-center">
</div>
</div>
</div>
</body>
<script>
var hub = document.createElement('pay2myapp-hub');
hub.setAttribute('isTest', true);
// instantiate lucchetto.js which will help us to talk to the https://test.rs.overhide.io back-end
//
// I've setup the three SKUs on https://test.rs.overhide.io using https://overhide.github.io/armadietto/lucchetto/onboard.html#
// against my 0x046c88317b23dc57F6945Bf4140140f73c8FC80F address
//
// See https://overhide.io#baas
//
var lucchetto = new Lucchetto({
overhideIsTest: true,
pay2myAppHub: hub,
overhideApiKey: '0x___API_KEY_ONLY_FOR_DEMOS_AND_TESTS___'});
// Set the hub programatically
window.onload = (event) => {
hub.init();
// inject hub into other components
document.querySelector('pay2myapp-login').setHub(hub);
document.querySelector('pay2myapp-status').setHub(hub);
document.querySelectorAll('pay2myapp-appsell').forEach(e => e.setHub(hub));
};
// This is where we listen to authorized users clicking on events when they click a feature button.
// We hit the overhide.io back-end in response to these.
// We re-validate authorizations in the back-end.
// See https://overhide.io#baas
window.addEventListener('pay2myapp-appsell-sku-clicked',(e) => {
console.log(`sku-clicked :: ${JSON.stringify(e.detail, null, 2)}`);
// Call back-end and ensure it verifies before saying it's handled.
lucchetto.getSku(`https://test.rs.overhide.io`, e.detail)
.then(response => {
if (response === 'OK') {
addMessage(e.detail.sku);
} else {
addError(`error talking to back-end — ${response.status} — ${response.statusText}`);
}
}).catch(e => addError(`error talking to back-end — ${e}`))
}, false);
</script>
</html>