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
400
コア機能開発に集中するための 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
230
収益を高めるための Stripeダッシュボード活用術 / jp_stripes_online_7
stripehideokamoto
0
290
No-code SaaS and Full Site Editing / wcasia2023
stripehideokamoto
0
230
State of Checkout 2022から見た オンライン決済フローの最適化/jp-stripes-miyzaki-202301
stripehideokamoto
0
130
サブスクリプション決済入門 Stripeでの実装方法と、要件定義時のポイント/okta-stripe-202301
stripehideokamoto
0
170
ノーコード・ローコードツールで サブスク運用を効率化する方法 / JP_Stripes_Osaka_202301
stripehideokamoto
0
83
ビジネスユーザを巻込む Stripeダッシュボード活用法 / jp_stripes_deepdive-202212
stripehideokamoto
0
260
AWSでローコードにはじめる サブスクリプション運用の効率化/aws-startup-tech-meetup-fukuoka-2
stripehideokamoto
0
130
サブスクリプション決済入門 Stripeでの実装方法と、要件定義時のポイント/jp_stripes_okayama_vol3
stripehideokamoto
9
5.7k
Other Decks in Technology
See All in Technology
DeepSeekとは?何がいいの? - Databricksと学ぶDeepSeek! 〜これからのLLMに備えよ!〜
taka_aki
1
120
Change Managerを活用して本番環境へのセキュアなGUIアクセスを統制する / Control Secure GUI Access to the Production Environment with Change Manager
yuj1osm
0
100
Fraxinus00tw assembly manual
fukumay
0
130
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
650
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
350
偏光画像処理ライブラリを作った話
elerac
1
180
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.5k
困難を「一般解」で解く
fujiwara3
7
1.2k
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
230
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
730
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
12
4.2k
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
210
Featured
See All Featured
KATA
mclloyd
29
14k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
The World Runs on Bad Software
bkeepers
PRO
67
11k
What's in a price? How to price your products and services
michaelherold
244
12k
Statistics for Hackers
jakevdp
797
220k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Documentation Writing (for coders)
carmenintech
67
4.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
GitHub's CSS Performance
jonrohan
1030
460k
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 ✉ hideokamoto@stripe.com
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