Checkout-Widget in die eigene Website einbinden: eingebetteter Checkout für Karte, Krypto und Banküberweisung

Ihre Website steht bereits. Vielleicht ist es eine Landingpage aus Framer oder Webflow, eine Dokumentation, ein WordPress-Blog oder eine einzelne HTML-Datei. Was Sie nicht wollen: die Seite nur für Zahlungen zu einem Shop umbauen oder Käufer genau in dem Moment auf eine fremde Website schicken, in dem sie sich zum Kauf entschieden haben. Sie möchten ein Checkout-Widget in Ihre Website einbinden und alles andere so lassen, wie es ist.

Dieser Leitfaden erklärt, was ein eingebetteter Checkout ist, wie er sich von einem gehosteten Shop und von Zahlungslinks unterscheidet, wie er im Hintergrund funktioniert und wie Sie ihn mit PapelShip einrichten, vom ersten Produkt bis zur ersten Testbestellung. Zum Schluss geht es um die Details, die darüber entscheiden, ob Käufer den Kauf tatsächlich abschließen.

Was ist ein eingebettetes Checkout-Widget?

Ein Checkout-Widget ist ein Zahlungsfenster, das sich über der Seite öffnet, die ein Besucher gerade liest. Er klickt auf Kaufen, wählt eine Zahlungsmethode, bezahlt und erhält seinen Kauf, alles in diesem einen Fenster. Schließt es sich, ist er immer noch auf Ihrer Seite, an derselben Stelle und in Ihrem Design.

Hinter dem Fenster übernimmt die Zahlungsplattform alles, wofür Ihre Website sonst ein Backend bräuchte: Preise und Zahlungsmethoden anzeigen, die Zahlung abwickeln, die Bestellung anlegen und das Produkt ausliefern. Ihre Website stellt nur den Button bereit. Sie verarbeitet nie Kartennummern oder Wallet-Adressen, und Sie müssen keinen separaten Shop betreiben, nur um ein einzelnes Produkt zu verkaufen.

Mit Version 3.1 hat PapelShip E-Commerce den eingebetteten Checkout eingeführt, zusammen mit der Web-API. Die Idee ist einfach: Sie leiten Kunden für einen Verkauf nicht mehr auf eine andere Plattform weiter. Der gesamte Zahlungsablauf läuft auf Ihrer eigenen Website, lässt sich mit einer einzigen Codezeile integrieren und hält Käufer in Ihrem Design. Im Hintergrund findet dabei ein kurzer Austausch zwischen Ihrer Seite und dem Checkout-Dienst statt.

Zwei Details sind hier wichtig. Erstens entsteht die Bestellung im selben System wie in einem PapelShip-Shop. Sie erscheint also in Ihrem Dashboard, auf der Seite „Kunden“ und in Ihren Umsatzzahlen wie jeder andere Verkauf. Es gibt kein zweites System, das Sie abgleichen müssen.

Zweitens ist die Auslieferung Teil des Checkouts und kein Schritt, den Sie selbst anbinden müssen. Eine bezahlte Bestellung liefert ihren Lizenzschlüssel, ihre Datei oder ihr Abonnement sofort aus. Gehen einem Produkt die Schlüssel aus, wartet die Bestellung. Schlüssel, die Sie später nachlegen, werden automatisch an alle noch offenen Bestellungen ausgeliefert.

Eingebetteter Checkout, gehosteter Shop oder Zahlungslink?

Ein eingebettetes Widget ist einer von drei gängigen Wegen, Zahlungen für ein digitales Produkt anzunehmen. Jeder löst ein anderes Problem, und die meisten Verkäufer nutzen am Ende mehr als einen.

Wählen Sie das Widget, wenn Ihre Marketing-Website ihren Zweck bereits erfüllt und nur noch eine Zahlungsmöglichkeit fehlt. Ein Onlineshop lohnt sich, sobald Sie genug Produkte haben, die Besucher durchstöbern, filtern und vergleichen wollen. Ein Theme wie Ship öffnet den Checkout sogar direkt auf der Seite, sodass sich ein kleiner Shop wie eine Landingpage verhält. Zahlungslinks eignen sich für Einzelgeschäfte, individuelle Angebote und Verkäufe, die in einem Discord- oder Telegram-Chat beginnen.

Da alle drei dieselben Produkte, Preise und Auslieferungsregeln nutzen, müssen Sie sich nicht ein für alle Mal festlegen. Typisch ist ein Onlineshop zum Stöbern, das Widget auf der Preisseite Ihrer Produktwebsite und Zahlungslinks für individuelle Bestellungen. Wenn Sie bei null anfangen, erklärt der Leitfaden Digitale Produkte online verkaufen, wie Sie zuerst den passenden Shop wählen.

Checkout-Widget einbinden: Schritt für Schritt

Sobald Ihre Produkte angelegt sind, ist das Widget in wenigen Minuten eingerichtet. Die folgende Reihenfolge vermeidet den häufigsten Fehler: einen Button einzubinden, bevor das Produkt dahinter auslieferbar ist.

1. 01

   Produkt und Auslieferung anlegen

   Legen Sie das Produkt an, seine Varianten (zum Beispiel ein Monats- und ein Lifetime-Tarif) und das, was der Käufer erhält: einen Lizenzschlüssel, einen Datei-Download oder ein Abonnement. Prüfen Sie die Auslieferungseinstellungen, bevor Sie irgendetwas einbinden.

2. 02

   Zahlungsmethoden aktivieren

   Verbinden Sie ein Karten-Gateway, richten Sie Ihre Krypto-Wallet ein und fügen Sie eigene Methoden wie die Banküberweisung hinzu. Das Widget bietet genau das an, was Ihr Shop anbietet. Hier legen Sie also fest, was Käufer sehen.

3. 03

   Snippet im Embed-Builder kopieren

   Der Embed-Builder in Ihrem PapelShip-Dashboard erzeugt für jedes Produkt den passenden Code, bereits mit Ihren Shop- und Produkt-IDs. Sie müssen nichts von Hand abtippen.

4. 04

   Script einmal pro Seite laden

   Fügen Sie das Script-Tag direkt vor dem schließenden Body-Tag ein oder in den Bereich für eigenen Code in Ihrem Website-Baukasten. Es lädt mit defer und bremst den Rest Ihrer Seite deshalb nicht aus.

5. 05

   Kaufen-Buttons markieren

   Ergänzen Sie einen beliebigen Button oder Link um das Attribut data-papelship-checkout mit dem Produkt, das er verkaufen soll. Ein Klick darauf öffnet das Widget für genau dieses Produkt.

6. 06

   Auf Desktop und Smartphone testen

   Kaufen Sie mit jeder angebotenen Zahlungsmethode etwas Günstiges, auf einem echten Smartphone und auf einem Laptop. Prüfen Sie, ob Schlüssel oder Datei auf dem Bildschirm und per E-Mail ankommen.

<!-- 1. Load the widget once, near the end of <body> -->
<script src="https://YOUR-WIDGET-SCRIPT-URL" defer></script>

<!-- 2. Turn any button into a checkout -->
<button
  data-papelship-checkout
  data-store="your-store-id"
  data-product="your-product-id">
  Buy Pro for €49
</button>

Checkout-Buttons konfigurieren: Preisseiten, Produktfamilien und Sprachen

Jeder Button trägt seine eigenen Einstellungen in Data-Attributen. So kann eine Seite mehrere Produkte auf unterschiedliche Weise verkaufen, und aus einem einzigen Snippet wird ein flexibler Checkout. Ein paar Muster decken die meisten Websites ab:

• –Preisseiten. Ein Button pro Tarif, jeder verweist auf ein anderes Produkt oder eine andere Variante. So öffnen „Monatlich“ und „Lifetime“ jeweils den richtigen Preis.
• –Produktfamilien. Verknüpfen Sie einen Button mit einer Produktgruppe und lassen Sie den Käufer im Widget wählen, statt eine eigene Auswahl auf Ihrer Seite zu bauen.
• –Lokalisierte Seiten. Legen Sie die Sprache fest, damit der Checkout zur Sprache der Seite passt. Käufer können die Sprache außerdem über die Sprachauswahl im Checkout wechseln.
• –Fokussierte Checkouts. Blenden Sie Zahlungsmethoden aus, die nicht zu einem Produkt passen, etwa manuelle Methoden bei einem günstigen Artikel, bei dem sich die Prüfung nicht lohnt.

Über den Button hinaus legen Sie das Aussehen des Checkouts und der anschließenden Rechnung im Dashboard fest. Im Rechnungseditor bestimmen Sie die Reihenfolge der Abschnitte, einen Ablauf-Timer, Schriften, den Logo-Stil, Social-Media-Links und die angezeigten Zahlungsmethoden. Rechnungs-E-Mails, PDFs und Rechnungsseiten laufen über die eigene Domain Ihres Shops, und E-Mail-Vorlagen lassen sich anpassen. So trägt der gesamte Kauf Ihre Marke, vom ersten Klick bis zum Beleg.

Welche Zahlungsmethoden funktionieren im Widget?

Das Widget ist ein vollständiger Checkout, keine Weiterleitung zu einem. Je nachdem, was Sie für Ihren Shop aktivieren, können Käufer so bezahlen:

• –Karte, über das Gateway, das mit Ihrem Shop verbunden ist, etwa Stripe, PayTR oder iyzico.
• –Krypto, darunter BTC, ETH, LTC, SOL, USDT und USDC, direkt in Ihre eigene Wallet. Die Krypto-Zahlungskarte zeigt einen QR-Code, Kopier-Buttons und den Zahlungsstatus in Echtzeit, bei Stablecoins mit Netzwerkauswahl.
• –Banküberweisung und weitere eigene Methoden, mit Ihren eigenen Anweisungen, einer Referenznummer pro Bestellung und optionalem Zahlungsnachweis. Mehr dazu in Zahlungen per Banküberweisung und Geschenkkarte annehmen.

Mehrere Methoden in einem Fenster anzubieten ist einer der einfachsten Wege, international zu verkaufen. Wird die Karte eines Käufers bei einem grenzüberschreitenden Kauf abgelehnt oder zahlt er lieber in Stablecoins, schließt er denselben Checkout eben anders ab, statt abzubrechen. Die Vor- und Nachteile beleuchten wir in Karten- und Krypto-Zahlungen in einem Checkout.

Nach der Zahlung: Auslieferung, Rechnungen und die Web-API

Da das Widget auf demselben Bestellsystem läuft wie ein PapelShip-Shop, sind Zahlung und Auslieferung bereits verbunden. Nach einer erfolgreichen Zahlung passiert Folgendes:

1. 1.Die Zahlung wird bestätigt: Kartenzahlungen sofort, Krypto-Zahlungen, sobald die Blockchain die Transaktion bestätigt. Das verfolgen Sie live auf der Rechnung in Ihrem Dashboard.
2. 2.Die Bestellung wird angelegt und erscheint in Ihrem Dashboard, verknüpft mit dem Kundendatensatz auf der Seite „Kunden“.
3. 3.Das Produkt wird auf dem Bildschirm und per E-Mail ausgeliefert: ein Lizenzschlüssel, ein Download-Link oder der Zugang zu einem Abonnement.
4. 4.Der Käufer erhält eine Rechnung über Ihre eigene Domain, im E-Mail-Design Ihres Shops.

Wenn Ihre eigenen Systeme auf einen Verkauf reagieren sollen, etwa um ein Konto in Ihrer App anzulegen, nutzen Sie die Web-API, die mit Version 3.1 zusammen mit dem eingebetteten Checkout erschienen ist. Webhooks und API-Aufrufe halten Ihre Systeme synchron, während Zahlungen, Lizenzen und Auslieferungen die Plattform durchlaufen. Für den Zugang zu Communities brauchen Sie unter Umständen gar keinen Code: Discord-Rollen lassen sich pro Produktvariante vergeben.

Tipps für einen eingebetteten Checkout, der konvertiert

• –Platzieren Sie den Button dort, wo die Entscheidung fällt: neben dem Preis und dem wichtigsten Vorteil, nicht nur im Header oder Footer.
• –Beschriften Sie Buttons mit dem, was passiert, etwa „Pro für 49 € kaufen“ statt „Absenden“ oder „Weiter“.
• –Zeigen Sie die akzeptierten Zahlungsmethoden neben dem Button, damit Käufer, die lieber mit Krypto oder per Überweisung zahlen, das schon vor dem Klick wissen.
• –Bleiben Sie bei den Namen konsistent. Der Produktname auf Ihrer Seite sollte mit dem im Checkout, auf der Rechnung und in der E-Mail übereinstimmen.
• –Testen Sie auf dem Smartphone. Viele Spontankäufe beginnen mobil, und ein Checkout, der auf kleinen Bildschirmen hakt, verliert sie.
• –Sichern Sie hochpreisige Produkte ab. Mit Sicherheitsregeln pro Produkt blockieren Sie VPN- und Proxy-Verbindungen und begrenzen Käufe pro Kunde. Jede Rechnung zeigt außerdem Netzwerk-Risikosignale wie Proxy-, TOR- und Rechenzentrumsprüfungen. Mehr dazu in Betrugsprävention für digitale Güter.

Verkaufen Sie über die Website, die Sie schon haben

Ein eingebetteter Checkout ist der kürzeste Weg von „Ich habe eine Website“ zu „Ich nehme Zahlungen an“. Ein Script-Tag, ein Attribut pro Button, und jeder Besucher ist nur einen Klick vom Kauf entfernt. Ohne Redesign und ohne jemanden im Moment der Kaufentscheidung wegzuschicken.

Richten Sie zuerst das Produkt und seine Auslieferung ein, testen Sie jede Zahlungsmethode auf dem Smartphone und lassen Sie Ihren API-Schlüssel auf dem Server. Danach läuft jeder Verkauf auf Ihrer Website von allein.