{"id":16035268,"url":"https://github.com/adyen-examples/adyen-angular-online-payments","last_synced_at":"2025-10-22T01:31:05.937Z","repository":{"id":38309237,"uuid":"328554306","full_name":"adyen-examples/adyen-angular-online-payments","owner":"adyen-examples","description":"Accept payments on your Angular/Express-based website with cards, wallets, and key local payment methods","archived":false,"fork":false,"pushed_at":"2024-12-23T10:44:29.000Z","size":4708,"stargazers_count":12,"open_issues_count":5,"forks_count":10,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-23T11:25:02.053Z","etag":null,"topics":["angular","hacktoberfest","payment-gateway","payments"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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":"2021-01-11T05:05:16.000Z","updated_at":"2024-12-23T10:44:25.000Z","dependencies_parsed_at":"2023-02-14T07:01:19.687Z","dependency_job_id":"86ca8943-040a-4788-bafa-f869ddb16f6a","html_url":"https://github.com/adyen-examples/adyen-angular-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-angular-online-payments","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adyen-examples%2Fadyen-angular-online-payments/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adyen-examples%2Fadyen-angular-online-payments/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adyen-examples%2Fadyen-angular-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-angular-online-payments/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237570886,"owners_count":19331713,"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":["angular","hacktoberfest","payment-gateway","payments"],"created_at":"2024-10-08T22:01:32.232Z","updated_at":"2025-10-22T01:31:05.931Z","avatar_url":"https://github.com/adyen-examples.png","language":"TypeScript","funding_links":[],"categories":["Recently Updated","Security and Authentication"],"sub_categories":["[Oct 07, 2024](/content/2024/10/07/README.md)","Payments"],"readme":"# Adyen [online payment](https://docs.adyen.com/online-payments) integration demos\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](checkout/src/assets/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)).\n\n## Requirements\n\nNode.js 20.0+  \nAngular 18+\n\n## Installation\n\n1. Clone this repo:\n\n```\ngit clone https://github.com/adyen-examples/adyen-angular-online-payments.git\n```\n\n2. Navigate to `checkout` and install dependencies:\n\n```\nnpm install\n```\n\n3. Navigate to `node-api` and install dependencies:\n\n```\nnpm install\n```\n\n## Usage\n\n1. Create a `.env` file with all required configuration\n  - [API key](https://docs.adyen.com/user-management/how-to-get-the-api-key)\n  - [Client Key](https://docs.adyen.com/user-management/client-side-authentication) \n  - [Merchant Account](https://docs.adyen.com/account/account-structure)\n  - [HMAC Key](https://docs.adyen.com/development-resources/webhooks/verify-hmac-signatures)\n\nRemember to include `http://localhost:8080` in the list of Allowed Origins\n\n```\nADYEN_API_KEY=\"your_API_key_here\"\nADYEN_MERCHANT_ACCOUNT=\"your_merchant_account_here\"\nADYEN_CLIENT_KEY=\"your_client_key_here\"\nADYEN_HMAC_KEY=\"your_hmac_key_here\"\n\n```\n\n2. Start the Express server:\n\n```\n$ cd node-api\n$ npm start\n```\n\n3. Serve the Angular application:\n\n```\n$ cd checkout\n$ ng serve --proxy-config proxy.conf.json\n```\n\n5. 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# 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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadyen-examples%2Fadyen-angular-online-payments","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadyen-examples%2Fadyen-angular-online-payments","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadyen-examples%2Fadyen-angular-online-payments/lists"}