/
3_purchases.html
58 lines (46 loc) · 1.98 KB
/
3_purchases.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/pay2my.app@latest/dist/pay2my.app.js"></script>
</head>
<body style="max-width: 350px; margin: auto; display: flex; flex-direction: column; row-gap: 30px">
<pay2myapp-hub id="demo-hub" apiKey="0x___API_KEY_ONLY_FOR_DEMOS_AND_TESTS___" isTest></pay2myapp-hub>
<pay2myapp-login hubId="demo-hub"
overhideSocialMicrosoftEnabled
overhideSocialGoogleEnabled
overhideSecretTokenEnabled>
</pay2myapp-login>
<pay2myapp-status hubId="demo-hub"></pay2myapp-status>
<pay2myapp-appsell
hubId="demo-hub"
sku="subscribed-feature"
priceDollars="3"
authorizedMessage="Use Feature"
unauthorizedTemplate="Subscribe Feature For 2 Minutes ($${topup})"
overhideAddress="0x046c88317b23dc57F6945Bf4140140f73c8FC80F"
withinMinutes="2">
</pay2myapp-appsell>
<div id="message">❌ Not Authenticated</div>
</body>
<script>
window.addEventListener('pay2myapp-hub-sku-authentication-changed',(e) => {
if (e.detail.isAuthenticated) {
document.querySelector("#message").innerHTML = `✔ Authenticated with ${e.detail.imparter}`;
} else {
document.querySelector("#message").innerHTML = '❌ Not Authenticated';
}
});
window.addEventListener('pay2myapp-hub-sku-authorization-changed',(e) => {
console.log(`pay2myapp-hub-sku-authorization-changed :: ${JSON.stringify(e.detail, null, 2)}`);
if (e.detail.isAuthorized) {
document.querySelector("#message").innerHTML = `✔ Authorized for SKU ${e.detail.sku}`;
} else {
document.querySelector("#message").innerHTML = '❌ Not Authorized';
}
});
window.addEventListener('pay2myapp-appsell-sku-clicked',(e) => {
document.querySelector("#message").innerHTML = `⚙ Used feature with SKU ${e.detail.sku}`;
});
</script>
</html>