Stripeの契約ダッシュボードをNext.jsに埋め込む :備忘録

Stripe側の準備

userにmanage subscriptionの権限を付与しておく
与えたい契約の選択肢を追加しておく

ページ側

  const router = useRouter();
  const loadPortal = async () => {
    const { data } = await axios.get("/api/portal");
    router.push(data.url);
  };
  return (
    <div>
      <button onClick={loadPortal}>サブスクの管理ページにジャンプする</button>
    </div>
  );

api側

    const session = await stripe.billingPortal.sessions.create({
      customer: stripe_customer, // stripeのcustomer.id
      return_url: http://localhost:3000, // dev
    });
    res.send({
      url: session.url,
    });