Support Drop-in v6

.github/workflows/codeql.yml

@@ -12,22 +12,6 @@
 name: "CodeQL"
 
 on:
-  push:
-    branches: [ "main" ]
-    paths-ignore:
-      - '**/README.md'
-      - README.md
-      - .gitignore
-      - .gitpod.yml
-      - LICENSE    
-  pull_request:
-    branches: [ "main" ]
-    paths-ignore:
-      - '**/README.md'
-      - README.md
-      - .gitignore
-      - .gitpod.yml
-      - LICENSE    
   schedule:
     - cron: '31 6 * * 2'
 

.github/workflows/e2e.yml

@@ -20,17 +20,31 @@ on:
       - LICENSE    
 
 jobs:
-  checkout:
+  # e2e testing with Drop-in v5 (see /_archive/v5 folder)
+  checkout-v5:
 
     runs-on: ubuntu-latest
     steps:
       - name: Checkout project
         uses: actions/checkout@v3
       - name: Build image (application)
-        run: docker build -t test-image:latest .
+        run: docker build -t test-image-v5:latest -f ./_archive/v5/Dockerfile ./_archive/v5
       - name: Start container (application)
-        run: docker run --rm -d --name test-image -p 8080:8080 -e PORT=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 }} test-image:latest
+        run: docker run --rm -d --name test-image-v5 -p 8080:8080 -e PORT=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 }} test-image-v5:latest
       - name: Run testing suite
-        run: docker run --rm --name adyen-testing-suite -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/v5 -e ADYEN_HMAC_KEY=${{ secrets.ADYEN_HMAC_KEY }} --network host ghcr.io/adyen-examples/adyen-testing-suite:main
 
+  # e2e testing with Drop-in v6
+  checkout-v6:
+
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout project
+        uses: actions/checkout@v3
+      - name: Build image (application)
+        run: docker build -t test-image-v6:latest .
+      - name: Start container (application)
+        run: docker run --rm -d --name test-image-v6 -p 8080:8080 -e PORT=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 }} test-image-v6:latest
+      - name: Run testing suite
+        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
 

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18-alpine
+FROM node:20-alpine
 
 WORKDIR /app
 

README.md

@@ -1,5 +1,7 @@
 # Adyen [online payment](https://docs.adyen.com/online-payments) integration demos
 
+Checkout sample application using Adyen Drop-in v6 (see [folder /_archive/v5](./_archive/v5) to access the previous version using Adyen Drop-in v5).
+
 ## Run this integration in seconds using [Gitpod](https://gitpod.io/)
 
 * 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).
@@ -22,7 +24,7 @@ The demo leverages Adyen's API Library for Node.js ([GitHub](https://github.com/
 
 ## Requirements
 
-Node.js 18+
+Node.js 20+
 
 ## Installation
 

_archive/v5/.dockerignore

@@ -0,0 +1,5 @@
+.env
+.github
+.idea
+node_modules
+.tool-versions

_archive/v5/.env.template

@@ -0,0 +1,5 @@
+PORT="8080"
+ADYEN_API_KEY=
+ADYEN_CLIENT_KEY=
+ADYEN_MERCHANT_ACCOUNT=
+ADYEN_HMAC_KEY=

_archive/v5/Dockerfile

@@ -0,0 +1,15 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install
+
+# copy project files
+COPY . .
+
+RUN npm run build
+
+EXPOSE 8080
+CMD ["npm", "run", "dev"]

_archive/v5/README.md

@@ -0,0 +1,83 @@
+# Sample app with Adyen Adyen Web 5.68.x.
+
+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 Adyen Web 6.x
+
+## Details
+
+The 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)).
+
+## Requirements
+
+Node.js 18+
+Adyen Web 5.68.x
+
+## Installation
+
+1. Clone this repo:
+
+```
+git clone https://github.com/adyen-examples/adyen-vue-online-payments.git
+```
+
+2. Navigate to the `v5` directory and install dependencies:
+
+```
+cd v5
+npm install
+```
+
+## Usage
+
+1. Create a `./.env` file with the required info
+- [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)
+
+Remember to include ```http://localhost:8080``` in the list of Allowed Origins
+```
+PORT="8080"
+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"
+```
+
+2. Start the server:
+
+```
+npm run dev
+```
+
+3. Visit [http://localhost:8080](http://localhost:8080) to select an integration type.
+
+To 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).
+
+# 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).
+

_archive/v5/app.vue

@@ -0,0 +1,6 @@
+<template>
+  <Navbar />
+  <div class="main-container">
+    <NuxtPage />
+  </div>
+</template>

_archive/v5/components/Navbar.vue

@@ -0,0 +1,7 @@
+<template>
+  <header id="header">
+    <nuxt-link to="/">
+      <img src="~/public/images/mystore-logo.svg" alt="Mystore logo" />
+    </nuxt-link>
+  </header>
+</template>

_archive/v5/nuxt.config.ts

@@ -0,0 +1,24 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  app: {
+    head: {
+      title: 'Checkout Demo'
+    }
+  },
+  runtimeConfig: {
+    adyenApiKey: process.env.ADYEN_API_KEY,
+    adyenMerchantAccount: process.env.ADYEN_MERCHANT_ACCOUNT,
+    adyenClientKey: process.env.ADYEN_CLIENT_KEY,
+    adyenHmacKey: process.env.ADYEN_HMAC_KEY,
+  },
+  css: ['~/public/css/main.css', '@adyen/adyen-web/dist/adyen.css'],
+  components: [
+    {
+      path: '~/components',
+      pathPrefix: false,
+    },
+  ],
+  compatibilityDate: '2024-04-03',
+  devtools: { enabled: true },
+  telemetry: false
+})