So integrierst du ein Zahlungsgateway und eine Kasse in deine statische Website

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.

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

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

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.

   

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

   

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.

   

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.

   

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

   

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.

   

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.

   

7. Klicke auf Link erstellen.

   

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

   

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.

   

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.

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.

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.

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

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.

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.

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.

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.

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

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

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 ;).

• LinkedIn