[{"_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",57,"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 { 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 { markdownToHtml } from \"https://esm.town/v/zackoverflow/markdownToHtml?v=6\";\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) {\n return stripe.customers.retrieve(customerId);\n}\n\nlet welcomeEmail = renderToString(\n

\n Thank you for becoming a paying customer of Val Town. It's support like yours that enables us to build the future\n of coding.\n

If I can ever do anything for you, let me know! And if you have any feedback please send it my way.

Best,

Steve

Val Town | CEO

\n ps - this email is a val\n

,\n);\n\nexport let newStripeEvent = async (req: Request) => {\n const url = new URL(req.url);\n if (req.method === \"GET\" && url.pathname === \"/\")\n return html(markdownToHtml(`# New Stripe Subscription Handler\n\nThis val receives webhooks from Stripe when we get a new subscriber to Val Town pro. The val:\n\n1. Verifies the signature to make sure it's really from Stripe\n2. Sends a message to our internal Discord channel\n3. Sends a thank you to the new subscriber\n\nIf you send a GET request to this val, it responds with the thank you email – for ease of debugging.`));\n\n if (req.method === \"GET\" && url.pathname === \"/email\") return html(welcomeEmail);\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) {\n return new Response(`Webhook Error: ${err.message}`, { status: 400 });\n }\n\n const customer = await getStripeCustomer(event.data.object.customer);\n const customerEmail = customer.email;\n\n discordWebhook({\n url: Deno.env.get(\"discordUserEvents\"),\n content: `<@&1081224342110736394> New Subscription 🥳 ${customerEmail}`,\n });\n\n await email({\n to: customerEmail,\n subject: \"Thank you!\",\n html: welcomeEmail,\n from: { name: \"Steve Krouse\", email: \"stevekrouse.company@valtown.email\" },\n cc: { name: \"Team\", email: \"team@val.town\" },\n });\n\n return Response.json(\"ok\");\n};","/** @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) {\n return stripe.customers.retrieve(customerId);\n}\n\nlet welcomeEmail = renderToString(\n

\n Thank you for becoming a paying customer of Val Town. It's support like yours that enables us to build the future\n of coding.\n

If I can ever do anything for you, let me know! And if you have any feedback please send it my way.

Best,

Steve

Val Town | CEO

\n ps - this email is a val\n

,\n);\n\nexport let newStripeEvent = async (req: Request) => {\n const url = new URL(req.url);\n if (req.method === \"GET\" && url.pathname === \"/\")\n return html(micromark(`# New Stripe Subscription Handler\n\nThis val receives webhooks from Stripe when we get a new subscriber to Val Town pro. The val:\n\n1. Verifies the signature to make sure it's really from Stripe\n2. Sends a message to our internal Discord channel\n3. Sends a thank you to the new subscriber\n\nIf you send a GET request to this val, it responds with the thank you email – for ease of debugging.`));\n\n if (req.method === \"GET\" && url.pathname === \"/email\") return html(welcomeEmail);\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) {\n return new Response(`Webhook Error: ${err.message}`, { status: 400 });\n }\n\n const customer = await getStripeCustomer(event.data.object.customer);\n const customerEmail = customer.email;\n\n discordWebhook({\n url: Deno.env.get(\"discordUserEvents\"),\n content: `<@&1081224342110736394> New Subscription 🥳 ${customerEmail}`,\n });\n\n await email({\n to: customerEmail,\n subject: \"Thank you!\",\n html: welcomeEmail,\n from: { name: \"Steve Krouse\", email: \"stevekrouse.company@valtown.email\" },\n cc: { name: \"Team\", email: \"team@val.town\" },\n });\n\n return Response.json(\"ok\");\n};","createdAt",["D",1726503929845],"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},"3be1bb20-1bcc-11f0-a237-569c3dd06744","parentId","latest",["D",1726503929845],56,"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",1726503929845],"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 · v57