Bubble.io Tutorial - IBAN Verifikation für SEPA Überweisungen

Kostenloses Bubble.io Video Tutorial für IBAN Verfikation

Chris Strobl
Chris Strobl

In diesem Video lernst du, wie du die Kernstruktur von einer IBAN mit Bubble überprüfen kannst. Dies ist vor allem relevant, wenn Benutzer deiner App eine SEPA Überweisung machen wollen und du überprüfen möchtest, ob die Daten richtig eingegeben wurden. Hierfür nutzen wir ein kostenloses Plugin, nämlich IBAN_CHECK von FILGUEIRA https://bubble.io/plugin/ibancheck-1603449324427x313267361739702300

Bubble.io Video Tutorial - IBAN Verifikation 

Video Transkript:
Hallo, mein Name ist Chris Strobl und ich zeige euch heute, wie wir in Bubble eine IBAN Verifizierung entwickeln können.

IBAN ist quasi der STANDARD um europaweit Bank Zahlungen entgegenzunehmen und jeder der eine Kontonummer hat hat auch eine IBAN Nummer. Zum Beispiel hier in Deutschland ein Beispiel für eine IBAN Nummer und wir können den Bubble nicht verifizieren, ob die Bank Adresse komplett korrekt ist.

Wir können aber schauen, ob der Kunde, wenn er die IBAN Nummer eingibt, auch tatsächlich die Standards für diese IBAN Nummer befolgt. Wir gehen direkt mal in Bubble rein und ich habe zwei Sachen vorbereitet. Einmal einen Input Field, einmal ein ganz normales Textfeld. Anschließend gehen wir in Plugins und wir wählen das Plugin IBAN Check International Bank Account Number Validation und dieses Plugin ist von viel Guerra.

Wir gehen jetzt in den Sainte und fügen irgendwo auf dem Canvas das Ivan Check. Input Field hinzu. Ihr habt hier dieses IBAN Number. Und hier nehmen wir Input. Bans eingeben verlief. Also wir nehmen den Verlauf von diesen Input Field. Anschließend gehen wir in das Textfeld und nehmen Ivan Check. Wenn die dazwischen okay. Hier können wir quasi sehen, ob das Ganze passt oder nicht. Wir testen das Ganze jetzt einmal mit den IBAN Nummern, die wir hier auf der Webseite haben. Beispiel kopiere ich die deutsche Nummer. Aktuell nicht. Und wenn wir das Format verwenden, dann geht es.

Und das Gute ist selbst wenn wir Leerzeichen oder ähnliches einfügen, geht das Plugin trotzdem. Seht, aber wenn wir ein Zahl weglassen, dann ist das Format nicht gegeben. Als letztes möchte ich das Ganze jetzt noch anpassen, um die User Experience zu verbessern. Wir fügen ein Icon hinzu. Wir gehen jetzt auf das Conditional und sagen als erstes, wenn das Input. Feld leer ist. Dann zeigen wir standardmäßig die eigenen an, wo das Icon die zweite Conditional ist nun in der IBAN Checks. Wenn die Data source. Nein. Also wenn es nicht funktioniert, dann ändern wir das Icon auf ein Wand Symbol und die Farbe.

Nehmen wir ein Orange. Und schließlich sagen wir wenn. Der very bayer funktioniert und das Boolean Feld ja ist, dann nehmen wir ein Icon. Welches sagt das funktioniert und ändern die Icon Farbe auf ein Grün. Wichtig ist jetzt noch die Reihenfolge der Conditional, wie diese angezeigt werden Aktuell ist es so, dass wir im ersten Schritt sagen Input Field leer, aber eventuell überschreiben wir diese Konditionen eben. Wenn dann auch das hier so ist und daher müssen wir diese Funktion ganz unten haben, weil ansonsten das Feld als erstes da ist. Wir gehen jetzt einmal in Preview und schauen uns das Ganze an! Wir sehen in ihm nichts eingegeben und das Feld ist leer und hier ist ein Nein. Sie sieht Jetzt haben wir das Warnzeichen in Orange, weil die IBAN nicht funktioniert. Wenn wir eine IBAN nehmen nehmen zum Beispiel eine aus Spanien.

Dann sehen wir jetzt, dass wir quasi auch für den User anzeigen können, dass die IBAN verifiziert ist. Und so konntet ihr sehen wir relativ einfach ein IBAN Verifier entwickelt können. Wie gesagt, es wird lediglich die Struktur überprüft, nicht, ob es diese Kontonummer tatsächlich gibt. Das ist noch einmal wichtig.

Wenn euch dieses Video gefallen habt, klickt gerne auf den Like-Button oder subscribe unseren Channel. Wenn ihr Fragen habt, schreibt uns gerne Kommentare. Ich wünsche euch weiterhin viel Erfolg mit Bubble und auf bald.

Plugins