Skip to content

5. Anbieten von Rabatten

Jump to bottom
tolja edited this page May 28, 2018 · 11 revisions

Für die folgenden Anweisungen dient die Datei payment_basic.html als Grundlage. Dazu den dortigen Code in die Datei payment_sale.html kopieren.

Unterhalb der <h1>-Überschrift sollte wieder die Beschreibung der Seite ersetzt werden von

<p> Teil 1: Einfacher Payment Request </p>

auf:

<p> Teil 3: Payment Request mit Rabatten</p>

Um den oder die Rabatte integrieren zu können, muss dann die Variable paymentDetails angepasst werden. Im einfachsten Fall wäre dies eine Änderung von

var paymentDetails = {
      total: {label: 'Beispielprodukt', amount: {currency: 'EUR', value: '49.99'}}
      };

auf

  var paymentDetails = {
        total: {label: 'Gesamtsumme', amount: {currency: 'EUR', value: '35.00'}},
        displayItems: [
          {
            label: 'Beispielprodukt',
            amount: {currency: 'EUR', value: '49.99'},
          },
          {
            label: 'Sonderrabatt SALE',
            amount: {currency: 'EUR', value: '-14.99'},
          }]

      };

Wie man auch hier wieder sieht, nimmt der PaymentRequest selbst KEINE Berechnungen vor. Wenn etwas berechnet wird, geschieht dies IMMER manuell.

Die folgenden Änderungen im UI dienen dazu, die Rabattierung des Produktes hervorzuheben. Dazu folgenden Code zwischen den Tags <style> und </style> einfügen:

.sale {
      color: red;
    }

Nun die Zeile zwischen <div class="produkt produkt_shadow" id="produkt"> und </div>:

<strong class="produkt_preis">nur 49,99 €</strong>

durch folgende ersetzen:

  <strong class="produkt_preis"><span class="sale">nur 35.00 €</span></strong>

Ebenso muss die Zeile zwischen <div class="produkt_bought" id="produkt_bought"> und </div>:

  <p>Sie haben das Beispielprodukt erfolgreich für 49,99 € gekauft.</p>

mit folgender ersetzt werden:

  <p>Sie haben das Beispielprodukt erfolgreich für 35,00 € gekauft.</p>

Schon sollte die Rabattierung des Produktes auf der Webseite hervorgehoben und im PaymentRequest abgebildet werden.

Die komplette payment_sale.html:

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>W3C Payment Request API Tutorial</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <style>
    * {
      margin: 0;
    }

    html {
      font-family: sans-serif;
      line-height: 1.4;
      padding: 2em;
    }

    body > :not(:first-child) {
      margin-top: 1.5em;
    }

    h1,
    h2 {
      line-height: 1.15;
    }

    .produkt {
      max-width: 13em;
      padding: 1em;
      background: #fff;
    }

    .produkt> :not(:first-child) {
      margin-top: 0.85em;
    }

    .produkt_bought {
      padding: 1em;
      background: #fff;
    }

    .data_list {
      max-width: 100%;
    }

    .produkt_bought> :not(:first-child) {
      margin-top: 0.85em;
    }

    .produkt_bought {
      display: none;
    }

    .produkt_shadow {
      position: relative;
      -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    }

    .produkt_shadow:after {
      content: "";
      position: absolute;
      z-index: -1;
      -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
      box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
      bottom: 0px;
      left: 10%;
      right: 10%;
      width: 80%;
      height: 50%;
      -moz-border-radius: 100%;
      border-radius: 100%;
    }

    .produkt_meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .produkt_button {
      background-color: #008CBA;
      color: #fff;
      padding: 0.25em 1em;
      text-decoration: none;
    }

    ul.nav {
    margin:0;
    padding:0;
    list-style:none;
    height:36px;
    margin-top:20px;

    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    }

    ul.nav li {
    float:left;
    }

    ul.nav a {
    display:block;
    padding:0 28px;
    color:#000;
    text-decoration:none;
    }

    .sale {
      color: red;
    }

  </style>
</head>
<body>

  <h1>W3C Payment Request API Tutorial</h1>

  <ul class="nav">
  <li><a href="/">1. Basic</a></li>
  <li><a href="/2">2. shippingAddress</a></li>
  <li><a href="/3">3. Sale</a></li>
  <li><a href="/4">4. reject Creditcards</a></li>
  <li><a href="/5">5. Tax</a></li>
  <li><a href="/6">6. reject shippingAddress</a></li>
  </ul>

  <p> Teil 3: Payment Request mit Rabatten</p>


  <div class="produkt produkt_shadow" id="produkt">
    <h2>Beispielprodukt</h2>
    <p>Ich bin ein ganz tolles Produkt! Kauf mich!</p>
    <div class="produkt_meta">
       <strong class="produkt_preis"><span class="sale">nur 35.00 €</span></strong>
      <a href="#" id="produkt_button" class="produkt_button">Kaufen</a>
    </div>
  </div>

  <div class="produkt_bought" id="produkt_bought">
    <h2>Beispielprodukt gekauft!</h2>
    <p>Sie haben das Beispielprodukt erfolgreich für 35,00 € gekauft.</p>
    <p>Ihre Daten:</p>
    <div id="data_list"></div>

  </div>

  <script>
    function handleProduktClick(e) {
      e.preventDefault();

      var creditCardPaymentMethod = {
        supportedMethods: 'basic-card',
      };

      var supportedPaymentMethods = [creditCardPaymentMethod];

      var paymentDetails = {
        total: {label: 'Gesamtsumme', amount: {currency: 'EUR', value: '35.00'}},
        displayItems: [
          {
            label: 'Beispielprodukt',
            amount: {currency: 'EUR', value: '49.99'},
          },
          {
            label: 'Sonderrabatt SALE',
            amount: {currency: 'EUR', value: '-14.99'},
          }]

      };

      var paymentRequest = new PaymentRequest(supportedPaymentMethods, paymentDetails);

      paymentRequest
        .show()
        .then(paymentResponse => {
          return verifyPaymentWithBackend(paymentResponse).then((success) => {
            if (success) {
              showPaymentResponse(JSON.parse(success));
              return paymentResponse.complete('success');

            } else {
              return paymentResponse.complete('fail');
            }
          });
        })
        .catch(err => {
          console.log('Error:', err);
        });
    };

    function showPaymentResponse(data) {

      document.getElementById("produkt_button").innerHTML = 'Gekauft';
      document.getElementById("produkt_button").style.backgroundColor = "#4CAF50";

      document.getElementById("produkt_button").removeEventListener('click', handleProduktClick);

      document.getElementById("produkt_bought").style.display = "block";

      document.getElementById("data_list").innerHTML = JSON.stringify(data);

    }

    function verifyPaymentWithBackend(data) {
      return new Promise((resolve, reject) => {

        var xmlhttp = new XMLHttpRequest();

        xmlhttp.onload = function() {

          if (xmlhttp.status == 201) {

            resolve(xmlhttp.responseText);
          } else {
            resolve(false)
          }
        };


        xmlhttp.open("POST", "/payment");
        xmlhttp.setRequestHeader("Content-Type", "application/json");

        xmlhttp.send(JSON.stringify(data));

      });
    }

    document.getElementById("produkt_button").addEventListener('click', handleProduktClick)
  </script>
</body>

</html>
Clone this wiki locally