{"id":18487197,"url":"https://github.com/adyen-examples/adyen-react-online-payments","last_synced_at":"2025-04-08T20:30:48.123Z","repository":{"id":36967100,"uuid":"249466223","full_name":"adyen-examples/adyen-react-online-payments","owner":"adyen-examples","description":"Accept payments on your React/Express-based website with cards, wallets, and key local payment methods","archived":false,"fork":false,"pushed_at":"2025-03-21T21:22:18.000Z","size":7064,"stargazers_count":71,"open_issues_count":7,"forks_count":47,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-21T22:25:25.521Z","etag":null,"topics":["hacktoberfest"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adyen-examples.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-23T15:17:02.000Z","updated_at":"2025-03-21T21:22:15.000Z","dependencies_parsed_at":"2023-11-14T11:28:23.858Z","dependency_job_id":"9b610c1a-90cd-4c06-afa2-91c4fd4d1fe3","html_url":"https://github.com/adyen-examples/adyen-react-online-payments","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adyen-examples%2Fadyen-react-online-payments","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adyen-examples%2Fadyen-react-online-payments/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adyen-examples%2Fadyen-react-online-payments/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adyen-examples%2Fadyen-react-online-payments/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adyen-examples","download_url":"https://codeload.github.com/adyen-examples/adyen-react-online-payments/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247922667,"owners_count":21018840,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest"],"created_at":"2024-11-06T12:50:17.282Z","updated_at":"2025-04-08T20:30:45.716Z","avatar_url":"https://github.com/adyen-examples.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Adyen [online payment](https://docs.adyen.com/online-payments) integration demos\n\n## Run this integration in seconds using [Gitpod](https://gitpod.io/)\n\n* Open your [Adyen Test Account](https://ca-test.adyen.com/ca/ca/overview/default.shtml) and create a set of [API keys](https://docs.adyen.com/user-management/how-to-get-the-api-key).\n* Go to [gitpod account variables](https://gitpod.io/variables).\n* Set the `ADYEN_API_KEY`, `REACT_APP_ADYEN_CLIENT_KEY`, `ADYEN_HMAC_KEY` and `ADYEN_MERCHANT_ACCOUNT variables`.\n* Click the button below!\n\n\u003e Note: Notice the `REACT_APP_` prefix in the `REACT_APP_ADYEN_CLIENT_KEY`.\n\n_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](https://ca-test.adyen.com/ca/ca/config/api_credentials_new.shtml)_\n\n[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/adyen-examples/adyen-react-online-payments)  \n\u0026nbsp;[First time with Gitpod?](https://github.com/adyen-examples/.github/blob/main/pages/gitpod-get-started.md)\n\n## Details\n\nThis repository showcases a PCI-compliant integration of the [Sessions Flow](https://docs.adyen.com/online-payments/build-your-integration/additional-use-cases/), 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.  \n\n![Card checkout demo](public/images/cardcheckout.gif)\n\nThe demo leverages Adyen's API Library for Node.js ([GitHub](https://github.com/Adyen/adyen-node-api-library) | [Docs](https://docs.adyen.com/development-resources/libraries#javascript)) on the server side.\n\n## Requirements\n\nNode.js 20+\n\n## Installation\n\n1. Clone this repo:\n\n```\ngit clone https://github.com/adyen-examples/adyen-react-online-payments.git\n```\n\n2. Navigate to the root directory and install dependencies:\n\n```\nnpm install\n```\n\n## Usage\n\n1. Create a `./.env` file with your [API key](https://docs.adyen.com/user-management/how-to-get-the-api-key), [Client Key](https://docs.adyen.com/user-management/client-side-authentication) - Remember to add `http://localhost:3000` as an origin for client key, and merchant account name (all credentials are in string format):\n\n```\n# server-side env variables\nADYEN_API_KEY=\"your_API_key_here\"\nADYEN_MERCHANT_ACCOUNT=\"your_merchant_account_here\"\nADYEN_HMAC_KEY=yourNotificationSetupHMACkey\n\n# client-side env variables: using REACT_APP prefix to be included in the REACT build \nREACT_APP_ADYEN_CLIENT_KEY=\"your_client_key_here\"\n```\n\n2. Build \u0026 Start the server:\n\nThis will create a React production build and start the express server\n\n```\nnpm run server\n```\n\n3. Visit [http://localhost:8080/](http://localhost:8080/) to select an integration type.\n\nTo try out integrations with test card numbers and payment method details, see [Test card numbers](https://docs.adyen.com/development-resources/test-cards/test-card-numbers).\n\n**Note**\n\nThe demo supports cancellation and refunds, processing the incoming [Adyen webhook notifications](https://docs.adyen.com/development-resources/webhooks). Make sure webhooks are enabled and processed (see below).\n\n# Webhooks\n\nWebhooks deliver asynchronous notifications about the payment status and other events that are important to receive and process. \nYou can find more information about webhooks in [this blog post](https://www.adyen.com/knowledge-hub/consuming-webhooks).\n\n### Webhook setup\n\nIn the Customer Area under the `Developers → Webhooks` section, [create](https://docs.adyen.com/development-resources/webhooks/#set-up-webhooks-in-your-customer-area) a new `Standard webhook`.\n\nA 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](https://docs.adyen.com/development-resources/webhooks/verify-hmac-signatures/).\n\nMake sure the webhook is **enabled**, so it can receive notifications.\n\n### Expose an endpoint\n\nThis demo provides a simple webhook implementation exposed at `/api/webhooks/notifications` that shows you how to receive, validate and consume the webhook payload.\n\n### Test your webhook\n\nThe following webhooks `events` should be enabled:\n* **AUTHORISATION**\n\n\nTo make sure that the Adyen platform can reach your application, we have written a [Webhooks Testing Guide](https://github.com/adyen-examples/.github/blob/main/pages/webhooks-testing.md)\nthat explores several options on how you can easily achieve this (e.g. running on localhost or cloud).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadyen-examples%2Fadyen-react-online-payments","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadyen-examples%2Fadyen-react-online-payments","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadyen-examples%2Fadyen-react-online-payments/lists"}