Upgrade to Pro — share decks privately, control downloads, hide ads and more …

microCMSとStripeを使ったJamstackなECサイトの作り方(Next.js篇)/jamjamjamstack-202202

 microCMSとStripeを使ったJamstackなECサイトの作り方(Next.js篇)/jamjamjamstack-202202

ジャムジャム!!Jamstack_5【初心者歓迎LT会】
https://jamjamjamstack.connpass.com/event/236720/

Hidetaka Okamoto (Stripe)

February 22, 2022
Tweet

More Decks by Hidetaka Okamoto (Stripe)

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

  3. 3
    https://stripe.com/jp

    View full-size slide

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

    View full-size slide

  5. 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

    View full-size slide

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

    View full-size slide

  7. 7
    https://microcms.io/

    View full-size slide

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

    View full-size slide

  9. APIを用意
    ジャムジャム!!Jamstack_5

    View full-size slide

  10. フィールドを定義
    ジャムジャム!!Jamstack_5

    View full-size slide

  11. Stripe側で
    商品と料金を登録
    ジャムジャム!!Jamstack_5

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. 実装Tips
    ジャムジャム!!Jamstack_5

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. 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')
    }}>注文する

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide