Das Testen von Zahlungsabläufen ist häufig ein zeitaufwändiger Prozess, der mehrere Schritte, verschiedene Zahlungsmethoden und die manuelle Eingabe von Daten umfasst. Das muss nicht sein.
Wir haben die Chrome Extension für die Adyen Test Card entwickelt, um den Testprozess zu vereinfachen. Wenn Sie die Erweiterung direkt zu Ihrem Browser hinzufügen, können Sie die Kartendaten in die Zwischenablage kopieren oder das Adyen Web Drop-in mit einem einzigen Klick vorausfüllen.
In diesem Artikel erfahren Sie mehr über die Vorteile der Adyen Test Cards-Erweiterung, wie wir sie entwickelt haben und was sie in Bezug auf die Sicherheit bedeutet.
Entdecken Sie die Browsererweiterung für die Adyen Test Cards
Wir haben die Browsererweiterung entwickelt, um das Testen der Adyen Checkout-Integration zu vereinfachen und den Zeit- und Arbeitsaufwand für das Testen von Zahlungsabläufen zu reduzieren. Die Erweiterung stellt die benötigten Testkartennummern direkt in Ihrem Browser zur Verfügung und vereinfacht den Testprozess für Entwickler. Der Vorteil? Sie müssen nicht mehr zwischen verschiedenen Seiten hin- und herspringen, um die für den Test erforderlichen Kartendaten einzugeben.
Um das Design so einfach wie möglich zu halten, haben wir chrome.sidePanel verwendet, ein vorgefertigtes Seitenpanel, das sich nicht mit dem Inhalt des Tabs überschneidet und einfach in der Größe verändert oder geschlossen werden kann. Die Erweiterung baut ihre Benutzeroberfläche und Logik innerhalb des Seitenfensters auf und bietet so Funktionen, die sich nahtlos in das Adyen-Drop-in einfügen.
Testen leicht gemacht
Es gibt mehrere Funktionen, die das Testen für Entwickler vereinfachen. Die wichtigsten sind:
Ein-Klick-Vorausfüllung
Das Testen von Checkout-Integrationen bedeutete bisher, die richtige Karte zu suchen, sie zu kopieren (von der Adyen-Testkartenseite oder aus Ihrer lokalen Datei), sie in das richtige Feld einzufügen und dann den gleichen Prozess für das Ablaufdatum und die CVC-Daten zu wiederholen.
Die Ein-Klick-Vorausfüllung des Adyen Web Drop-in übernimmt diese Aufgabe für Sie. Sie müssen nur die benötigten Karteninformationen suchen, auswählen und in das Feld einfügen.
Es gibt auch eine Funktion zum Kopieren in die Zwischenablage, falls die Kartennummer in Anwendungen verwendet werden soll, die nicht das Adyen Web Drop-in verwenden.
Favoriten speichern
Sie können die Option "Zu Favoriten hinzufügen" verwenden, um den Testvorgang zu beschleunigen. Diese Funktion ermöglicht es Ihnen, häufig verwendete Karten im oberen Bereich des Erweiterungsfensters zu speichern, um schnell und einfach darauf zugreifen zu können.
Verschiedene Zahlungsmethoden
Neben den verschiedenen Kredit- und Debitkarten unterstützt die Erweiterung auch Geschenkkarten und IBANs. Sie können auch eine Anfrage stellen, um weitere Zahlungsmethoden oder Kartennummern hinzuzufügen.
Die ersten Schritte
Die Installation der Erweiterung ist einfach und erfolgt im Chrome Web Store über die Suche nach “Expansion Adyen Test Cards”. Klicken Sie einfach auf die Schaltfläche "Zu Chrome hinzufügen".
Für eine detaillierte Anleitung zur Installation und Verwendung der Erweiterung, haben wir Ihnen ein Video auf unserem AdyenDev YouTube-Kanal bereitgestellt.
Sicherheit
Bei der Entwicklung der Erweiterung stand die Sicherheit im Vordergrund. Sie fördert bewährte Verfahren im Bereich der Zahlungssicherheit, indem sie von der Verwendung echter Karten für Testzwecke abrät.
Die Adyen Test Cards-Erweiterung kopiert (mit Javascript) nur die ausgewählten Kartendaten in das Checkout-Formular. Es werden keine anderen Daten oder Felder ausgelesen oder verändert. Der Quellcode ist Open Source und die Erweiterung enthält keine Telemetrie.
Entwickeln und Testen
Wenn Sie die Erweiterung verwenden möchten, müssen Sie sie zunächst entwickeln. Erstellen Sie dafür eine Manifestdatei im JSON-Format, die die Metadaten, Berechtigungen und Assets der Erweiterung definiert.
Die Manifestdatei enthält die Berechtigungen, die für die Erweiterung erforderlich sind:
"sidePanel": Ermöglicht den Zugriff auf die Chrome-Sidebar-Komponente
"scripting": Ermöglicht die Ausführung des Skripts, um den Inhalt der Seite zu ändern, insbesondere durch das Einfügen der Kartendetails in die entsprechenden Felder.
"activeTab": Ermöglicht die Interaktion ausschließlich mit dem aktiven Tab.
"Save": Ermöglicht das lokale Speichern der bevorzugten Karten.
Anschließend müssen Sie den Quellcode entwickeln, der mehrere Elemente enthält:
JavaScript- und HTML-Code: Implementiert das funktionale Verhalten und die Darstellung der Benutzeroberfläche.
Content Script: Javascript-Code, der die Interaktion der Erweiterung mit dem Inhalt des Tabs steuert.
Service Worker: Hintergrundskript, das den Status der Erweiterung verwaltet.
Die Chrome Extension wird während der Entwicklung direkt aus dem Quellcode geladen, wobei der Chrome Developer Mode verwendet wird und Codeänderungen sofort sichtbar sind. Dies und die Verwendung der Chrome DevTools erleichtern die Fehlersuche und -behebung erheblich.
Bringen Sie den Testprozess auf die nächste Stufe
Die Adyen Test Cards Chrome Extension hilft Entwicklern dabei, Zahlungsabläufe bequem, sicher und effizient zu testen. Durch den schnellen Zugriff auf eine Liste von Testkartendaten ohne manuelle Eingabe können Sie den Testprozess beschleunigen und mehr Zeit in die Entwicklung der Integration investieren.
Die Testkartendaten von Adyen simulieren reale Transaktionen, so dass Sie verschiedene Szenarien und Ergebnisse testen können. Durch den Wegfall der manuellen Eingabe von Zahlungsdetails reduziert die Erweiterung die Möglichkeit von Fehlern während des Testens, was zu robusteren Integrationen führt.
Wir sind stolz darauf, Entwickler auf ihrem Weg zur Integration mit der Adyen-Plattform zu unterstützen. Die Bereitstellung effektiver Tools beseitigt Reibungsverluste, steigert die Produktivität und trägt letztendlich zu einer besseren und stabileren Integration bei.
Installieren Sie die Browsererweiterung für die Adyen Test Cards aus dem Chrome Store oder laden Sie den Quellcode von GitHub herunter. Lassen Sie uns wissen, was Ihrer Meinung nach in zukünftigen Versionen enthalten sein sollte - wir freuen uns auf Ihr Feedback.
Holen Sie sich Payment-News direkt in Ihre Inbox.
Ich bestätige, dass ich die Datenschutzbestimmungen von Adyen gelesen habe und stimme der Verwendung meiner Daten im Einklang damit zu.