feat: expose function from useMollie composable to load the Mollie sc…

…ript async
mollie · Jun 21, 2024 · 5e1a367 · 5e1a367
1 parent 18c8f88
commit 5e1a367
Show file tree

Hide file tree

Showing 7 changed files with 130 additions and 85 deletions.
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/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: false,
     },
     devtools: { enabled: true },
 })
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
@@ -0,0 +1,68 @@
+<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} ❌`
+            }
+        "
+    />
+</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,36 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const show = ref(false)
+const CreditCardError = ref()
+const CreditCardToken = ref()
+</script>
+
+<template>
+    <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>
+
+    <p>
+        <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>
+    </p>
+</template>
+
+<style scoped></style>
diff --git a/src/runtime/composables/useMollie.ts b/src/runtime/composables/useMollie.ts
@@ -10,7 +10,7 @@ export function useMollie(args: CreateLocaleInstanceArgs = {}) {
 
     async function init() {
         // Wait for scripts to be loaded, then initialize the mollie instance.
-        await $mollie.scriptLoadedPromise.then(() => {
+        await $mollie.loadMollieScript().then(() => {
             $mollie.createMollieInstance(args)
             isInitialized.value = true
         })

diff --git a/src/runtime/plugins/plugin.client.ts b/src/runtime/plugins/plugin.client.ts
@@ -23,25 +23,29 @@ export default defineNuxtPlugin({
     enforce: 'pre',
 
     async setup(nuxtApp) {
-        /*
+        /**
          * Register mollie-script client-side for client-side rendering.
          * If SSR is used, this will NOT register a second script, because it was already registered server side (see server-plugin)
          */
-        const { promise: scriptLoadedPromise, resolve } = getPromiseWithResolvers<boolean>()
-        if (window.Mollie) {
-            resolve(true)
-        } else {
-            useHead({
-                script: [
-                    {
-                        src: 'https://js.mollie.com/v1/mollie.js',
-                        defer: true,
-                        onload() {
-                            resolve(true)
+        function loadMollieScript() {
+            const { promise, resolve } = getPromiseWithResolvers<boolean>()
+            if (window.Mollie) {
+                resolve(true)
+            } else {
+                useHead({
+                    script: [
+                        {
+                            src: 'https://js.mollie.com/v1/mollie.js',
+                            defer: true,
+                            onload() {
+                                resolve(true)
+                            },
                         },
-                    },
-                ],
-            })
+                    ],
+                })
+            }
+
+            return promise
         }
 
         const runtimeConfig = useRuntimeConfig()
@@ -77,7 +81,7 @@ export default defineNuxtPlugin({
                 this.mollieInstance = this.mollieInstance || createLocaleInstance(args)
                 return this.mollieInstance
             },
-            scriptLoadedPromise,
+            loadMollieScript,
         }
 
         nuxtApp.provide('mollie', Mollie)

diff --git a/src/types.d.ts b/src/types.d.ts
@@ -30,7 +30,7 @@ declare global {
 export type MolliePlugin = {
     mollieInstance: ReturnType<Mollie> | null
     createMollieInstance(args: CreateLocaleInstanceArgs): void
-    scriptLoadedPromise: Promise<boolean>
+    loadMollieScript: () => Promise<boolean>
 }
 declare module '#app' {
     interface NuxtApp {