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_deep_dive_202301
Search
Hidetaka Okamoto (Stripe)
January 30, 2023
Technology
0
330
コア機能開発に集中するための 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
190
収益を高めるための Stripeダッシュボード活用術 / jp_stripes_online_7
stripehideokamoto
0
220
No-code SaaS and Full Site Editing / wcasia2023
stripehideokamoto
0
210
State of Checkout 2022から見た オンライン決済フローの最適化/jp-stripes-miyzaki-202301
stripehideokamoto
0
90
サブスクリプション決済入門 Stripeでの実装方法と、要件定義時のポイント/okta-stripe-202301
stripehideokamoto
0
110
ノーコード・ローコードツールで サブスク運用を効率化する方法 / JP_Stripes_Osaka_202301
stripehideokamoto
0
54
ビジネスユーザを巻込む Stripeダッシュボード活用法 / jp_stripes_deepdive-202212
stripehideokamoto
0
200
AWSでローコードにはじめる サブスクリプション運用の効率化/aws-startup-tech-meetup-fukuoka-2
stripehideokamoto
0
110
サブスクリプション決済入門 Stripeでの実装方法と、要件定義時のポイント/jp_stripes_okayama_vol3
stripehideokamoto
9
5.3k
Other Decks in Technology
See All in Technology
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
AIエージェントを現場に導入する目線とは
masahiro_nishimi
1
1.5k
可視化プラットフォームGrafanaの基本と活用方法の全て
hamadakoji
0
230
シフトレフトで挑む セキュリティの生産性向上
sekido
PRO
0
270
目標設定は好きですか? アジャイルとともに目標と向き合い続ける方法 / Do you like target Management?
kakehashi
10
3k
地理情報とAPIのトレンド
nagix
0
160
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
頼られるのが大好きな 皆さんへ - 支援相手との期待の合わせ方、突き放し方 -/For_people_who_like_to_be_relied_on
naitosatoshi
1
290
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
Docker互換のセキュアなコンテナ実行環境「Podman」超入門
devops_vtj
6
3.2k
Featured
See All Featured
The Mythical Team-Month
searls
217
43k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Gamification - CAS2011
davidbonilla
78
4.9k
Design by the Numbers
sachag
277
18k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
Ruby is Unlike a Banana
tanoku
96
10k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Into the Great Unknown - MozCon
thekraken
20
1.3k
Leading Effective Engineering Teams 2024
addyosmani
3
300
Clear Off the Table
cherdarchuk
89
320k
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