Add Drop-in v6 (#748)

* Archive v5 & Add support for drop-in v6

* Update README to link to the _archive/v5 folder

* Run E2E for checkout v5 and v6

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @adyen-examples/developer-relations

.github/workflows/e2e-checkout-advanced.yml

@@ -12,7 +12,19 @@ on:
       - 'checkout-example-advanced/**'
 
 jobs:
-  checkout-advanced:
+  checkout-advanced-v5:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout checkout-example-advanced
+        uses: actions/checkout@v4
+      - name: Build checkout-example-advanced-v5 image
+        run: docker build -t checkout-example-advanced-v5:latest -f ./checkout-example-advanced/_archive/v5/Dockerfile ./checkout-example-advanced/_archive/v5
+      - name: Start checkout-example-advanced-v5 container
+        run: docker run --rm -d --name checkout-example-advanced-v5 -p 8080:8080 -e ADYEN_API_KEY="${{ secrets.ADYEN_API_KEY }}" -e ADYEN_MERCHANT_ACCOUNT=${{ secrets.ADYEN_MERCHANT_ACCOUNT }} -e ADYEN_CLIENT_KEY=${{ secrets.ADYEN_CLIENT_KEY }} -e ADYEN_HMAC_KEY=${{ secrets.ADYEN_HMAC_KEY }} checkout-example-advanced-v5:latest
+      - name: Run testing suite against checkout-example-advanced-v5
+        run: docker run --rm --name adyen-testing-suite -e PLAYWRIGHT_FOLDERNAME=advanced-checkout/v5 -e ADYEN_HMAC_KEY=${{ secrets.ADYEN_HMAC_KEY }} --network host ghcr.io/adyen-examples/adyen-testing-suite:main
+
+  checkout-advanced-v6:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout checkout-example-advanced
@@ -22,4 +34,4 @@ jobs:
       - name: Start checkout-example-advanced container
         run: docker run --rm -d --name checkout-example-advanced-image -p 8080:8080 -e ADYEN_API_KEY="${{ secrets.ADYEN_API_KEY }}" -e ADYEN_MERCHANT_ACCOUNT=${{ secrets.ADYEN_MERCHANT_ACCOUNT }} -e ADYEN_CLIENT_KEY=${{ secrets.ADYEN_CLIENT_KEY }} -e ADYEN_HMAC_KEY=${{ secrets.ADYEN_HMAC_KEY }} checkout-example-advanced-image:latest
       - name: Run testing suite against checkout-example-advanced-image
-        run: docker run --rm --name adyen-testing-suite -e PLAYWRIGHT_FOLDERNAME=advanced-checkout/v5 -e ADYEN_HMAC_KEY=${{ secrets.ADYEN_HMAC_KEY }} --network host ghcr.io/adyen-examples/adyen-testing-suite:main
+        run: docker run --rm --name adyen-testing-suite -e PLAYWRIGHT_FOLDERNAME=advanced-checkout/v6 -e ADYEN_HMAC_KEY=${{ secrets.ADYEN_HMAC_KEY }} --network host ghcr.io/adyen-examples/adyen-testing-suite:main

.github/workflows/e2e-checkout.yml

@@ -12,7 +12,21 @@ on:
       - 'checkout-example/**'
 
 jobs:
-  checkout:
+  # e2e testing with Adyen.Web Drop-in/Components v5
+  checkout-v5:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout checkout-example
+        uses: actions/checkout@v4
+      - name: Build checkout-example-v5 image
+        run: docker build -t checkout-example-v5:latest -f ./checkout-example/_archive/v5/Dockerfile ./checkout-example/_archive/v5
+      - name: Start checkout-example-v5 container
+        run: docker run --rm -d --name checkout-example-v5 -p 8080:8080 -e ADYEN_API_KEY="${{ secrets.ADYEN_API_KEY }}" -e ADYEN_MERCHANT_ACCOUNT=${{ secrets.ADYEN_MERCHANT_ACCOUNT }} -e ADYEN_CLIENT_KEY=${{ secrets.ADYEN_CLIENT_KEY }} -e ADYEN_HMAC_KEY=${{ secrets.ADYEN_HMAC_KEY }} checkout-example-v5:latest
+      - name: Run testing suite against checkout-example-v5
+        run: docker run --rm --name adyen-testing-suite -e PLAYWRIGHT_FOLDERNAME=checkout/v5 -e ADYEN_HMAC_KEY=${{ secrets.ADYEN_HMAC_KEY }} --network host ghcr.io/adyen-examples/adyen-testing-suite:main
+
+  # e2e testing with Adyen.Web Drop-in/Components v6
+  checkout-v6:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout checkout-example
@@ -22,4 +36,4 @@ jobs:
       - name: Start checkout-example container
         run: docker run --rm -d --name checkout-example-image -p 8080:8080 -e ADYEN_API_KEY="${{ secrets.ADYEN_API_KEY }}" -e ADYEN_MERCHANT_ACCOUNT=${{ secrets.ADYEN_MERCHANT_ACCOUNT }} -e ADYEN_CLIENT_KEY=${{ secrets.ADYEN_CLIENT_KEY }} -e ADYEN_HMAC_KEY=${{ secrets.ADYEN_HMAC_KEY }} checkout-example-image:latest
       - name: Run testing suite against checkout-example
-        run: docker run --rm --name adyen-testing-suite -e PLAYWRIGHT_FOLDERNAME=checkout/v5 -e ADYEN_HMAC_KEY=${{ secrets.ADYEN_HMAC_KEY }} --network host ghcr.io/adyen-examples/adyen-testing-suite:main
+        run: docker run --rm --name adyen-testing-suite -e PLAYWRIGHT_FOLDERNAME=checkout/v6 -e ADYEN_HMAC_KEY=${{ secrets.ADYEN_HMAC_KEY }} --network host ghcr.io/adyen-examples/adyen-testing-suite:main

checkout-example-advanced/README.md

@@ -1,5 +1,7 @@
 # Adyen [Online Payments](https://docs.adyen.com/online-payments) Integration Demo - Advanced Flow
 
+Checkout sample application using `Adyen.Web Drop-in/Components v6.x.x`,  (see [folder /_archive/v5](./_archive/v5) to access the previous version using `Adyen.Web Drop-in/Components v5.x.x`).
+
 [![Node.js CI](https://github.com/adyen-examples/adyen-node-online-payments/actions/workflows/build-checkout-advanced.yml/badge.svg)](https://github.com/adyen-examples/adyen-node-online-payments/actions/workflows/build-checkout-advanced.yml)
 [![E2E (Playwright)](https://github.com/adyen-examples/adyen-node-online-payments/actions/workflows/e2e-checkout-advanced.yml/badge.svg)](https://github.com/adyen-examples/adyen-node-online-payments/actions/workflows/e2e-checkout-advanced.yml)
 

checkout-example-advanced/_archive/v5/.dockerignore

@@ -0,0 +1,4 @@
+.env
+.github
+.idea
+node_modules

checkout-example-advanced/_archive/v5/.editorconfig

@@ -0,0 +1,14 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 140
+
+[*.md]
+trim_trailing_whitespace = false

checkout-example-advanced/_archive/v5/.gitignore

@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.env
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

checkout-example-advanced/_archive/v5/Dockerfile

@@ -0,0 +1,12 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install
+
+# Copy the source files into the image
+COPY . .
+
+CMD [ "npm", "start" ]

checkout-example-advanced/_archive/v5/README.md

@@ -0,0 +1,90 @@
+# Sample app with Adyen Adyen Web 5.68.0.
+
+This folder contains the **previous version** of the sample application that uses **Adyen Web 5.68.x**.
+
+**Check the root folder of the repository to use the latest version of Adyen Web/Components 6.x.x**
+
+# Description
+
+This repository showcases a PCI-compliant integration of the **Advanced Flow**. Explore this simplified e-commerce demo to discover the code, libraries and configuration you need to enable various payment options in your checkout experience.
+
+It includes a **NodeJS + Express** application that supports [Adyen Drop-in and Components](https://docs.adyen.com/online-payments/build-your-integration) 
+(ACH, Alipay, Cards, Dotpay, iDEAL, Klarna, PayPal, etc..) using the Adyen's API Library for Node.js ([GitHub](https://github.com/Adyen/adyen-node-api-library)).   
+
+> **Note:**
+For a simpler flow using `/sessions`, check out the demo in the [`checkout-example`](../checkout-example) folder.
+
+![Card checkout demo](public/images/cardcheckout.gif)
+
+## Requirements
+
+- [Adyen API Credentials](https://docs.adyen.com/development-resources/api-credentials/)
+- Node.js 20+
+
+## 1. Installation
+
+```
+git clone https://github.com/adyen-examples/adyen-node-online-payments.git
+```
+
+## 2. Set the environment variables
+* [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)
+* [Merchant Account](https://docs.adyen.com/account/account-structure)
+* [HMAC Key](https://docs.adyen.com/development-resources/webhooks/verify-hmac-signatures)
+
+Create a `./.env` file with the environment variables. 
+```shell
+export ADYEN_API_KEY=yourAdyenApiKey
+export ADYEN_MERCHANT_ACCOUNT=yourAdyenMerchantAccount
+export ADYEN_CLIENT_KEY=yourAdyenClientKey
+export ADYEN_HMAC_KEY=yourHmacKey
+```
+
+## 3. Configure allowed origins (CORS)
+
+It is required to specify the domain or URL of the web applications that will make requests to Adyen.
+
+In the Customer Area add `http://localhost:8080` in the list of Allowed Origins associated with the Client Key.
+
+
+## 4. Run the application
+
+```
+cd checkout-example-advanced
+    
+npm install
+npm run dev
+```
+
+Visit [http://localhost:8080/](http://localhost:8080/) to choose an integration type.
+
+Try out the different payment methods with our [test card numbers](https://docs.adyen.com/development-resources/test-cards/test-card-numbers) and other payment method details.
+
+
+# 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](https://www.adyen.com/knowledge-hub/consuming-webhooks).
+
+### Webhook setup
+
+In 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`.
+
+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](https://docs.adyen.com/development-resources/webhooks/verify-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](https://github.com/adyen-examples/.github/blob/main/pages/webhooks-testing.md)
+that explores several options on how you can easily achieve this (e.g. running on localhost or cloud).
+