[{"_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",74,"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 { 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\nexport let newStripeEvent = async (req: Request) => {\n const url = new URL(req.url);\n if (req.method === \"GET\" && url.pathname === \"/\")\n return new Response(\n `

New Stripe Subscriber Webhook

\n Learn more at https://www.val.town/v/stevekrouse/newStripeSubscriber\n

New Stripe Subscriber Webhook

\n Learn more at https://www.val.town/v/stevekrouse/newStripeSubscriber\n

`,\n {\n status: 200,\n headers: {\n \"Content-Type\": \"text/html\",\n },\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: `New Subscription 🥳 ${customerEmail}`,\n });\n\n return Response.json(\"ok\");\n};","createdAt",["D",1741810375202],"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},"3c2b83f4-1bcc-11f0-a237-569c3dd06744","parentId","latest",["D",1741810375202],73,"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",1741810375202],"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 · v74