Testing payment flows is a challenging and time-consuming process, involving multiple steps, different payment methods, and manually entering data such as card details.
We’ve built the Adyen Test Card Chrome extension to solve this challenge, designed to simplify the testing process. By adding the extension directly to your browser, you can copy the card details to the clipboard or prefill the Adyen web Drop-in with a single click.
In this article, you’ll discover the benefits of the Adyen Test Cards extension, how we built it, and what it means in terms of security.
Meet the Adyen Test Card extension
Given the high number of returning visitors to the Adyen Test Cards page, we saw an opportunity to assist developers by streamlining the testing process. This is why we built the extension: to simplify the testing of payment flows for developers.
Designed to facilitate Adyen Checkout integration testing, the Adyen Test Card extension reduces the time and effort spent on payment flow testing. It brings the test card numbers you need directly into your browser and simplifies the testing process for developers. It removes the burden of going back and forth between different pages to collect the card data you need to test.
To make the design as simple as possible, we used chrome.sidePanel, a pre-built side panel that doesn't overlap with the tab's content and that can be easily resized or closed. The extension builds its UI and logic within the side panel, creating features that deliver user experiences that nicely blend with the Adyen Drop-in.
Make testing easy
There are multiple features that contribute to enhancing the testing experience for developers. The most significant ones are:
One-click prefill
Testing checkout integrations previously meant spending time searching for the right card, copying (from the Adyen Test Cards page or your local file) and pasting it in the right field, then repeating the same process for the expiry date and CVC data.
Now, the one-click prefill feature of the Adyen Web Drop-in does it for you. All you need to do is find the card information you need, select, and paste it in the right field.
There is also a copy-to-clipboard feature in case the card number needs to be used with applications that don't use the Adyen Web Drop-in.
Pin your favorites
You can use the ‘’Add to Favorites’’ option to speed up the testing process further. This feature makes it possible to pin frequently used cards to the top of the extension panel for quick, convenient access.
Different payment methods
Next to the different credit and debit cards, the extension also supports gift cards and IBANs. You can also submit a request to add other payment methods or card numbers.
Getting started
Installing the extension is easy and can be done in the Chrome Web Store by searching for the Adyen Test Cards extension. All you need to do is click the “Add to Chrome” button.
Watch the video on our AdyenDev YouTube channel for a detailed guide on installing and using the extension.
Security
The extension is designed with security as a key consideration, promoting best practices in payment security by discouraging using real cards for testing.
The Adyen Test Cards extension only copies (using Javascript) the selected card details into the checkout form. No other data or fields are read or changed. The source code is Open-Source, and the extension has no telemetry.
Build and Testing
Developing the Chrome extension is an easy process. You first need to create a manifest file in a JSON format that defines the extension's metadata, permissions, and assets.
In the manifest file, you can find the permissions required by the extension:
- "sidePanel": Gives you access to the Chrome side-panel component.
- "scripting": Allows you to execute the script to modify the page's content, specifically by populating the card details into their corresponding fields.
- "activeTab": Permits you to only interact with the active tab.
- "storage": Lets you save the list of favorite cards in the local storage.
Then, you need to develop the source code that contains several elements:
- JavaScript and HTML code: Implements the functional behavior and rendering of the user interface.
- Content script: Javascript code that manages the extension's interaction with the tab's content.
- Service worker: Background script that manages the extension's state.
The Chrome extension is loaded directly from the source code during the development, leveraging the Chrome Developer mode and making code modifications immediately visible. This, combined with using Chrome DevTools, makes debugging and troubleshooting a lot easier.
Taking testing to the next level
The Adyen Test Cards Chrome extension helps developers perform more convenient, secure, and effective testing. By quickly accessing a list of test card data without manually entering the information, you can speed up the testing process and spend more time developing the integration without wasting time and energy on repetitive tasks.
Adyen Test Cards Data mimics real transactions, allowing you to test different scenarios and outcomes. By eliminating the manual entry of the payment method details, the extension reduces the possibility of error during testing, resulting in more robust integrations.
We’re proud to support developers during their integration journey with the Adyen platform. Providing effective tools removes friction, boosts productivity, and ultimately contributes to a better and more robust integration.
Get started by installing the Adyen Test Card extension from the Chrome Store or downloading it from the source code on GitHub. Give us your feedback, and let us know what you think should be included in the next releases.
Top comments (0)