Why we open sourced our web framework
Completing a test credit card payment
We built these example integrations with developers in mind. Each example integration is fully interactive in the browser, allowing developers to complete test transactions for many popular payment methods. Under the hood, we wanted to minimize any “overhead” code or unnecessary features, focusing only on what developers need to know to implement online payments into their website or app.
We recognize that not all developers have a background in payments. After all, aside from simply collecting shopper information, the checkout process can involve many distinct shopper interactions. For example, the shopper typically begins the transaction by selecting their preferred payment method. The developer will need to request and present this list for their shoppers. What’s more: later on in the transaction, the shopper may need to be redirected to another page (e.g., 3D Secure 2 authentication). And in some transactions, there may even be additional details required to be collected from the shopper (e.g., a QR code or a fingerprint).
To help streamline the integration process for all developers, we built our example integrations to highlight when and how calls to key Adyen API endpoints are made to support the many possible shopper interactions during checkout. This way, developers can focus on just the integration itself, even if they have just budding knowledge of how an online payment works.
Along with supporting all payment flows and interactions, we also wanted to highlight how simple adding more payment methods to an existing checkout integration really is. Our merchants’ businesses are ever-evolving, after all. And luckily, as developers decide to add more payment methods to their checkout page, they won’t be tasked with building an entirely new integration.
Our example integrations showcase many available payment methods, all supported by the same underlying code.
Within each example integration, developers will find the same single client payments flow to handle any local payment method. This means you'll see the same configurations, event handlers, paths, and other client code to support all shopper interactions during the checkout process.
In addition to shared client code, we also wanted to make sure that we made the same design choices across all example integrations. In particular, each example integration shares the same features, user interface, endpoint names, and client-server interactions. This way, regardless of which server-side language or framework developers choose, they’ll still be exposed to the same best practices during integration.
Whether you want to explore the customizable UI, or view the underlying code in a complete end-to-end integration, all you need is an Adyen test account. Once you’re all set, head over to Adyen Examples on GitHub and clone the example integration for your preferred framework. After following the simple installation instructions in the included README, you’ll be able to test a selection from the hundreds of payments that can be offered to your shoppers!
By submitting this form, you acknowledge that you have reviewed the terms of our Privacy Statement and consent to the use of data in accordance therewith.