Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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.

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

Michael Tedder

March 22, 2022
Tweet

More Decks by Michael Tedder

Other Decks in Technology

Transcript

  1. $ 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
  2. 今日お話しすること #JP__Stripes • Tokyo Demo Festについて • Stripe Checkoutの実装 ◦

    Stripe Dashboardで商品作成 ◦ フロントエンド側の実装 ◦ Checkout URL生成のLambda関数実装 • Stripe Webhookの実装 ◦ CheckoutセッションのイベントLambda関数実装 • 振り返り・感想
  3. Tokyo Demo Festについて • 日本で唯一のデモパーティ ◦ コンピュータを用いたプログラミングとアートに興味のある 人々 ◦ デモパーティは日本のみではなく、世界中にも開催

    • デモ作品のコンペティションや開発技術セミナー等も行う • 2011年から毎年開催(コロナ禍の影響で一時的開催中止) ◦ 外国の参加者が 約2割 ◦ 2021年にオンライン開催にシフト ⇨ StripeでチケットとTシャツを販売! #JP__Stripes
  4. TDF2021の販売設定 • オンライン開催でYouTube配信は誰でも無料で見れる • 販売するチケットが 2種類 ◦ Visitor Ticket(1,000円) ▪

    メールでパーティシステムのアクセス情報を送信 ▪ 制作した作品を投稿・コンポでの投稿を投票権利 ◦ Bronze Supporter(10,000円) ▪ Visitor Ticket + Tシャツ無料配送込み • Tシャツサイズ選択(男女・S/M/L/XL) • 住所入力必要(海外も含めて!) • Tシャツ単品でも購入可能(3,500円、チケット代含まず) #JP__Stripes
  5. フロントエンド側の実装 • Visitor Ticket・Tシャツ単品・Bronze Supporter それぞれの 3つのHTMLボタン を用意 • POSTで

    form のURLは全種類同じエンドポイント ◦ input の type=”hidden” で購入する商品を指定 #JP__Stripes
  6. Checkout URL生成のLambda実装 • Stripe Checkoutセッション作成 ⇨ ブラウザ転送する • フロントエンド側からのPOSTでLambdaが HTTP

    303 (See Other) レスポンスを返す • SDKが生成されたURLが Location ヘッダーに入る • 本当にこの数行だけで いいのです! #JP__Stripes ⇨
  7. Checkout URL生成のLambda実装 • Visitor Ticketの場合は line_items が 1つ ◦ チケット料金の

    price_id のみ • Checkout画面が 見えたら決済可能! #JP__Stripes
  8. Checkout URL生成のLambda実装 • Bronze Supporterの場合は line_items が 2つ ◦ サポーター料金・0円のTシャツ料金の

    price_id • 発送先の入力フィールドを有効するに必要なのは shipping_rates と shipping_address_collection #JP__Stripes
  9. Checkout URL生成のLambda実装 • Tシャツ単品の場合は line_items が 1つ ◦ 3,500円のTシャツ料金の price_id

    • こちらも発送先の入力フィールドを有効にするので shipping_rates と shipping_address_collection をセッション作成に渡す #JP__Stripes
  10. 振り返り・感想 • Stripe Dashboardが素晴らしい ◦ イベントログのJSON見れてデバッグしやすい ◦ dev / prodの環境切り替えがとても便利

    • Checkout画面が見えたらもう決済可能! ⇦ ここ大事 ◦ Webhookの実装はStripe側の決済と関係ない ▪ バグ発生などは決済に影響しない ▪ Webhook実装しなくてもCheckoutで決済できる • TDFはようやくPayPalから乗り換えた ◦ Apple Pay / Google Payはメールアドレス・住所が 入力不要なのでワンタップ決済で負担が少ない #JP__Stripes