Building demos from the merchant perspective

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

We’re excited to launch a set ofexample integrationsto complement ourdeveloper 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.

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 2authentication). 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 highlightwhenandhowcalls to keyAdyen API endpointsare 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 anAdyen test account. Once you’re all set, head over toAdyen Exampleson 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 visitOnline paymentsin our developer docs.