From b751a7a9af3e1b9a7744f69f8b74ba84f003ea49 Mon Sep 17 00:00:00 2001
From: Oleksandr Bystrikov <coder@yakviter.com.ua>
Date: Tue, 14 Jan 2025 16:29:58 +0100
Subject: [PATCH 1/4] feat(demo): build live demo

---
 .gitignore                   |  1 +
 biome.json                   |  2 +-
 examples/DemoApp.vue         |  8 +++++++-
 package.json                 |  1 +
 vite.demo.config.ts          | 11 +++++++++++
 vue-stripe-js.code-workspace |  3 +++
 6 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 vite.demo.config.ts

diff --git a/.gitignore b/.gitignore
index a547bf3..04f08ca 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,7 @@ lerna-debug.log*
 
 node_modules
 dist
+dist-demo
 dist-ssr
 *.local
 
diff --git a/biome.json b/biome.json
index 7fec8e7..789818a 100644
--- a/biome.json
+++ b/biome.json
@@ -7,7 +7,7 @@
   },
   "files": {
     "ignoreUnknown": false,
-    "ignore": ["dist"]
+    "ignore": ["dist", "dist-demo"]
   },
   "formatter": {
     "enabled": true,
diff --git a/examples/DemoApp.vue b/examples/DemoApp.vue
index ff011bf..4bedffb 100644
--- a/examples/DemoApp.vue
+++ b/examples/DemoApp.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-y-12 container px-6 py-10 max-w-xl">
+  <div class="flex flex-col gap-y-12 container p-10 max-w-2xl mx-auto">
     <h1 class="text-3xl font-semibold">Demo Vue Stripe.js</h1>
 
     <section>
@@ -13,6 +13,8 @@
       <PaymentElementDeferred />
     </section>
 
+    <hr class="border-gray-300">
+
     <section>
       <h2 class="text-2xl font-semibold">Card Element</h2>
       <p class="pt-1 pb-4">More recent example. Stripe recommends using Payment Element instead of the Card - 
@@ -24,12 +26,16 @@
       <CardElement />
     </section>
 
+    <hr class="border-gray-300">
+
     <section>
       <h2 class="text-2xl font-semibold">Card Element (Legacy)</h2>
       <p class="pt-1 pb-4">How we implemented card payments a few years ago.</p>
       <CardElementLegacy />
     </section>
 
+    <hr class="border-gray-300">
+    
     <section>
       <h2 class="text-2xl font-semibold">Express Checkout Element</h2>
       <p class="pt-1 pb-4">Use your publishable key and enable relevant payment methods, e.g. PayPal - 
diff --git a/package.json b/package.json
index 9d7452c..18ba095 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc -b && vite build",
+    "build:demo": "vite --config vite.demo.config.ts build",
     "check:types": "publint && attw --pack . --ignore-rules=cjs-resolves-to-esm",
     "ci": "biome check && pnpm run build && pnpm run check:types"
   },
diff --git a/vite.demo.config.ts b/vite.demo.config.ts
new file mode 100644
index 0000000..604e53e
--- /dev/null
+++ b/vite.demo.config.ts
@@ -0,0 +1,11 @@
+import tailwindcss from "@tailwindcss/vite"
+import vue from "@vitejs/plugin-vue"
+import { defineConfig } from "vite"
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue(), tailwindcss()],
+  build: {
+    outDir: "dist-demo",
+  },
+})
diff --git a/vue-stripe-js.code-workspace b/vue-stripe-js.code-workspace
index 0796534..5717fb3 100644
--- a/vue-stripe-js.code-workspace
+++ b/vue-stripe-js.code-workspace
@@ -20,6 +20,9 @@
     },
     "[jsonc]": {
       "editor.defaultFormatter": "biomejs.biome"
+    },
+    "[json]": {
+      "editor.defaultFormatter": "biomejs.biome"
     }
   }
 }

From 721d190f06514fa2c03ce88e8f638c3f34cd290c Mon Sep 17 00:00:00 2001
From: Oleksandr Bystrikov <coder@yakviter.com.ua>
Date: Tue, 14 Jan 2025 16:49:51 +0100
Subject: [PATCH 2/4] refactor: update buttons look, add link to source

---
 examples/CardElement.vue            |  2 +-
 examples/CardElementLegacy.vue      |  2 +-
 examples/DemoApp.vue                | 10 ++++++++--
 examples/PaymentElementDeferred.vue |  2 +-
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/examples/CardElement.vue b/examples/CardElement.vue
index 75119d1..b848f1a 100644
--- a/examples/CardElement.vue
+++ b/examples/CardElement.vue
@@ -15,7 +15,7 @@
       />
     </StripeElements>
     <button 
-      class="w-full rounded-b bg-slate-600 px-3 py-2 text-sm font-semibold text-white hover:bg-slate-500"
+      class="w-full focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
     >
       Pay now
     </button>
diff --git a/examples/CardElementLegacy.vue b/examples/CardElementLegacy.vue
index 705a285..2829049 100644
--- a/examples/CardElementLegacy.vue
+++ b/examples/CardElementLegacy.vue
@@ -17,7 +17,7 @@
   <button
     type="button"
     @click="pay"
-    class="w-full rounded-b bg-slate-600 px-3 py-2 text-sm font-semibold text-white hover:bg-slate-500"
+    class="w-full focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
   >
     Pay now
   </button>
diff --git a/examples/DemoApp.vue b/examples/DemoApp.vue
index 4bedffb..ff8fbc7 100644
--- a/examples/DemoApp.vue
+++ b/examples/DemoApp.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-col gap-y-12 container p-10 max-w-2xl mx-auto">
+  <div class="flex flex-col gap-y-10 container p-10 max-w-2xl mx-auto">
     <h1 class="text-3xl font-semibold">Demo Vue Stripe.js</h1>
-
+    
     <section>
       <h2 class="text-2xl font-semibold">Payment Element</h2>
       <p class="pt-1 pb-6">Deferred flow -
@@ -46,6 +46,12 @@
       </p>
       <ExpressCheckoutElement />
     </section>
+
+    <section>
+      <h2 class="text-2xl font-semibold">Built with</h2>
+      <a class="text-blue-700 hover:underline"
+      href="https://github.com/ectoflow/vue-stripe-js">https://github.com/ectoflow/vue-stripe-js</a>
+    </section>
   </div>
 </template>
 
diff --git a/examples/PaymentElementDeferred.vue b/examples/PaymentElementDeferred.vue
index 1aa9c28..84cd023 100644
--- a/examples/PaymentElementDeferred.vue
+++ b/examples/PaymentElementDeferred.vue
@@ -16,7 +16,7 @@
     </StripeElements>
     <button
       type="submit"
-      class="rounded-md bg-slate-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-slate-500"
+      class="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
     >
       Submit
     </button>

From 09a027623386c09d0698c85fd92530c7b32470a7 Mon Sep 17 00:00:00 2001
From: Oleksandr Bystrikov <coder@yakviter.com.ua>
Date: Wed, 15 Jan 2025 11:18:08 +0100
Subject: [PATCH 3/4] refactor(examples): style buttons and add v-if

---
 examples/CardElement.vue            | 5 ++---
 examples/CardElementLegacy.vue      | 2 +-
 examples/PaymentElementDeferred.vue | 5 ++---
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/examples/CardElement.vue b/examples/CardElement.vue
index b848f1a..2fb2622 100644
--- a/examples/CardElement.vue
+++ b/examples/CardElement.vue
@@ -1,7 +1,6 @@
 <template>
-  <form @submit.prevent="handlePay">
+  <form v-if="stripeLoaded" @submit.prevent="handlePay">
     <StripeElements
-      v-if="stripeLoaded"
       class="py-3"
       :stripe-key="publishableKey"
       :instance-options="stripeOptions"
@@ -15,7 +14,7 @@
       />
     </StripeElements>
     <button 
-      class="w-full focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
+      class="w-full focus:outline-none text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-900"
     >
       Pay now
     </button>
diff --git a/examples/CardElementLegacy.vue b/examples/CardElementLegacy.vue
index 2829049..6e9c9f4 100644
--- a/examples/CardElementLegacy.vue
+++ b/examples/CardElementLegacy.vue
@@ -17,7 +17,7 @@
   <button
     type="button"
     @click="pay"
-    class="w-full focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
+    class="w-full focus:outline-none text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-900"
   >
     Pay now
   </button>
diff --git a/examples/PaymentElementDeferred.vue b/examples/PaymentElementDeferred.vue
index 84cd023..9a43a83 100644
--- a/examples/PaymentElementDeferred.vue
+++ b/examples/PaymentElementDeferred.vue
@@ -1,7 +1,6 @@
 <template>
-  <form @submit.prevent="handleSubmit">
+  <form v-if="stripeLoaded" @submit.prevent="handleSubmit">
     <StripeElements
-      v-if="stripeLoaded"
       :stripe-key="stripeKey"
       :instance-options="stripeOptions"
       :elements-options="elementsOptions"
@@ -16,7 +15,7 @@
     </StripeElements>
     <button
       type="submit"
-      class="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
+      class="focus:outline-none text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-900"
     >
       Submit
     </button>

From dbdf4d9a6b38e0f3db36c965e0e89550f46d4eda Mon Sep 17 00:00:00 2001
From: Oleksandr Bystrikov <coder@yakviter.com.ua>
Date: Wed, 15 Jan 2025 11:18:42 +0100
Subject: [PATCH 4/4] docs: mention nuxt 3, add link to live demo

---
 README.md | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index f5c39d9..647b811 100644
--- a/README.md
+++ b/README.md
@@ -6,16 +6,21 @@
 [![npm](https://img.shields.io/npm/dm/vue-stripe-js)](https://www.npmjs.com/package/vue-stripe-js)
 [![Stand With Ukraine](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/badges/StandWithUkraine.svg)](https://vshymanskyy.github.io/StandWithUkraine)
 
-Vue 3 components for Stripe. Build advanced payment integrations quickly. Easy to start, friendly DX, minimal abstractions, and full control. It's a glue between Stripe.js and Vue component lifecycle.
+Vue 3 components for Stripe. Build advanced payment integrations quickly. Easy to start, friendly DX, minimal abstractions, and full control. It's a glue between Stripe.js and Vue component lifecycle. Works with Nuxt 3.
 
-### [**Become a sponsor** 💜](https://github.com/sponsors/softbeehive)
+🟢 **[Live demo](https://vue-stripe-js.netlify.app/)**
+
+## Health 💜
 Consider supporting efforts to make this project healthy and sustainable. Thank you!
 
+- **[Become a sponsor](https://github.com/sponsors/softbeehive)**
+- **[Donate via PayPal](https://paypal.me/softbeehive)**
+
 ## Quickstart ⚡️
 
 ### Upgrade
-• [**Upgrade guide**](docs/UPGRADE_V1_TO_V2.md)   
-• **[Docs v1](https://github.com/ectoflow/vue-stripe-js/tree/v1.0.4)**
+- **[Upgrade guide](docs/UPGRADE_V1_TO_V2.md)**   
+- **[Docs v1](https://github.com/ectoflow/vue-stripe-js/tree/v1.0.4)**
 
 ### 1. Install