├── .gitignore ├── website ├── static │ ├── .nojekyll │ └── img │ │ ├── favicon.ico │ │ └── logo.svg ├── babel.config.js ├── src │ ├── components │ │ ├── TryItOutArrow │ │ │ ├── index.module.css │ │ │ └── index.tsx │ │ └── StackBlitzEmbed.tsx │ ├── pages │ │ ├── index.module.css │ │ └── index.tsx │ └── css │ │ └── custom.css ├── tsconfig.json ├── README.md ├── package.json ├── docs │ └── index.md └── docusaurus.config.js ├── tsconfig.json ├── .github └── workflows │ ├── build.yml │ └── pages.yml ├── LICENSE ├── package.json ├── README.md ├── scripts └── generate.mts └── index.d.ts /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /website/static/.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /website/static/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kgajera/stripe-event-types/HEAD/website/static/img/favicon.ico -------------------------------------------------------------------------------- /website/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [require.resolve("@docusaurus/core/lib/babel/preset")], 3 | }; 4 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["es2022", "DOM"], 4 | "module": "nodenext" 5 | }, 6 | "include": ["scripts/generate.mts"] 7 | } 8 | -------------------------------------------------------------------------------- /website/src/components/TryItOutArrow/index.module.css: -------------------------------------------------------------------------------- 1 | .tryItOutArrow { 2 | rotate: 190deg; 3 | } 4 | 5 | .tryItOutArrowPath { 6 | fill: var(--ifm-color-primary); 7 | } -------------------------------------------------------------------------------- /website/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // This file is not used in compilation. It is here just for a nice editor experience. 3 | "extends": "@tsconfig/docusaurus/tsconfig.json", 4 | "compilerOptions": { 5 | "baseUrl": "." 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /website/static/img/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SET 6 | -------------------------------------------------------------------------------- /.github/workflows/build.yml: -------------------------------------------------------------------------------- 1 | name: Build 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | pull_request: 8 | schedule: 9 | - cron: "0 0 * * *" 10 | 11 | jobs: 12 | build: 13 | runs-on: ubuntu-latest 14 | 15 | steps: 16 | - uses: actions/checkout@v3 17 | - uses: actions/setup-node@v3 18 | with: 19 | node-version: 18 20 | - run: npm ci 21 | - run: npm run build 22 | - run: git diff --exit-code index.d.ts 23 | -------------------------------------------------------------------------------- /.github/workflows/pages.yml: -------------------------------------------------------------------------------- 1 | name: Deploy to GitHub Pages 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | jobs: 9 | deploy: 10 | name: Deploy to GitHub Pages 11 | runs-on: ubuntu-latest 12 | steps: 13 | - uses: actions/checkout@v3 14 | - uses: actions/setup-node@v3 15 | with: 16 | node-version: 18 17 | cache: npm 18 | 19 | - name: Install dependencies 20 | run: npm install 21 | working-directory: website 22 | 23 | - name: Build website 24 | run: npm run build 25 | working-directory: website 26 | 27 | - name: Deploy to GitHub Pages 28 | uses: peaceiris/actions-gh-pages@v3 29 | with: 30 | github_token: ${{ secrets.GITHUB_TOKEN }} 31 | publish_dir: ./website/build -------------------------------------------------------------------------------- /website/src/pages/index.module.css: -------------------------------------------------------------------------------- 1 | .heroButtons { 2 | align-items: center; 3 | display: flex; 4 | gap: 20px; 5 | } 6 | 7 | .hero code { 8 | background-color: transparent; 9 | font-size: 80%; 10 | } 11 | 12 | .installCommandRow { 13 | text-align: center; 14 | } 15 | 16 | .installCommand { 17 | font-size: 18px; 18 | user-select: all; 19 | } 20 | 21 | 22 | @media screen and (max-width: 996px) { 23 | .installCommand { 24 | font-size: 15px; 25 | } 26 | } 27 | 28 | .tryItOutRow { 29 | display: flex; 30 | justify-content: flex-end; 31 | gap: 10px; 32 | margin-bottom: 10px; 33 | } 34 | 35 | .tryItOutText { 36 | font-size: 19px; 37 | font-weight: 500; 38 | margin-top: -10px; 39 | } 40 | 41 | @media only screen and (max-width: 768px) { 42 | .githubButton { 43 | display: none; 44 | } 45 | } -------------------------------------------------------------------------------- /website/README.md: -------------------------------------------------------------------------------- 1 | # Website 2 | 3 | This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator. 4 | 5 | ### Installation 6 | 7 | ``` 8 | $ yarn 9 | ``` 10 | 11 | ### Local Development 12 | 13 | ``` 14 | $ yarn start 15 | ``` 16 | 17 | This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server. 18 | 19 | ### Build 20 | 21 | ``` 22 | $ yarn build 23 | ``` 24 | 25 | This command generates static content into the `build` directory and can be served using any static contents hosting service. 26 | 27 | ### Deployment 28 | 29 | Using SSH: 30 | 31 | ``` 32 | $ USE_SSH=true yarn deploy 33 | ``` 34 | 35 | Not using SSH: 36 | 37 | ``` 38 | $ GIT_USER= yarn deploy 39 | ``` 40 | 41 | If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. 42 | -------------------------------------------------------------------------------- /website/src/components/StackBlitzEmbed.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef, useState } from "react"; 2 | import { useColorMode } from "@docusaurus/theme-common"; 3 | import sdk, { EmbedOptions, VM } from "@stackblitz/sdk"; 4 | 5 | interface StackBlitzEmbedProps 6 | extends React.DetailedHTMLProps< 7 | React.HTMLAttributes, 8 | HTMLDivElement 9 | > { 10 | projectId: string; 11 | options?: EmbedOptions; 12 | } 13 | 14 | export function StackBlitzEmbed({ 15 | options = {}, 16 | projectId, 17 | ...props 18 | }: StackBlitzEmbedProps): JSX.Element { 19 | const element = useRef(null); 20 | const [vm, setVm] = useState(); 21 | const { colorMode } = useColorMode(); 22 | 23 | useEffect(() => { 24 | sdk 25 | .embedProjectId(element.current, projectId, { 26 | height: 700, 27 | theme: colorMode, 28 | ...options, 29 | }) 30 | .then(setVm); 31 | }, []); 32 | 33 | vm?.editor.setTheme(colorMode); 34 | 35 | return
; 36 | } 37 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Kishan Gajera 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "stripe-event-types", 3 | "version": "3.1.0", 4 | "description": "TypeScript typings for Stripe webhook events", 5 | "keywords": [ 6 | "stripe" 7 | ], 8 | "scripts": { 9 | "build": "tsx scripts/generate.mts" 10 | }, 11 | "author": { 12 | "name": "Kishan Gajera", 13 | "url": "http://github.com/kgajera" 14 | }, 15 | "homepage": "https://kgajera.github.io/stripe-event-types", 16 | "repository": { 17 | "type": "git", 18 | "url": "https://github.com/kgajera/stripe-event-types.git" 19 | }, 20 | "bugs": { 21 | "url": "https://github.com/kgajera/stripe-event-types/issues" 22 | }, 23 | "license": "MIT", 24 | "types": "index.d.ts", 25 | "files": [ 26 | "index.d.ts", 27 | "LICENSE", 28 | "README.md" 29 | ], 30 | "devDependencies": { 31 | "@types/lodash": "^4.14.198", 32 | "@types/prettier": "^3.0.0", 33 | "lodash": "^4.17.21", 34 | "prettier": "^3.0.3", 35 | "puppeteer": "^21.2.1", 36 | "stripe": "^13.6.0", 37 | "tsx": "^3.12.10", 38 | "typescript": "^5.2.2" 39 | }, 40 | "peerDependencies": { 41 | "stripe": ">=10.0.0" 42 | } 43 | } -------------------------------------------------------------------------------- /website/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "website", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "docusaurus": "docusaurus", 7 | "start": "docusaurus start", 8 | "build": "docusaurus build", 9 | "swizzle": "docusaurus swizzle", 10 | "deploy": "docusaurus deploy", 11 | "clear": "docusaurus clear", 12 | "serve": "docusaurus serve", 13 | "write-translations": "docusaurus write-translations", 14 | "write-heading-ids": "docusaurus write-heading-ids", 15 | "typecheck": "tsc" 16 | }, 17 | "dependencies": { 18 | "@docusaurus/core": "2.2.0", 19 | "@docusaurus/preset-classic": "2.2.0", 20 | "@mdx-js/react": "^1.6.22", 21 | "@stackblitz/sdk": "^1.8.1", 22 | "clsx": "^1.2.1", 23 | "prism-react-renderer": "^1.3.5", 24 | "react": "^17.0.2", 25 | "react-dom": "^17.0.2" 26 | }, 27 | "devDependencies": { 28 | "@docusaurus/module-type-aliases": "2.2.0", 29 | "@tsconfig/docusaurus": "^1.0.5", 30 | "typescript": "^4.7.4" 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.5%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | }, 44 | "engines": { 45 | "node": ">=16.14" 46 | } 47 | } -------------------------------------------------------------------------------- /website/src/components/TryItOutArrow/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import styles from "./index.module.css"; 4 | 5 | export function TryItOutArrow(): JSX.Element { 6 | return ( 7 | 13 | 17 | 21 | 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /website/src/css/custom.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Any CSS included here will be global. The classic template 3 | * bundles Infima by default. Infima is a CSS framework designed to 4 | * work well for content-centric websites. 5 | */ 6 | 7 | /* You can override the default Infima variables here. */ 8 | :root { 9 | --ifm-code-font-size: 95%; 10 | --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); 11 | } 12 | 13 | /* For readability concerns, you should choose a lighter palette in dark mode. */ 14 | [data-theme="dark"] { 15 | --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); 16 | } 17 | 18 | :root { 19 | --ifm-color-primary: #635bff; 20 | --ifm-color-primary-dark: #4238ff; 21 | --ifm-color-primary-darker: #3227ff; 22 | --ifm-color-primary-darkest: #0c00f2; 23 | --ifm-color-primary-light: #847eff; 24 | --ifm-color-primary-lighter: #948fff; 25 | --ifm-color-primary-lightest: #c6c3ff; 26 | } 27 | 28 | .hero--primary 29 | .button.button--secondary.button--outline:not(.button--active):not(:hover) { 30 | color: var(--ifm-color-gray-100); 31 | } 32 | 33 | [data-theme="dark"] { 34 | --ifm-color-primary: #847eff; 35 | --ifm-color-primary-dark: #6058ff; 36 | --ifm-color-primary-darker: #4e45ff; 37 | --ifm-color-primary-darkest: #170cff; 38 | --ifm-color-primary-light: #a8a4ff; 39 | --ifm-color-primary-lighter: #bab7ff; 40 | --ifm-color-primary-lightest: #f1f0ff; 41 | } 42 | 43 | [data-theme="dark"] 44 | .hero--primary 45 | .button.button--secondary.button--outline:not(.button--active):not(:hover) { 46 | color: var(--ifm-color-gray-900); 47 | } 48 | -------------------------------------------------------------------------------- /website/docs/index.md: -------------------------------------------------------------------------------- 1 | # Stripe Event Types 2 | 3 | This provides TypeScript typings for Stripe webhook events to strongly type the `type` and `data.object` fields. These types are automatically generated by scraping Stripe's documentation for [types of events](https://stripe.com/docs/api/events/types). 4 | 5 | Why is this needed? The typings included in the [`stripe`](https://github.com/stripe/stripe-node) library are lacking in this respect. The type for `type` is a `string` instead of a string literal and the type for `data.object` is `{}` which requires casting each usage of it. This can lead to mistakes in your implementation that could easily be caught with stronger types. 6 | 7 | ![Typed Webhook Event](https://user-images.githubusercontent.com/1087679/187047509-d8cfe324-0e19-468e-8cdf-7fd3f503ad1f.gif) 8 | 9 | ## Installation 10 | 11 | Install the package with: 12 | 13 | ```shell 14 | npm install stripe-event-types 15 | # or 16 | yarn add stripe-event-types 17 | ``` 18 | 19 | ### Version compatability 20 | 21 | :::note 22 | 23 | If you are using `stripe` version [13.11](https://github.com/stripe/stripe-node/releases/tag/v13.11.0) or greater, you don't need the `stripe-event-types` library because the typings have been added to the `stripe` library. 24 | 25 | ::: 26 | 27 | | `stripe-event-types` version | `stripe` version | 28 | | ---------------------------- | ---------------- | 29 | | 3 | 13.5 - 13.10 | 30 | | 2 | 11 | 31 | | 1 | 10 | 32 | 33 | ## Usage 34 | 35 | ### Webhook event 36 | 37 | When constructing the webhook event, cast it to `Stripe.DiscriminatedEvent` to strongly type the `type` and `data.object` fields: 38 | 39 | ```diff 40 | +/// 41 | 42 | const event = stripe.webhooks.constructEvent( 43 | request.body, 44 | request.headers['stripe-signature'], 45 | 'whsec_test' 46 | -); 47 | +) as Stripe.DiscriminatedEvent; 48 | ``` 49 | 50 | ### Event type 51 | 52 | The `Stripe.DiscriminatedEvent.Type` type is a string literal of all event types: 53 | 54 | ```ts 55 | /// 56 | 57 | const type: Stripe.DiscriminatedEvent.Type = "charge.succeeded"; 58 | ``` 59 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Stripe Event Types 2 | 3 | [![npm](https://img.shields.io/npm/v/stripe-event-types)](https://www.npmjs.com/package/stripe-event-types) 4 | [![Build](https://github.com/kgajera/stripe-event-types/actions/workflows/build.yml/badge.svg)](https://github.com/kgajera/stripe-event-types/actions/workflows/build.yml) 5 | 6 | This provides TypeScript typings for Stripe webhook events to strongly type the `type` and `data.object` fields. These types are automatically generated by scraping Stripe's documentation for [types of events](https://stripe.com/docs/api/events/types). 7 | 8 | Why is this needed? The typings included in the [`stripe`](https://github.com/stripe/stripe-node) library are lacking in this respect. The type for `type` is a `string` instead of a string literal and the type for `data.object` is `{}` which requires casting each usage of it. This can lead to mistakes in your implementation that could easily be caught with stronger types. 9 | 10 | ![Typed Webhook Event](https://user-images.githubusercontent.com/1087679/187047509-d8cfe324-0e19-468e-8cdf-7fd3f503ad1f.gif) 11 | 12 | ## Installation 13 | 14 | Install the package with: 15 | 16 | ```shell 17 | npm install stripe-event-types 18 | # or 19 | yarn add stripe-event-types 20 | ``` 21 | 22 | ### Version compatability 23 | 24 | > **Note** 25 | > If you are using `stripe` version [13.11](https://github.com/stripe/stripe-node/releases/tag/v13.11.0) or greater, you don't need the `stripe-event-types` library because the typings have been added to the `stripe` library. 26 | 27 | | `stripe-event-types` version | `stripe` version | 28 | | ---------------------------- | ---------------- | 29 | | 3 | 13.5 - 13.10 | 30 | | 2 | 11 | 31 | | 1 | 10 | 32 | 33 | ## Usage 34 | 35 | ### Webhook event 36 | 37 | When constructing the webhook event, cast it to `Stripe.DiscriminatedEvent` to strongly type the `type` and `data.object` fields: 38 | 39 | ```diff 40 | +/// 41 | 42 | const event = stripe.webhooks.constructEvent( 43 | request.body, 44 | request.headers['stripe-signature'], 45 | 'whsec_test' 46 | -); 47 | +) as Stripe.DiscriminatedEvent; 48 | ``` 49 | 50 | ### Event type 51 | 52 | The `Stripe.DiscriminatedEvent.Type` type is a string literal of all event types: 53 | 54 | ```ts 55 | /// 56 | 57 | const type: Stripe.DiscriminatedEvent.Type = "charge.succeeded"; 58 | ``` 59 | -------------------------------------------------------------------------------- /website/src/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Link from "@docusaurus/Link"; 3 | import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; 4 | import Layout from "@theme/Layout"; 5 | import clsx from "clsx"; 6 | import { StackBlitzEmbed } from "../components/StackBlitzEmbed"; 7 | import { TryItOutArrow } from "../components/TryItOutArrow"; 8 | 9 | import styles from "./index.module.css"; 10 | 11 | export default function Home(): JSX.Element { 12 | const { siteConfig } = useDocusaurusContext(); 13 | 14 | return ( 15 | 16 |
17 |
18 |

{siteConfig.tagline}

19 |

27 |

28 | 29 | Docs 30 | 31 | 35 | Try it out 36 | 37 |