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

NIKKEI COMPASSの Stripe決済フローと決済高速化の方法/20231205-compass

NIKKEI COMPASSの Stripe決済フローと決済高速化の方法/20231205-compass

NIKKEI COMPASSのStripe決済フローと決済高速化の方法
というタイトルで日本経済新聞社 宮里さんが発表しました。
2023/12/05 開催 決済フロー全体像から学ぶ 決済サービス活用実践LT
https://offers.connpass.com/event/302376/

More Decks by 日本経済新聞社 エンジニア採用事務局

Other Decks in Technology

Transcript

  1. NIKKEI COMPASSの
    Stripe決済フローと決済高速化の方法
    決済フロー全体像から学ぶ 決済サービス活用実践LT
    2023-12–05
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用

    View full-size slide

  2. このセッションについて
    ハッシュタグ #Offers_決済サービス活用
    日本経済新聞社の提供するNIKKEI COMPASSでのStripe利用事例です
    ● COMPASSの概要
    ● 採用技術・設計方針
    ● Stripe決済フロー
    ● 決済完了までの時間を短縮した方法
    について話します
    Better insights for a better world 2

    View full-size slide

  3. ● スタートアップ (機械学習/フロント/バック)
    ● 機械学習系ベンチャー (フロント/バック)
    ● モビリティテックベンチャー (フロント)
    自己紹介
    2019年 中途採用で日本経済新聞社へ入社
    宮里 遼司
    読み手の意図に反しないコードを書きたい
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 3

    View full-size slide

  4. ● 社名: 日本経済新聞社
    ● 新聞名: 日本経済新聞
    ● 有名なサービスといえば日経電子版
    日本経済新聞社について
    ● 実はBtoB向けサービスもたくさんあります
    ○ 日経テレコン
    ○ 日経NEEDS
    ○ NIKKEI COMPASS
    ○ etc…
    ● 企業や記事の情報を売ることが主
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 4

    View full-size slide

  5. ● 社名: 日本経済新聞社
    ● 新聞名: 日本経済新聞
    ● 有名なサービスといえば日経電子版
    日本経済新聞社について
    ● 実はBtoB向けサービスもたくさんあります
    ○ 日経テレコン
    ○ 日経NEEDS
    ○ NIKKEI COMPASS
    ○ etc…
    ● 企業や記事の情報を売ることが主
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 5

    View full-size slide

  6. 概 要
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 6

    View full-size slide

  7. NIKKEI COMPASS概要
    https://www.nikkei.com/compass
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 7

    View full-size slide

  8. NIKKEI COMPASSの採用技術
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 8

    View full-size slide

  9. ● 表示コンテンツは全て他のAPIから取得 (社内・社外含む)
    ● COMPASSのDBにはセッション情報などの一部の情報しか無い
    ● 商品マスタや決済履歴についても例外ではなく、
    基本はStripe上に持って必要になったらAPIで取得
    ● COMPASSが自前で持つ情報を減らすことで一貫性のある情報提供ができる
    NIKKEI COMPASSの設計方針
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 9

    View full-size slide


  10. Better insights for a better world ハッシュタグ #Offers_決済サービス活用 10

    View full-size slide

  11. 決済フロー
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 11

    View full-size slide

  12. 決済フロー
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 12

    View full-size slide

  13. 決済フロー
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 13
    Stripeの支払いを表すオブジェクト
    サーバー側で作成した
    PaymentIntentをクライアント側か
    ら直接Stripeに
    送ることで決済が実行できる
    決済に関係するオブジェクトは
    PaymentIntentに紐づく
    PaymentIntentとは

    View full-size slide

  14. 決済フロー
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 14

    View full-size slide

  15. 決済フロー
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 15

    View full-size slide

  16. 決済フロー
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 16

    View full-size slide

  17. 決済フロー
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 17

    View full-size slide

  18. 購入履歴
    ● PaymentIntent作成時にコンテンツ名や金額をメタデータに入れておく
    ○ 非正規化して情報を入れておくことで購入時点のスナップショットとなる
    ● PaymentIntentがそのまま履歴として使える
    Stripeでコンテンツ購入履歴も管理
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 18

    View full-size slide

  19. 🚨問題発生🚨
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 19

    View full-size slide

  20. コンテンツ表示が遅い!
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 20

    View full-size slide

  21. ユーザーに起きていたこと
    ● 決済完了後にコンテンツ閲覧ページへ
    自動遷移するはずが、そうならない
    ● ページ遷移に30秒程度掛かる
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 21
    ● 決済完了の表示はStripeからのコールバック
    ○ ここは高速なのでコールバックは問題無し
    ● コンテンツ閲覧ページはの購入判定後に結果を返す
    ○ サーバー側の購入判定が遅い?

    View full-size slide

  22. サーバー側の処理
    ● 画面の決済完了コールバックは返って
    きているが……
    ● サーバー側の判定では未決済になる
    ● 決済完了はPaymentIntentに支払
    金額を表すChargeが紐づいたとき
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 22

    View full-size slide

  23. サーバー側の処理
    ● 画面の決済完了コールバックと
    PaymentIntent-Chargeの紐づき
    完了に約30秒の差があることが判明
    ● この時間をずっと待ってしまっていた
    約30秒
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 23
    ● 画面の決済完了コールバックは返って
    きているが……
    ● サーバー側の判定では未決済になる
    ● 決済完了はPaymentIntentに支払
    金額を表すChargeが紐づいたとき

    View full-size slide

  24. 決済完了の判定を速くする
     
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 24

    View full-size slide

  25. 決済完了の判定を速くする
    ● 決済完了のwebhookは速い
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 25

    View full-size slide

  26. 決済完了の判定を速くする
    ● 決済完了のwebhookは速い
    ● webhookで届いた
    PaymentIntentをRedisに短命で
    保存する
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 26

    View full-size slide

  27. 決済完了の判定を速くする
    ● 決済完了のwebhookは速い
    ● webhookで届いた
    PaymentIntentをRedisに短命で
    保存する
    ● 決済確認時にRedisに
    PaymentIntentの存在確認
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 27

    View full-size slide

  28. 決済完了の判定を速くする
    ● 決済完了のwebhookは速い
    ● webhookで届いた
    PaymentIntentをRedisに短命で
    保存する
    ● 決済確認時にRedisに
    PaymentIntentの存在確認
    ● 存在する場合は決済完了として扱う
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 28

    View full-size slide

  29. 決済完了の判定を速くする
    ● 決済完了のwebhookは速い
    ● webhookで届いた
    PaymentIntentをRedisに短命で
    保存する
    ● 決済確認時にRedisに
    PaymentIntentの存在確認
    ● 存在する場合は決済完了として扱う
    決済確認が30秒程度から1秒未満に高速化
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 29

    View full-size slide

  30. 決済完了の判定を速くする
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 30
    コンテンツ表示も高速化

    View full-size slide

  31. まとめ
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 31

    View full-size slide

  32. まとめ
    NIKKEI COMPASSの設計
    自前で持つデータを減らして一貫性のあるコンテンツ提供を行う
    PaymentIntentに支払い時点での情報をメタデータとして保存し、
    これを決済履歴として利用する
    Stripe決済判定の高速化
    決済完了後にPaymentIntentとChargeが紐づくのには時間がかかる
    決済完了のwebhookで受け取ったPaymentIntentを一時的に保存することで
    判定を高速化できる
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 32

    View full-size slide

  33. 積極採用中!
    Better insights for a better world ハッシュタグ #Offers_決済サービス活用 33
    ● B2Bのサービスに興味を持ってくれた方
    ● フロントエンドエンジニア
    ● バックエンドエンジニア
    ● システムアーキテクト
    ● 検索エンジニア
    ● データアナリスト
    ● プロジェクトマネージャー
    ● プロダクトマネージャー
    ● 企画
    技術ブログもあります
    https://hack.nikkei.com/

    View full-size slide