1 files changed, 96 insertions, 0 deletions
diff --git a/examples/blog/essay_cc-form.html b/examples/blog/essay_cc-form.html
new file mode 100644
index 00000000..e4695b89
--- /dev/null
+++ b/examples/blog/essay_cc-form.html
@@ -0,0 +1,96 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="../style.css">
+  </head>
+  <body lang="en" bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">
+    <header>
+      <div id="logo"><img src="../gnu.svg" height="100" width="100"></div>
+      <h1>Credit card payment</h1>
+    </header>
+    <section id="main">
+      <em>This page only <u>simulates</u> a credit card payment, in order to make
+          the blog demo more realistic. Therefore <u>no data</u> will be sent when
+	  submitting the form</em>
+      <h1>Enter your details</h1>
+      <p>We need a few details before proceeding with credit card payment</p>
+      <form>
+        First name<br> <input type="text"></input><br>
+        Family name<br> <input type="text"></input><br>
+        Age<br> <input type="text"></input><br>
+        Nationality<br> <input type="text"></input><br>
+        Gender<br> <input type="radio" name"gender">Male</input>
+        <input type="radio" name="gender">Female</input><br>
+        <input id='article-name' type="hidden" value="{article}"></input>
+      </form>
+      <form method="post" action="essay_cc-fulfillment.php?article={article}">
+        <input type="submit"></input>
+      </form>
+    </section>
+    <script type="application/javascript">
+    function handle_contract(json_contract) {
+      var cEvent = new CustomEvent('taler-contract',
+                                   {detail: json_contract});
+      document.dispatchEvent(cEvent);
+    };
+
+    function get_contract(article) {
+      var contract_request = new XMLHttpRequest();
+      contract_request.open("GET",
+                            "essay_contract.php?article=" + article,
+	                    true);
+      contract_request.onload = function (e) {
+        if (contract_request.readyState == 4) {
+          if (contract_request.status == 200) {
+            console.log("response text:",
+	                contract_request.responseText);
+            handle_contract(contract_request.responseText);
+          } else {
+          alert("Failure to download contract from merchant " +
+                "(" + contract_request.status + "):\n" +
+                contract_request.responseText);
+          }
+        } 
+      };
+      contract_request.onerror = function (e) {
+        alert("Failure requesting the contract:\n"
+              + contract_request.statusText);
+        };
+      contract_request.send();
+    }
+
+    function has_taler_wallet_cb(aEvent){
+      var article = document.getElementById('article-name');
+      get_contract(article.value); 
+    };
+  
+    function signal_taler_wallet_onload(){
+      var eve = new Event('taler-probe');
+      document.dispatchEvent(eve);
+    };
+  
+    document.addEventListener("taler-wallet-present",
+                              has_taler_wallet_cb,
+                              false);
+  
+    // Register event to be triggered by the wallet when it gets enabled while
+    // the user is on the payment page
+    document.addEventListener("taler-load",
+                              signal_taler_wallet_onload,
+                              false);
+
+    function executePayment(H_contract, pay_url, offering_url) {
+      var detail = {
+        H_contract: H_contract,
+        pay_url: pay_url,
+        offering_url: offering_url
+      };
+      var eve = new CustomEvent('taler-execute-payment', {detail: detail});
+      document.dispatchEvent(eve);
+    }
+    </script>
+    <script type="application/javascript" src="taler-presence.js"></script>
+    <script type="text/javascript">
+      {jscode}
+    </script>
+  </body>
+</html>