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
microCMSとStripeを使ったJamstackなECサイトの作り方(Next.js篇)...
Search
Hidetaka Okamoto (Stripe)
February 22, 2022
Programming
3
2.9k
microCMSとStripeを使ったJamstackなECサイトの作り方(Next.js篇)/jamjamjamstack-202202
ジャムジャム!!Jamstack_5【初心者歓迎LT会】
https://jamjamjamstack.connpass.com/event/236720/
Hidetaka Okamoto (Stripe)
February 22, 2022
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
330
No-code SaaS and Full Site Editing / wcasia2023
stripehideokamoto
0
240
コア機能開発に集中するための Stripe Checkout活用法 / jp_stripes_deep_dive_202301
stripehideokamoto
0
450
State of Checkout 2022から見た オンライン決済フローの最適化/jp-stripes-miyzaki-202301
stripehideokamoto
0
170
サブスクリプション決済入門 Stripeでの実装方法と、要件定義時のポイント/okta-stripe-202301
stripehideokamoto
0
180
ノーコード・ローコードツールで サブスク運用を効率化する方法 / JP_Stripes_Osaka_202301
stripehideokamoto
0
110
ビジネスユーザを巻込む Stripeダッシュボード活用法 / jp_stripes_deepdive-202212
stripehideokamoto
0
290
AWSでローコードにはじめる サブスクリプション運用の効率化/aws-startup-tech-meetup-fukuoka-2
stripehideokamoto
0
140
Other Decks in Programming
See All in Programming
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
180
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
1.9k
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
520
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
260
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
130
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
470
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
260
PicoRuby on Rails
makicamel
2
120
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
340
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Practical Orchestrator
shlominoach
188
11k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
4 Signs Your Business is Dying
shpigford
184
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
It's Worth the Effort
3n
185
28k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Docker and Python
trallard
44
3.5k
Producing Creativity
orderedlist
PRO
346
40k
Transcript
microCMSとStripeを使った JamstackなECサイトの作り方 (Next.js篇) ジャムジャム!!Jamstack_5 Hidetaka Okamoto(@hide__dev) 2022/02/22
岡本 秀高 ( @hide__dev ) • Stripe Developer Advocate (ex-developer
in Digitalcube) • JavaScript / TypeScript developer • AWS / Next.js / WordPress / etc… • WordCamp Kyoto 2017 / JP_Stripes Connect 2019 / AWS Samurai 2017 / etc… • 🐈(猫フラご容赦) 2 ジャムジャム!!Jamstack_5 #jamjamjamstack
3 https://stripe.com/jp
4 決済だけでなく決済周辺の機能もご利用可能 Stripe のプロダクトスイート Payments Checkout Radar Billing Connect Terminal
Issuing Payouts Capital Corporate Card Treasury オンライン決済 構築済み決済 UI 不正使用とリスクの管理 サブスクリプションの管理 プラットフォーム向けの決済 Climate Sigma Atlas 収益の一部で CO2 除去に貢献 カスタムレポート Identity 決済最適化 ビジネスモデル ビジネス運営 送金・資金移動 融資・法人カード発行 オンライン請求書 Invoicing BaaS 支出管理 ビジネスの資金調達 海外への入金 カード作成 Tax 消費税と VAT の自動計算 オンライン本人確認 スタートアップの企業設立 対面支払い (日本未展開)
Low Code / No Codeで、決済リンクが作れる 5 ジャムジャム!!Jamstack_5 #jamjamjamstack const session
= await stripe.checkout.sessions.create({ mode: "payment", success_url: `${req.headers.origin}`, cancel_url: `${req.headers.origin}`, line_items:[{ price: req.body.price_id, quantity: 1 }] }) return session.url
商品情報管理画面はあまりリッチじゃない • 価格や税情報はかなり柔軟 ◦ 複数料金 ◦ 定期課金 ◦ 税コード •
説明文にHTMLは使えない • 説明文は改行できない • 画像は1商品1枚 • 「表示用コンテンツ」は 別で管理したい 6 ジャムジャム!!Jamstack_5 #jamjamjamstack
7 https://microcms.io/
掲載する情報とStripeデータ紐付けをmicroCMSで • エディタの カスタマイズが柔軟 • Stripeのデータを取得するため 料金IDを保存する欄を用意 • 繰り返しフィールドなどで 画像も複数設定可能
• 両サービスのWebhookを 使えば、データの二重管理も ほぼなくせる 8 ジャムジャム!!Jamstack_5 #jamjamjamstack
APIを用意 ジャムジャム!!Jamstack_5
フィールドを定義 ジャムジャム!!Jamstack_5
Stripe側で 商品と料金を登録 ジャムジャム!!Jamstack_5
コンテンツ入力と StripeのID設定 ジャムジャム!!Jamstack_5
Next.jsなどで データを取得・表示 ジャムジャム!!Jamstack_5
実装Tips ジャムジャム!!Jamstack_5
microCMS -> StripeでAPI呼び出し 15 ジャムジャム!!Jamstack_5 #jamjamjamstack const client = createClient({
serviceDomain: 'demo-stripe-ec', apiKey: process.env.MICROCMS_API_KEY, }); const { contents } = await client.get({ endpoint: 'products' }); const stripe = new Stripe(process.env.STRIPE_SECRET_KEY); const products = await Promise.all(contents.map(async (content) => { try { const price = await stripe.prices.retrieve(content.stripe_price_id); return { ...content, price }; } catch (e) { return content; } }));
環境変数の例 16 ジャムジャム!!Jamstack_5 #jamjamjamstack # Stripe公開可能キー NEXT_PUBLIC_STRIPE_PUBLISHABL E_KEY=pk_test_xxxxxx # Stripeシークレットキー
STRIPE_SECRET_KEY=sk_test_xxx xx # microCMS APIキー MICROCMS_API_KEY=xxxxxx
クライアントの初期化はサーバー側で • NEXT-PUBLICじゃない 環境変数はサーバー側のみ • Stripeのシークレットキーは NEXT_PUBLIC禁止 ◦ 漏れたら 一発インシデント
◦ 顧客情報や売上などに アクセスできる • getStaticProps / getServerSideProps またはAPIから利用しよう 17 ジャムジャム!!Jamstack_5 #jamjamjamstack
Checkoutセッション作成->リダイレクトまたは別タブ 18 ジャムジャム!!Jamstack_5 #jamjamjamstack <button onClick={async () => { const
session = await fetch('/api/checkout_session', { method: "POST", headers: { 'content-type': 'application/json' }, body: JSON.stringify({ price_id: product.price.id }) }).then(data => data.json()) .catch(e => window.alert(e.message)) window.open(session.url, 'checkout-session') }}>注文する</button>
APIを実装したくない場合、Payment Linksを使う • Checkoutはサーバー処理が必要 • APIサーバーがない場合は PaymentLinksで支払いリンクを • microCMSには リンクのURLを保存する
• 注文時は、リンクに直接飛ばす • Checkoutより 機能が制限されることに注意 19 ジャムジャム!!Jamstack_5 #jamjamjamstack
セッション終了後、Step by Step記事をQiitaで公開 • Twitterハッシュタグでシェア #jamjamjamstack • コードスニペット・差分あり • microCMSのフィールド設定も
画像付きで紹介 • スライドも埋め込みます • QiitaでStripeに関する 開発ブログ更新中 https://qiita.com/organizations/stripe 20 ジャムジャム!!Jamstack_5 #jamjamjamstack
Thanks! • Twitterハッシュタグでシェア #jamjamjamstack • Twitterアカウント: @hide__dev @StripeJapan • QiitaでStripeに関する
開発ブログ更新中 https://qiita.com/organizations/stripe 21 ジャムジャム!!Jamstack_5 #jamjamjamstack