Select your payment method

+ 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. +

+ 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. +

+ 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. +

Executing Payment ...

+ + diff --git a/src/frontend_blog/execute.tsx b/src/frontend_blog/execute.tsx new file mode 100644 index 00000000..67cf8e06 --- /dev/null +++ b/src/frontend_blog/execute.tsx @@ -0,0 +1,41 @@ +"use strict"; + + +// JSX literals are compiled to calls to React.createElement calls. +let React = { + createElement: function(tag, props, ...children) { + let e = document.createElement(tag); + for (let k in props) { + e.setAttribute(k, props[k]); + } + for (let child of children) { + if ("string" === typeof child || "number" == typeof child) { + child = document.createTextNode(child); + } + e.appendChild(child); + } + return e; + } +}; + +declare var h_contract: string; + +document.addEventListener("DOMContentLoaded", function (e) { + var eve = new CustomEvent('taler-execute-payment', {detail: {H_contract: h_contract}}); + document.dispatchEvent(eve); +}); + +function replace(el, r) { + el.parentNode.replaceChild(r, el); +} + +document.addEventListener("taler-payment-result", function (e: CustomEvent) { + if (!e.detail.success) { + alert("Payment failed\n" + JSON.stringify(e.detail)); + return; + } + console.log("finished payment"); + let msg = +

Payment successful. View your product.

; + replace(document.getElementById("loading"), msg); +}); diff --git a/src/frontend_blog/index.html b/src/frontend_blog/index.html new file mode 100644 index 00000000..a1ad1db7 --- /dev/null +++ b/src/frontend_blog/index.html @@ -0,0 +1,79 @@ + + + + Blog site demonstration + + + + + +

+ +

Blog site demonstration

+ + + +

Welcome to the Taler blog

This blog simulates how a website selling articles which integrates + Taler should work. If you don't have a Taler wallet installed, + please visit demo.taler.net. + By clicking on some article below, you get its teaser shown, but the + actual purchase happens once you will click on the 'read more' link + associated with that teaser. +

+ +

Articles list

+ +

+ +
+
Essay x
+
In essay x, we will ...
+
+ +

+ + diff --git a/src/frontend_blog/style.css b/src/frontend_blog/style.css new file mode 100644 index 00000000..c2cc51ee --- /dev/null +++ b/src/frontend_blog/style.css @@ -0,0 +1,123 @@ +body { + background-color: white; + margin: 0; + padding: 0; + font-family: Verdana, sans; +} + +header { + width: 100%; + height: 100px; + margin: 0; + padding: 0; + border-bottom: 1px solid black; +} + +header h1 { + font-size: 200%; + margin: 0; + padding: 0 0 0 120px; + position: relative; + top: 50%; + transform: translateY(-50%); +} + +header #logo { + float: left; + width: 100px; + padding: 0; + margin: 0; + text-align: center; + border-right: 1px solid black; +} + +aside { + width: 100px; + float: left; +} + +section#main { + margin: 0 0 0 100px; + padding: 20px; + border-left: 1px solid black; + height: 100%; + max-width: 40em; +} + +section#main h1:first-child { + margin-top: 0; +} + +h1 { + font-size: 160%; +} + +h2 { + font-size: 140%; +} + +h3 { + font-size: 120%; +} + +h4, h5, h6 { + font-size: 100%; +} + +.loader { + font-size: 10px; + margin: 50px auto; + text-indent: -9999em; + width: 11em; + height: 11em; + border-radius: 50%; + background: #ffffff; + background: -moz-linear-gradient(left, #000 10%, rgba(255, 255, 255, 0) 42%); + background: -webkit-linear-gradient(left, #000 10%, rgba(255, 255, 255, 0) 42%); + background: -o-linear-gradient(left, #000 10%, rgba(255, 255, 255, 0) 42%); + background: -ms-linear-gradient(left, #000 10%, rgba(255, 255, 255, 0) 42%); + position: relative; + -webkit-animation: load3 1.4s infinite linear; + animation: load3 1.4s infinite linear; + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); +} + +.loader:after { + background: #fff; + width: 75%; + height: 75%; + border-radius: 50%; + content: ''; + margin: auto; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} + +@-webkit-keyframes load3 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@keyframes load3 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + + diff --git a/src/frontend_blog/teaser.php b/src/frontend_blog/teaser.php new file mode 100644 index 00000000..e5f2e97b --- /dev/null +++ b/src/frontend_blog/teaser.php @@ -0,0 +1,46 @@ + + +*/ + +/** + * This file should: + * + * 1. fetch the article teaser and attach a 'read more' link to it + * + */ +$article = (isset($_GET['article']) ? $_GET['article'] : "No article"); +$content = file_get_contents("articles/$article.html"); +$doc = new DOMDocument(); +$doc->loadHTML($content); +$teaser = $doc->getElementById("teaser"); +?> + + + <?php echo $article ?> + + + +nodeValue + . "
read more";}; ?> + + + diff --git a/src/frontend_lib/merchants.php b/src/frontend_lib/merchants.php new file mode 100644 index 00000000..bbb0d90e --- /dev/null +++ b/src/frontend_lib/merchants.php @@ -0,0 +1,91 @@ + + * triple). Moreover, `teatax` should be a *list* of taxes + */ +function generate_contract($amount_value, + $amount_fraction, + $currency, + $transaction_id, + $desc, + $p_id, + $teatax, + $now, + $pay_url, + $exec_url){ + $contract = array ('amount' => array ('value' => $amount_value, + 'fraction' => $amount_fraction, + 'currency' => $currency), + 'max_fee' => array ('value' => 3, + 'fraction' => 01010, + 'currency' => $currency), + 'transaction_id' => $transaction_id, + 'products' => array ( + array ('description' => $desc, + 'quantity' => 1, + 'price' => array ('value' => $amount_value, + 'fraction' => $amount_fraction, + 'currency' => $currency), + 'product_id' => $p_id, + 'taxes' => array (array ('teatax' => $teatax)), + 'delivery_date' => "Some Date Format", + 'delivery_location' => 'LNAME1')), + 'timestamp' => "/Date(" . $now->getTimestamp() . ")/", + 'pay_url' => $pay_url, + 'exec_url' => $exec_url, + 'expiry' => "/Date(" . $now->add(new DateInterval('P2W'))->getTimestamp() . ")/", + 'refund_deadline' => "/Date(" . $now->add(new DateInterval('P3M'))->getTimestamp() . ")/", + 'merchant' => array ('address' => 'LNAME2', + 'name' => 'test merchant', + 'jurisdiction' => 'LNAME3'), + + 'locations' => array ('LNAME1' => array ('country' => 'Test Country', + 'city' => 'Test City', + 'state' => 'Test State', + 'region' => 'Test Region', + 'province' => 'Test Province', + 'ZIP code' => 4908, + 'street' => 'test street', + 'street number' => 20), + 'LNAME2' => array ('country' => 'Test Country', + 'city' => 'Test City', + 'state' => 'Test State', + 'region' => 'Test Region', + 'province' => 'Test Province', + 'ZIP code' => 4908, + 'street' => 'test street', + 'street number' => 20), + 'LNAME3' => array ('country' => 'Test Country', + 'city' => 'Test City', + 'state' => 'Test State', + 'region' => 'Test Region', + 'province' => 'Test Province', + 'ZIP code' => 4908))); + $json = json_encode (array ('contract' => $contract, 'exec_url' => $exec_url, 'pay_url' => $pay_url), JSON_PRETTY_PRINT); + return $json; +} + + + +/** + * Feed `$json` to the backend and return the "(pecl) http response object" + * corresponding to the `$backend_relative_url` call + */ +function give_to_backend($backend_host, $backend_relative_url, $json){ + $url = (new http\URL("http://$backend_host")) + ->mod(array ("path" => $backend_relative_url), http\Url::JOIN_PATH); + + $req = new http\Client\Request("POST", + $url, + array ("Content-Type" => "application/json")); + + $req->getBody()->append($json); + + // Execute the HTTP request + $client = new http\Client; + $client->enqueue($req)->send(); + return $client->getResponse(); +} +?> -- cgit v1.2.3

Blog - Select payment method

Select your payment method

Toy Store - Taler Demo

Executing Payment ...

Blog site demonstration

Welcome to the Taler blog

Articles list

Essay x