commit 6f6b2ec6906c1fe0bb6ed2b66143f335b71d2023
parent ac2d14efbba4560bc5f20e532143852e84049970
Author: Florian Dold <florian.dold@gmail.com>
Date: Mon, 15 Feb 2016 14:58:33 +0100
merchant support for other currencies
Diffstat:
2 files changed, 156 insertions(+), 132 deletions(-)
diff --git a/src/frontend/index.html b/src/frontend/index.html
@@ -1,132 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <title>Toy "Store" - Taler Demo</title>
- <link rel="stylesheet" type="text/css" href="style.css">
- <script src="taler-presence.js" type="text/javascript">
- </script>
-</head>
-
-<body>
- <header>
- <div id="logo">
- <svg height="100" width="100">
- <circle cx="50" cy="50" r="40" stroke="darkcyan" stroke-width="6" fill="white" />
- <text x="19" y="82" font-family="Verdana" font-size="90" fill="darkcyan">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.
- </p>
- </article>
-
- <section>
-
- <article>
- <h2>Step 1: Installing the Taler wallet</h2>
- <p class="taler-installed-hide">
- First, you need to <a href="http://demo.taler.net/">install</a>
- the Taler wallet browser extension.
- </p>
- <p class="taler-installed-show">
- Congratulations, you have installed the Taler wallet correctly.
- You can now proceed with the next steps.
- </p>
- </article>
-
- <article class="taler-installed-show">
- <h2>Step 2: Withdraw coins <sup>(occasionally)</sup></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 class="taler-installed-show">
- <h2>Step 3: Shop! <sup>(as long as you have KUDOS left)</sup></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>
-</body>
-</html>
diff --git a/src/frontend/index.php b/src/frontend/index.php
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<?php
+require_once "config.php";
+?>
+<html lang="en">
+<head>
+ <title>Toy "Store" - Taler Demo</title>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="taler-presence.js" type="text/javascript"></script>
+<script type="text/javascript">
+<?php
+echo "\tvar shop_currency = '$SHOP_CURRENCY';\n";
+?>
+
+ function addOption(value, label) {
+ var s = document.getElementById("taler-donation");
+ let e = document.createElement("option");
+ e.textContent = label ? label : ("".concat(value, " ", shop_currency));
+ e.value = value;
+ s.appendChild(e);
+ }
+
+ function init() {
+ let e = document.getElementById("currency-input");
+ e.value = shop_currency;
+ addOption("0.1");
+ addOption("1.0");
+ addOption("6.0", ("".concat(5, " ", shop_currency));
+ addOption("10");
+ }
+
+ document.addEventListener("DOMContentLoaded", init);
+
+</script>
+</head>
+
+<body>
+ <header>
+ <div id="logo">
+ <svg height="100" width="100">
+ <circle cx="50" cy="50" r="40" stroke="darkcyan" stroke-width="6" fill="white" />
+ <text x="19" y="82" font-family="Verdana" font-size="90" fill="darkcyan">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.
+ </p>
+ </article>
+
+ <section>
+
+ <article>
+ <h2>Step 1: Installing the Taler wallet</h2>
+ <p class="taler-installed-hide">
+ First, you need to <a href="http://demo.taler.net/">install</a>
+ the Taler wallet browser extension.
+ </p>
+ <p class="taler-installed-show">
+ Congratulations, you have installed the Taler wallet correctly.
+ You can now proceed with the next steps.
+ </p>
+ </article>
+
+ <article class="taler-installed-show">
+ <h2>Step 2: Withdraw coins <sup>(occasionally)</sup></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 class="taler-installed-show">
+ <h2>Step 3: Shop! <sup>(as long as you have KUDOS left)</sup></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">
+ <!-- options will be added dynamically -->
+ </select>
+ <input id="currency-input" type="hidden" name="donation_currency"/>
+ <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>
+</body>
+</html>
