Stripeを使ってブログサイトに決済機能をつける[Nextjs]

import Stripe from 'stripe';
const stripe = new Stripe(process.env.NEXT_STRIPE_SECRET_KEY);
export default async function handler(req, res) {
  if (req.method === 'POST') {
    try {
        const session = await stripe.checkout.sessions.create({
            line_items: [
                {
                    price: req.body?.priceId, // Stripeのダッシュボードの商品ページから確認できる
                    quantity: 1,
                },
            ],
            mode: 'payment', // or subscription
            success_url: 'http://localhost:3000',
            cancel_url: 'http://localhost:3000',
        });
        res.redirect(303, session.url)
    } catch (err) {
        res.status(500).json(err.message);
    }
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
}

pages/product.jsにformタグを含める

getStaticProps関数内でStripeから商品データを取得し、それをフォーム内のタグにはめ込んでいく

// 本来はサーバーから読み込むようにする
import Stripe from 'stripe';
const stripe = new Stripe(process.env.NEXT_STRIPE_SECRET_KEY);

...

export default function Product({ prices, globalData }) {
  return (
    ...
      <form action="/api/checkout" method="POST">
        <div>
          <label htmlFor="priceId">商品</label>
          <input name="priceId" id="priceId" defaultValue={prices[0].id} />
          <button type="submit" role="link">
            Checkout
          </button>
        </div>
      </form>

    ...
}

...

export const getStaticProps = async () => {
  const globalData = getGlobalData();
  const prices = await stripe.prices.list({
    active: true,
    limit: 10, // default = 10
  });

  return { props: { prices: prices.data, globalData } };
}

これで決済機能をつけることができた

Stripeを使ってブログサイトに決済機能をつける[Nextjs]

目次

環境

インストールパッケージ

プログラムを書いていく

Tags