Awesome
Adyen online payment integration demos
Run this integration in seconds using Gitpod
- Open your Adyen Test Account and create a set of API keys.
- Go to gitpod account variables.
- Set the
ADYEN_API_KEY
,ADYEN_CLIENT_KEY
,ADYEN_HMAC_KEY
andADYEN_MERCHANT_ACCOUNT variables
. - Click the button below!
NOTE: To allow the Adyen Drop-In and Components to load, you have to add https://*.gitpod.io
as allowed origin for your chosen set of API Credentials
Details
This repository showcases a PCI-compliant integration of the Sessions Flow, the default integration that we recommend for merchants. Explore this simplified e-commerce demo to discover the code, libraries and configuration you need to enable various payment options in your checkout experience.
The demo leverages Adyen's API Library for Node.js (GitHub | Docs).
Requirements
Node.js 20.0+
Angular 18+
Installation
- Clone this repo:
git clone https://github.com/adyen-examples/adyen-angular-online-payments.git
- Navigate to
checkout
and install dependencies:
npm install
- Navigate to
node-api
and install dependencies:
npm install
Usage
- Create a
.env
file with all required configuration
Remember to include http://localhost:8080
in the list of Allowed Origins
ADYEN_API_KEY="your_API_key_here"
ADYEN_MERCHANT_ACCOUNT="your_merchant_account_here"
ADYEN_CLIENT_KEY="your_client_key_here"
ADYEN_HMAC_KEY="your_hmac_key_here"
- Start the Express server:
$ cd node-api
$ npm start
- Serve the Angular application:
$ cd checkout
$ ng serve --proxy-config proxy.conf.json
- Visit http://localhost:8080/ to select an integration type.
To try out integrations with test card numbers and payment method details, see Test card numbers.
Webhooks
Webhooks deliver asynchronous notifications about the payment status and other events that are important to receive and process. You can find more information about webhooks in this blog post.
Webhook setup
In the Customer Area under the Developers → Webhooks
section, create a new Standard webhook
.
A good practice is to set up basic authentication, copy the generated HMAC Key and set it as an environment variable. The application will use this to verify the HMAC signatures.
Make sure the webhook is enabled, so it can receive notifications.
Expose an endpoint
This demo provides a simple webhook implementation exposed at /api/webhooks/notifications
that shows you how to receive, validate and consume the webhook payload.
Test your webhook
The following webhooks events
should be enabled:
- AUTHORISATION
To make sure that the Adyen platform can reach your application, we have written a Webhooks Testing Guide that explores several options on how you can easily achieve this (e.g. running on localhost or cloud).