diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/frontend_blog/cc_payment.html | 39 | ||||
| -rw-r--r-- | src/frontend_blog/teaser.php | 125 |
2 files changed, 160 insertions, 4 deletions
diff --git a/src/frontend_blog/cc_payment.html b/src/frontend_blog/cc_payment.html new file mode 100644 index 00000000..fc7e887f --- /dev/null +++ b/src/frontend_blog/cc_payment.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <title>Enter your details</title> + <link rel="stylesheet" type="text/css" href="style.css"> +</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">B</text> + </svg> + </div> + + <h1>Blog site demonstration</h1> + </header> + + <aside class="sidebar" id="left"> + </aside> + + <section id="main"> + <article> + <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 type="submit"></input> + </form> + </article> + </section> +</body> +</html> diff --git a/src/frontend_blog/teaser.php b/src/frontend_blog/teaser.php index e5f2e97b..6f404f2b 100644 --- a/src/frontend_blog/teaser.php +++ b/src/frontend_blog/teaser.php @@ -33,14 +33,131 @@ $teaser = $doc->getElementById("teaser"); <?php echo $article ?> </title> </head> -<body> +<body onload="signal_taler_wallet_onload();"> <?php if ($article == "No article") echo "Please select some article"; else { session_start(); $_SESSION['article'] = $article; - echo $teaser->nodeValue - . "<br><a href=\"/essay_checkout.php\">read more</a>";}; ?> + echo $teaser->nodeValue; + } +?> + <br><a href="cc_payment.html" id="read-more">read more</a> + +</body> +<script> +/* 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 }); + + document.dispatchEvent(cEvent); +}; + +function taler_pay() +{ + 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", "essay_contract.php", true); + contract_request.onload = function (e) + { + 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); */ + console.log("contract here"); + console.log("response text:", contract_request.responseText); + 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 from merchant " + + "(" + 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(null); +} + +/* 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 to display/enable Taler as a payment option in the dialog. */ +function has_taler_wallet_cb(aEvent) +{ + console.log("has taler wallet"); + // make "read more" trigger Taler payment + var rm = document.getElementById("read-more"); + rm.setAttribute("href", "javascript:taler_pay();"); +}; + +/* 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 rm = document.getElementById("read-more"); + rm.setAttribute("href", "cc_payment.html"); +}; + + +/* 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-probe'); + document.dispatchEvent(eve); +}; + + +// 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.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); -<body> +// Register event to be triggered by the wallet when it is unloaded +document.addEventListener("taler-unload", + taler_wallet_unload_cb, + false); +</script> </html> |