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
|
<!DOCTYPE html>
<html lang="en">
<head>
<title>Taler's "Toy" Shop</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
General Public License (GNU GPL) as published by the Free Software
Foundation, either version 3 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 GPL for more details.
As additional permission under GNU GPL version 3 section 7, you
may distribute non-source (e.g., minimized or compacted) forms of
that code without the copy of the GNU GPL 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 id="css-zen-garden">
<div id='root' class="page-wrapper">
<section class="intro" id="zen-intro">
<h1>Welcome to the Taler "Toy" Demonstrator</h1>
<div class="preamble" id="zen-preamble" role="article">
This "toy" website provides you with the ability to
experience using the Taler payment system without using
valuable currency. Here, we guide you through the steps
of installing a Taler wallet, withdrawing Taler coins and
spending them at a merchant. For this demonstrator, we
will be using a "toy" currency, KUDOS. However, please note that
Taler is designed to work with ordinary currencies, such
as Dollars or Euros, not just toy currencies.
</div>
</section>
</div>
<div class="supporting" id="zen-supporting" role="main">
<h2>Installing the Taler wallet</h2>
<div class="explanation" id="zen-explanation" role="article">
<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="/extension">here</a>
to download and install the extension. You will 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.
</p>
</div>
<h2>Performing a wire transfer</h2>
<div class="explanation" id="zen-explanation" role="article">
<p>The next step is to transfer currency to the mint to
obtain Taler coins. This is typically done using a
wire transfer. However, as this is just a demonstrator,
we will allow you to send us "toy" coins using a simple
form on this website instead.</p>
<p>You begin by clicking on the Taler icon and selecting
"Create reserve". The extension will then display some
hexadecimal reserve public key, which you should copy to the
clipboard. After that, you can paste it into the form
below. When dealing with real currency, you would do
the same, except that you would have to copy the string
into the subject area for your wire transfer.
</p>
<form id="reserve-form" name="tform" action="never_used" onsubmit="return MERCHtrigSubmission()" method="POST">
<br>
Paste your reserve public key here (right-click, "paste"):
<br>
<input type="text" name="pbk"></input>
<br>
Amount (FIXME: amount should ideally also be told to the wallet, but not during the form submission!):
<br>
<select id="taler-amount" name="kudos-amount">
<option value="1">1 KUDOS</option>
<option value="5">5 KUDOS</option>
<option value="10">10 KUDOS</option>
<option value="1000">1000 KUDOS</option>
</select>
<br>
<input type="submit" value="Submit"></input>
<br>
</form>
</div>
<h2>Finally: Pay for something!</h2>
<div class="explanation" id="zen-explanation" role="article">
<p>Now it is time to spend your hard earned KUDOS.
For your convenience, we integrated a tiny shop
accepting KUDOS right here into this page.</p>
<p>Please choose a project and the amount of KUDOS you
wish to donate.</p>
<form name="tform" action="checkout.php" method="POST">
<div id="opt-form" align="left">
<br>
<input type="radio" name="group0" value="Taler">Taler</input>
<br>
<input type="radio" name="group0" value="GNUnet" checked="true">GNUnet</input>
<br>
<input type="radio" name="group0" value="INRIA">INRIA</input>
<br>
<select id="taler-donation" name="kudos-donation">
<option value="1">1 KUDOS</option>
<option value="666">5 KUDOS (select this option to spot the merchant giving you the wrong contract)</option>
<option value="10">10 KUDOS</option>
</select>
<input type="submit" name="keyName" value="Donate!">
<br>
<br>
</div>
</form>
</div>
</div>
<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 MERCHfirstStep(){
// FIXME: old logic was too complicated, change visibility instead!
};
/* 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.body.addEventListener("taler-wallet-installed",
MERCHfirstStep,
false, false);
/* Notify the extension about the submission. That way it will be
possible to retrieve the mint's URL and/or other info. from the
filled form. Actually, the extension will accomplish the POST
too.
FIXME: This is bad, as we cannot do this later when
users submit real forms at the bank. Why is this
required?
*/
function MERCHtrigSubmission(){
// set 'action' attribute to mint's url
// var mint = document.getElementById("mint-url");
// var form = document.getElementById("reserve-form");
// form.setAttribute("action", "http://demo.taler.net/admin/incoming/add");
var subEvent = new Event("submit-reserve");
document.body.dispatchEvent(subEvent);
// always return false so that the post is actually done by the extension
return false;
}
</script>
</body>
</html>
|
