Skip to content

7. Hinzufügen von Steuern

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

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

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

<p> Teil 2: Payment Request mit Lieferadresse </p>

auf:

<p> Teil 5: Payment Request mit Steuer</p>

Auch wenn eine Steuer hinzugefügt werden soll, geschieht dies über die Änderung der Variable paymentDetails. Diese muss dazu von der aktuellen Form

var paymentDetails = {
        total: {
          label: 'Gesamtsumme',
          amount: {
            currency: 'EUR',
            value: '49.99'
          }
        },
        displayItems: [{
            label: 'Beispielprodukt',
            amount: {
              currency: 'EUR',
              value: '49.99'
            },
          },
          {
            label: 'Standardversand',
            amount: {
              currency: 'EUR',
              value: '0.00'
            },
          }

        ],
        shippingOptions: [{
            id: 'standard',
            label: 'Standardversand',
            amount: {
              currency: 'EUR',
              value: '0.00'
            },
            selected: true
          },
          {
            id: 'express',
            label: 'Expressversand',
            amount: {
              currency: 'EUR',
              value: '14.99'
            },
          },
        ],
      };

auf die neue Form:

var paymentDetails = {
   total: {label: 'Gesamtsumme', amount: {currency: 'EUR', value: '49.99'}},
   displayItems: [
     {
       label: 'Beispielprodukt',
       amount: {currency: 'EUR', value: '40.50'},
     },
     {
        label: "Mehrwertsteuer (19%)",
        amount: { currency: "EUR", value: "9.49" },
    },
     {
        label: 'Standardversand',
        amount: {currency: 'EUR', value: '0.00'},
      }

   ],
   shippingOptions: [
     {
       id: 'standard',
       label: 'Standardversand',
       amount: {currency: 'EUR', value: '0.00'},
       selected: true
     },
     {
       id: 'express',
       label: 'Expressversand',
       amount: {currency: 'EUR', value: '14.99'},
     },
   ],
 };

angepasst werden. Wie man sieht ändert sich lediglich der Kaufpreis des Produktes (value: '40.50'), um die Mehrwertsteuer von 19% abzubilden, die in einem weiteren Objekt mit

 {
        label: "Mehrwertsteuer (19%)",
        amount: { currency: "EUR", value: "9.49" },
    }

definiert wird.

Um das neu hinzugefügte Feld bei einer Änderung der Versandoption nicht verschwinden zu lassen, muss nun zusätzlich die updateDetails()-Funktion angepasst werden. Konkret muss dort die Zeile

details.displayItems.splice(1, 2, selectedShippingOption);

in

details.displayItems.splice(2, 1, selectedShippingOption);

geändert werden.

Der komplette Code der payment_tax.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;
    }

    #express_selected {
      display: none;
    }

    .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;
    }
  </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 5: Payment Request mit Steuer</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">nur 49.99 €</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 49,99 € <span id="express_selected">(+ 14,99 € Expressversand)</span> 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: '49.99'}},
     displayItems: [
       {
         label: 'Beispielprodukt',
         amount: {currency: 'EUR', value: '40.50'},
       },
       {
          label: "Mehrwertsteuer (19%)",
          amount: { currency: "EUR", value: "9.49" },
      },
       {
          label: 'Standardversand',
          amount: {currency: 'EUR', value: '0.00'},
        }

     ],
     shippingOptions: [
       {
         id: 'standard',
         label: 'Standardversand',
         amount: {currency: 'EUR', value: '0.00'},
         selected: true
       },
       {
         id: 'express',
         label: 'Expressversand',
         amount: {currency: 'EUR', value: '14.99'},
       },
     ],
   };

      var options = {
        requestShipping: true
      };

      var paymentRequest = new PaymentRequest(supportedPaymentMethods, paymentDetails, options);


      paymentRequest.addEventListener('shippingoptionchange', function(evt) {
        evt.updateWith(new Promise(function(resolve, reject) {
          updateDetails(paymentDetails, paymentRequest.shippingOption, resolve, reject);
        }));
      });

      function updateDetails(details, shippingOption, resolve, reject) {
        if (shippingOption === 'standard') {
          selectedShippingOption = details.shippingOptions[0];
          otherShippingOption = details.shippingOptions[1];
          details.total.amount.value = '49.99';
        } else if (shippingOption === 'express') {
          selectedShippingOption = details.shippingOptions[1];
          otherShippingOption = details.shippingOptions[0];
          details.total.amount.value = '64.98';

        } else {
          reject('Unbekannte Versandart \'' + shippingOption + '\'');
          return;
        }
        selectedShippingOption.selected = true;
        otherShippingOption.selected = false;
      details.displayItems.splice(2, 1, selectedShippingOption);
        resolve(details);
      }

      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";

      if (data.shippingOption == "express") {
        document.getElementById("express_selected").style.display = "inline-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