In der Vergangenheit enthielten statische Websites in der Regel Produktbilder und -beschreibungen und forderten die Kunden auf, per E-Mail oder Telefon zu bestellen. Heute erwarten die Kunden jedoch ein dynamischeres Erlebnis mit robusten E-Commerce-Funktionen. Dies vereinfacht den Kaufprozess und ermutigt die Nutzer/innen, ihre Einkäufe auf deiner Website zu tätigen, anstatt sich bei der Konkurrenz umzusehen.

Das Hinzufügen eines Zahlungsgateways und einer Kasse zu deiner statischen Website ist ganz einfach. Mithilfe von Anwendungsprogrammierschnittstellen (APIs) und serverlosen Architekturen kannst du E-Commerce-Funktionen in statische Websites einbetten, sodass dein Unternehmen Transaktionen direkt akzeptieren kann.

In diesem Tutorial geht es um das Hinzufügen der Zahlungsgateways PayPal und Stripe zur statischen Website eines Blumenladens. Folge den Schritten, um zu lernen, wie du diese Funktionen zu deiner Website hinzufügen und neue Möglichkeiten zur Steigerung des Online-Umsatzes etablieren kannst.

Erste Schritte

Bevor wir uns mit den Schritten für die Integration eines Zahlungsgateways und der Kasse in deine statische Website befassen, wollen wir die Grundlagen für eine reibungslose und erfolgreiche Implementierung schaffen.

  1. Lade diesen Beispielcode für eine statische Website herunter und stelle ihn auf dem Statische-Seiten-Hosting von Kinsta bereit.
  2. Melde dich für ein PayPal-Konto an und entscheide dich für ein Geschäftskonto, da es für diese Anleitung besser geeignet ist. Diese Art von Konto ist notwendig, um die integrierten Schaltflächen zu testen. Nachdem du dich angemeldet hast, fügst du deine Geschäftsinformationen hinzu und verknüpfst ein Bankkonto. Wenn du dein Konto verifiziert hast, kannst du im PayPal-Entwicklerportal API-Zugangsdaten für die spätere Verwendung erhalten.
  3. Erstelle ein Stripe-Konto und gib deine Geschäfts- und Bankdaten ein. Stripe bietet eine schnelle Kontoaktivierung, was für dieses Projekt von Vorteil ist. Sobald dein Konto aktiviert ist, kannst du sofort auf das Stripe-Dashboard zugreifen. Hier erhältst du deinen API-Schlüssel, der für die folgenden Schritte entscheidend ist.

Überprüfe die statische Beispielseite

In diesem Leitfaden wird eine bereits vorhandene statische Website verwendet, um die Integration der PayPal- und Stripe-Kassenfunktionen zu zeigen. Trotz ihres statischen Inhalts ähnelt die Beispielseite einem Online-Blumenladen.

Die Kinsta-Hosting-Infrastruktur für statische Websites bietet eine effiziente Umgebung für den Einsatz und das Testen von PayPal- und Stripe-Kassenfunktionen, um eine anspruchsvolle und ansprechende statische Website zu erstellen.

Nachdem du deine Website auf Kinsta eingerichtet hast, rufe die Startseite auf. Klicke auf die Schaltfläche BESTELLUNGSANFRAGE.

Eine Blumenladen-Webseite mit einem Bild eines Blumenstraußes, einer Bestellanfrage-Schaltfläche und Links zu anderen Seiten und dem Einkaufswagen
Beispiel für eine Startseite mit einer Schaltfläche BESTELLUNG ANFRAGEN

Wähle auf der Seite Blumenkatalog ein verfügbares Produkt aus – die türkische Rose.

Der Blumenkatalog mit verschiedenen Blumensträußen, ihren Größen und Preisen, jeweils mit einem Einkaufswagen-Symbol, um sie in den Warenkorb zu legen
Beispielseite des Katalogs mit verschiedenen Blumenoptionen

Diese Aktion führt dich zur Produktdetailseite, auf der die Zahlungsschaltflächen für PayPal und Stripe implementiert sind.

Optionen für die Bestellung der Türkischen Rose. Es gibt Optionen für Größe und Farbe, die Lieferung per Kurier oder Abholung und den Preis
Die Produktseite der Beispielseite

So integrierst du die PayPal-Kasse in deine statische Website

Wenn du eine PayPal-Kasse einfügst, kannst du deinen Kunden eine sichere und vertrauenswürdige Zahlungsmethode anbieten und den Transaktionsprozess vereinfachen. Diese Integration kann die Funktionalität deiner Website und die Kundenzufriedenheit erheblich steigern.

Hier erfährst du, wie du die PayPal-Kasse in deine statische Website integrierst:

  1. Melde dich im PayPal Developer Dashboard an.
  2. Navigiere auf dem Dashboard zum Abschnitt Anwendungen & Anmeldeinformationen. Schalte den Sandbox-Modus ein und klicke dann auf Anwendung erstellen.
  3. Gib deiner Anwendung in dem Formular einen Namen (z.B. Kinsta Gateway Demo). Wähle als Typ Händler und klicke auf Anwendung erstellen.

    Das Formular "Anwendung erstellen" bei PayPal mit einem Feld für den Namen der Anwendung, Optionsfeldern zur Auswahl des Typs als Händler oder Plattform und einem Feld für das Sandbox-Konto
    Das Formular „Anwendung erstellen“ von PayPal

  4. Kopiere die Kunden-ID aus dem Abschnitt mit den API-Anmeldedaten, um später eine PayPal-Kassenschaltfläche zu erstellen.

    Anmeldedaten auf PayPal für die Kinsta Gateway Demo Anwendung. Der Abschnitt mit den API-Anmeldeinformationen enthält den Namen der Anwendung, die Kunden-ID und den geheimen Schlüssel. Die Sandbox-Kontoinformationen enthalten die URL, die Region, die E-Mail und das Passwort
    Anmeldedaten für die PayPal-Anwendung

  5. Scrolle auf der Seite der Anwendung nach unten, um weitere Einstellungen zu überprüfen. Die Standardeinstellungen sind für diesen Leitfaden ausreichend. Klicke auf Änderungen speichern.

    Die Funktionen der PayPal Anwendung mit Checkboxen unter Zahlungen akzeptieren für Vault, Native Checkout SDK, Abonnements, Rechnungsstellung und PayPal Here. Zu den Kontrollkästchen unter Andere Funktionen gehören Auszahlungen, Kundenstreitigkeiten, Anmelden bei PayPal und Transaktionssuche.
    Die Funktionen der PayPal-Anwendung

  6. Als Nächstes integrierst du die PayPal-Kasse in deine statische Website. Erstelle eine Schaltfläche für die Kasse mit dem JavaScript-SDK für alternative Zahlungsmethoden (APM) von PayPal. Damit kannst du verschiedene Zahlungsmethoden in eine statische Website integrieren, ohne eine Backend-Anwendung einzurichten. Füge den folgenden JavaScript-Code in die Datei product.html ein, kurz vor dem schließenden </body> Tag. Ersetze YOUR_CLIENT_ID durch deine PayPal-Kunden-ID. Eventuell musst du auch die Währung USD durch die Währung ersetzen, die dein PayPal-Konto akzeptiert.
    <!-- PAYPAL BUTTON SCRIPT-->
    <script   
    src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID¤cy=USD"   
    data-sdk-integration-source="button-factory"></script>
    <script>
    paypal.Buttons({
    	createOrder: function(data, actions) {
    	// Set up the transaction
    	return actions.order.create({
    		purchase_units: [{
    		amount: {
    			value: '1.00'
    		}
    		}]
    	});
    	},
    	onApprove: function(data, actions) {
    	// Capture the funds from the transaction
    	return actions.order.capture().then(function(details) {
    		// Show a success message to the buyer
    		alert('Transaction completed by ' + details.payer.name.given_name);
    	});
    	}
    }).render('#paypal-button-container');
    </script>
    <!-- PAYPAL BUTTON SCRIPT-->

    Die Funktion paypal.Buttons definiert zwei Funktionen:

    • createOrder – Legt die Transaktionsdetails fest, z. B. den Kaufbetrag (in diesem Fall 1,00 USD).
    • onApprove – Sie wickelt die Genehmigung der Transaktion ab, indem sie den Geldbetrag erfasst und dem Käufer eine Erfolgsmeldung anzeigt. Im obigen Code verwenden wir die Funktion alert().

    Schließlich legt die Funktion render fest, dass die PayPal-Schaltfläche innerhalb der bestehenden <div> mit der ID paypal-button-container dargestellt werden soll.

    Jetzt hast du PayPal in deine statische Website integriert.

So integrierst du Stripe Checkout in deine statische Website

Stripe ist eine weit verbreitete Technologieplattform, die Lösungen zur Zahlungsabwicklung für Unternehmen jeder Größe anbietet. Hier erfährst du, wie du Stripe-Zahlungen in deine statische Website integrieren kannst:

  1. Bevor du den Stripe-Checkout-Button implementierst, kannst du Produkte und Preise über eine API oder das Stripe-Dashboard verwalten. Um das Dashboard zu nutzen, öffne es, wähle den Testmodus und klicke auf Produktkatalog.

    Produktkatalogseite mit der Option, alle, verfügbare oder archivierte Produkte aufzulisten und einer Schaltfläche, um ein Produkt hinzuzufügen.
    Stripe Produktkatalog Seite

  2. Klicke auf die Schaltfläche + Produkt hinzufügen, um das Formular zum Hinzufügen eines Produkts zu öffnen.

    Füge eine Produktoption mit Feldern für Name und Beschreibung, Bilddetails mit der Option zum Entfernen, einem Link für weitere Optionen, Schaltflächen zur Auswahl von wiederkehrend oder einmalig, einem Feld für den Betrag und einer Dropdown-Box für die Währung sowie einem Link für erweiterte Preisoptionen hinzu
    Die Seite Produkt hinzufügen von Stripe

  3. Gib die Details deines Produkts in die folgenden Felder ein:
    • Name: Türkische Rose
    • Beschreibung: Dies ist eine wunderschöne türkische Rose
    • Bild: (Lade das Beispiel hoch imagesturkishrose.png datei)
    • Zahlungsmodell: Einmalig
    • Betrag: $1.00
    • Währung: USD (oder die Währung deiner Wahl)
  4. Klicke auf Produkt hinzufügen.
  5. Wähle in der Liste des Produktkatalogs das Produkt Türkische Rose aus.

    Produktkataloglisten mit der Türkischen Rose, ihrem Vorschaubild, Preis, Währung, Erstellungsdatum und Aktualisierungsdatum
    Stripe Produktkatalog Details

  6. Klicke im Abschnitt Preise für Produkte auf den Link Zahlung erstellen. Überprüfe die Produktoptionen und stelle sicher, dass die Menge 1 ist.

    Details zum Turkish Rose-Produkt, einschließlich Preis, Währung, Aktualisierungsdatum, Name, Beschreibung und Bild, sowie die Preisoptionen einschließlich der App-ID und einer Schaltfläche zum Erstellen eines Zahlungslinks
    Stripe Produktdetails für die Türkische Rose

  7. Klicke auf Link erstellen.

    Optionen zum Erstellen eines Zahlungslinks. Enthält das Produkt, ein Feld für die Menge und ein Kontrollkästchen, damit Kunden die Menge anpassen können, einen Link, um ein weiteres Produkt hinzuzufügen, Optionen zur Erfassung von Kundenadressen, Telefonnummern und benutzerdefinierten Feldern, ein Menü für erweiterte Optionen und eine Vorschau, wie die Zahlungsseite für dieses Produkt aussehen wird, einschließlich Apple Pay-Details
    Gib die Stripe-Produktdaten für die Zahlung ein

  8. Klicke auf der Seite PAYMENT LINK auf die Schaltfläche Buy.

    Details zum Zahlungslink, einschließlich des Produktnamens und des Preises sowie der Möglichkeit, den Zahlungslink, den QR-Code, die Kaufschaltfläche und andere zu kopieren
    Details zur Seite PAYMENT LINK von Stripe

  9. Wenn die Schaltfläche Kaufen angezeigt wird, kannst du den generierten Code für die Schaltfläche Kasse sehen. Wähle das Schaltflächenlayout, aktiviere die Option Schaltflächentext ändern und gib „Mit Stripe kaufen“ in das Feld Schaltflächentext ändern ein. Klicke dann auf Änderungen speichern und Code kopieren, um den generierten Code in die Zwischenablage deines Betriebssystems zu kopieren.

    Kaufschaltflächenoptionen mit sichtbarem Code auf der linken Seite und einer Vorschau auf der rechten Seite. Zu den Optionen gehören die Konfiguration als Karte oder Schaltfläche, die Sprache, ein Kippschalter zum Ändern des Schaltflächentextes und ein Feld zur Eingabe des Textes
    Das Formular von Stripe zum Erstellen einer Kaufschaltfläche

  10. Füge den kopierten Code in die Datei product.html des Beispielcodes vor dem schließenden </body> Tag (zwischen den Kommentaren STRIPE BUTTON BEGIN und STRIPE BUTTON END ) ein, ähnlich wie bei PayPal.
    <!-- STRIPE BUTTON BEGIN -->
    <script> async
      src="https://js.stripe.com/v3/buy-button.js">
    </script>
    
    <stripe-buy-button>
      buy-button-id="BUY_BUTTON_ID"
      publishable-key="PUBLISHABLE_KEY"
    >
    </stripe-buy-button>
    <!-- STRIPE BUTTON END -->

Sobald du die PayPal- und Stripe-Kassenbuttons implementiert hast, stelle den Code für deine statische Website in deiner Kinsta-Hostingumgebung bereit.

Teste den Checkout-Prozess

Öffne die Produktdetailseite der statischen Demo-Website. Vergewissere dich, dass die PayPal- und Stripe-Schaltflächen korrekt angezeigt werden.

Die Kassenseite der Beispielseite zeigt Bild, Name, Preis, Größe, Farbe und Lieferoptionen an. Der Nutzer kann auf PayPal, Debit- oder Kreditkarte Powered by PayPal oder Kaufen mit Stripe klicken.
Musterseite mit Schaltflächen für die Bezahlung mit PayPal und Stripe

Klicke auf die Schaltfläche für die PayPal-Kasse. Es sollte sich ein Anmeldedialogfeld öffnen, in dem sich dein Kunde bei PayPal authentifiziert, um seinen Einkauf zu tätigen.

PayPal-Flow mit Optionen zum Einloggen oder Registrieren
PayPal-Flow mit Optionen zum Einloggen oder Registrieren

Wenn du zu diesem Zeitpunkt Probleme mit der Anmeldung hast, könnte das daran liegen, dass du mit einem persönlichen Konto und nicht mit einem Geschäftskonto getestet hast.

Alternativ können die Kunden die Schaltfläche PayPal Debit oder Credit Card wählen. Klicke auf diese Option, um das Dialogfeld anzuzeigen. Gib einige Kontodaten ein.

Optionen für die Zahlung mit einer Debit- oder Kreditkarte, einschließlich eines Länder- oder Regionenmenüs, eines Feldes für die E-Mail, eines Menüs für den Telefontyp und eines Feldes für die Nummer, Optionsfelder für die Auswahl von Debit- oder Kreditkarte und ein Feld für die Kartennummer
Der PayPal-Flow mit den Optionen zur Verwendung einer Lastschrift- oder Kreditkarte

PayPal sollte deine Bestell- und Kontodaten anzeigen. Klicke auf Kauf abschließen.

Zahlungsdetails mit Kosten, Lieferadresse und einem Link zum Ändern, eine Liste der zur Auswahl stehenden Debit- oder Kreditkarten, ein Kontrollkästchen, um sie als bevorzugte Methode festzulegen, ein Link zum Hinzufügen einer Karte und eine Schaltfläche zum Abschließen des Kaufs
Der PayPal-Flow mit der Kaufbestätigung

Wenn PayPal die Transaktion bestätigt, zeigt der JavaScript-Code des Clients eine Meldung an, die dich darüber informiert, dass die Transaktion abgeschlossen ist. Diese Warnung ist für Entwicklungs- und Debugging-Zwecke gedacht – du solltest sie nicht im Produktionscode verwenden.

Ein Popup-Fenster benachrichtigt den Nutzer, dass die Transaktion abgeschlossen ist
PayPal-Flow mit einer Warnung zum Abschluss der Transaktion

Um diese Transaktion zu überprüfen, öffne das Dashboard von PayPal für Unternehmen. Klicke auf Aktivität > Alle Transaktionen , um eine detaillierte Liste aller letzten Transaktionen anzuzeigen.

Details zu den Transaktionen auf PayPal, einschließlich Datum, Typ, Name, Zahlung, Bruttobetrag, Gebühr, Nettobetrag und ein Menü für Aktionen wie Tracking hinzufügen
Details zu PayPal-Geschäftstransaktionen

Auf der Seite product.html der Blumen-Website kannst du auch den Stripe-Kassenablauf testen, indem du auf die Schaltfläche Mit Stripe kaufen klickst. Diese Aktion löst das Stripe-Dialogfeld mit den Produktdetails und den Zahlungsoptionen aus, einschließlich Google Pay, Link und Kreditkartenzahlungen.

Stripe zeigt die Produktinformationen und Optionen für Google Pay und Pay with link
Zahlungsoptionen für den Stripe-Flow

Wähle zu Demonstrationszwecken Google Pay. Ein Dialogfeld fordert dich auf, den Kauf mit Google Pay mit einer Karte aus deiner Liste, z. B. einer gespeicherten Mastercard, zu bestätigen.

Google Pay-Zahlungsdetails, einschließlich eines Dropdown-Menüs zur Auswahl der Karte, des Preises und einer Schaltfläche zum Bezahlen
Stripe Flow bei der Verwendung von Google Pay

Klicke auf PAY. Wenn der Kauf erfolgreich war, zeigt Stripe dem Kunden die Kaufbestätigung an.

Kaufbestätigung von Stripe. Auf der linken Seite stehen die Produktinformationen. Auf der rechten Seite ist eine Bestätigung
Stripe-Kaufbestätigung

Öffne im Stripe Dashboard die Registerkarte Zahlungen. Hier werden die Details der abgeschlossenen Transaktion angezeigt, darunter der Betrag, die Währung, die Beschreibung, der Kunde und das Datum.

Liste der Zahlungen über Stripe, einschließlich Betrag, Währung, Erfolg, Beschreibung, Kunde und Datum
Seite mit den Stripe-Zahlungsdetails

Fehlerbehebung beim Checkout-Prozess

Hier sind einige Schritte zur Fehlerbehebung, um Fehler zu diagnostizieren und zu beheben, die während deines Checkout-Tests auftreten:

  • Repariere die Konfiguration des Zahlungsgateways.
  • Überprüfe dein SSL-Zertifikat.
  • Überprüfe die Browserkompatibilität des Kunden.
  • Wende die richtige Fehlerbehandlung an.
  • Teste den Checkout-Prozess in verschiedenen Umgebungen.
  • Verwende Techniken zur Protokollierung und Überwachung.

Zusammenfassung

Du hast jetzt Kassenschaltflächen für die Zahlungssysteme PayPal und Stripe in einen Online-Blumenladen integriert, der mit Kinsta betrieben wird. Mit denselben Techniken kannst du auch deine anderen statischen Websites mit Zahlungsoptionen ausstatten, um Kunden zum Kauf deiner Produkte zu animieren und den Umsatz zu steigern.

Der Statische-Seiten-Hosting-Dienst von Kinsta bietet einen nahtlosen Playground für Entwickler, die in die dynamische Welt des E-Commerce und der Zahlungsintegration eintauchen wollen. Die robuste Infrastruktur sorgt für ein schnelles Laden der Seiten und damit für ein reibungsloses Online-Shopping-Erlebnis.

Neben dem statischen Website-Hosting bietet Kinsta auch ein Anwendungs-Hosting an, das für dynamischere Anwendungen entwickelt wurde – zum Beispiel für Webanwendungen, die serverseitige Verarbeitung, Datenbankinteraktionen und andere komplexe Funktionen benötigen.

Verwandle deine statische Website in ein dynamisches Erlebnis mit Zahlungsgateways wie PayPal und Stripe. Welchen anderen Dienst bevorzugst du oder hast du Erfahrung damit? Teile sie in den Kommentaren unten mit.

Jeremy Holcombe Kinsta

Content & Marketing Editor bei Kinsta, WordPress Web Developer und Content Writer. Außerhalb von WordPress genieße ich den Strand, Golf und Filme. Außerdem habe ich Probleme mit großen Menschen ;).