Skip to content

Accept payments on your React/Express-based website with cards, wallets, and key local payment methods

License

Notifications You must be signed in to change notification settings

adyen-examples/adyen-react-online-payments

Repository files navigation

Adyen online payment integration demos

Run this integration in seconds using Gitpod

Note: Notice the REACT_APP_ prefix in the REACT_APP_ADYEN_CLIENT_KEY.

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

Open in Gitpod
 First time with Gitpod?

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.

Card checkout demo

The demo leverages Adyen's API Library for Node.js (GitHub | Docs) on the server side.

Requirements

Node.js 20+

Installation

  1. Clone this repo:
git clone https://github.com/adyen-examples/adyen-react-online-payments.git
  1. Navigate to the root directory and install dependencies:
npm install

Usage

  1. Create a ./.env file with your API key, Client Key - Remember to add http://localhost:3000 as an origin for client key, and merchant account name (all credentials are in string format):
# server-side env variables
ADYEN_API_KEY="your_API_key_here"
ADYEN_MERCHANT_ACCOUNT="your_merchant_account_here"
ADYEN_HMAC_KEY=yourNotificationSetupHMACkey

# client-side env variables: using REACT_APP prefix to be included in the REACT build 
REACT_APP_ADYEN_CLIENT_KEY="your_client_key_here"
  1. Build & Start the server:

This will create a React production build and start the express server

npm run server
  1. 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.

Note

The demo supports cancellation and refunds, processing the incoming Adyen webhook notifications. Make sure webhooks are enabled and processed (see below).

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).

About

Accept payments on your React/Express-based website with cards, wallets, and key local payment methods

Topics

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Packages

No packages published