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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
|
<!DOCTYPE html>
<html lang="en">
<head>
<title>Toy Store - Taler Demo</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script> /* @licstart The following is the entire license notice for the
JavaScript code in this page.
Copyright (C) 2015 GNUnet e.V.
The JavaScript code in this page is free software: you can
redistribute it and/or modify it under the terms of the GNU
Lesser General Public License (GNU LGPL) as published by the Free Software
Foundation, either version 2.1 of the License, or (at your option)
any later version. The code is distributed WITHOUT ANY WARRANTY;
without even the implied warranty of MERCHANTABILITY or FITNESS
FOR A PARTICULAR PURPOSE. See the GNU LGPL for more details.
As additional permission under GNU LGPL version 2.1 section 7, you
may distribute non-source (e.g., minimized or compacted) forms of
that code without the copy of the GNU LGPL normally required by
section 4, provided you include this license notice and a URL
through which recipients can access the Corresponding Source.
@licend The above is the entire license notice
for the JavaScript code in this page.
*/
</script>
</head>
<body onload="signal_me()">
<header>
<div id="logo">
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="6" fill="white" />
<text x="19" y="82" font-family="Verdana" font-size="90" fill="black">S</text>
</svg>
</div>
<h1>Toy Store - Taler Demo</h1>
</header>
<aside class="sidebar" id="left">
</aside>
<section id="main">
<article>
<h1>Welcome to the Taler "Demo" Shop</h1>
<p>This "toy" website provides you with the ability to
experience using the
<a href="https://www.taler.net/">GNU Taler</a>
payment system without using
valuable currency. Instead, for the demonstrator we
will be using a "toy" currency, KUDOS. However, please remember that
Taler is designed to work with ordinary currencies, such
as Dollars or Euros, not just toy currencies.
<br>
This page, <tt>shop.demo.taler.net</tt> models the behavior of a
typical Web shop supporting Taler. The other pages of the demo,
<tt>mint.demo.taler.net</tt> and
<tt>bank.demo.taler.net</tt>, correspond to a Taler mint
and bank with tight Taler integration respectively.
<!-- TODO: maybe offer the wallet at 'taler.net/extension' in the
future, instead of at 'demo.taler.net/'? -->
</p>
</article>
<section id="instructions">
<article id="installation">
<h2>Step 1: Installing the Taler wallet (once)</h2>
<p>First, you need to install the Taler wallet browser extension.
It is currently only available for Firefox. If you run
Firefox, simply click <a href="http://demo.taler.net/extension">here</a>
to download and install the extension. You will then have to
click on "allow" and "install" dialogs shown by Firefox.
After that, the Taler logo should appear on the right side
of your navigation bar.
<!-- TODO: insert screenshot highlighting the icon? -->
</p>
</article>
<article id="installation-done" style="display:none;">
<h2>Step 1: Installing the Taler wallet (done!)</h2>
<p>Congratulations, you have installed the Taler wallet correctly.
You can now proceed with the next steps.
</p>
</article>
<article id="wire" style="display:none;">
<h2>Step 2: Withdraw coins (occasionally)</h2>
<p>The next step is to withdraw coins, after all you cannot
pay with an empty wallet. To be allowed to withdraw
coins from a mint, you first need to transfer currency to the mint
using the normal banking system, for example by using a
wire transfer. If the bank offers a tight integration with Taler, it
may also support this directly over the home banking online interface.
<br>
For the demonstration, we have created a "bank" that
allows you to "wire" funds (in KUDOS) to the mint simply by
filling in the desired amount into a form. Naturally, when
using a real bank with real money, you would have to authenticate
and authorize the transfer.
<br>
Note that you would not do this step for each purchase or each shop.
Payment with Taler is like paying
with cash: you withdraw currency at the bank (or an ATM) and then
pay at many merchants without having to authenticate each time.
<br>
So, unless you have already done so, please go ahead and withdraw
KUDOS at the
<a href="http://bank.demo.taler.net/" target="_blank">Demo bank</a>
(opens in a new tab).</p>
</article>
<article id="payment" style="display:none;">
<h2>Step 3: Shop! (as long as you have KUDOS left in the wallet)</h2>
<p>Now it is time to spend your hard earned KUDOS.
Note that we cannot really tell if you got any yet,
as your Taler wallet balance is visible to you, but
of course is hidden entirely from the shop.</p>
<p>The form that follows corresponds to the shopping
cart of a real Web shop; however, we kept it
very simple for the demonstration.</p>
<p>So, please choose a project and the amount of KUDOS you
wish to donate:</p>
<form name="tform" action="/checkout.php" method="POST">
<div class="participation" id="fake-shop">
<br>
<input type="radio" name="donation_receiver" value="Taler" checked="true">GNU Taler</input>
<br>
<input type="radio" name="donation_receiver" value="Tor">Tor</input>
<br>
<input type="radio" name="donation_receiver" value="GNUnet">GNUnet</input>
<br>
<select id="taler-donation" name="donation_amount">
<option value="0.1">0.1 KUDOS</option>
<option value="1.0">1 KUDOS</option>
<option value="6.0">5 KUDOS (*)</option>
<option value="10.0">10 KUDOS</option>
</select>
<input type="hidden" name="donation_currency" value="KUDOS"/>
<input type="submit" name="keyName" value="Donate!"/>
<br>
<br>
</div>
</form>
<p>(*) To make it a bit more fun, the 5 KUDOS option
is deliberately implemented with a fault: the merchant will try to
make you donate 6 KUDOS instead of the 5 KUDOS you got to see. But do
not worry, you will be given the opportunity to review the
final offer from the merchant in a window secured
by the Taler extension. That way, you can spot the
error before committing to an incorrect contract.</p>
</article>
</section>
</section>
<script type="text/javascript">
/* This function is called if/when a Wallet is installed.
It should enable the parts of the page that only make
sense after the Wallet has been loaded.
*/
function wallet_installed_cb(){
b = document.getElementById("installation");
b.style.display = 'none';
b = document.getElementById("installation-done");
b.style.display = '';
b = document.getElementById("wire");
b.style.display = '';
b = document.getElementById("payment");
b.style.display = '';
};
function wallet_uninstalled_cb(){
b = document.getElementById("installation");
b.style.display = '';
b = document.getElementById("installation-done");
b.style.display = 'none';
b = document.getElementById("wire");
b.style.display = 'none';
b = document.getElementById("payment");
b.style.display = 'none';
};
/* The merchant signals its taler-friendlyness to the client */
function signal_me()
{
var eve = new Event('taler-checkout-probe');
document.dispatchEvent(eve);
//alert("signaling");
};
function test_without_wallet(){
wallet_installed_cb();
}
document.addEventListener("taler-unload",
wallet_uninstalled_cb,
false, false);
/* Set up a listener to be called whenever a Wallet gets installed
so that the user is led towards the demo's steps progressively */
document.addEventListener("taler-wallet-present",
wallet_installed_cb,
false, false);
/* Setup callback to be called whenever the wallet is loaded/enabled
while the browser is already on this page */
document.addEventListener("taler-load",
signal_me,
false);
</script>
</body>
</html>
|
