Merge branch 'master' of ssh://taler.net/var/git/merchant

author: Marcello Stanisci <marcello.stanisci@inria.fr> 2015-11-17 17:33:30 +0100
committer: Marcello Stanisci <marcello.stanisci@inria.fr> 2015-11-17 17:33:30 +0100
commit: 20b597e91802a3a6b925eabd4b236069fe706d8b (patch)
tree: 5691505da7b00f806b3f032201d3d3bfe214e2ac
parent: ed9ac718af37c32e259e58d9e1045fc980c081bd (diff)
parent: 0112f0167ed37226704f0504cc17ab3cbc618b7d (diff)
download: merchant-20b597e91802a3a6b925eabd4b236069fe706d8b.tar.gz
merchant-20b597e91802a3a6b925eabd4b236069fe706d8b.tar.bz2
merchant-20b597e91802a3a6b925eabd4b236069fe706d8b.zip
4 files changed, 128 insertions, 62 deletions
diff --git a/src/frontend/Gala.jpg b/src/frontend/Gala.jpg
deleted file mode 100644
index 795e726f..00000000
--- a/src/frontend/Gala.jpg
+++ /dev/null
diff --git a/src/frontend/README b/src/frontend/README
index fa26f81c..8cfb490f 100644
--- a/src/frontend/README
+++ b/src/frontend/README
@@ -16,12 +16,5 @@ o checkout.php	| The "payment selection" that is the form
 		  It also implements the request of certificate and trigger the certificate
 		  viewer in the extension when it arrives in the customer's machine.
 
-
-o cert.php	| Replies with a JSON certificate gotten from the backend.
-
 o pay.php	| Actual receiving of money, plus it gives back a "fullfillment" page
 		  that informs the user of his well ended deal.
-
-o toy		| the nginx configuration file skeleton for this virtual server. To be tuned
-                  as needed.
-o sample.json   | JSON structure to be reproduced from the frontend, to be fed to the backend
diff --git a/src/frontend/checkout.php b/src/frontend/checkout.php
index 8a986648..157bd25f 100644
--- a/src/frontend/checkout.php
+++ b/src/frontend/checkout.php
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-<title>Choose payment method</title>
+<title>Taler's "Demo" Shop: Choose payment method</title>
     <script>
         /*
         @licstart  The following is the entire license notice for the
@@ -29,12 +29,12 @@
         */
     </script>
 </head>
-<body onload="signal_me()">
-<!-- 
+<body onload="signal_taler_wallet_onload()">
+<!--
   This page's main aim is to show to the customer all the accepted
   payments methods and actually implementing just Taler; technically
   the steps are:
-  
+
   1. retrieve the information about the donation from the
      form and remember it in a PHP session
   2. show a menu with all the required payments system options,
@@ -59,17 +59,39 @@
   $_SESSION['amount_fraction'] = (int) ($donation_fraction * 1000000);
   $_SESSION['currency'] = $donation_currency;
 ?>
-
+<h2>Select your payment option</h2>
+<div>
+This is an example for a "checkout" page of a Web shop.
+On the previous page, you have created the shopping cart
+and decided which product to buy (i.e. which project to
+donate KUDOS to).  Now in this page, you are asked to
+select a payment option.  As Taler is not yet universally
+used, we expect merchants will offer various payment options.
+<p>
+The page also demonstrates how to only enable (or show) the Taler
+option if Taler is actually supported by the browser.  For example,
+if you disable the Taler extension now, the Taler payment option
+will be disabled in the page.  Naturally, you could also trivially
+hide the Taler option entirely by changing the visibility instead.
+<p>
+Note that you MUST select Taler here for the demo to continue,
+as the other payment options are just placeholders and not
+really working in the demonstration.  Also, it is of course
+possible to ask the user to make this choice already on the
+previous page (with the shopping cart), we just separated the
+two steps to keep each step as simple as possible.
+</div>
 <form name="tform" action="" method="POST">
   <div id="opt-form" align="left"><br>
-    <input type="radio" name="payment_system" value="lisa">Lisa</input>
+    <input type="radio" name="payment_system" value="lisa"
+           id="lisa-radio-button-id">Lisa</input>
     <br>
     <input type="radio" name="payment_system" value="ycard">You Card</input>
     <br>
     <input type="radio" name="payment_system" value="cardme">Card Me</input>
     <br>
-    <input type="radio" name="payment_system" value="taler" 
-          id="taler-radio-button-id" disabled="true">GNU Taler</input>
+    <input type="radio" name="payment_system" value="taler"
+           id="taler-radio-button-id" disabled="true">Taler</input>
     <br>
     <input type="button" onclick="pay(this.form)" value="Ok">
   </div>
@@ -77,8 +99,9 @@
 
 <script type="text/javascript">
 
-/* We got a JSON contract from the merchant,
-   pass it to the extension */
+/* This function is called from "taler_pay" after
+   we downloaded the JSON contract from the merchant.
+   We now need to pass it to the extension. */
 function handle_contract(json_contract)
 {
   var cEvent = new CustomEvent('taler-contract', { detail: json_contract });
@@ -92,27 +115,41 @@ function handle_contract(json_contract)
 function taler_pay(form)
 {
   var contract_request = new XMLHttpRequest();
+
+  /* Note that the URL we give here is specific to the Demo-shop
+     and not required by the protocol: each web shop can
+     have its own way of generating and transmitting the
+     contract, there just must be a way to get the contract
+     and to pass it to the wallet when the user selects 'Pay'. */
   contract_request.open("GET", "/generate_taler_contract.php", true);
-  contract_request.onload = function (e) 
+  contract_request.onload = function (e)
   {
-    if (contract_request.readyState == 4) 
+    if (contract_request.readyState == 4)
     {
       if (contract_request.status == 200)
       {
         /* display contract_requestificate (i.e. it sends the JSON string
            to the extension) alert (contract_request.responseText); */
         handle_contract(contract_request.responseText);
-	
+
       }
-      else 
+      else
       {
-        alert("No contract got from merchant.\n" + contract_request.responseText);
+        /* There was an error obtaining the contract from the merchant,
+           obviously this should not happen. To keep it simple, we just
+           alert the user to the error. */
+        alert("Failure to download contract from merchant " +
+              "(" + contract_request.status + "):\n" +
+              contract_request.responseText);
       }
     }
   };
   contract_request.onerror = function (e)
   {
-    alert(contract_request.statusText);
+    /* There was an error obtaining the contract from the merchant,
+       obviously this should not happen. To keep it simple, we just
+       alert the user to the error. */
+    alert("Failure requesting the contract:\n" + contract_request.statusText);
   };
   contract_request.send(null);
 }
@@ -144,52 +181,61 @@ function pay(form)
 
 /* The following event gets fired whenever a customer has a Taler
    wallet installed in his browser. In that case, the webmaster can decide
-   whether or not displaying Taler as a payment option */
+   whether or not to display/enable Taler as a payment option in the dialog. */
 function has_taler_wallet_cb(aEvent)
 {
-
   // enable the Taler payment option from the form
   var tbutton = document.getElementById("taler-radio-button-id");
   tbutton.removeAttribute("disabled");
   tbutton.setAttribute("checked", "true");
- 
 };
 
-/* Function called when the Taler extension was unloaded, 
-   here we disable the option */
+
+/* Function called when the Taler extension was unloaded;
+   here we disable the Taler option and check "Lisa", as
+   some "valid" option should always be selected. */
 function taler_wallet_unload_cb(aEvent)
 {
   var tbutton = document.getElementById("taler-radio-button-id");
   tbutton.setAttribute("disabled", "true");
+  var lbutton = document.getElementById("lisa-radio-button-id");
+  lbutton.setAttribute("checked", "true");
 };
 
-/* The merchant signals its taler-friendlyness to the client */
-function signal_me()
+
+/* The merchant signals its taler-friendlyness to the wallet,
+   thereby causing the wallet to make itself more visible in the menu.
+   This function should be called both when the page is loaded
+   (i.e. via body's onload) and when we receive a "taler-load" signal
+   (as the extension may be loaded/enabled after the page was loaded) */
+function signal_taler_wallet_onload()
 {
   var eve = new Event('taler-checkout-probe');
   document.body.dispatchEvent(eve);
-  //alert("signaling");
 };
 
+
+// function included to be run to test the page despite a
+// wallet not being present in the browser.  Enables the
+// Taler option. NOT needed in real deployments.
 function test_without_wallet(){
   var tbutton = document.getElementById("taler-radio-button-id");
   tbutton.removeAttribute("disabled");
 };
 
+
+// /////////////// Main logic run first ////////////////////////
+
 // Register event to be triggered by the wallet as a response to our
 // first event
 document.body.addEventListener("taler-wallet-present",
                                has_taler_wallet_cb,
 			       false);
-// event awaited by the wallet to change its button's color
-// alert("sending");
-// var eve = new Event('taler-payment-mfirst');
-// document.body.dispatchEvent(eve);
 
 // Register event to be triggered by the wallet when it gets enabled while
 // the user is on the payment page
 document.body.addEventListener("taler-load",
-                               signal_me,
+                               signal_taler_wallet_onload,
 			       false);
 
 // Register event to be triggered by the wallet when it is unloaded
diff --git a/src/frontend/index.html b/src/frontend/index.html
index 418a05cd..a867e0af 100644
--- a/src/frontend/index.html
+++ b/src/frontend/index.html
@@ -35,12 +35,18 @@
         experience using the
         <a href="https://www.taler.net/">GNU Taler</a>
         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
+        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>
       <p>Still missing a wallet? <a href="http://demo.taler.net/extension">Install one!</a>
       </p>
@@ -48,39 +54,60 @@
   </div>
   <div class="supporting" id="instructions" role="main">
     <div class="explanation" id="installation" role="article">
-      <h2>Step 1: Installing the Taler wallet</h2>
+      <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="/extension">here</a>
-         to download and install the extension.  You will have to
+         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>
     </div>
     <div class="explanation" id="installation-done" role="article" style="display:none;">
-      <h2>Step 1: Installing the Taler wallet</h2>
-      <p>Congratulations, you have installed the wallet correctly.
+      <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>
     </div>
     <div class="explanation" id="wire" role="article" style="display:none;">
-      <h2>Step 2: Performing a wire transfer</h2>
-      <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 the mint KUDOS coins using a simple
-         SEPA-like form from the <a href="http://bank.demo.taler.net/" target="_blank">bank</a>
-	 (new tab).</p>
+      <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>
       </p>
     </div>
     <div class="explanation" id="payment" role="article" style="display:none;">
-      <h2>Step 3: Select project to donate KUDOS to!</h2>
+      <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.
-         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>
+         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>
@@ -151,20 +178,20 @@
         wallet_installed_cb();
     }
 
-    document.body.addEventListener("taler-unload", 
-                                   wallet_uninstalled_cb, 
+    document.body.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.body.addEventListener("taler-wallet-present", 
-                                   wallet_installed_cb, 
+    document.body.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.body.addEventListener("taler-load", 
-                                   signal_me, 
+    document.body.addEventListener("taler-load",
+                                   signal_me,
                                    false);
   </script>
 </body>
author	Marcello Stanisci <marcello.stanisci@inria.fr>	2015-11-17 17:33:30 +0100
committer	Marcello Stanisci <marcello.stanisci@inria.fr>	2015-11-17 17:33:30 +0100
commit	20b597e91802a3a6b925eabd4b236069fe706d8b (patch)
tree	5691505da7b00f806b3f032201d3d3bfe214e2ac
parent	ed9ac718af37c32e259e58d9e1045fc980c081bd (diff)
parent	0112f0167ed37226704f0504cc17ab3cbc618b7d (diff)
download	merchant-20b597e91802a3a6b925eabd4b236069fe706d8b.tar.gz merchant-20b597e91802a3a6b925eabd4b236069fe706d8b.tar.bz2 merchant-20b597e91802a3a6b925eabd4b236069fe706d8b.zip