fix: Stripe types and checks

components/Layout.tsx

@@ -6,7 +6,7 @@ import {
   SITE_WIDTH_STYLES,
 } from "@/utils/constants.ts";
 import Logo from "./Logo.tsx";
-import { stripe } from "../utils/payments.ts";
+import { stripe } from "@/utils/payments.ts";
 import { Discord, GitHub } from "./Icons.tsx";
 
 interface NavProps extends JSX.HTMLAttributes<HTMLElement> {

deno.json

@@ -26,7 +26,7 @@
     "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.2.3",
     "twind-preset-tailwind/": "https://esm.sh/@twind/preset-tailwind@1.1.4/",
     "std/": "https://deno.land/std@0.188.0/",
-    "stripe": "https://esm.sh/stripe@12.6.0",
+    "stripe": "./stripe.ts",
     "feed": "https://esm.sh/feed@4.2.2",
     "fresh_charts/": "https://deno.land/x/fresh_charts@0.2.2/",
     "kv_oauth": "https://deno.land/x/deno_kv_oauth@v0.2.5/mod.ts",

routes/account/manage.ts

@@ -7,7 +7,9 @@ import { redirect } from "@/utils/redirect.ts";
 // deno-lint-ignore no-explicit-any
 export const handler: Handlers<any, AccountState> = {
   async GET(req, ctx) {
-    if (stripe === undefined) return ctx.renderNotFound();
+    if (stripe === undefined || ctx.state.user.stripeCustomerId === undefined) {
+      return ctx.renderNotFound();
+    }
 
     const { url } = await stripe.billingPortal.sessions.create({
       customer: ctx.state.user.stripeCustomerId,

routes/api/stripe-webhooks.ts

@@ -1,7 +1,7 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
 import type { Handlers } from "$fresh/server.ts";
 import { stripe } from "@/utils/payments.ts";
-import { Stripe } from "stripe";
+import Stripe from "stripe";
 import { getUserByStripeCustomer, updateUser } from "@/utils/db.ts";
 
 const cryptoProvider = Stripe.createSubtleCryptoProvider();

routes/pricing.tsx

@@ -3,7 +3,12 @@ import type { Handlers, PageProps } from "$fresh/server.ts";
 import Head from "@/components/Head.tsx";
 import type { State } from "@/routes/_middleware.ts";
 import { BUTTON_STYLES } from "@/utils/constants.ts";
-import { formatAmountForDisplay, stripe } from "@/utils/payments.ts";
+import {
+  formatAmountForDisplay,
+  isProductWithPrice,
+  stripe,
+  StripProductWithPrice,
+} from "@/utils/payments.ts";
 import Stripe from "stripe";
 import { ComponentChild } from "preact";
 import { getUserBySession, type User } from "@/utils/db.ts";
@@ -14,11 +19,11 @@ interface PricingPageData extends State {
 }
 
 function comparePrices(
-  productA: Stripe.Product,
-  productB: Stripe.Product,
+  productA: StripProductWithPrice,
+  productB: StripProductWithPrice,
 ) {
-  return ((productA.default_price as Stripe.Price).unit_amount || 0) -
-    ((productB.default_price as Stripe.Price).unit_amount || 0);
+  return (productA.default_price.unit_amount || 0) -
+    (productB.default_price.unit_amount || 0);
 }
 
 export const handler: Handlers<PricingPageData, State> = {
@@ -29,7 +34,16 @@ export const handler: Handlers<PricingPageData, State> = {
       expand: ["data.default_price"],
       active: true,
     });
-    const products = data.sort(comparePrices);
+
+    const productsWithPrice = data.filter(isProductWithPrice);
+
+    if (productsWithPrice.length !== data.length) {
+      throw new Error(
+        "Not all products have a default price. Please run the `deno task init:stripe` as the README instructs.",
+      );
+    }
+
+    const products = productsWithPrice.sort(comparePrices);
 
     const user = ctx.state.sessionId
       ? await getUserBySession(ctx.state.sessionId)

stripe.ts

@@ -0,0 +1,7 @@
+// Copyright 2023 the Deno authors. All rights reserved. MIT license.
+
+// Default types for Stripe don't yet work: https://github.com/stripe-samples/stripe-node-deno-samples/issues/2
+// @deno-types="npm:stripe@12.6.0"
+import Stripe from "https://esm.sh/stripe@12.6.0";
+
+export default Stripe;

utils/payments.ts

@@ -24,6 +24,22 @@ if (stripe) {
   );
 }
 
+/**
+ * We assume that the product has a default price.
+ * The official types allow for the default_price to be `undefined | null | string`
+ */
+export type StripProductWithPrice = Stripe.Product & {
+  default_price: Stripe.Price;
+};
+
+export function isProductWithPrice(
+  product: Stripe.Product,
+): product is StripProductWithPrice {
+  return product.default_price !== undefined &&
+    product.default_price !== null &&
+    typeof product.default_price !== "string";
+}
+
 export function formatAmountForDisplay(
   amount: number,
   currency: string,