Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
コア機能開発に集中するための Stripe Checkout活用法 / jp_stripes_...
Search
Hidetaka Okamoto (Stripe)
January 30, 2023
Technology
0
450
コア機能開発に集中するための Stripe Checkout活用法 / jp_stripes_deep_dive_202301
JP_Stripes Deep Dive Vol.12
Hidetaka Okamoto (Stripe)
January 30, 2023
Tweet
Share
More Decks by Hidetaka Okamoto (Stripe)
See All by Hidetaka Okamoto (Stripe)
Stripeではじめる Revenue Operations / jp_stripes_okinawa_8
stripehideokamoto
0
260
収益を高めるための Stripeダッシュボード活用術 / jp_stripes_online_7
stripehideokamoto
0
340
No-code SaaS and Full Site Editing / wcasia2023
stripehideokamoto
0
240
State of Checkout 2022から見た オンライン決済フローの最適化/jp-stripes-miyzaki-202301
stripehideokamoto
0
170
サブスクリプション決済入門 Stripeでの実装方法と、要件定義時のポイント/okta-stripe-202301
stripehideokamoto
0
190
ノーコード・ローコードツールで サブスク運用を効率化する方法 / JP_Stripes_Osaka_202301
stripehideokamoto
0
110
ビジネスユーザを巻込む Stripeダッシュボード活用法 / jp_stripes_deepdive-202212
stripehideokamoto
0
290
AWSでローコードにはじめる サブスクリプション運用の効率化/aws-startup-tech-meetup-fukuoka-2
stripehideokamoto
0
150
サブスクリプション決済入門 Stripeでの実装方法と、要件定義時のポイント/jp_stripes_okayama_vol3
stripehideokamoto
9
5.8k
Other Decks in Technology
See All in Technology
[ JAWS-UG千葉支部 x 彩の国埼玉支部 ]ムダ遣い卒業!FinOpsで始めるAWSコスト最適化の第一歩
sh_fk2
2
150
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
3
570
Delegating the chores of authenticating users to Keycloak
ahus1
0
170
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
980
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
410
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
180
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
130
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
1
600
CDK Toolkit Libraryにおけるテストの考え方
smt7174
1
360
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
2
1.3k
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
160
事例で学ぶ!B2B SaaSにおけるSREの実践例/SRE for B2B SaaS: A Real-World Case Study
bitkey
1
270
Featured
See All Featured
Fireside Chat
paigeccino
37
3.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
What's in a price? How to price your products and services
michaelherold
246
12k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Raft: Consensus for Rubyists
vanstee
140
7k
Designing for Performance
lara
610
69k
Optimizing for Happiness
mojombo
379
70k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Six Lessons from altMBA
skipperchong
28
3.9k
Transcript
コア機能開発に集中するための Stripe Checkout活用法 JP_Stripes Deep Dive Vol.12 @hidetaka_dev Updated Jan
2023
SaaSの力 で 「やるべきこと」に 集中できる環境を作ろう 2
1. なぜStripe Checkoutなのか 2. Checkoutをより便利に使いこなす 3. Elementsとの使い分けやマイグレーション Agenda 3 JP_Stripes
Deep Dive Vol.12
Hidetaka Okamoto(岡本秀高) Developer Advocate @ Stripe 💬 @hidetaka_dev ✉
[email protected]
JP_Stripes宮崎 👋 Hello!
JP_Stripes Deep Dive Vol.12 State of Checkout • APAC5カ国 •
Stripeを利用するEC • 各国上位100サイトを対象
1. なぜStripe Checkoutなのか 2. Checkoutをより便利に使いこなす 3. Elementsとの使い分けやマイグレーション Agenda 6 JP_Stripes
Deep Dive Vol.12
7 なぜStripe Checkoutなのか リダイレクト or 埋め込み
8
const session = await stripe.checkout.sessions.create({ mode: 'subscription', line_items: [{ price:
'price_xxxx', quantity: 1 }], success_url: 'https://example.com', cancel_url: 'https://example.com' }) return res.status(200).json({ url: session.url }) なぜStripe Checkoutなのか 数行のコードで URLを発行
line_items: [{ price_data: { unit_amount: 1000, currency: 'jpy', product_data: {
name: 'XX様専用プラン' } }, quantity: 1 }], なぜStripe Checkoutなのか アドホックな 料金・商品設定
1. 日本・諸外国の法改正や規制対応 2. 決済フォームのローカライズや最適化 3. 売上を増やすための追加施策 Checkoutで削減できる運用コスト 11 なぜStripe Checkoutなのか
12 なぜStripe Checkoutなのか 2022年施行の特商法改正への対応
1. 日本・諸外国の法改正や規制対応 2. 決済フォームのローカライズや最適化 3. 売上を増やすための追加施策 Checkoutで削減できる運用コスト 13 なぜStripe Checkoutなのか
なぜStripe Checkoutなのか 複数通貨での 価格設定
なぜStripe Checkoutなのか IPアドレスや 住所に基づく 決済手段の表示
1. 日本・諸外国の法改正や規制対応 2. 決済フォームのローカライズや最適化 3. 売上を増やすための追加施策 Checkoutで削減できる運用コスト 16 なぜStripe Checkoutなのか
なぜStripe Checkoutなのか クロスセル アップセル
なぜStripe Checkoutなのか カード情報を 登録せずに トライアルを開始
なぜStripe Checkoutなのか カート内の 商品数を変更
1. 決済の完了(カード): checkout.session.completed 2. 決済の完了(コンビニ決済等非同期型) : checkout.session.async_payment_succeeded 3. 決済の失敗(コンビニ決済など非同期型) :
checkout.session.async_payment_failed 4. セッションの有効期限切れ: checkout.session.expired 注文・決済情報はWebhookで受け取る 20 なぜStripe Checkoutなのか
なぜStripe Checkoutなのか Zapierなどで ノーコードに
決済周りの開発だけでなく 改善のためのリソースも Checkoutで効率化 22
1. なぜStripe Checkoutなのか 2. Checkoutをより便利に使いこなす 3. Elementsとの使い分けやマイグレーション Agenda 23 JP_Stripes
Deep Dive Vol.12
Stripeをより便利に使いこなす 請求・顧客情報 マイページ
Stripeをより便利に使いこなす ノーコードに 対応
const session = await stripe.checkout.sessions.create({ mode: 'payment', + invoice_creation: {
+ enabled: true, + }, … Stripeをより便利に使いこなす 一回切りの決済で 請求書・領収書を 発(有料)
Stripeをより便利に使いこなす AWSとの システム連携
Stripe & Stripe Checkoutで 決済に関わる ワークフロー を手軽に実装 28
1. なぜStripe Checkoutなのか 2. Checkoutをより便利に使いこなす 3. Elementsとの使い分けやマイグレーション Agenda 29 JP_Stripes
Deep Dive Vol.12
const elements = stripe.elements({ { theme: 'stripe', }, clientSecret });
const paymentElement = elements.create("payment", { layout: "tabs", }); paymentElement.mount("#payment-element"); Elementsとの使い分け 埋め込み型 決済フォーム
Elementsとの使い分け デザインの カスタマイズ appearance: { theme: 'none', variables: { colorPrimary:
'#2b8501' fontFamily: 'Osaka', borderRadius: '4px', spacingGridColumn: '50px' }, rules: { '.Tab': { border: '1px solid #E0E6EB', boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02)', }, '.Tab:hover': { color: 'var(--colorText)', },
Elementsとの使い分け カスタマイズされた Subscription
33 Elementsへのマイグレーション Elementとの使い分け
1. Payment Intent / Subscriptionデータを作成 2. カートの情報をDBに保存し、決済と紐付け 3. Stripe.jsでフォームを描画 4.
Stripe.jsで決済確定処理 5. Webhookで決済完了・失敗時のWFを実行 Elementsへのマイグレーション 34 JP_Stripes Deep Dive Vol.12
1. 「カートの中身」を外部DBで保存 2. Webhookイベントの種類が一部変わる 3. Customer Portalを使うには、Invoicingが必要 マイグレーション時の注意点 35 JP_Stripes
Deep Dive Vol.12
簡単ではない が、不可能でもない 36
• リンク型で、すぐに始める • リダイレクト型で、低工数・コストに組み込む • 埋め込み型で、 デザイン・ブランドに馴染む組み込みを行う 規模や予算・リソースに応じた決済機能開発 37 SaaSという「巨人の肩」を乗りこなす
SaaSの力 で ECの「やるべきこと」に 集中できる環境を作ろう 38