feat: stripe checkout test

components/Tee.ts

@@ -1,9 +1,11 @@
 import { html, css } from "pekommunity/react/mod.ts"
 
+// <a href="${tee.link}" class="tee-block">
+
 const Tee = ({ tee }: { tee: Record<string, string>}) => html`
-  <a href="${tee.link}" class="tee-block">
+   <a href="/checkout" class="tee-block">
     <img is="img-resizing" class="align-center" alt="${tee.name}" src="${tee.src}?res=low" fetchpriority="high" />
-    <p class="align-center">Click to view</p>
+    <p class="align-center">Purchase</p>
   </a>
 `
 

handlers/stripe-checkout.ts

@@ -0,0 +1,34 @@
+import { Handler } from "peko"
+import Stripe from "npm:stripe"
+
+const {
+  STRIPE_API_KEY
+} = Deno.env.toObject()
+
+const stripe = new Stripe(
+  STRIPE_API_KEY,
+  {
+    apiVersion: "2023-08-16"
+  }
+)
+
+// Provide the exact Price ID (for example, pr_1234) of the product you want to sell
+export function checkout(price_id: string): Handler {
+  return async () => {
+    const session = await stripe.checkout.sessions.create({
+      line_items: [
+        {
+          price: price_id,
+          quantity: 1,
+        },
+      ],
+      mode: 'payment',
+      success_url: `https://iiisun.art/success`,
+      cancel_url: `https://iiisun.art/cancel`,
+    });
+
+    return session.url 
+      ? Response.redirect(session.url)
+      : Response.redirect("/cancel")
+  }
+};

middleware/loader.ts

@@ -28,7 +28,7 @@ export function loader(pageHTML: string): Middleware {
         loadTarget.dispatchEvent(new CustomEvent("send", { detail: `loaded: ${loaded}` }))
       } else {
         // let initial response happen before blocking with request spam
-        await new Promise(res => setTimeout(res, 100))
+        await new Promise(res => setTimeout(res, 250))
 
         // do all res query params for images
         const initImgSrcs = getSrcs(pageHTML, `img(.)*is="img-resizing"(.)*`)

pages/Trade.ts

@@ -32,7 +32,6 @@ const Trade = () => html`
           <div class="container grid-auto tee-grid">
             ${tees.map(tee => html`<${Tee} tee=${tee} />`)}
           </div>
-          <img id="trade-guy" is="img-resizing" class="width-500" alt="TradeGuy" src="/public/images/trade/TradePic.png?res=med" fetchpriority="high" />
         </div>
       </section>
 
@@ -48,21 +47,17 @@ css`
   }
 
   #trade-block {
+    margin: auto;
     display: flex;
-    flex-wrap: wrap-reverse;
-    justify-content: flex-end;
-    align-items: flex-end;
+    flex-wrap: wrap;
+    background-image: url("/public/images/trade/TradePic.png?res=med");
+    background-repeat: no-repeat;
+    background-position: right;
+    min-height: 100%;
   }
 
   #trade-block div {
-    margin-top: -80px;
-  }
-
-  @media (min-width: 1360px) {
-    #trade-guy {
-      position: sticky;
-      top: 80px;
-    }
+    margin-top: 40px;
   }
 `
 

router.ts

@@ -8,6 +8,7 @@ import { fromFileUrl } from "path"
 import { cache } from "./cache.ts"
 import { loader } from "./middleware/loader.ts"
 import { IMG_RESOLUTIONS } from "./components/config.ts" 
+import { checkout } from "./handlers/stripe-checkout.ts"
 // import { markdown } from "./handlers/markdown.ts"
 // const htmlDoc = await Deno.readTextFile(indexUrl)
 
@@ -35,6 +36,9 @@ router.addRoute("/t-shirts", async () => {
   })
 })
 
+// stripe checkout
+router.addRoute("/checkout", checkout("price_1NnSybJ5zd0Ft3OG1k45gyj6"))
+
 // PAGES
 router.addRoute(
   "/",