Zum Hauptinhalt springen

Stripe Payment Links

Die einfachste Selgeo-Integration – kein Backend-Code erforderlich. Das Tracking-Snippet schreibt Stripe Payment Links auf Ihrer Seite automatisch um, um die click_id einzufügen, und Selgeo liest sie aus dem Stripe-Webhook, wenn der Kunde zahlt.

API-Version: v1

Voraussetzungen​

  • Das Selgeo-Snippet ist auf Ihrer Website installiert (Snippet-Setup)
  • Sie verwenden Stripe Payment Links (https://buy.stripe.com/...-URLs) auf Ihrer Website
  • Ihr Stripe-Konto ist im Dashboard mit Selgeo verbunden (Einstellungen > Stripe)

Funktionsweise​

┌──────────────────────────────────────────────────────────────────────┐
│ 1. Besucher klickt Partner-Link:                                     │
│    https://ihre-website.com/pricing?ref=abc123                       │
│                                                                      │
│ 2. Snippet registriert Klick, speichert click_id in sessionStorage   │
│                                                                      │
│ 3. Snippet erkennt Stripe Payment Link auf der Seite:                │
│    <a href="https://buy.stripe.com/test_xyz">Jetzt kaufen</a>        │
│                                                                      │
│ 4. Snippet schreibt den Link um:                                     │
│    <a href="https://buy.stripe.com/test_xyz?client_reference_id=     │
│         CLICK_ID">Jetzt kaufen</a>                                   │
│                                                                      │
│ 5. Kunde klickt Link, zahlt bei Stripe                               │
│                                                                      │
│ 6. Stripe sendet Webhook mit client_reference_id → Selgeo ordnet     │
│    es dem Klick zu und attributiert die Konversion dem Partner       │
└──────────────────────────────────────────────────────────────────────┘

Der gesamte Ablauf ist automatisch. Sie müssen nur:

  1. Das Snippet installieren.
  2. Stripe Payment Links auf Ihrer Seite platzieren.
  3. Stripe mit Selgeo verbinden.

Einrichtung​

Schritt 1: Snippet installieren​

Falls noch nicht geschehen, fügen Sie das Tracking-Snippet zu Ihrer Website hinzu:

<script
  async
  src="https://cdn.selgeo.com/v1/selgeo.js"
  data-merchant="pk_test_YOUR_KEY"
></script>

Vollständige Details finden Sie unter Snippet-Setup.

Verwenden Sie Stripe Payment Links wie gewohnt. Zum Beispiel:

<a href="https://buy.stripe.com/test_abc123">Pro-Plan abonnieren</a>
<a href="https://buy.stripe.com/test_def456">Enterprise-Plan abonnieren</a>

Das Snippet erkennt alle <a>-Tags, deren href mit https://buy.stripe.com beginnt, und schreibt sie um, wenn eine click_id gespeichert ist.

Schritt 3: Stripe verbinden​

Gehen Sie im Selgeo-Dashboard zu Einstellungen > Stripe und verbinden Sie Ihr Stripe-Konto. Dadurch kann Selgeo Stripe-Webhooks empfangen und client_reference_id mit Partner-Klicks abgleichen.

Was das Snippet umschreibt​

Das Snippet fügt den client_reference_id-Query-Parameter zu Stripe Payment Link URLs hinzu:

Vorher:

https://buy.stripe.com/test_abc123

Nachher (wenn eine click_id gespeichert ist):

https://buy.stripe.com/test_abc123?client_reference_id=f47ac10b-58cc-4372-a567-0e02b2c3d479

Wenn in der aktuellen Sitzung kein Empfehlungsklick aufgezeichnet wurde (keine click_id in sessionStorage), bleiben die Links unverändert. Nicht empfohlene Kunden sehen die ursprüngliche URL.

Das Snippet verwendet einen MutationObserver, um auf neue Payment Links zu achten, die nach dem initialen Laden zur Seite hinzugefügt werden. Dies behandelt:

  • Single-Page-Anwendungen – Links, die nach Routenänderungen gerendert werden
  • Lazy geladener Inhalt – Links, die nach dem Scrollen oder nach Benutzerinteraktion erscheinen
  • A/B-Testing-Tools – Links, die durch client-seitige Experimente eingefügt werden

Neue Links werden automatisch umgeschrieben, sobald sie im DOM erscheinen. Kein zusätzlicher Code erforderlich.

Schutz vor Händler-Überschreibung​

Wenn Sie client_reference_id selbst auf einem Payment Link setzen (z. B. um Ihre eigene Kunden-ID zu übergeben), überschreibt das Snippet Ihren Wert nicht:

<!-- Ihre benutzerdefinierte client_reference_id wird beibehalten -->
<a href="https://buy.stripe.com/test_abc123?client_reference_id=mein_kunde_123">
  Abonnieren
</a>

Wenn Sie sowohl Ihre eigene Referenz als auch die Selgeo click_id übergeben müssen, erwägen Sie stattdessen den Stripe Metadata-Ansatz, bei dem Sie volle Kontrolle über die am Stripe-Objekt angehängten Daten haben.

Testen​

  1. Erstellen Sie einen Tracking-Link im Selgeo-Dashboard.
  2. Besuchen Sie Ihre Website über den Tracking-Link: https://ihre-website.com/?ref=IHR_TEST_REF
  3. Prüfen Sie den Payment Link – Rechtsklick auf den Link und "Inspizieren" oder "Link-Adresse kopieren" wählen. Überprüfen Sie, ob client_reference_id angehängt wurde.
  4. Klicken Sie auf den Payment Link und schließen Sie den Kauf mit der Stripe-Testkarte 4242 4242 4242 4242 ab.
  5. Prüfen Sie das Dashboard – die Konversion sollte in Analytics erscheinen, dem Partner zugeordnet.

Debug-Modus​

Fügen Sie data-debug zum Snippet-Tag hinzu, um Umschreib-Aktivitäten in der Konsole zu sehen:

[selgeo] Stripe payment link rewritten https://buy.stripe.com/test_abc123?client_reference_id=f47ac10b-...

Einschränkungen​

  • Nur buy.stripe.com-Links werden erkannt. Wenn Sie Stripe Payment Links über Ihre eigene Domain proxyen, kann das Snippet sie nicht erkennen. Verwenden Sie stattdessen Stripe Checkout oder Stripe Metadata.
  • Der Besucher muss zuerst über einen Tracking-Link ankommen. Wenn keine click_id in sessionStorage vorhanden ist, findet kein Umschreiben statt.
  • Tab-begrenzte Sitzung. Das Snippet speichert die click_id in sessionStorage, das tab-begrenzt ist. Sobald Payment Links auf der aktuellen Seite umgeschrieben wurden, ist die client_reference_id in der URL eingebettet – das Öffnen eines umgeschriebenen Links in einem neuen Tab funktioniert einwandfrei. Wenn der Besucher jedoch Ihre Website selbst in einem neuen Tab öffnet (z. B. aus einem Lesezeichen), hat das Snippet keine click_id, um Links auf dieser Seite umzuschreiben.

Nächste Schritte​