{"id":68576,"date":"2024-02-07T18:25:15","date_gmt":"2024-02-07T17:25:15","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=68576&preview=true&preview_id=68576"},"modified":"2024-02-09T11:33:50","modified_gmt":"2024-02-09T10:33:50","slug":"zahlungsgateway-integration","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/zahlungsgateway-integration\/","title":{"rendered":"So integrierst du ein Zahlungsgateway und eine Kasse in deine statische Website"},"content":{"rendered":"

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\u00e4ufe auf deiner Website zu t\u00e4tigen, anstatt sich bei der Konkurrenz umzusehen.<\/p>\n

Das Hinzuf\u00fcgen 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<\/a> einbetten, sodass dein Unternehmen Transaktionen direkt akzeptieren kann.<\/p>\n

In diesem Tutorial geht es um das Hinzuf\u00fcgen der Zahlungsgateways PayPal und Stripe<\/a> zur statischen Website eines Blumenladens. Folge den Schritten, um zu lernen, wie du diese Funktionen zu deiner Website hinzuf\u00fcgen und neue M\u00f6glichkeiten zur Steigerung des Online-Umsatzes etablieren kannst.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Erste Schritte<\/h2>\n

Bevor wir uns mit den Schritten f\u00fcr die Integration eines Zahlungsgateways und der Kasse in deine statische Website befassen, wollen wir die Grundlagen f\u00fcr eine reibungslose und erfolgreiche Implementierung schaffen.<\/p>\n

    \n
  1. Lade diesen Beispielcode f\u00fcr eine statische Website<\/a> herunter und stelle ihn auf dem Statische-Seiten-Hosting von Kinsta<\/a> bereit.<\/li>\n
  2. Melde dich f\u00fcr ein PayPal-Konto<\/a> an und entscheide dich f\u00fcr ein Gesch\u00e4ftskonto, da es f\u00fcr diese Anleitung besser geeignet ist. Diese Art von Konto ist notwendig, um die integrierten Schaltfl\u00e4chen zu testen. Nachdem du dich angemeldet hast, f\u00fcgst du deine Gesch\u00e4ftsinformationen hinzu und verkn\u00fcpfst ein Bankkonto. Wenn du dein Konto verifiziert hast, kannst du im PayPal-Entwicklerportal<\/a> API-Zugangsdaten f\u00fcr die sp\u00e4tere Verwendung erhalten.<\/li>\n
  3. Erstelle ein Stripe-Konto<\/a> und gib deine Gesch\u00e4fts- und Bankdaten ein. Stripe bietet eine schnelle Kontoaktivierung, was f\u00fcr dieses Projekt von Vorteil ist. Sobald dein Konto aktiviert ist, kannst du sofort auf das Stripe-Dashboard<\/a> zugreifen. Hier erh\u00e4ltst du deinen API-Schl\u00fcssel, der f\u00fcr die folgenden Schritte entscheidend ist.<\/li>\n<\/ol>\n

    \u00dcberpr\u00fcfe die statische Beispielseite<\/h3>\n

    In diesem Leitfaden wird eine bereits vorhandene statische Website verwendet, um die Integration der PayPal- und Stripe-Kassenfunktionen zu zeigen. Trotz ihres statischen Inhalts \u00e4hnelt die Beispielseite einem Online-Blumenladen.<\/p>\n

    Die Kinsta-Hosting-Infrastruktur f\u00fcr statische Websites<\/a> bietet eine effiziente Umgebung f\u00fcr den Einsatz und das Testen von PayPal- und Stripe-Kassenfunktionen, um eine anspruchsvolle und ansprechende statische Website zu erstellen.<\/p>\n

    Nachdem du deine Website auf Kinsta eingerichtet hast, rufe die Startseite auf. Klicke auf die Schaltfl\u00e4che BESTELLUNGSANFRAGE<\/strong>.<\/p>\n

    \"Eine
    Beispiel f\u00fcr eine Startseite mit einer Schaltfl\u00e4che BESTELLUNG ANFRAGEN<\/strong><\/figcaption><\/figure>\n

    W\u00e4hle auf der Seite Blumenkatalog<\/strong> ein verf\u00fcgbares Produkt aus – die t\u00fcrkische Rose.<\/p>\n

    \"Der
    Beispielseite des Katalogs mit verschiedenen Blumenoptionen<\/figcaption><\/figure>\n

    Diese Aktion f\u00fchrt dich zur Produktdetailseite, auf der die Zahlungsschaltfl\u00e4chen f\u00fcr PayPal und Stripe implementiert sind.<\/p>\n

    \"Optionen
    Die Produktseite der Beispielseite<\/figcaption><\/figure>\n

    So integrierst du die PayPal-Kasse in deine statische Website<\/h2>\n

    Wenn du eine PayPal-Kasse einf\u00fcgst, kannst du deinen Kunden eine sichere und vertrauensw\u00fcrdige Zahlungsmethode anbieten und den Transaktionsprozess vereinfachen. Diese Integration kann die Funktionalit\u00e4t deiner Website und die Kundenzufriedenheit erheblich steigern.<\/p>\n

    Hier erf\u00e4hrst du, wie du die PayPal-Kasse in deine statische Website integrierst:<\/p>\n

      \n
    1. Melde dich im PayPal Developer Dashboard<\/a> an.<\/li>\n
    2. Navigiere auf dem Dashboard zum Abschnitt Anwendungen & Anmeldeinformationen<\/strong>. Schalte den Sandbox-Modus<\/strong> ein und klicke dann auf Anwendung erstellen<\/strong>.<\/li>\n
    3. Gib deiner Anwendung in dem Formular einen Namen (z.B. Kinsta Gateway Demo). W\u00e4hle als Typ H\u00e4ndler<\/strong>\u00a0und klicke auf Anwendung<\/strong>\u00a0erstellen<\/strong>.\n

      \"Das
      Das Formular „Anwendung erstellen“ von PayPal<\/figcaption><\/figure><\/li>\n
    4. Kopiere die Kunden-ID<\/strong> aus dem Abschnitt mit den API-Anmeldedaten<\/strong>, um sp\u00e4ter eine PayPal-Kassenschaltfl\u00e4che zu erstellen.\n

      \"Anmeldedaten
      Anmeldedaten f\u00fcr die PayPal-Anwendung<\/figcaption><\/figure><\/li>\n
    5. Scrolle auf der Seite der Anwendung nach unten, um weitere Einstellungen zu \u00fcberpr\u00fcfen. Die Standardeinstellungen sind f\u00fcr diesen Leitfaden ausreichend. Klicke auf \u00c4nderungen speichern<\/strong>.\n

      \"Die
      Die Funktionen der PayPal-Anwendung<\/figcaption><\/figure><\/li>\n
    6. Als N\u00e4chstes integrierst du die PayPal-Kasse in deine statische Website. Erstelle eine Schaltfl\u00e4che f\u00fcr die Kasse mit dem JavaScript-SDK f\u00fcr alternative Zahlungsmethoden (APM)<\/a> von PayPal. Damit kannst du verschiedene Zahlungsmethoden in eine statische Website integrieren, ohne eine Backend-Anwendung einzurichten. F\u00fcge den folgenden JavaScript-Code in die Datei product.html<\/strong> ein, kurz vor dem schlie\u00dfenden <\/body><\/code> Tag. Ersetze YOUR_CLIENT_ID<\/code> durch deine PayPal-Kunden-ID. Eventuell musst du auch die W\u00e4hrung USD<\/code> durch die W\u00e4hrung ersetzen, die dein PayPal-Konto akzeptiert.\n
      <!-- PAYPAL BUTTON SCRIPT-->\n<script   \nsrc=\"https:\/\/www.paypal.com\/sdk\/js?client-id=YOUR_CLIENT_ID¤cy=USD\"   \ndata-sdk-integration-source=\"button-factory\"><\/script>\n<script>\npaypal.Buttons({\n\tcreateOrder: function(data, actions) {\n\t\/\/ Set up the transaction\n\treturn actions.order.create({\n\t\tpurchase_units: [{\n\t\tamount: {\n\t\t\tvalue: '1.00'\n\t\t}\n\t\t}]\n\t});\n\t},\n\tonApprove: function(data, actions) {\n\t\/\/ Capture the funds from the transaction\n\treturn actions.order.capture().then(function(details) {\n\t\t\/\/ Show a success message to the buyer\n\t\talert('Transaction completed by ' + details.payer.name.given_name);\n\t});\n\t}\n}).render('#paypal-button-container');\n<\/script>\n<!-- PAYPAL BUTTON SCRIPT--><\/code><\/pre>\n
      Die Funktion paypal.Buttons<\/code> definiert zwei Funktionen:<\/p>\n