Home

Tutorial W3C Payment Request API

METADATEN

Modul: Web Technologien (MMI Master)

Entstehungsjahr: 2018

Autor: Anatol Walger

Keywords: w3c payment request api, tutorial, node.js, kreditkarte

Zielgruppe: Das Tutorial richtet sich an alle, die auf ihrer Webseite Bezahlprozesse abwickeln wollen. Dies sind in erster Linie Unternehmen mit Online-Shops, Crowdfunding-Seiten, Spenden-Seiten.. Überall wo es nötig ist, persönliche Daten + Zahlungsdaten immer wieder neu einzugeben. Natürlich können auch Early Adopter und Technikbegeisterte teilnehmen, die einfach neue Technologien ausprobieren wollen.

Beschreibung: Gegenstand des Tutorials ist die W3C Payment Request API, die am besten in Google Chrome funktioniert und dabei hilft, Zahlungen schneller und eleganter zu tätigen. Ziel soll sein, selber einen Payment Request mit unterstützten Zahlungsmethoden, benötigten Daten des Benutzers und weiteren Parametern (Gesamtsumme, Rabatte) zu erstellen, sodass der Browser einen entsprechenden Payment-Dialog mit den Daten präsentiert, wobei man dann über einen vorher aufgesetzten node.js Server die Zahlung virtuell abwickelt. Ebenso sollen Fälle abgedeckt werden, in denen der Browser keine unterstützte Zahlungsmethode hat oder noch weitere Informationen vom Benutzer notwendig sind (neue bzw. andere Lieferadresse).

Voraussetzungen:

• Grundkenntnisse in Javascript, HTML, CSS
• Erste Erfahrungen mit node.js
• bestenfalls Browser Google Chrome (Version >64)
• Computer/Mac
• Kreditkarte

---

Herzlich Willkommen zum Tutorial, das Ihnen das W3C Payment Request API näher bringen soll. Mithilfe der nachfolgenden Anweisungen soll es Ihnen so leicht wie möglich gemacht werden, einen node.js Server und die HTML-Webseite für die Ausführung des Payment Requests aufzusetzen.

node.js Server

Wir konfigurieren einen node.js Server, um die persönlichen Daten und Zahlungsdaten vom Benutzer, welche vom Browser durch das Payment Request API gesendet werden, zu empfangen. Somit ist es möglich, einen Erfolgshinweis und auch die empfangenen Daten nochmals anzuzeigen.

Zur Installation von node.js muss der Installer von dieser Webseite heruntergeladen werden. Es sollte die "LTS"-Version genutzt werden, da sie auf einem stabilen Build basiert. Neuere Funktionen sind nicht notwendig.

Nach der Installation von node.js muss eine Ordnerstruktur angelegt werden. Diese sieht wie folgt aus:

- server/
-- models/
--- payment.js // Das Datenmodell für den Empfang von Zahlungsinformationen
- package.json // definiert notwendige Pakete und Abhängigkeiten
- server.js // konfiguriert den Server und definiert die Routen

Im Terminal lassen sich Ordner mit mkdir und Dateien mit touch anlegen.

Nachdem alle Ordner und Dateien angelegt sind, wird die package.json mit einem beliebigen Editor (empfohlen: Atom) geöffnet und folgendes eingetragen:

{
    "name": "payment-server",
    "main": "server.js",
    "dependencies": {
        "express": "~4.16.3",
        "mongoose": "~5.1.2",
        "body-parser": "~1.18.3"
    }
}

Wir definieren mit express die Middleware, die uns später das Definieren von Routen erleichtert. Mit mongoose können Datenmodelle zur leichteren Kommunikation mit der mongodb-Datenbank erstellt werden. Der body-parser ermöglicht uns, den Body einer HTTP-Anfrage auszulesen. Somit kann der POST-Request für die Duchführung einer Zahlung verwaltet werden.

Nachdem die package.json angelegt wurde, werden mit dem Befehl npm install alle definierten Abhängigkeiten installiert.

Nun wird die server.js mit Code befüllt. Dazu den nachfolgenden Code in die Datei einfügen:

// Abhängigkeiten definieren
var express    = require('express');        
var server        = express();                 // express an die Variable "server" binden
var bodyParser = require('body-parser');

// bodyparser konfigurieren
server.use(bodyParser.urlencoded({ extended: true }));
server.use(bodyParser.json());

var port = process.env.PORT || 8080;        // Port für den Server setzen

var router = express.Router();              // Instanz des express Routers 

server.use('/', router); // Router konfigurieren

server.listen(port); // Server starten