Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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