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 使ってみた
Search
HaruyaTaniguchi
January 17, 2024
0
36
Stripe Checkout 使ってみた
グーグルスライドからエクスポートしたデータを使用したところ日本語のフォントが変な感じになってしまいました。
HaruyaTaniguchi
January 17, 2024
Tweet
Share
More Decks by HaruyaTaniguchi
See All by HaruyaTaniguchi
面倒ミント〜クラウドを使って植物と会話したい@JAWS-UG 青森
haruya
0
5
Featured
See All Featured
Embracing the Ebb and Flow
colly
86
4.7k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Faster Mobile Websites
deanohume
307
31k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Designing for Performance
lara
610
69k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Transcript
Stripe Checkout 使ってみた 谷口晴哉
2 Stripe Checkout が 手軽すぎる!
3 今回作成したもの
まずはStripeのダッシュボードに商品を登録
登録した商品の一覧を表示
注文ボタンをクリックして購入
決済画面にリダイレクト
決済情報を入力して支払うボタンを押下
決済完了!ダッシュボードに履歴が
10 使用したもの
Stripe Checkout • ローコードで決済ページを作成 できるサービス • フォームのUIが構築済み • 多くの言語・通貨に対応
ライブラリ、フレームワーク • Next.js • Stripe SDK
実装 1. 登録した商品情報の取得。 ◦ ダッシューボードから商品を登録 ◦ 商品データの取得 ◦ 商品データの表示 2.
Checkout セッションを作成し、決済ページを表示。 ◦ Stripe Checkout の利用の流れ ◦ 注文ボタンの実装 ◦ Checkout セッションの作成と、決済ページへのリダイレクト
商品情報の登録 • Stripeのダッシュボードの「商品カタログ」から商品を登録
商品情報の登録 • 商品名、料金の設定などが設 定できる。 • 料金は複数設定可能。 • 買い切り、定額課金などの決済 方法を設定可能。
1. 登録した商品情報の取得 - SDKのセットアップ • まずはStripe SDKのセッティング。 • .env.localファイルからAPIキーの指定と、バージョンの指定だけ。 const
stripe = new Stripe(process.env.STRIPE_API_KEY, { apiVersion: "2023-10-16", });
1. 登録した商品情報の取得 - 商品データの取得 • stripe.products.list()で登録した商品のオブジェクトを取得。 • 引数なしで手軽。 const products
= await stripe.products.list();
1. 登録した商品情報の取得 - 取得したデータの中身 商品データのオブジェクト (※今回使うデータのみ抜粋) • 商品ID、商品名、商品説明 • 価格ID、通貨、価格の数値
{ id: 'prod_PCGXBUmLP5fTJj', description: '普通のうさぎの3Dモデル。', name: 'うさぎA', images: [ 'https://files.stripe.com...' ], prices: [ { id: 'price_1ONs0IC10kBB33p9GcKmE3ZF', currency: 'jpy', unit_amount: 1360, archive: undefined } ] }
1. 登録した商品情報の取得 - 商品情報の表示 • 取得しデータを、商品表示 用のコンポーネントに渡して 商品を表示。 <div className="productCardWrapper">
{products.map((product) => { console.log(product); return ( <ProductCard product={product} key={product.id} ></ProductCard> ); })} </div>
ここまでで商品データの表示を完了。
2. 決済ページの表示 - Stripe Checkoutの利用の流れ 1. クライアントが支払い情報を送信 (引用元:https://stripe.com/docs/payments/checkout/how-checkout-works)
2. 決済ページの表示 - Stripe Checkoutの利用の流れ 2. サーバー側で Stripe API を呼び出して
Checkout セッションを作成 (引用元:https://stripe.com/docs/payments/checkout/how-checkout-works)
2. 決済ページの表示 - Stripe Checkoutの利用の流れ 3. Checkout セッションが提供するURLにユーザーをリダイレクトする。 (引用元:https://stripe.com/docs/payments/checkout/how-checkout-works)
2. 決済ページの表示 - Stripe Checkoutの利用の流れ 4. 決済完了後にアプリケーションに戻って完了 (引用元:https://stripe.com/docs/payments/checkout/how-checkout-works)
2. 決済ページの表示 - 注文ボタンの実装 • 「注文する」ボタンはformタグで実装されており、クリックする と”/api/checkout_sesssion”にPOSTが飛びます。 • POSTのbodyには価格のIDと商品の数量のデータが含まれています。 FormData
{ [Symbol(state)]: [ { name: 'price', value: 'price_1OO…' }, { name: 'quantity', value: '1' } ] }
2. 決済ページの表示 - 注文ボタンの実装 • Next.jsのRoute handlerで注文ボタンからのポスト受け取る。 • セッションを作成し、提供されたURLへリダイレクト。 export
async function POST(request: Request) { const session = await stripe.checkout.sessions.create(... ... return NextResponse.redirect(session.url, 303); }
2. 決済ページの表示 - Checkout セッションの作成 const session = await stripe.checkout.sessions.create({
mode: 'payment', //決済のタイプ line_items: [{ //商品情報の配列 price_id, //価格ID quantity, //商品の数量 }], success_url: 'http://…', //決済後にリダイレクトされるリンク cancel_url: 'http://…' }) • セッションを作成はstripe.checkout.sessions.createで作成する。 • 必要なのは価格のIDと数量の情報
これで注文ボタンからの決済画面の遷移が可能に
29 完成!
終わりに • キモとなるCheckout セッションの実装も数行で出 来てしまう。 • ダッシュボードに商品管理機能付き、こちらでCMS などを準備しなくてもよい。 • ただ手軽が故に制約も多そう。(まだ理解不足で
す)小規模な個人開発などライトなシーンで使えそ う。
参考 • Stripe DOCS 「商品および価格の使用を開始」 https://stripe.com/docs/products-prices/getting-started • Stripe DOCS 「Checkout
の仕組み」 https://stripe.com/docs/payments/checkout/how-checkout-works • Zenn 「Next.jsとStripeではじめるシンプルな ECサイト開発ワークショップ」 https://zenn.dev/stripe/books/stripe-nextjs-use-shopping-cart