:::

Vue components for Mollie Payments (Nuxt module) ​

• 📖  Documentation

Features ​

• ⛰  useMollie & useMollieCreditCard composable function
• 🚠  MollieCreditCardComponent.vue component to use in a Vue project
• 🌲  ShopwareFrontendsCreditCard.vue component to use in a Nuxt Shopware Powered project

Requirements ​

• Frontend side: any Nuxt 3 project, or a project with Shopware Frontends registered and running (you can use one of the Nuxt templates provided in shopware/frontends GitHub Project
• Backend side: Mollie Payments App for Shopware installed on your environment (See how to setup it locally)

Setup ​

Backend: Shopware 6 admin panel ​

Install the Mollie Payments in your Shopware 6 instance and set it up

Frontend: Nuxt 3 project ​

0. Install the dependencies

   run pnpm i command.

1. Configure Mollie module in runtimeConfig > public section of nuxt.config.ts

// ./nuxt.config.ts
mollie: {
    defaultLocale: "en_US", // fallback locale
    profileId: "pfl_E5EmGZ98YT", // from Mollie's dashboard
    testMode: true,
},

Use Credit Card components ​

1. For Shopware Frontends aware projects (with shopware-pwa/nuxt3-module enabled)

<script setup lang="ts">
  import { useCheckout } from "@shopware-pwa/composables-next/dist";
  const { selectedPaymentMethod } = useCheckout();
  // the name may vary, so first, please check what comes from API
  const showMollieCreditCardComponent = computed(
    () =>
      selectedPaymentMethod.value?.shortName ===
      "mollie_payments_app_mollie_creditcard",
  );
</script>
<template>
  <!-- show credit card component conditionally -->
  <ShopwareFrontendsCreditCard :v-if="showMollieCreditCardComponent" />
</template>

In this case, by clicking a submit / save button under the credit card form, there will be an additional request made to the mollie's endpoint in your Shopware 6 instance.

2. For plain Nuxt 3 project

<MollieCreditCardComponent />

Events and properties ​

Control credit card form and react on events using events and properties:

const props = defineProps<{
  locale?: MollieLocale;
  submitButtonLabel?: string;
  submitDisabled?: boolean;
}>();

const emits = defineEmits<{
  (e: "submit", token: string | undefined): void;
  (e: "error", error: string | undefined): void;
}>();

Example:

<ShopwareFrontendsCreditCard
  submit-button-label="Save"
  locale="en_US"
  :submit-disabled="!!CreditCardToken"
  @submit="
      (token) => {
        CreditCardToken = `${token} ✔️`;
        CreditCardError = null;
      }
    "
  @error="
      (message) => {
        CreditCardError = `${message} ❌`;
      }
    "
/>

Development ​

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

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