refactor: use tailwind to style examples

Author: softbeehive

examples/CardElement.vue

@@ -6,14 +6,19 @@
       :instance-options="instanceOptions"
       :elements-options="elementsOptions"
       ref="elementsComponent"
+      class="py-3"
     >
       <StripeElement
         type="card"
         :options="cardOptions"
         ref="cardComponent"
       />
     </StripeElements>
-    <button>Pay now</button>
+    <button 
+      class="w-full rounded-b bg-slate-600 px-3 py-2 text-sm font-semibold text-white hover:bg-slate-500"
+    >
+      Pay now
+    </button>
   </form>
 </template>
 
@@ -36,6 +41,10 @@ const elementsOptions = ref<StripeElementsOptions>({
   // https://stripe.com/docs/js/elements_object/create#stripe_elements-options
 })
 const cardOptions = ref<StripeCardElementOptions>({
+  style: {
+    base: {},
+    invalid: {},
+  },
   // https://stripe.com/docs/stripe.js#element-options
 })
 const stripeLoaded = ref(false)
@@ -71,14 +80,5 @@ function handlePay() {
         console.log("Great success!")
       }
     })
-
-  // if (payload.error) {
-  //   setError(`Payment failed ${payload.error.message}`);
-  //   setProcessing(false);
-  // } else {
-  //   setError(null);
-  //   setProcessing(false);
-  //   setSucceeded(true);
-  // }
 }
 </script>

examples/CardElementLegacy.vue

@@ -5,6 +5,7 @@
     :instance-options="instanceOptions"
     :elements-options="elementsOptions"
     ref="elms"
+    class="py-3"
   >
     <StripeElement
       type="card"
@@ -15,8 +16,9 @@
   <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"
   >
-    Pay
+    Pay now
   </button>
 </template>
 

examples/DemoApp.vue

@@ -1,29 +1,43 @@
 <template>
-  <div>
-    <h1>Demo: Vue Stripe.js</h1>
+  <div class="flex flex-col gap-y-12 container px-6 py-10 max-w-xl">
+    <h1 class="text-3xl font-semibold">Demo Vue Stripe.js</h1>
 
     <section>
-      <h2>Payment Element</h2>
-      <p>Deferred flow - 
-        <a href="https://docs.stripe.com/payments/accept-a-payment-deferred?type=payment">read full guide</a>
+      <h2 class="text-2xl font-semibold">Payment Element</h2>
+      <p class="pt-1 pb-6">Deferred flow -
+        <a
+          class="text-blue-700 hover:underline"
+          href="https://docs.stripe.com/payments/accept-a-payment-deferred?type=payment"
+        >read stripe guide</a>
       </p>
-      <PaymentElement />
+      <PaymentElementDeferred />
     </section>
 
     <section>
-      <h2>Card Element</h2>
-      <p></p>
+      <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 - 
+        <a
+          class="text-blue-700 hover:underline"
+          href="https://docs.stripe.com/payments/card-element?lang=node"
+        >read stripe guide</a>
+      </p>
       <CardElement />
     </section>
 
     <section>
-      <h2>Card Element (Legacy)</h2>
-      <p></p>
+      <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>
 
     <section>
-      <h2>Express Checkout Element</h2>
+      <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 - 
+        <a
+          class="text-blue-700 hover:underline"
+          href="https://docs.stripe.com/elements/express-checkout-element/accept-a-payment?lang=node"
+        >read stripe guide</a>
+      </p>
       <ExpressCheckoutElement />
     </section>
   </div>
@@ -33,5 +47,5 @@
 import CardElement from "./CardElement.vue"
 import CardElementLegacy from "./CardElementLegacy.vue"
 import ExpressCheckoutElement from "./ExpressCheckoutElement.vue"
-import PaymentElement from "./PaymentElement.vue"
+import PaymentElementDeferred from "./PaymentElementDeferred.vue"
 </script>

examples/PaymentElement.vue renamed to examples/PaymentElementDeferred.vue

@@ -6,14 +6,20 @@
       :instance-options="instanceOptions"
       :elements-options="elementsOptions"
       ref="elementsComponent"
+      class="pb-4"
     >
       <StripeElement
         type="payment"
         :options="paymentElementOptions"
         ref="paymentComponent"
       />
     </StripeElements>
-    <button>Submit</button>
+    <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"
+    >
+      Submit
+    </button>
   </form>
 </template>
 

examples/demo.ts renamed to examples/demo/demo.ts

@@ -1,5 +1,5 @@
 import { createApp } from "vue"
-import DemoApp from "./DemoApp.vue"
+import DemoApp from "../DemoApp.vue"
 
 const app = createApp(DemoApp)
 app.mount("#app")

examples/demo/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

index.html

@@ -3,10 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/examples/demo/index.css">
     <title>Try Vue Stripe</title>
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/examples/demo.ts"></script>
+    <script type="module" src="/examples/demo/demo.ts"></script>
   </body>
 </html>

package.json

@@ -33,9 +33,11 @@
     "@arethetypeswrong/cli": "^0.17.2",
     "@biomejs/biome": "1.9.4",
     "@stripe/stripe-js": "^5.4.0",
+    "@tailwindcss/vite": "4.0.0-beta.8",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/tsconfig": "0.7.0",
     "publint": "^0.2.12",
+    "tailwindcss": "4.0.0-beta.8",
     "typescript": "^5.7.2",
     "vite": "^6.0.7",
     "vite-plugin-dts": "^4.4.0",