[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_168":169,"_170":171},"routes/_app.x.$handle.$name",{"_96":95,"_32":45,"_104":86,"_27":105,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":25,"_119":120,"_121":49,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":31,"_58":25,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",67,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","3aecfd38-1bcc-11f0-a237-569c3dd06744","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react */\nimport { micromark } from \"https://esm.sh/micromark@3\";\nimport { email } from \"https://esm.town/v/std/email?v=11\";\nimport { discordWebhook } from \"https://esm.town/v/stevekrouse/discordWebhook\";\nimport { html } from \"https://esm.town/v/stevekrouse/html\";\nimport { thisValURL } from \"https://esm.town/v/stevekrouse/thisValURL\";\nimport { renderToString } from \"npm:react-dom/server\";\nimport Stripe from \"npm:stripe\";\n\nconst stripe = new Stripe(Deno.env.get(\"stripe_sk_customer_readonly\") as string, {\n apiVersion: \"2020-08-27\",\n});\n\nfunction getStripeCustomer(customerId: string) {\n return stripe.customers.retrieve(customerId);\n}\n\nconst subject = \"Welcome to Val Town Pro\";\nconst welcomeEmail = (\n

\n Thank you for subscribing to Val Town Pro!\n

\n You now have higher limits across the board, allowing you to run your vals in production. Your subscription also\n includes custom domains, smarter Townie, and{\" \"}lots more.\n

\n {\n /*

\n TODO - advirtise a val or two\n One of my favorite vals that's only only available to Pro users\n is this Twitter alert.\n

*/\n }\n

\n If you have any issues, please ask on Discord{\" \"}\n (in #general) and we'll respond right away.\n

\n This is an automated email – powered by a val{\" \"}\n – but replies reach my inbox directly. I'd love to hear from you!\n

Best,

Steve

Val Town | Co-Founder

\n);\n\nexport let newStripeEvent = async (req: Request) => {\n const url = new URL(req.url);\n if (req.method === \"GET\" && url.pathname === \"/\")\n return new Response(\"OK\", { status: 200 });\n\n if (req.method === \"GET\" && url.pathname === \"/email\")\n return html(renderToString(\n

{subject}

\n {welcomeEmail}\n

\n Thank you for subscribing to Val Town Pro!\n

\n You now have higher limits across the board, allowing you to run your vals in production. Your subscription also\n includes custom domains, smarter Townie, and{\" \"}lots more.\n

\n {\n /*

\n TODO - advirtise a val or two\n One of my favorite vals that's only only available to Pro users\n is this Twitter alert.\n

*/\n }\n

\n If you have any issues, please ask on Discord{\" \"}\n (in #general) and we'll respond right away.\n

\n This is an automated email – powered by a val\n {\" \"}\n – but replies reach my inbox directly. I'd love to hear from you!\n

Best,

Steve

Val Town | Co-Founder

{subject}

\n {welcomeEmail}\n

,\n ));\n\n const signature = req.headers.get(\"Stripe-Signature\");\n const body = await req.text();\n const webhookSecret = Deno.env.get(\"STRIPE_WEBHOOK_SECRET\");\n let event;\n try {\n event = await stripe.webhooks.constructEventAsync(\n body,\n signature,\n webhookSecret,\n );\n } catch (err: any) {\n return new Response(`Webhook Error: ${err.message}`, { status: 400 });\n }\n\n console.log(event);\n\n const newSubscription = event.data.previous_attributes.status === \"incomplete\"\n && event.data.object.status === \"active\";\n\n if (!newSubscription) {\n console.log(\"Not a new subscription\");\n console.log(event.data.previous_attributes.status, event.data.object.status);\n return Response.json(\"ok\");\n }\n\n const customer = await getStripeCustomer(event.data.object.customer);\n const customerEmail = customer.email;\n\n console.log(\"New subscription\", customerEmail);\n discordWebhook({\n url: Deno.env.get(\"discordUserEvents\"),\n content: `<@&1081224342110736394> New Subscription 🥳 ${customerEmail}`,\n });\n\n await email({\n to: customerEmail,\n subject,\n html: renderToString(welcomeEmail),\n from: { name: \"Steve Krouse\", email: \"stevekrouse.company@valtown.email\" },\n replyTo: { name: \"Steve Krouse\", email: \"steve@val.town\" },\n cc: { name: \"Team\", email: \"team@val.town\" },\n });\n\n return Response.json(\"ok\");\n};","createdAt",["D",1733936947318],"branchVersion","branchId","3aea1a96-1bcc-11f0-a237-569c3dd06744","id","3ae9b952-1bcc-11f0-a237-569c3dd06744","newStripeSubscriber",["D",1744922442411],"deletedAt","legacyEnvVars",true,"privacy","public","httpPrivacy","description","Notify the Val Town team when we get new subscribers","imageUrl","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",5,"orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_96":95,"_103":99},"org",{"_96":95,"_97":-5,"_98":99,"_18":56,"_100":101,"_102":25},"branch",{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":45,"_94":95},"isOwned",77,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","stevekrouse","handle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":164,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":31,"_58":25,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":165,"_80":166,"_82":167,"_84":25},"tree",[155,156],"files",[155,156],"counts",{"_143":140,"_144":145,"_146":147,"_148":149,"_150":151},"contents",[126,127],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":135,"_32":136,"_30":137,"_129":-5,"_41":42,"_40":138,"_130":25,"_38":139,"_13":140,"_33":20,"_35":141,"_24":25,"_133":-5,"_27":142},{"_43":128,"_32":28,"_30":31,"_129":-5,"_41":42,"_40":14,"_130":25,"_38":131,"_13":132,"_33":34,"_35":37,"_24":25,"_133":-5,"_27":134},"3c0d25e4-1bcc-11f0-a237-569c3dd06744","parentId","latest",["D",1733936947318],66,"label",[28],"3aed30dc-1bcc-11f0-a237-569c3dd06744","README.md","3aed31a4-1bcc-11f0-a237-569c3dd06744",1,["D",1685970533000],0,"# New Stripe Subscription Handler\n\nThis webhook listens for new subscribers to Val Town Pro from Stripe\nand sends the Val Town team a Discord notifcation.\n\nWe have an additional webhook in the core Val Town app that takes care of \nupdating user's tier to let Pro users access premium features.\n\n## Setup\n\nTo create your own Stripe webhook that listens for new subscribers:\n\n1. Fork this HTTP val\n2. [Create a new webhook in Stripe](https://dashboard.stripe.com/webhooks/create)\n3. Add your val's HTTP endpoint URL into the Stripe webhook\n4. Select `customer.subscription.updated` as the event to listen to (more on this below)\n5. Add your `stripe_sk_customer_readonly` to your [Val Town Env Variables](https://www.val.town/settings/environment-variables)\n6. Add your webhook's signing secret as `STRIPE_WEBHOOK_SECRET` to you [Val Town Env Variables](https://www.val.town/settings/environment-variables)\n\n## How the code is structured\n\n1. Verifies the signature to make sure it's really from Stripe\n2. Filters for newly created subscriptions\n3. Sends the Discord message\n \n## Which Stripe event type to listen to\n\nStripe sends webhooks for many different kinds of events. Relevant for us here are:\n\n* `customer.subscription.created` (what we used to listen for)\n* `customer.subscription.updated` (what we're currently listening for)\n\nThe issue with `customer.subscription.created` is that it triggers too early,\nbefore the user's payment actually goes through. This is a problem\nbecause in early Nov 2024 we started getting fraudsters\ntesting stolen credit cards using our service. We started getting lots of notifications\nfor new subscriptions that never actually became active. \nIf anyone knows good ways to prevent that sort of behavior at \nthe root, please let me know by commenting on this val!\n\nIn order to only get notified on a *successfuly created* subscription, we now subscribe\nto `customer.subscription.updated`. This event happens on any subscription change,\nincluding renewals and cancellations, so now we have to filter those events\nto only get new subscriptions, ie where:\n\n```ts\nevent.data.previous_attributes.status === 'incomplete' && event.data.object.status === 'active'\n```\n\n\nMigrated from folder: Archive/prod/newStripeSubscriber",[136],"pulls","branches",2,"forks",12,"envVars",{"_152":140,"_154":140},"connections",{"_152":140,"_153":140},"count","unfilledCount","emptyCount",{"_43":135,"_32":136,"_30":137,"_129":-5,"_41":42,"_40":138,"_130":25,"_38":161,"_13":140,"_33":20,"_35":141,"_24":25,"_133":-5,"_158":162,"_27":163},{"_43":128,"_32":28,"_30":31,"_129":-5,"_41":42,"_40":14,"_130":25,"_38":157,"_13":132,"_33":34,"_35":37,"_24":25,"_133":-5,"_158":159,"_27":160},["D",1733936947318],"children",[],[28],["D",1685970533000],[],[136],["D",1744922442411],{"_96":95,"_103":99},{"_96":95,"_97":-5,"_98":99,"_18":56,"_100":101,"_102":25},{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":45,"_94":95},"ctx",{"_78":-5,"_123":201,"_202":203,"_204":205,"_206":25,"_207":25,"_208":25,"_209":49,"_210":-5,"_211":-7,"_212":-7,"_213":140,"_214":25,"_215":25,"_216":-5,"_217":25,"_218":25,"_219":25,"_220":-5},"ENV",{"_172":173,"_174":175,"_176":86,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v67