サーバーレスでStripe Checkoutを用いた イベントチケット販売 JP_ Stripes　5周年記念ナイトセッション 2022年3月22日 (火) 株式会社コールド・フュージョン テッダー　マイケル ＃JP__Stripes JP_ Stripes札幌

$ 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

今日お話しすること ＃JP__Stripes ● Tokyo Demo Festについて ● Stripe Checkoutの実装 ○ Stripe Dashboardで商品作成 ○ フロントエンド側の実装 ○ Checkout URL生成のLambda関数実装 ● Stripe Webhookの実装 ○ CheckoutセッションのイベントLambda関数実装 ● 振り返り・感想

本日の内容はブログでも参考可能！ ＃JP__Stripes https://bit.ly/37LrwxS このブログは「開発者ガイドコンテスト」にエントリーしました！

Tokyo Demo Festについて ＃JP__Stripes

Tokyo Demo Festについて ● 日本で唯一のデモパーティ ○ コンピュータを用いたプログラミングとアートに興味のある 人々 ○ デモパーティは日本のみではなく、世界中にも開催 ● デモ作品のコンペティションや開発技術セミナー等も行う ● 2011年から毎年開催（コロナ禍の影響で一時的開催中止） ○ 外国の参加者が 約2割 ○ 2021年にオンライン開催にシフト ⇨ StripeでチケットとTシャツを販売！ ＃JP__Stripes

Tokyo Demo Festの写真 https://tokyodemofest.jp ＃JP__Stripes

Stripe Checkoutの実装 ＃JP__Stripes

システム全体図 ＃JP__Stripes

TDF2021の販売設定 ● オンライン開催でYouTube配信は誰でも無料で見れる ● 販売するチケットが 2種類 ○ Visitor Ticket（1,000円） ■ メールでパーティシステムのアクセス情報を送信 ■ 制作した作品を投稿・コンポでの投稿を投票権利 ○ Bronze Supporter（10,000円） ■ Visitor Ticket + Tシャツ無料配送込み ● Tシャツサイズ選択（男女・S/M/L/XL） ● 住所入力必要（海外も含めて！） ● Tシャツ単品でも購入可能（3,500円、チケット代含まず） ＃JP__Stripes

Stripe Dashboardで商品作成 ● 2種類のチケットはそれぞれの商品と金額 ● Tシャツは男女・サイズ別の1つずつの商品（合計8個） ○ Bronze Supporterチケット用（0円） ○ Tシャツ単品（3,500円） ＃JP__Stripes

Stripe Dashboardで商品作成 ● Checkoutで住所入力させるには「配送料金」設定が必要 ● TDF2021のTシャツ配送は全て送料込みの金額なので 配送料金は 0円 で設定 ＃JP__Stripes

フロントエンド側の実装 ● Visitor Ticket・Tシャツ単品・Bronze Supporter それぞれの 3つのHTMLボタン を用意 ● POSTで form のURLは全種類同じエンドポイント ○ input の type=”hidden” で購入する商品を指定 ＃JP__Stripes

Checkout URL生成のLambda実装 ● Stripe Checkoutセッション作成 ⇨ ブラウザ転送する ● フロントエンド側からのPOSTでLambdaが HTTP 303 (See Other) レスポンスを返す ● SDKが生成されたURLが Location ヘッダーに入る ● 本当にこの数行だけで いいのです！ ＃JP__Stripes ⇨

Checkout URL生成のLambda実装 ● Visitor Ticketの場合は line_items が 1つ ○ チケット料金の price_id のみ ● Checkout画面が 見えたら決済可能！ ＃JP__Stripes

Checkout URL生成のLambda実装 ● Bronze Supporterの場合は line_items が 2つ ○ サポーター料金・0円のTシャツ料金の price_id ● 発送先の入力フィールドを有効するに必要なのは shipping_rates と shipping_address_collection ＃JP__Stripes

Checkout URL生成のLambda実装 ● Tシャツ単品の場合は line_items が 1つ ○ 3,500円のTシャツ料金の price_id ● こちらも発送先の入力フィールドを有効にするので shipping_rates と shipping_address_collection をセッション作成に渡す ＃JP__Stripes

Stripe Webhookの実装 ＃JP__Stripes

Stripe Webhookの実装 ● チケット購入後、ユーザーにチケット情報のメール送りたい ○ TDFパーティシステムのアカウント発行（DynamoDB） ○ 入力されたメールアドレスに接続情報を送る ● Lambda関数でStripeからのイベント通知を受け取る ○ Checkoutセッション完了 ○ 決済成功 / 決済失敗 ○ などなど（サブスク関係とか他にいっぱいある！） ＃JP__Stripes

CheckoutセッションのイベントLambda実装 ● WebhookへのペイロードはStripe SDKに渡すだけ ● checkout.session.completed のイベントでカード決済の場 合は決済完了ので session.payment_status は paid に ＃JP__Stripes

振り返り・感想 ＃JP__Stripes

振り返り・感想 ● Stripe Dashboardが素晴らしい ○ イベントログのJSON見れてデバッグしやすい ○ dev / prodの環境切り替えがとても便利 ● Checkout画面が見えたらもう決済可能！ ⇦ ここ大事 ○ Webhookの実装はStripe側の決済と関係ない ■ バグ発生などは決済に影響しない ■ Webhook実装しなくてもCheckoutで決済できる ● TDFはようやくPayPalから乗り換えた ○ Apple Pay / Google Payはメールアドレス・住所が 入力不要なのでワンタップ決済で負担が少ない ＃JP__Stripes

ご清聴ありがとうございます！ ＃JP__Stripes