Nuxt3 example

examples/nuxt/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

examples/nuxt/README.md

@@ -0,0 +1,24 @@
+# @adyen/adyen-web v6 + Nuxt3
+
+### Steps to run the project:
+
+1. Install the project dependencies: `npm install`
+2. Create the `.env` file and add there your account details:
+
+Example:
+```
+# SERVER 
+NUXT_CHECKOUT_API_KEY=AQEthmff3VfI5eG...
+NUXT_API_VERSION=v71
+NUXT_MERCHANT_ACCOUNT=TestMerchant...
+
+# CLIENT
+NUXT_PUBLIC_CLIENT_KEY=test_L6HTEOAXQB...
+```
+
+3. Run `npm run dev`. The web app will be running on `http://localhost:3000`
+
+> [!TIP]
+> You can change the countryCode, locale and amount by updating the values in the URL parameters:
+>
+> `http://localhost:3000/?amount=2000&countryCode=US&shopperLocale=nl-NL`

examples/nuxt/app.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        <NuxtPage />
+    </div>
+</template>

examples/nuxt/assets/main.css

@@ -0,0 +1,14 @@
+* {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+
+html,
+body {
+    padding: 20px;
+    max-width: 100vw;
+    overflow-x: hidden;
+    background-color: rgb(30, 41, 59);
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}

examples/nuxt/components/AdvancedFlow.vue

@@ -0,0 +1,116 @@
+<script lang="ts">
+import { DEFAULT_AMOUNT } from '~/constants';
+import { AdyenCheckout, Dropin } from '@adyen/adyen-web/auto';
+import type { AdyenCheckoutError, UIElement, AdditionalDetailsActions, AdditionalDetailsData, CoreConfiguration, PaymentCompletedData, PaymentFailedData } from '@adyen/adyen-web/auto';
+import '@adyen/adyen-web/styles/adyen.css';
+
+export default {
+    data() {
+        return {
+            dropin: null as Dropin | null,
+        };
+    },
+
+    async mounted() {
+        this.createCheckout();
+    },
+
+    methods: {
+        async createCheckout() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const countryCode = urlParams.get('countryCode') || 'US';
+            const locale = urlParams.get('shopperLocale') || 'en-US';
+            const amount = parseAmount(urlParams.get('amount') || DEFAULT_AMOUNT, countryCode);
+
+            const runtimeConfig = useRuntimeConfig();
+            const paymentMethodsResponse = await fetchPaymentMethods(countryCode, locale, amount);
+
+            const options: CoreConfiguration = {
+                paymentMethodsResponse,
+                amount,
+                countryCode,
+                locale,
+                environment: 'test',
+                clientKey: runtimeConfig.public.clientKey,
+                onSubmit: async (state, component, actions) => {
+                    try {
+                        const result = await makePaymentsCall(state.data, countryCode, locale, amount);
+
+                        if (!result.resultCode) {
+                            actions.reject();
+                            return;
+                        }
+
+                        const { resultCode, action, order, donationToken } = result;
+
+                        actions.resolve({
+                            resultCode,
+                            action,
+                            order,
+                            donationToken
+                        });
+                    } catch (error) {
+                        console.error('onSubmit', error);
+                        actions.reject();
+                    }
+                },
+                onAdditionalDetails: async (state: AdditionalDetailsData, component: UIElement, actions: AdditionalDetailsActions) => {
+                    try {
+                        const result = await makeDetailsCall(state.data);
+
+                        if (!result.resultCode) {
+                            actions.reject();
+                            return;
+                        }
+
+                        const { resultCode, action, order, donationToken } = result;
+
+                        actions.resolve({
+                            resultCode,
+                            action,
+                            order,
+                            donationToken
+                        });
+                    } catch (error) {
+                        console.error('onSubmit', error);
+                        actions.reject();
+                    }
+                },
+                onPaymentCompleted(data: PaymentCompletedData, element?: UIElement) {
+                    console.log('onPaymentCompleted', data, element);
+                },
+                onPaymentFailed(data: PaymentFailedData, element?: UIElement) {
+                    console.log('onPaymentFailed', data, element);
+                },
+                onError(error: AdyenCheckoutError) {
+                    console.error('Something went wrong', error);
+                },
+            };
+
+            const checkout = await AdyenCheckout(options);
+
+            this.dropin = new Dropin(checkout, {
+                paymentMethodsConfiguration: {
+                    card: {
+                        _disableClickToPay: true
+                    }
+                }
+            });
+            this.dropin.mount(this.$refs.dropinRef as HTMLElement);
+        }
+    }
+};
+</script>
+
+<template>
+    <div>
+        <div class="payment" ref="dropinRef"></div>
+    </div>
+</template>
+
+<style scoped>
+.payment {
+    margin: auto;
+    max-width: 800px;
+}
+</style>

examples/nuxt/components/ModeSwitcher.vue

@@ -0,0 +1,82 @@
+<script lang="ts">
+export default {
+    emits: ['click'],
+    props: {
+        selectedValue: {
+            type: String,
+            required: true
+        }
+    },
+    data() {
+        return {
+            CheckoutMode: {
+                Advanced: 'advanced',
+                Sessions: 'sessions'
+            }
+        };
+    },
+    methods: {
+        onClick(value: string) {
+            this.$emit('click', value);
+        }
+    }
+};
+</script>
+
+<template>
+    <div class="mode-switcher">
+        <button @click="onClick(CheckoutMode.Advanced)" :class="{
+            'mode-switcher__button': true,
+            'mode-switcher__button--selected': selectedValue === CheckoutMode.Advanced
+        }" type="button">
+            Advanced flow
+        </button>
+
+        <button @click="onClick(CheckoutMode.Sessions)" :class="{
+            'mode-switcher__button': true,
+            'mode-switcher__button--selected': selectedValue === CheckoutMode.Sessions
+        }" type="button">
+            Sessions flow
+        </button>
+    </div>
+</template>
+
+<style scoped>
+.mode-switcher {
+    max-width: 800px;
+    margin: auto;
+    margin-bottom: 50px;
+    display: flex;
+    justify-content: space-between;
+    gap: 4px;
+    padding: 4px 5px;
+    background: #ffffff;
+    border: 1px solid #b9c4c9;
+    border-radius: 6px;
+}
+
+.mode-switcher__button {
+    font-weight: 500;
+    color: #0075ff;
+    width: 100%;
+    height: 40px;
+    flex-grow: 1;
+    cursor: pointer;
+    background: #ffffff;
+    border-radius: 6px;
+    border: 0;
+    text-align: center;
+    transition: background 0.3s ease-out;
+}
+
+.mode-switcher__button--selected {
+    background: #e5f1ff;
+    border: 1.5px solid #0075ff;
+    color: #0075ff;
+    font-weight: 700;
+}
+
+.mode-switcher__button:not(.mode-switcher__button--selected):hover {
+    background-color: #f7f8f9;
+}
+</style>

examples/nuxt/components/SessionsFlow.vue

@@ -0,0 +1,75 @@
+<script lang="ts">
+import { DEFAULT_AMOUNT } from '~/constants';
+import { AdyenCheckout, Dropin } from '@adyen/adyen-web/auto';
+import type { AdyenCheckoutError, CoreConfiguration, PaymentCompletedData, PaymentFailedData, UIElement } from '@adyen/adyen-web/auto'
+import '@adyen/adyen-web/styles/adyen.css';
+
+export default {
+    data() {
+        return {
+            dropin: null as Dropin | null,
+        };
+    },
+
+    async mounted() {
+        this.createCheckout();
+    },
+
+    methods: {
+        async createCheckout() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const countryCode = urlParams.get('countryCode') || 'US';
+            const locale = urlParams.get('shopperLocale') || 'en-US';
+            const amount = parseAmount(urlParams.get('amount') || DEFAULT_AMOUNT, countryCode);
+
+            const runtimeConfig = useRuntimeConfig();
+            const { id, sessionData } = await createSession(countryCode, locale, amount);
+
+            const options: CoreConfiguration = {
+                session: {
+                    id,
+                    sessionData
+                },
+                amount,
+                countryCode,
+                locale,
+                environment: 'test',
+                clientKey: runtimeConfig.public.clientKey,
+                onPaymentCompleted(data: PaymentCompletedData, element?: UIElement) {
+                    console.log('onPaymentCompleted', data, element);
+                },
+                onPaymentFailed(data: PaymentFailedData, element?: UIElement) {
+                    console.log('onPaymentFailed', data, element);
+                },
+                onError(error: AdyenCheckoutError) {
+                    console.error('Something went wrong', error);
+                },
+            };
+
+            const checkout = await AdyenCheckout(options);
+
+            this.dropin = new Dropin(checkout, {
+                paymentMethodsConfiguration: {
+                    card: {
+                        _disableClickToPay: true
+                    }
+                }
+            });
+            this.dropin.mount(this.$refs.dropinRef as HTMLElement);
+        }
+    }
+};
+</script>
+
+<template>
+    <div>
+        <div class="payment" ref="dropinRef"></div>
+    </div>
+</template>
+
+<style scoped>
+.payment {
+    margin: auto;
+    max-width: 800px;
+}
+</style>

examples/nuxt/constants/index.ts

@@ -0,0 +1,4 @@
+export const DEFAULT_LOCALE = 'en-US';
+export const DEFAULT_COUNTRY = 'US';
+export const DEFAULT_SHOPPER_REFERENCE = 'jonny-jansen';
+export const DEFAULT_AMOUNT = '2000';

examples/nuxt/nuxt.config.ts

@@ -0,0 +1,19 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+    compatibilityDate: '2024-04-03',
+    devtools: { enabled: true },
+
+    pages: true,
+
+    css: ['~/assets/main.css'],
+
+    runtimeConfig: {
+        checkoutApiKey: '',
+        apiVersion: '',
+        merchantAccount: '',
+
+        public: {
+            clientKey: ''
+        }
+    }
+});