Merge pull request #8 from mothership-gmbh/feat-support-clientside-lo…

…ading-of-mollie-script feat: add possibility to not load Mollie script globally
mollie · Jun 21, 2024 · 80dbb0e · 80dbb0e
2 parents d245421 + f0ccadc
commit 80dbb0e
Show file tree

Hide file tree

Showing 13 changed files with 393 additions and 265 deletions.
diff --git a/package.json b/package.json
@@ -30,7 +30,8 @@
     "prettier-check": "pnpm exec prettier . --check"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.8.2"
+    "@nuxt/kit": "^3.8.2",
+    "defu": "^6.1.4"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",

diff --git a/playground/app.vue b/playground/app.vue
@@ -1,68 +1,3 @@
-<script setup>
-import { ref } from 'vue'
-const CreditCardError = ref()
-const CreditCardToken = ref()
-
-const IdealError = ref()
-</script>
 <template>
-    <h1>Nuxt mollie payments components</h1>
-
-    <h2>Credit Card</h2>
-
-    <ShopwareFrontendsCreditCard
-        submit-button-label="Save"
-        locale="en_US"
-        :submit-disabled="!!CreditCardToken"
-        @submit="
-            (token) => {
-                CreditCardToken = `${token} ✔️`
-                CreditCardError = null
-            }
-        "
-        @error="
-            (message) => {
-                CreditCardError = `${message} ❌`
-            }
-        "
-    />
-
-    <div class="demo-mollie-results">
-        <div>
-            Test Credit Number:
-            <pre>2223 0000 1047 9399</pre>
-        </div>
-        <hr />
-        <div v-if="CreditCardError">Error: {{ CreditCardError }}</div>
-        <div v-if="CreditCardToken">Token: {{ CreditCardToken }}</div>
-    </div>
-
-    <h2>Ideal</h2>
-
-    <ShopwareFrontendsIdeal
-        locale="en_US"
-        select-label="Please choose your bank:"
-        select-disabled-option="Select your bank"
-        @save-issuer-success="
-            () => {
-                IdealError = null
-            }
-        "
-        @save-issuer-error="
-            (message) => {
-                IdealError = `${message} ❌`
-            }
-        "
-    />
+    <NuxtPage />
 </template>
-<style scoped>
-.demo-mollie-results {
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 0.9em;
-    padding: 5px;
-}
-
-pre {
-    font-size: 1.2em;
-}
-</style>
diff --git a/playground/components/NavigationBar.vue b/playground/components/NavigationBar.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts"></script>
+
+<template>
+    <nav>
+        <NuxtLink to="/">Default</NuxtLink>
+        <NuxtLink to="/without">Lazy-loaded</NuxtLink>
+    </nav>
+</template>
+
+<style scoped>
+nav {
+    display: flex;
+    gap: 20px;
+}
+</style>
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
@@ -1,4 +1,5 @@
 export default defineNuxtConfig({
+    ssr: true,
     extends: ['@shopware-pwa/composables-next/nuxt-layer'],
     modules: ['../src/module', '@shopware-pwa/nuxt3-module'],
     runtimeConfig: {
@@ -10,10 +11,11 @@ export default defineNuxtConfig({
         },
     },
     /* config not needed with mollie > v4.4.0 */
-    mollie: {
+    molliePaymentsComponents: {
         defaultLocale: 'en_US',
         profileId: 'pfl_E5EmGZ98YT',
         testMode: true,
+        includeScriptGlobally: true,
     },
     devtools: { enabled: true },
 })
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
@@ -0,0 +1,72 @@
+<script setup>
+import { ref } from 'vue'
+import NavigationBar from '~/components/NavigationBar.vue'
+const CreditCardError = ref()
+const CreditCardToken = ref()
+
+const IdealError = ref()
+</script>
+<template>
+    <div>
+        <NavigationBar />
+        <h1>Nuxt mollie payments components</h1>
+
+        <h2>Credit Card</h2>
+
+        <ShopwareFrontendsCreditCard
+            submit-button-label="Save"
+            locale="en_US"
+            :submit-disabled="!!CreditCardToken"
+            @submit="
+                (token) => {
+                    CreditCardToken = `${token} ✔️`
+                    CreditCardError = null
+                }
+            "
+            @error="
+                (message) => {
+                    CreditCardError = `${message} ❌`
+                }
+            "
+        />
+
+        <div class="demo-mollie-results">
+            <div>
+                Test Credit Number:
+                <pre>2223 0000 1047 9399</pre>
+            </div>
+            <hr />
+            <div v-if="CreditCardError">Error: {{ CreditCardError }}</div>
+            <div v-if="CreditCardToken">Token: {{ CreditCardToken }}</div>
+        </div>
+
+        <h2>Ideal</h2>
+
+        <ShopwareFrontendsIdeal
+            locale="en_US"
+            select-label="Please choose your bank:"
+            select-disabled-option="Select your bank"
+            @save-issuer-success="
+                () => {
+                    IdealError = null
+                }
+            "
+            @save-issuer-error="
+                (message) => {
+                    IdealError = `${message} ❌`
+                }
+            "
+        />
+    </div>
+</template>
+<style scoped>
+.demo-mollie-results {
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 0.9em;
+    padding: 5px;
+}
+
+pre {
+    font-size: 1.2em;
+}
+</style>
diff --git a/playground/pages/without.vue b/playground/pages/without.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import NavigationBar from '~/components/NavigationBar.vue'
+const show = ref(false)
+const CreditCardError = ref()
+const CreditCardToken = ref()
+</script>
+
+<template>
+    <div>
+        <NavigationBar />
+
+        <h1>Load Mollie script lazily</h1>
+        <div>On this page the scripts load lazily, if the button is clicked.</div>
+        <div>To test this, the option <i>isIncludedGlobally: false</i> has to be set in nuxt config.</div>
+        <br />
+        <br />
+        <div>
+            <button @click="show = !show">{{ show ? 'Hide' : 'Show' }} payment components</button>
+            <p v-if="show">
+                <LazyShopwareFrontendsCreditCard
+                    submit-button-label="Save"
+                    locale="en_US"
+                    :submit-disabled="!!CreditCardToken"
+                    @submit="
+                        (token) => {
+                            CreditCardToken = `${token} ✔️`
+                            CreditCardError = null
+                        }
+                    "
+                    @error="
+                        (message) => {
+                            CreditCardError = `${message} ❌`
+                        }
+                    "
+                />
+            </p>
+        </div>
+    </div>
+</template>
+
+<style scoped></style>