Stripe Checkout 使ってみた

グーグルスライドからエクスポートしたデータを使用したところ日本語のフォントが変な感じになってしまいました。

Transcript

1. Stripe Checkout 使ってみた 谷口晴哉
2. 2 Stripe Checkout が 手軽すぎる！
3. 3 今回作成したもの
4. まずはStripeのダッシュボードに商品を登録
5. 登録した商品の一覧を表示
6. 注文ボタンをクリックして購入
7. 決済画面にリダイレクト
8. 決済情報を入力して支払うボタンを押下
9. 決済完了！ダッシュボードに履歴が
10. 10 使用したもの
11. Stripe Checkout • ローコードで決済ページを作成 できるサービス • フォームのUIが構築済み • 多くの言語・通貨に対応
12. ライブラリ、フレームワーク • Next.js • Stripe SDK
13. 実装 1. 登録した商品情報の取得。 ◦ ダッシューボードから商品を登録 ◦ 商品データの取得 ◦ 商品データの表示 2. Checkout セッションを作成し、決済ページを表示。 ◦ Stripe Checkout の利用の流れ ◦ 注文ボタンの実装 ◦ Checkout セッションの作成と、決済ページへのリダイレクト
14. 商品情報の登録 • Stripeのダッシュボードの「商品カタログ」から商品を登録
15. 商品情報の登録 • 商品名、料金の設定などが設 定できる。 • 料金は複数設定可能。 • 買い切り、定額課金などの決済 方法を設定可能。
16. 1. 登録した商品情報の取得 - SDKのセットアップ • まずはStripe SDKのセッティング。 • .env.localファイルからAPIキーの指定と、バージョンの指定だけ。 const stripe = new Stripe(process.env.STRIPE_API_KEY, { apiVersion: "2023-10-16", });
17. 1. 登録した商品情報の取得 - 商品データの取得 • stripe.products.list()で登録した商品のオブジェクトを取得。 • 引数なしで手軽。 const products = await stripe.products.list();
18. 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 } ] }
19. 1. 登録した商品情報の取得 - 商品情報の表示 • 取得しデータを、商品表示 用のコンポーネントに渡して 商品を表示。 <div className="productCardWrapper"> {products.map((product) => { console.log(product); return ( <ProductCard product={product} key={product.id} ></ProductCard> ); })} </div>
20. ここまでで商品データの表示を完了。
21. 2. 決済ページの表示 - Stripe Checkoutの利用の流れ 1. クライアントが支払い情報を送信 （引用元：https://stripe.com/docs/payments/checkout/how-checkout-works）
22. 2. 決済ページの表示 - Stripe Checkoutの利用の流れ 2. サーバー側で Stripe API を呼び出して Checkout セッションを作成 （引用元：https://stripe.com/docs/payments/checkout/how-checkout-works）
23. 2. 決済ページの表示 - Stripe Checkoutの利用の流れ 3. Checkout セッションが提供するURLにユーザーをリダイレクトする。 （引用元：https://stripe.com/docs/payments/checkout/how-checkout-works）
24. 2. 決済ページの表示 - Stripe Checkoutの利用の流れ 4. 決済完了後にアプリケーションに戻って完了 （引用元：https://stripe.com/docs/payments/checkout/how-checkout-works）
25. 2. 決済ページの表示 - 注文ボタンの実装 • 「注文する」ボタンはformタグで実装されており、クリックする と”/api/checkout_sesssion”にPOSTが飛びます。 • POSTのbodyには価格のIDと商品の数量のデータが含まれています。 FormData { [Symbol(state)]: [ { name: 'price', value: 'price_1OO…' }, { name: 'quantity', value: '1' } ] }
26. 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); }
27. 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と数量の情報
28. これで注文ボタンからの決済画面の遷移が可能に
29. 29 完成！
30. 終わりに • キモとなるCheckout セッションの実装も数行で出 来てしまう。 • ダッシュボードに商品管理機能付き、こちらでCMS などを準備しなくてもよい。 • ただ手軽が故に制約も多そう。（まだ理解不足で す）小規模な個人開発などライトなシーンで使えそ う。
31. 参考 • 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