Simplify examples

README.md

@@ -33,14 +33,13 @@ npm i vue-stripe-js @stripe/stripe-js
 ```vue
 <script setup lang="ts">
 import { onBeforeMount, ref } from "vue"
-import { loadStripe } from "@stripe/stripe-js"
-import type { Stripe } from "@stripe/stripe-js"
+import { loadStripe, type Stripe } from "@stripe/stripe-js"
 
-const publishableKey = ref('')
+const publishableKey = '' // use your publishable key
 const stripe = ref<Stripe | null>(null)
 
 onBeforeMount(async() => {
-  stripe.value = await loadStripe(publishableKey.value)
+  stripe.value = await loadStripe(publishableKey)
 })
 </script>
 ```
@@ -91,7 +90,7 @@ import type {
   StripePaymentElementOptions,
 } from "@stripe/stripe-js"
 
-const stripeKey = ref("pk_test_f3duw0VsAEM2TJFMtWQ90QAT")
+const stripeKey = "pk_test_f3duw0VsAEM2TJFMtWQ90QAT" // use your publishable key
 const stripeOptions = ref({
   // https://stripe.com/docs/js/initializing#init_stripe_js-options
 })
@@ -115,7 +114,7 @@ const elementsComponent = ref()
 const paymentComponent = ref()
 
 onBeforeMount(() => {
-  loadStripe(stripeKey.value).then(() => {
+  loadStripe(stripeKey).then(() => {
     stripeLoaded.value = true
 
     // Good place to call your backend to create PaymentIntent

examples/CardElement.vue

@@ -34,7 +34,7 @@ import { onBeforeMount, ref, useTemplateRef } from "vue"
 import StripeElement from "../src/components/StripeElement.vue"
 import StripeElements from "../src/components/StripeElements.vue"
 
-const publishableKey = ref("pk_test_TYooMQauvdEDq54NiTphI7jx") // test key
+const publishableKey = "pk_test_TYooMQauvdEDq54NiTphI7jx" // test key
 const stripeOptions = ref<StripeConstructorOptions>({
   // https://stripe.com/docs/js/initializing#init_stripe_js-options
 })
@@ -56,7 +56,7 @@ const cardComponent = useTemplateRef("cardComponent")
 const stripe = ref<Stripe | null>(null)
 
 onBeforeMount(async () => {
-  stripe.value = await loadStripe(publishableKey.value)
+  stripe.value = await loadStripe(publishableKey)
   stripeLoaded.value = true
 })
 

examples/CardElementLegacy.vue

@@ -38,7 +38,7 @@ export default defineComponent({
   },
 
   setup() {
-    const stripeKey = ref("pk_test_TYooMQauvdEDq54NiTphI7jx") // test key
+    const stripeKey = "pk_test_TYooMQauvdEDq54NiTphI7jx" // test key
     const stripeOptions = ref({
       // https://stripe.com/docs/js/initializing#init_stripe_js-options
     })
@@ -56,7 +56,7 @@ export default defineComponent({
     const elms = ref()
 
     onBeforeMount(() => {
-      const stripePromise = loadStripe(stripeKey.value)
+      const stripePromise = loadStripe(stripeKey)
       stripePromise.then(() => {
         stripeLoaded.value = true
       })

examples/ExpressCheckoutElement.vue

@@ -26,7 +26,7 @@ import { onBeforeMount, ref, useTemplateRef } from "vue"
 import StripeElement from "../src/components/StripeElement.vue"
 import StripeElements from "../src/components/StripeElements.vue"
 
-const publishableKey = ref("pk_test_f3duw0VsAEM2TJFMtWQ90QAT") // test key
+const publishableKey = "pk_test_f3duw0VsAEM2TJFMtWQ90QAT" // test key
 const stripeOptions = ref<StripeConstructorOptions>({
   // https://stripe.com/docs/js/initializing#init_stripe_js-options
 })
@@ -42,7 +42,7 @@ const expressCheckoutOptions = ref<StripeExpressCheckoutElementOptions>({
 const stripeLoaded = ref(false)
 
 onBeforeMount(() => {
-  loadStripe(publishableKey.value).then(() => {
+  loadStripe(publishableKey).then(() => {
     stripeLoaded.value = true
   })
 })

examples/PaymentElementDeferred.vue

@@ -37,7 +37,7 @@ import { onBeforeMount, ref, useTemplateRef } from "vue"
 import StripeElement from "../src/components/StripeElement.vue"
 import StripeElements from "../src/components/StripeElements.vue"
 
-const stripeKey = ref("pk_test_f3duw0VsAEM2TJFMtWQ90QAT")
+const stripeKey = "pk_test_f3duw0VsAEM2TJFMtWQ90QAT"
 const stripeOptions = ref({
   // https://stripe.com/docs/js/initializing#init_stripe_js-options
 })
@@ -61,7 +61,7 @@ const elementsComponent = useTemplateRef("elementsComponent")
 const paymentComponent = useTemplateRef("paymentComponent")
 
 onBeforeMount(() => {
-  loadStripe(stripeKey.value).then(() => {
+  loadStripe(stripeKey).then(() => {
     stripeLoaded.value = true
 
     // Good place to call your backend to create PaymentIntent

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-stripe-js",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Vue 3 components for Stripe.js",
   "type": "module",
   "main": "./dist/vue-stripe.js",
@@ -15,6 +15,7 @@
     "dev": "vite",
     "build": "vue-tsc -b && vite build",
     "build:demo": "vite --config vite.demo.config.ts build",
+    "preview:demo": "vite --config vite.demo.config.ts preview",
     "check:types": "publint && attw --pack . --ignore-rules=cjs-resolves-to-esm",
     "ci": "biome check && pnpm run build && pnpm run check:types"
   },
@@ -34,15 +35,15 @@
     "@stripe/stripe-js": "^5.5.0"
   },
   "devDependencies": {
-    "@arethetypeswrong/cli": "^0.17.2",
+    "@arethetypeswrong/cli": "^0.17.3",
     "@biomejs/biome": "1.9.4",
-    "@tailwindcss/vite": "4.0.0-beta.8",
+    "@tailwindcss/vite": "4.0.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/tsconfig": "0.7.0",
-    "publint": "^0.3.0",
-    "tailwindcss": "4.0.0-beta.8",
+    "publint": "^0.3.2",
+    "tailwindcss": "4.0.0",
     "typescript": "^5.7.3",
-    "vite": "^6.0.7",
+    "vite": "^6.0.11",
     "vite-plugin-dts": "^4.5.0",
     "vue": "^3.5.13",
     "vue-tsc": "^2.2.0"