Serverless event ticket sales using Stripe

A 15 minute presentation I gave at the JP_Stripes 5th Anniversary Night Session (on 2022/3/22) on how we used Stripe Checkout built upon AWS Serverless tech to sell tickets and T-shirts for Tokyo Demo Fest 2021.

(Note: This presentation is only in Japanese, sorry.)

Transcript

1. サーバーレスでStripe Checkoutを用いた イベントチケット販売 JP_ Stripes　5周年記念ナイトセッション 2022年3月22日 (火) 株式会社コールド・フュージョン テッダー　マイケル ＃JP__Stripes JP_ Stripes札幌
2. $ whoami > テッダー　マイケル（昭和51年生まれ / 2000年アメリカから日本） > 25年以上ゲーム業界での開発経験 （PS1 〜 Switchゲーム機 / モバイル端末 / PC / Oculus VR） > 10年以上AWSのクラウドアプリケーション開発 （現在はサーバーレス / コンテナ中心） > Tokyo Demo Fest実行委員 / JAWS-UG札幌支部運営 / AWSコミュニティビルダー認定 > できること: リアルタイム3D / ゲームエンジン開発 / ユーザー向けAPI設計 / アプリ+バックエンド開発 / ネットワークインフラ設計 / DevOps (CI/CD) > 好きな言語: C++17 / GLSL / ASM (x64/ARM/MIPS) / PHP / TypeScript > 好きなStripeサービス: Stripe Checkout ＃JP__Stripes
3. 今日お話しすること ＃JP__Stripes • Tokyo Demo Festについて • Stripe Checkoutの実装 ◦ Stripe Dashboardで商品作成 ◦ フロントエンド側の実装 ◦ Checkout URL生成のLambda関数実装 • Stripe Webhookの実装 ◦ CheckoutセッションのイベントLambda関数実装 • 振り返り・感想
4. 本日の内容はブログでも参考可能！ ＃JP__Stripes https://bit.ly/37LrwxS このブログは「開発者ガイドコンテスト」にエントリーしました！
5. Tokyo Demo Festについて ＃JP__Stripes
6. Tokyo Demo Festについて • 日本で唯一のデモパーティ ◦ コンピュータを用いたプログラミングとアートに興味のある 人々 ◦ デモパーティは日本のみではなく、世界中にも開催 • デモ作品のコンペティションや開発技術セミナー等も行う • 2011年から毎年開催（コロナ禍の影響で一時的開催中止） ◦ 外国の参加者が 約2割 ◦ 2021年にオンライン開催にシフト ⇨ StripeでチケットとTシャツを販売！ ＃JP__Stripes
7. Tokyo Demo Festの写真 https://tokyodemofest.jp ＃JP__Stripes
8. Stripe Checkoutの実装 ＃JP__Stripes
9. システム全体図 ＃JP__Stripes
10. TDF2021の販売設定 • オンライン開催でYouTube配信は誰でも無料で見れる • 販売するチケットが 2種類 ◦ Visitor Ticket（1,000円） ▪ メールでパーティシステムのアクセス情報を送信 ▪ 制作した作品を投稿・コンポでの投稿を投票権利 ◦ Bronze Supporter（10,000円） ▪ Visitor Ticket + Tシャツ無料配送込み • Tシャツサイズ選択（男女・S/M/L/XL） • 住所入力必要（海外も含めて！） • Tシャツ単品でも購入可能（3,500円、チケット代含まず） ＃JP__Stripes
11. Stripe Dashboardで商品作成 • 2種類のチケットはそれぞれの商品と金額 • Tシャツは男女・サイズ別の1つずつの商品（合計8個） ◦ Bronze Supporterチケット用（0円） ◦ Tシャツ単品（3,500円） ＃JP__Stripes
12. Stripe Dashboardで商品作成 • Checkoutで住所入力させるには「配送料金」設定が必要 • TDF2021のTシャツ配送は全て送料込みの金額なので 配送料金は 0円 で設定 ＃JP__Stripes
13. フロントエンド側の実装 • Visitor Ticket・Tシャツ単品・Bronze Supporter それぞれの 3つのHTMLボタン を用意 • POSTで form のURLは全種類同じエンドポイント ◦ input の type=”hidden” で購入する商品を指定 ＃JP__Stripes
14. Checkout URL生成のLambda実装 • Stripe Checkoutセッション作成 ⇨ ブラウザ転送する • フロントエンド側からのPOSTでLambdaが HTTP 303 (See Other) レスポンスを返す • SDKが生成されたURLが Location ヘッダーに入る • 本当にこの数行だけで いいのです！ ＃JP__Stripes ⇨
15. Checkout URL生成のLambda実装 • Visitor Ticketの場合は line_items が 1つ ◦ チケット料金の price_id のみ • Checkout画面が 見えたら決済可能！ ＃JP__Stripes
16. Checkout URL生成のLambda実装 • Bronze Supporterの場合は line_items が 2つ ◦ サポーター料金・0円のTシャツ料金の price_id • 発送先の入力フィールドを有効するに必要なのは shipping_rates と shipping_address_collection ＃JP__Stripes
17. Checkout URL生成のLambda実装 • Tシャツ単品の場合は line_items が 1つ ◦ 3,500円のTシャツ料金の price_id • こちらも発送先の入力フィールドを有効にするので shipping_rates と shipping_address_collection をセッション作成に渡す ＃JP__Stripes
18. Stripe Webhookの実装 ＃JP__Stripes
19. Stripe Webhookの実装 • チケット購入後、ユーザーにチケット情報のメール送りたい ◦ TDFパーティシステムのアカウント発行（DynamoDB） ◦ 入力されたメールアドレスに接続情報を送る • Lambda関数でStripeからのイベント通知を受け取る ◦ Checkoutセッション完了 ◦ 決済成功 / 決済失敗 ◦ などなど（サブスク関係とか他にいっぱいある！） ＃JP__Stripes
20. CheckoutセッションのイベントLambda実装 • WebhookへのペイロードはStripe SDKに渡すだけ • checkout.session.completed のイベントでカード決済の場 合は決済完了ので session.payment_status は paid に ＃JP__Stripes
21. 振り返り・感想 ＃JP__Stripes
22. 振り返り・感想 • Stripe Dashboardが素晴らしい ◦ イベントログのJSON見れてデバッグしやすい ◦ dev / prodの環境切り替えがとても便利 • Checkout画面が見えたらもう決済可能！ ⇦ ここ大事 ◦ Webhookの実装はStripe側の決済と関係ない ▪ バグ発生などは決済に影響しない ▪ Webhook実装しなくてもCheckoutで決済できる • TDFはようやくPayPalから乗り換えた ◦ Apple Pay / Google Payはメールアドレス・住所が 入力不要なのでワンタップ決済で負担が少ない ＃JP__Stripes
23. ご清聴ありがとうございます！ ＃JP__Stripes