Zenn
🙃

Stripe Checkout (Next.js)

2022/05/24に公開
Web
tech

はじめに

この記事は、備忘録として記述しているので、自分の中で前提となる部分は端折っています。
一様、Next.jsで開発ができる前提で話を進めています。

準備するもの

  • Next.js
  • Stripe

注意

Stripeを触る場合、ほとんどはサーバーでの処理になる。
今回採用しているNext.jsでは、一部サーバー側で発火する機能がある。
(APIRoute, getStaticProps, getStaticPaths, getServerSideProps)

開発

Stripeのインストール

npm install stripe

Stripe Checkoutによる決済処理

開発するもの

  1. フロントからAPIRouteを叩く処理
  2. APIRouteからStripeAPIを叩く処理
pages/index.ts
const Index = () => {
  return (
      <form action="/api/checkout" method="POST" >
        <input type="submit" value="送信" />
      </form>
  );
};

export default Index;
pages/api/checkout.ts
const stripe = require('stripe')(SECRET_KEY);

const Checkout = async (req, res) => {
  if (req.method === "POST") {
    try {
      const session = await stripe.checkout.sessions.create({
        success_url: `${req.headers.origin}/?success=true`,
        cancel_url: `${req.headers.origin}/?canceled=true`,
        mode: "payment",
        line_items: [
          {
            price: Stripeで登録した商品の【　料金ID　】を使用（　「　price_　」から始まるやつ）,
            quantity: 1,
          },
        ],
      });

      res.redirect(303, session.url);
    } catch (error) {
      res.status(500).json(error.message);
    }
  }
};

export default Checkout;

フロントからサブミットすると、Stripe側でURLが発行され、そのURLにリダイレクトしています。
このURLはStripe側で作られるページで、セキュリティを気にしなくいいので簡単。

さいごに

簡単ですね。

Discussion