Add contract example, remove legacy example

3 files changed, 35 insertions, 45 deletions

diff --git a/articles/ui/figs/taler-contract.html b/articles/ui/figs/taler-contract.html
new file mode 100644
index 000000000..7d4b8d5bf
--- /dev/null
+++ b/articles/ui/figs/taler-contract.html
@@ -0,0 +1,6 @@
+<script src="taler-wallet-lib.js"></script>
+<script>
+  taler.offerContractFrom("https://myshop/products/article/42", (err) => {
+    alert("Error while offering contract");
+  });
+</script>
diff --git a/articles/ui/figs/taler-contract.js b/articles/ui/figs/taler-contract.js
deleted file mode 100644
index 3c0079226..000000000
--- a/articles/ui/figs/taler-contract.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/* Trigger Taler contract generation on the server, and pass the
-   contract to the extension once we got it. */
-function taler_pay(form) {
-  var contract_request = new XMLHttpRequest();
-
-  /* Note that the URL we give here is simply an example
-     and not dictated 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", true);
-  contract_request.onload = function (e) {
-    if (contract_request.readyState == 4) {
-      if (contract_request.status == 200) {
-        /* Send contract to the extension. */
-        handle_contract(contract_request.responseText);
-      } else {
-        /* 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 " +
-              "(" + contract_request.status + "):\n" +
-              contract_request.responseText);
-      }
-    }
-  };
-  contract_request.onerror = function (e) {
-    /* 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();
-}
-
-<script src="taler-wallet-lib.js"></script>
-<script>
-  taler.offerContractFrom("https://myshop/products/article/42", (err) => {
-    alert("Error while offering contract");
-  });
-</script>
diff --git a/articles/ui/ui.tex b/articles/ui/ui.tex
index b927fe034..47c9e01d2 100644
--- a/articles/ui/ui.tex
+++ b/articles/ui/ui.tex
@@ -747,8 +747,8 @@ merchant, the customer may choose to cover them.
 
 
 \begin{figure*}[h!]
- \lstset{language=JavaScript}
- \lstinputlisting{figs/taler-contract.js}
+ \lstset{language=HTML5}
+ \lstinputlisting{figs/taler-contract.html}
  \caption{Sample code to pass a contract to the Taler wallet.
           Here, the contract is fetched on-demand from the server.
           The {\tt taler\_pay()} function needs to be invoked
@@ -770,6 +770,32 @@ so that the selection of alternative payment methods can be skipped if
 a Taler wallet is installed (as it is in Figure~\ref{fig:shopping}).
 
 \begin{figure*}[h!]
+  \lstset{language=JavaScript}
+\begin{lstlisting}
+{
+  "H_wire":"JCDAV...",
+  "amount":{"currency":"KUDOS","fraction":100000,"value":0},
+  "auditors":[],
+  "exchanges":[{"master_pub":"CQA...","url":"https://myexchange/"}],
+  "expiry":"/Date(1480119270)/",
+  "fulfillment\_url": "https://myshop/essay/...",
+  "max_fee":{"currency":"KUDOS","fraction":0,"value":3},
+  "merchant":{"address":"Somewhere","jurisdiction":"none","name":"Kudos Inc."},
+  "merchant_pub":"YDP...",
+  "products":[{
+    "description":"Essay: The GNU Project",
+    "price":{"currency":"KUDOS","fraction":100000,"value":0},
+    "product_id":0,"quantity":1}],
+  "refund_deadline":"/Date(1471522470)/",
+  "timestamp":"/Date(1471479270)/",
+  "transaction_id":249960194066269
+}
+\end{lstlisting}
+ \caption{Minimal Taler contract.}
+  \label{listing:contract}
+\end{figure*}
+
+\begin{figure*}[h!]
   \lstset{language={}}
 \begin{lstlisting}
 HTTP/1.1 402 Payment Required
@@ -790,7 +816,7 @@ X-Taler-Contract-Url: https://myshop/generate-contract?product=42
 \end{figure*}
 
 The offer URL of the Web shop can then initiate payments by sending a
-\emph{contract proposal} to the wallet, either via the HTTP status
+\emph{contract proposal} (Figure~\ref{listing:contract}) to the wallet, either via the HTTP status
 code {\tt 402 Payment Required} (Figure~\ref{listing:http-contract}), or via Taler's JavaScript API
 (Figure~\ref{listing:contract}).  The wallet then presents the
 contract to the user.  The format of the contract is in an extensible