-
Notifications
You must be signed in to change notification settings - Fork 0
/
basic.html
133 lines (117 loc) · 6.25 KB
/
basic.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
<!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">
<!-- look at `window.onload` script above to see how we set the token from back-end -->
<pay2myapp-hub id="demo-hub" isTest></pay2myapp-hub>
<div class="w3-bar w3-border w3-light-grey">
<div class="w3-right">
<pay2myapp-status hubId="demo-hub"></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>The basic demo showing 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). The "free" one on the left inhibits login (doesn't allow login). The "paid" two on the right cause initial login. All three, once authorized, cause 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/basic.html" class="source" target="_blank"><img src="assets/icons8-github-96.png"></img><span>view the source</span></a></p>
</div></div>
<pay2myapp-login hubId="demo-hub"
overhideSocialMicrosoftEnabled
overhideSocialGoogleEnabled
overhideWeb3Enabled
ethereumWeb3Enabled
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
hubId="demo-hub"
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
hubId="demo-hub"
sku="free-feature"
priceDollars="0"
inhibitLogin
authorizedMessage="Use Feature"
unauthorizedTemplate="Login to Use Free Feature"
ethereumAddress="0x046c88317b23dc57F6945Bf4140140f73c8FC80F"
overhideAddress="0x046c88317b23dc57F6945Bf4140140f73c8FC80F">
</pay2myapp-appsell>
</div>
<div class="w3-col s4 w3-center">
<pay2myapp-appsell
hubId="demo-hub"
sku="paid-feature"
priceDollars="2"
authorizedMessage="Use Feature"
unauthorizedTemplate="Add Feature ($${topup})"
ethereumAddress="0x046c88317b23dc57F6945Bf4140140f73c8FC80F"
overhideAddress="0x046c88317b23dc57F6945Bf4140140f73c8FC80F">
</pay2myapp-appsell>
</div>
<div class="w3-col s4 w3-center">
<pay2myapp-appsell
hubId="demo-hub"
sku="subscribed-feature"
priceDollars="3"
authorizedMessage="Use Feature"
unauthorizedTemplate="Subscribe Feature For 30 Minutes ($${topup})"
ethereumAddress="0x046c88317b23dc57F6945Bf4140140f73c8FC80F"
overhideAddress="0x046c88317b23dc57F6945Bf4140140f73c8FC80F"
withinMinutes="30">
</pay2myapp-appsell>
</div>
</div>
<!-- visa help image to aid demo viewer with fake credit card entry -->
<img class="visa" id="visa" src="./assets/visa.png">
<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>
// 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: document.getElementById('demo-hub'),
overhideApiKey: '0x___API_KEY_ONLY_FOR_DEMOS_AND_TESTS___'});
// 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>