UI/UX-Empfehlungen

Bei der Integration einer Zahlungslösung geht es nicht nur um die technische Umsetzung, sondern darum, eine Benutzererfahrung zu schaffen, die sicher, professionell und einfach zu bedienen wirkt. Im Folgenden finden Sie Empfehlungen, wie Sie den Ablauf Ihrer App rund um das Tapaya Accept SDK gestalten.

Zahlung auslösen

Klare Handlungsaufforderung (CTA)

Sorgen Sie dafür, dass die Schaltfläche zum Starten der Zahlung gut sichtbar und eindeutig beschriftet ist.

• Gut: „12,50 € bezahlen“, „Karte belasten“, „Zur Kasse“
• Schlecht: „Absenden“, „Weiter“, „OK“

Rückmeldung bei Interaktion

Wenn der Benutzer auf die Zahlungsschaltfläche tippt, geben Sie sofort eine visuelle Rückmeldung (z. B. einen Ladeindikator oder einen deaktivierten Zustand), um doppelte Klicks zu verhindern, während das SDK initialisiert wird.

Während der Transaktion

Das Tapaya Accept SDK übernimmt die sensiblen Teile der Transaktion (Lesen der Karte, PIN-Eingabe) mit einem eigenen UI-Overlay. Für den Kontext vor und nach der Transaktion ist jedoch Ihre App verantwortlich.

Bildschirm nicht verdecken

Das SDK benötigt den gesamten Bildschirm, um die Sicherheit zu gewährleisten und Overlay-Angriffe zu verhindern. Versuchen Sie nicht, schwebende Fenster oder Chat-Bubbles über der Zahlungsoberfläche einzublenden, da dies Sicherheitsmechanismen auslösen kann, die die Transaktion abbrechen.

Hinweise zur NFC-Position

Das kontaktlose Lesen von Karten erfolgt über die NFC-Antenne des Geräts, deren Position je nach Gerätemodell variiert.

• Empfehlung: Zeigen Sie nach Möglichkeit in Ihrer App vor dem Aufruf des SDK eine kurze Animation oder einen Hinweis an, der dem Benutzer zeigt, wo sich der NFC-Chip auf seinem konkreten Gerät befindet (meist oben oder mittig auf der Rückseite).

Ergebnisse verarbeiten

Erfolgszustand

• Visuelle Bestätigung: Zeigen Sie einen klaren Bildschirm „Erfolgreich“ mit einem grünen Häkchen oder einem ähnlichen positiven Signal an.
• Belege: Bieten Sie sofort die Möglichkeit an, einen digitalen Beleg (E-Mail/SMS) zu senden oder ihn auszudrucken, wenn ein Drucker angeschlossen ist.

Fehlerzustand

• Verständliche Fehlermeldungen: Schlägt eine Transaktion fehl, übersetzen Sie technische Fehlercodes in eine für Benutzer verständliche Sprache.
  • Technisch: DECLINED_INSUFFICIENT_FUNDS
  • Für den Benutzer: „Transaktion abgelehnt. Bitte prüfen Sie das Guthaben oder versuchen Sie es mit einer anderen Karte.“
• Option zum erneuten Versuch: Bieten Sie eine gut sichtbare Schaltfläche „Erneut versuchen“ an, damit der Händler den Vorgang schnell neu starten kann, ohne den Betrag erneut einzugeben.

Tapaya Terminal App

Mit der App Tapaya Terminal können Händler Kartenzahlungen eigenständig annehmen. Integratoren können das Erlebnis für Händler in der App Tapaya Terminal anpassen; wenden Sie sich für den Einstieg an developers@tapaya.com.

UI-Anpassung

Sie können die Oberfläche der App Tapaya Terminal in der Tapaya Platform unter Settings > Application > App Theme ändern oder programmatisch über die Platform API. Farben und Markenelemente (Logo, Wortmarken) werden in der gesamten App Tapaya Terminal einheitlich angewendet.

Barrierefreiheit

• Ton: Das SDK gibt Tonsignale beim Lesen der Karte und bei Fehlern aus. Stellen Sie sicher, dass Ihre App während einer Zahlung die Systemlautstärke nicht stummschaltet und den Audiofokus nicht beeinträchtigt.
• Haptik: Das SDK bestätigt das Lesen der Karte per Vibration. Das ist entscheidend für die Barrierefreiheit und für Rückmeldungen in lauten Umgebungen allgemein.

Fehlt Ihnen etwas auf dieser Seite?Wünschen Sie sich eine Funktion. Wir hängen diese Seite an, damit das Team den Kontext sieht.