summaryrefslogtreecommitdiff
path: root/examples/blog/essay_cc-form.html
blob: 7a95435c8ee7bc52bc23a103bede6b2937c12525 (plain)
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
<!DOCTYPE html>
<!-- 
  This file is part of GNU TALER.
  Copyright (C) 2014, 2015, 2016 INRIA

  TALER is free software; you can redistribute it and/or modify it under the
  terms of the GNU Lesser General Public License as published by the Free Software
  Foundation; either version 2.1, or (at your option) any later version.

  TALER is distributed in the hope that it will be useful, but WITHOUT ANY
  WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
  A PARTICULAR PURPOSE.  See the GNU Lesser General Public License for more details.

  You should have received a copy of the GNU Lesser General Public License along with
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>

  @author Marcello Stanisci
  @author Florian Dold
  @author Gabor Toth
-->
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body style="display:none;" lang="en" bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">
    <header>
      <div id="logo"><a href="/"><img src="../gnu.svg" height="100" width="100"/></a></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>
      </form>
      <form method="post" action="essay_cc-fulfillment.php?article={article}">
        <input type="submit"></input>
      </form>
    </section>
    <script type="application/javascript">
    function handle_contract(contract_wrapper) {
      var cEvent = new CustomEvent("taler-confirm-contract", {
        detail: {
          contract_wrapper: contract_wrapper,
          replace_navigation: true
        }
      });
      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);
            var contract_wrapper = JSON.parse(contract_request.responseText);
            if (!contract_wrapper) {
              console.error("response text was invalid json");
              return;
            }
            handle_contract(contract_wrapper);
          } 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();
    }

    var walletNotPresent = false;
    var timer;

    function has_taler_wallet_cb(aEvent){
      if (timer) {
        window.clearTimeout(timer);
        timer = void 0;
      }
      if (walletNotPresent) {
        return;
      }
      // FIXME: this is a template, but very ugly ...
      {jscode}
    };

    
    function handleTimeout() {
      walletNotPresent = true;
      document.body.style.display = "";
      document.body.classList.add("fade");
    }
  
    document.addEventListener("taler-wallet-present",
                              has_taler_wallet_cb,
                              false);

    timer = window.setTimeout(handleTimeout, 250);
  
    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="web-common/taler-presence.js"></script>
  </body>
</html>