adding stripe pricing table

thefintz · Oct 9, 2024 · 70fe6cb · 70fe6cb
1 parent b8b3862
commit 70fe6cb
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 16 deletions.
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -11,15 +11,23 @@ export default defineNuxtConfig({
 		enabled: true,
 	},
 
+	scripts: {
+		registry: {
+		  stripe: true,
+		}
+	},
+
 	modules: [
 		"@nuxt/image",
 		"@nuxtjs/tailwindcss",
 		"@primevue/nuxt-module",
 		"@sidebase/nuxt-auth",
 		"nuxt-posthog",
 		"@vueuse/nuxt",
+		"@nuxt/scripts",
 	],
 
+
 	// https://tailwind.primevue.org/nuxt/
 	// https://github.com/primefaces/primevue-examples/blob/main/nuxt-styled-tailwind/nuxt.config.ts
 	primevue: {

diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
 	},
 	"dependencies": {
 		"@nuxt/image": "^1.7.0",
+		"@nuxt/scripts": "^0.9.4",
 		"@primevue/themes": "^4.0.4",
 		"@supabase/supabase-js": "^2.45.4",
 		"@vueuse/core": "^11.0.3",

diff --git a/pages/index.vue b/pages/index.vue
@@ -153,25 +153,15 @@
     <section class="w-full py-16 bg-gray-800">
       <div class="container mx-auto">
         <h2 class="text-3xl font-bold text-center mb-8">Choose Your Plan</h2>
-        <div class="flex justify-center mb-8">
-          <SelectButton v-model="pricingPeriod" :options="pricingPeriodOptions" optionLabel="label" />
-        </div>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-          <div v-for="plan in pricingPlans" :key="plan.name" class="card p-6">
-            <h3 class="text-2xl font-bold mb-4">{{ plan.name }}</h3>
-            <p class="text-4xl font-bold mb-4">${{ pricingPeriod === 'monthly' ? plan.monthlyPrice : plan.yearlyPrice }}<span class="text-lg font-normal">/{{ pricingPeriod === 'monthly' ? 'mo' : 'yr' }}</span></p>
-            <ul class="mb-6">
-              <li v-for="feature in plan.features" :key="feature" class="flex items-center mb-2">
-                <i class="pi pi-check-circle mr-2 text-green-500"></i>
-                {{ feature }}
-              </li>
-            </ul>
-            <Button :label="`Choose ${plan.name}`" class="p-button-lg w-full" :class="plan.name === 'Pro' ? 'p-button-outlined' : ''" />
-          </div>
-        </div>
+        <ScriptStripePricingTable class="w-full"
+          pricing-table-id="prctbl_1Q84prP2aEWXlznlThXwZ00r"
+          publishable-key="pk_test_51PxqQFP2aEWXlznl5pMNEs2KFFRxQ4k47rGyUjmmdRJpNYIMqdURdAXlnEOdOhXBL9xoiGKiFbCMEXCKOkedfN5v00FdpFFUiL"
+        />
       </div>
     </section>
 
+
+
     <!-- Section 10: Final CTA -->
     <section class="w-full py-16 bg-gradient-to-r from-purple-600 to-blue-500 text-white text-center">
       <h2 class="text-3xl font-bold mb-4">Create Your AI Model and Photos Now</h2>