Building demos from the merchant perspective

By Andrew Wong, Developer Advocate, Adyen

Adyen is an all-in-one payments platform that lets merchants easily process payments all over the world. Our online payment integrations, Drop-in and Components, offer a complete UI solution to collect shopper information, as well handle all shopper interaction during checkout.

We’re excited to launch a set of example integrations to complement our developer documentation. Each example integration features a simplified version of an e-commerce website, highlighting the best practices on how to integrate online payments for a specific language or framework.

Completing a test credit card payment

Focusing on the developer experience

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.

Key API calls for online payments

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.

Extending payment methods

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.

Dynamically offering payment methods based on transaction details such as country code, currency, and the platform where the payment is made

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.

Language- and framework-agnostic design

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.

Getting started

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!

For in-depth guides on how to integrate online checkout, feel free to visit Online payments in our developer docs.

Technical careers at Adyen

We are on the lookout for talented engineers and technical people to help us build the infrastructure of global commerce!

Check out developer vacancies

Developer newsletter

Get updated on new blog posts and other developer news.

Subscribe now

Sign up for the newsletter

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.

Are you looking for test card numbers?

Would you like to contact support?