Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Serverless event ticket sales using Stripe

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.

3a488be96753f7e2232f3a3d79b83083?s=128

Michael Tedder

March 22, 2022
Tweet

More Decks by Michael Tedder

Other Decks in Technology

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