feat: implement Stripe checkout integration and add related API endpoints

app/components/designer/DesignerPreview.vue

@@ -4,12 +4,16 @@ const props = defineProps<{
   templateLabel: string;
   productionPixels: number;
   isExporting: boolean;
+  isCheckoutPending: boolean;
+  checkoutPrice: number;
+  checkoutError: string | null;
 }>();
 
 const emit = defineEmits<{
   (e: "download-preview"): void;
   (e: "download-production"): void;
   (e: "export"): void;
+  (e: "checkout"): void;
 }>();
 
 const viewMode = ref<"flat" | "turntable">("flat");
@@ -23,6 +27,9 @@ const handleSelectView = (mode: "flat" | "turntable") => {
 const handleExport = () => emit("export");
 const handleDownloadPreview = () => emit("download-preview");
 const handleDownloadProduction = () => emit("download-production");
+const handleCheckout = () => emit("checkout");
+
+const priceLabel = computed(() => props.checkoutPrice.toFixed(2));
 </script>
 
 <template>
@@ -112,6 +119,20 @@ const handleDownloadProduction = () => emit("download-production");
       >
         Download Print-Ready PNG
       </button>
+      <button
+        type="button"
+        class="flex-1 rounded-xl bg-emerald-500 px-4 py-3 text-sm font-semibold text-emerald-950 transition hover:bg-emerald-400 disabled:cursor-not-allowed disabled:bg-emerald-500/60 disabled:text-emerald-900/60"
+        :disabled="props.isCheckoutPending || props.isExporting"
+        @click="handleCheckout"
+      >
+        {{ props.isCheckoutPending ? "Redirecting…" : `Buy This Design ($${priceLabel})` }}
+      </button>
+    </div>
+    <div
+      v-if="props.checkoutError"
+      class="mt-3 rounded-xl border border-rose-500/60 bg-rose-500/10 px-4 py-3 text-sm text-rose-200"
+    >
+      {{ props.checkoutError }}
     </div>
   </section>
 </template>