Zum Hauptinhalt gehen

Self-Service-Zahlungsmethoden in der Member Platform und Branded App einrichten

  • Aktualisiert

In diesem Artikel lernst du, wie du die erweiterten Self-Service-Zahlungsmethoden für deine Mitglieder in der Member Platform und Branded App einrichtest und steuerst – und wie technische Partner die Zahlungskomponente integrieren können.

Inhalt

Fast lane

  1. Finion Pay aktivieren über Einstellungen / Finion Financial Solutions / Finion Pay
  2. MySports / Verwaltung / Selfservice / <Konfigurationsname> – Zahlungsdaten aktivieren, Mitgliedskonto auf „Ausgleichen erlaubt" setzen und Fast-Finance Link konfigurieren

Voraussetzungen

Bevor du die erweiterten Zahlungsmethoden im Self-Service aktivieren kannst, müssen folgende Bedingungen erfüllt sein:

  • Finion Pay muss aktiv sein. Aktiviere den Dienst über Einstellungen / Finion Financial Solutions / Finion Pay. Innerhalb von bis zu 5 Werktagen steht die Integration zur Verfügung.
  • Member Platform muss aktiv sein. Dein Studio benötigt einen aktiven Zugang zur Member Platform (App und/oder Web).

Hinweis: Ohne eine aktive Finion Pay-Erweiterung stehen die erweiterten Zahlungsarten (z. B. Kreditkarte, TWINT, BACS) im Self-Service nicht zur Verfügung.

Self-Service-Zahlungsmethoden aktivieren

Die gesamte Konfiguration der Self-Service-Zahlungsmethoden erfolgt unter MySports / Verwaltung / Selfservice. Wähle dort die gewünschte Konfiguration aus. Innerhalb der Konfiguration sind drei Bereiche relevant:

a) Persönliche Mitgliedsdaten – Zahlungsdaten freischalten

  1. Im Bereich Persönliche Mitgliedsdaten stelle sicher, dass Zahlungsdaten auf Aktiviert steht.
  2. Setze Zahlungsdatenänderung auf Ja, damit Mitglieder ihre Zahlungsmethode eigenständig aktualisieren können.

b) Weitere Daten – Mitgliedskonto und Online-Ausgleich aktivieren

  1. Im Widget Weitere Daten öffne über das Drei-Punkte-Menü den Dialog Mitgliedskonto bearbeiten.
  2. Setze Ausgleich auf Ausgleichen erlaubt. Damit können Mitglieder offene Forderungen über den Self-Service begleichen.
  3. Optional: Unter Online Gebühr Pauschale kannst du eine Gebühr für den Online-Zahlvorgang festlegen (z. B. als fester Betrag oder prozentual). Standardmäßig steht der Wert auf 0,00 €.
  4. Klicke auf Speichern.

c) Fast-Finance Link – Schritte, Reihenfolge und Zahlungsarten konfigurieren

  1. Scrolle zum Abschnitt Fast-Finance Link innerhalb derselben Selfservice-Konfiguration.
  2. Unter Aktivierte Funktionen wähle bei Aktive Schritte und Reihenfolge die gewünschte Option:
    • Begleichung offener Forderungen → Aktualisierung der Zahlungsart (empfohlen)
    • Nur Begleichung offener Forderungen
    • Aktualisierung der Zahlungsart → Begleichung offener Forderungen
    • Nur Aktualisierung der Zahlungsart
    • Deaktiviert
  3. Lege fest, welche Zahlungsmethoden im Self-Service für den Ausgleich und die Aktualisierung zur Verfügung stehen sollen.
  4. Speichere die Konfiguration.

Verfügbare Zahlungsmethoden steuern

Du entscheidest, welche Zahlungsarten deinen Mitgliedern im Self-Service zur Verfügung stehen. Die Steuerung erfolgt über die Konfiguration in der Software. Folgende Zahlungsarten können – abhängig von deinem Standort und deiner Finion-Pay-Konfiguration – verfügbar sein:

  • SEPA-Lastschrift – für den DACH-Raum und weitere europäische Märkte
  • Kreditkarte – Visa, Mastercard und weitere gängige Karten
  • TWINT – für Studios in der Schweiz
  • BACS Direct Debit – für Studios im Vereinigten Königreich

Um zu sehen, welche Zahlungsarten für dein Studio freigeschaltet sind, navigiere zu Einstellungen / Finion Financial Solutions / Finion Pay / Zahlungsmethoden.

Tipp: Wenn du auch in den Vertragsangeboten Kreditkarte als Zahlungsart anbieten möchtest, konfiguriere dies zusätzlich unter Einstellungen / Vertragsabschluss / Vertragsangebote / Angebotsoptionen.

So nutzen deine Mitglieder den Self-Service

Sobald die Konfiguration abgeschlossen ist, können deine Mitglieder ihre Zahlungsdaten eigenständig verwalten:

  • Member Platform (App): Im Self-Service-Bereich der App können Mitglieder ihre Zahlungsmethode hinzufügen oder aktualisieren. Die Eingabe erfolgt über eine sichere, verschlüsselte Zahlungskomponente.
  • Branded App: Dieselbe Funktion steht auch in deiner Branded App zur Verfügung.
  • Member Web: Mitglieder können ihre Zahlungsdaten auch über das Member Web aktualisieren.

Wichtig: Kreditkartendaten, die ein Mitglied über die App hinterlegt, können vom Studio nicht eingesehen oder verwaltet werden. Nur das Mitglied selbst hat Zugriff auf diese Informationen.

Bei Zahlungsarten wie Kreditkarte kann es vorkommen, dass eine zusätzliche Authentifizierung erforderlich ist (z. B. 3D Secure). In diesem Fall wird das Mitglied zur Bank weitergeleitet und nach Abschluss automatisch zurückgeführt.

Integration für technische Partner (Payment API)

Für technische Partner, die die Zahlungskomponente in eine eigene Anwendung integrieren möchten, steht die Payment API zur Verfügung. Die Integration erfolgt in zwei Schritten:

Schritt 1: User Payment Session erstellen

Über den Endpunkt POST /v1/payments/user-session wird ein kurzlebiger Session-Token erzeugt. Dieser Token autorisiert die Zahlungskomponente im Frontend. Folgende Parameter sind dabei relevant:

  • amount – Betrag der Zahlung. Setze den Wert auf 0, wenn nur ein Zahlungsmittel hinterlegt werden soll.
  • scope – Zahlungskontext: MEMBER_ACCOUNT für wiederkehrende Zahlungen oder ECOM für E-Commerce-Käufe.
  • customerId oder finionPayCustomerId – Identifikation des Kunden. Verwende immer genau einen der beiden Parameter.
  • permittedPaymentChoices – Optionale Einschränkung der angebotenen Zahlungsarten (z. B. CREDIT_CARD, PAYPAL). Wird dieser Parameter nicht gesetzt, stehen alle technisch verfügbaren Methoden bereit.
  • referenceText – Referenztext, der auf dem Kontoauszug des Mitglieds erscheint.

Benötigter Scope: PAYMENT_WRITE

Schritt 2: Zahlungskomponente (Widget) einbinden

Die Zahlungskomponente ist ein einbettbares JavaScript-Widget. Du bindest das Widget-Skript ein und initialisierst es mit dem erhaltenen Session-Token:

<script src="WIDGET_URI"></script>
<div id="payment-widget"></div>

<script>
const widget = window.paymentWidget.init({
    userSessionToken: 'dein-session-token',
    environment: 'live',
    countryCode: 'DE',
    locale: 'de-DE',
    container: 'payment-widget',
    onSuccess: (paymentRequestToken) => {
        // Token für weitere Verarbeitung nutzen
    }
});
</script>

Das Widget unterstützt individuelle Anpassungen über die Parameter styling (Farben, Rahmen) und i18n (Übersetzungen). Framework-spezifische Integrationsbeispiele (React, Angular, Vue.js) findest du in der Dokumentation.

Wichtige Hinweise zur Token-Verarbeitung:

  • Der paymentRequestToken, den das Widget zurückgibt, kann verwendet werden, um ein Zahlungsmittel beim Kunden zu hinterlegen oder eine Zahlung auszulösen.
  • Solange der Token nicht für eine Buchung verwendet wird, werden keine Beträge eingezogen. Die Autorisierung wird automatisch storniert, wenn der zugehörige Session-Token abläuft.
  • Pro User Payment Session kann nur ein Token eingelöst werden.

Die vollständige API-Dokumentation inklusive Endpunkten und Beispielen findest du im Developer Portal: Payment API – Developer Portal

Verwandte Beiträge