Tweet
Tweet

Slide 1

Slide 1 text

microCMSとStripeを使った JamstackなECサイトの作り方 (Next.js篇) ジャムジャム！！Jamstack_5 Hidetaka Okamoto(@hide__dev) 2022/02/22

Slide 2

Slide 2 text

岡本 秀高 ( @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

Slide 3

Slide 3 text

3 https://stripe.com/jp

Slide 4

Slide 4 text

4 決済だけでなく決済周辺の機能もご利用可能 Stripe のプロダクトスイート Payments Checkout Radar Billing Connect Terminal Issuing Payouts Capital Corporate Card Treasury オンライン決済 構築済み決済 UI 不正使用とリスクの管理 サブスクリプションの管理 プラットフォーム向けの決済 Climate Sigma Atlas 収益の一部で CO2 除去に貢献 カスタムレポート Identity 決済最適化 ビジネスモデル ビジネス運営 送金・資金移動 融資・法人カード発行 オンライン請求書 Invoicing BaaS 支出管理 ビジネスの資金調達 海外への入金 カード作成 Tax 消費税と VAT の自動計算 オンライン本人確認 スタートアップの企業設立 対面支払い （日本未展開）

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

商品情報管理画面はあまりリッチじゃない ● 価格や税情報はかなり柔軟 ○ 複数料金 ○ 定期課金 ○ 税コード ● 説明文にHTMLは使えない ● 説明文は改行できない ● 画像は１商品１枚 ● 「表示用コンテンツ」は 別で管理したい 6 ジャムジャム！！Jamstack_5 #jamjamjamstack

Slide 7

Slide 7 text

7 https://microcms.io/

Slide 8

Slide 8 text

掲載する情報とStripeデータ紐付けをmicroCMSで ● エディタの カスタマイズが柔軟 ● Stripeのデータを取得するため 料金IDを保存する欄を用意 ● 繰り返しフィールドなどで 画像も複数設定可能 ● 両サービスのWebhookを 使えば、データの二重管理も ほぼなくせる 8 ジャムジャム！！Jamstack_5 #jamjamjamstack

Slide 9

Slide 9 text

APIを用意 ジャムジャム！！Jamstack_5

Slide 10

Slide 10 text

フィールドを定義 ジャムジャム！！Jamstack_5

Slide 11

Slide 11 text

Stripe側で 商品と料金を登録 ジャムジャム！！Jamstack_5

Slide 12

Slide 12 text

コンテンツ入力と StripeのID設定 ジャムジャム！！Jamstack_5

Slide 13

Slide 13 text

Next.jsなどで データを取得・表示 ジャムジャム！！Jamstack_5

Slide 14

Slide 14 text

実装Tips ジャムジャム！！Jamstack_5

Slide 15

Slide 15 text

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; } }));

Slide 16

Slide 16 text

環境変数の例 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

Slide 17

Slide 17 text

クライアントの初期化はサーバー側で ● NEXT-PUBLICじゃない 環境変数はサーバー側のみ ● Stripeのシークレットキーは NEXT_PUBLIC禁止 ○ 漏れたら 一発インシデント ○ 顧客情報や売上などに アクセスできる ● getStaticProps / getServerSideProps またはAPIから利用しよう 17 ジャムジャム！！Jamstack_5 #jamjamjamstack

Slide 18

Slide 18 text

Checkoutセッション作成->リダイレクトまたは別タブ 18 ジャムジャム！！Jamstack_5 #jamjamjamstack { 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') }}>注文する

Slide 19

Slide 19 text

APIを実装したくない場合、Payment Linksを使う ● Checkoutはサーバー処理が必要 ● APIサーバーがない場合は PaymentLinksで支払いリンクを ● microCMSには リンクのURLを保存する ● 注文時は、リンクに直接飛ばす ● Checkoutより 機能が制限されることに注意 19 ジャムジャム！！Jamstack_5 #jamjamjamstack

Slide 20

Slide 20 text

セッション終了後、Step by Step記事をQiitaで公開 ● Twitterハッシュタグでシェア #jamjamjamstack ● コードスニペット・差分あり ● microCMSのフィールド設定も 画像付きで紹介 ● スライドも埋め込みます ● QiitaでStripeに関する 開発ブログ更新中 https://qiita.com/organizations/stripe 20 ジャムジャム！！Jamstack_5 #jamjamjamstack

Slide 21

Slide 21 text

Thanks! ● Twitterハッシュタグでシェア #jamjamjamstack ● Twitterアカウント: @hide__dev @StripeJapan ● QiitaでStripeに関する 開発ブログ更新中 https://qiita.com/organizations/stripe 21 ジャムジャム！！Jamstack_5 #jamjamjamstack