Skip to content

Vue component for Adyen drop-in checkout

Adyen Logo

:::

Vue component for Adyen drop-in checkout โ€‹

Features โ€‹

  • โ›ฐ ย AdyenCheckout.client plugin to register a factory method to create an Adyen Checkout instance
  • ๐Ÿš  ย AdyenCreditCard.vue component to use in a Vue project
  • ๐ŸŒฒ ย app.vue containing an example of the logic that handles the interaction between a headless app and Shopware 6 instance

Requirements โ€‹

  • Adyen plugin installed in your Shopware 6 instance. Follow the instructions from official documentation.
  • Adyen payment methods activated, at least Cards.

Setup โ€‹

Backend โ€‹

For demo purposes, it's better to set Adyen Cards as the default payment method, because the example does not provide a payment method switcher.

Frontend: Nuxt 3 project โ€‹

  1. Install the dependencies

    run pnpm i command.

  2. Register the module in your Nuxt 3 project

js
  // ./playground/nuxt.config.ts
  modules: ["@shopware-pwa/nuxt3-module"],
  // see that "../src/module" points to this dir (from ./playground/nuxt.config.ts file)
  1. Setup nuxt project

There are three sections within runtimeConfig:

  • public.loginData: keeps customer login data - checkout requires to be logged-in (as guest or typical user)
  • public.shopware: configures the @shopware-pwa/nuxt3-module by telling what is the API we want to connect
  • public.adyenCheckout: settings for Adyen.client.ts plugin to create a valid Adyen Checkout instance used later on
js
// ./nuxt.config.ts
shopware: {
  // your Shopware 6 instance endpoint and access key
  endpoint: "http://localhost:8000",
  accessToken: "SWSCCMR1DEXDTK0XRJVSD3DHMW",
},
...
runtimeConfig: {
    public: {
      loginData: {
        // for demo purposes, the customer is logged in automatically, so please adjust the loginData to some of yours customer account
        username: "somecustomer@email.com",
        password: "somepassword",
      },
      adyenCheckout: {
        environment: "test", // Change to 'live' for the live environment.
        clientKey: "test_FDAB...", // Public key used for client-side authentication: https://docs.adyen.com/development-resources/client-side-authentication
        analytics: {
          enabled: true, // Set to false to not send analytics data to Adyen.
        },
      },
    },
  },
  ...

Use Credit Card components โ€‹

Open app.vue file to see how it's working.

Development โ€‹

Run a playground project with configured Mollie module from current dir.

bash
# Run a playground (nuxt 3) project in dev mode
pnpm dev

Troubleshooting โ€‹

  • If you are getting HTTP 500 error and [UseSessionContext][refreshSessionContext] { messages: [], statusCode: 500 } in the console, then you probably didn't configured your API instance correctly, thus the API client cannot connect to your Shopware 6 instance.

    In this case, please visit again 2. Setup nuxt project section and re-run a project.

  • If you are getting HTTP 401 error, you are probably using incorrect loginData in your nuxt.config.ts public runtime settings.

    In this case, please visit again 2. Setup nuxt project section and re-run a project.

Resources โ€‹


Auto-generated

This page is generated from an external markdown file. In case of any issues or dead links, please visit the source file.