Stripe API を試してみる

npx create-next-app \
  --typescript \
  --eslint \
  --src-dir \
  --import-alias "@/*" \
  --use-npm \
  hello-stripe

cd hello-stripe
npm run dev

npm install --save stripe @stripe/stripe-js

touch .env.local

STRIPE_SECRET_KEY="sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"

touch src/pages/api/checkout_session.ts

import type { NextApiRequest, NextApiResponse } from "next";
import { Stripe } from "stripe";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method === "POST") {
    try {
      const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
        apiVersion: "2022-11-15",
      });

      const session = await stripe.checkout.sessions.create({
        line_items: [
          {
            price: "pr_1234",
            quantity: 1,
          },
        ],
        mode: "payment",
        success_url: `${req.headers.origin}/?success=true`,
        cancel_url: `${req.headers.origin}/?canceled=true`,
      });

      if (session.url) {
        res.redirect(303, session.url);
      } else {
        throw new Error("!session.url");
      }
    } catch (err) {
      res.status(500).send(err);
    }
  } else {
    res.setHeader("Allow", "POST");
    res.status(405).end("Method Not Allowed");
  }
}

import { loadStripe } from "@stripe/stripe-js";
import { useEffect } from "react";

const stripePromise = loadStripe(
  process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!
);

export default function PreviewPage() {
  useEffect(() => {
    const query = new URLSearchParams(window.location.search);

    if (query.get("success")) {
      console.log("Order placed!");
    }

    if (query.get("canceled")) {
      console.log("Order canceled");
    }
  });

  return (
    <form action="/api/checkout_sessions" method="POST">
      <section>
        <button type="submit" role="link">
          Checkout
        </button>
      </section>
      <style jsx>
        {`
          section {
            background: #ffffff;
            display: flex;
            flex-direction: column;
            width: 400px;
            height: 112px;
            border-radius: 6px;
            justify-content: space-between;
          }
          button {
            height: 36px;
            background: #556cd6;
            border-radius: 4px;
            color: white;
            border: 0;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
          }
          button:hover {
            opacity: 0.8;
          }
        `}
      </style>
    </form>
  );
}

// import '@/styles/globals.css'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

STRIPE_SECRET_KEY="sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"

STRIPE_WEBHOOK_SECRET="whsec_12345"

mv src/pages/api/checkout_session.ts src/pages/api/checkout_sessions.ts

{
  "type": "StripeInvalidRequestError",
  "raw": {
    "message": "The price `price_1MftX5FAkO08wdKWvnR5ektn` does not have a `tax_behavior` set which is required for automatic tax computation. Please visit https://stripe.com/docs/tax/products-prices-tax-categories-tax-behavior#tax-behavior for more information.",
    "request_log_url": "https://dashboard.stripe.com/test/logs/req_AwtZAUELRl4bXT?t=1677459665",
    "type": "invalid_request_error",
    "headers": {
      "server": "nginx",
      "date": "Mon, 27 Feb 2023 01:01:05 GMT",
      "content-type": "application/json",
      "content-length": "419",
      "connection": "keep-alive",
      "access-control-allow-credentials": "true",
      "access-control-allow-methods": "GET, POST, HEAD, OPTIONS, DELETE",
      "access-control-allow-origin": "*",
      "access-control-expose-headers": "Request-Id, Stripe-Manage-Version, X-Stripe-External-Auth-Required, X-Stripe-Privileged-Session-Required",
      "access-control-max-age": "300",
      "cache-control": "no-cache, no-store",
      "idempotency-key": "aec9ead6-8236-4fbd-87bd-e111819b1829",
      "original-request": "req_AwtZAUELRl4bXT",
      "request-id": "req_AwtZAUELRl4bXT",
      "stripe-should-retry": "false",
      "stripe-version": "2022-11-15",
      "strict-transport-security": "max-age=63072000; includeSubDomains; preload"
    },
    "statusCode": 400,
    "requestId": "req_AwtZAUELRl4bXT"
  },
  "rawType": "invalid_request_error",
  "headers": {
    "server": "nginx",
    "date": "Mon, 27 Feb 2023 01:01:05 GMT",
    "content-type": "application/json",
    "content-length": "419",
    "connection": "keep-alive",
    "access-control-allow-credentials": "true",
    "access-control-allow-methods": "GET, POST, HEAD, OPTIONS, DELETE",
    "access-control-allow-origin": "*",
    "access-control-expose-headers": "Request-Id, Stripe-Manage-Version, X-Stripe-External-Auth-Required, X-Stripe-Privileged-Session-Required",
    "access-control-max-age": "300",
    "cache-control": "no-cache, no-store",
    "idempotency-key": "aec9ead6-8236-4fbd-87bd-e111819b1829",
    "original-request": "req_AwtZAUELRl4bXT",
    "request-id": "req_AwtZAUELRl4bXT",
    "stripe-should-retry": "false",
    "stripe-version": "2022-11-15",
    "strict-transport-security": "max-age=63072000; includeSubDomains; preload"
  },
  "requestId": "req_AwtZAUELRl4bXT",
  "statusCode": 400
}

// Set your secret key. Remember to switch to your live secret key in production.
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = require('stripe')('sk_test_51MerCAFAkO08wdKW2sXp9JxKMjB1P3cSWOMrFolAUDYR8cJRMLxKqBcedSCXbqtb7XxzbfyixfJkItMX9AhhGPFc00aDY9NYQj');

const session = await stripe.checkout.sessions.create({
  payment_method_types: ['card'],
  line_items: [{
    price: '{{PRICE_ID}}',
    quantity: 1,
    tax_rates: ['{{TAX_RATE_ID}}'],
  }],
  mode: 'payment',
  success_url: 'https://example.com/success',
  cancel_url: 'https://example.com/cancel',
});

import type { NextApiRequest, NextApiResponse } from "next";
import { Stripe } from "stripe";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method === "POST") {
    try {
      const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
        apiVersion: "2022-11-15",
      });

      const session = await stripe.checkout.sessions.create({
        customer_email: "susukida@example.com",
        line_items: [
          {
            price: "price_1MftX5FAkO08wdKWvnR5ektn",
            quantity: 1,
            tax_rates: [process.env.TAX_RATE_ID!],
          },
        ],
        mode: "payment",
        success_url: `${req.headers.origin}/?success=true`,
        cancel_url: `${req.headers.origin}/?canceled=true`,
      });

      if (session.url) {
        res.redirect(303, session.url);
      } else {
        throw new Error("!session.url");
      }
    } catch (err) {
      res.status(500).send(err);
    }
  } else {
    res.setHeader("Allow", "POST");
    res.status(405).end("Method Not Allowed");
  }
}

npx create-next-app \
  --typescript \
  --eslint \
  --src-dir \
  --import-alias "@/*" \
  --use-npm \
  hello-stripe-billing
cd hello-stripe-billing

export default function ProductDisplay() {
  return (
    <section>
      <div className="product">
        <div className="description">
          <h3>Starter plan</h3>
          <h5>&yen; 1,000 / month</h5>
        </div>
      </div>
      <form action="/api/create-checkout-session" method="POST">
        <input type="hidden" name="lookup_key" value="premium-plan" />
        <button id="checkout-and-portal-button" type="submit">
          Checkout
        </button>
      </form>
    </section>
  )
}

// import '@/styles/globals.css'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

import { useEffect, useState } from "react";

function ProductDisplay() {
  return (
    <section>
      <div className="product">
        <div className="description">
          <h3>Premium plan</h3>
          <h5>&yen; 1,000 / month</h5>
        </div>
      </div>
      <form action="/api/create-checkout-session" method="POST">
        <input type="hidden" name="lookup_key" value="premium-plan" />
        <button id="checkout-and-portal-button" type="submit">
          Checkout
        </button>
      </form>
    </section>
  );
}

function SuccessDisplay({ sessionId }: { sessionId: string }) {
  return (
    <section>
      <div className="product Box-root">
        <div className="description Box-root">
          <h3>Subscription to premium plan successful!</h3>
        </div>
      </div>
      <form action="/api/create-portal-session" method="POST">
        <input
          type="hidden"
          id="session-id"
          name="session_id"
          value={sessionId}
        />
        <button id="checkout-and-portal-button" type="submit">
          Manage your billing information
        </button>
      </form>
    </section>
  );
}

function Message({ message }: { message: string }) {
  return (
    <section>
      <p>{message}</p>
    </section>
  );
}

export default function App() {
  const [message, setMessage] = useState("");
  const [success, setSuccess] = useState(false);
  const [sessionId, setSessionId] = useState("");

  useEffect(() => {
    const query = new URLSearchParams(window.location.search);

    if (query.get("success")) {
      setSuccess(true);
      setSessionId(query.get("session_id")!);
    }

    if (query.get("canceled")) {
      setSuccess(false);
      setMessage(
        "Order canceled -- continue to shop around and checkout when you're ready."
      );
    }
  }, [sessionId]);

  if (!success && message === "") {
    return <ProductDisplay></ProductDisplay>;
  } else if (success && sessionId !== "") {
    return <SuccessDisplay sessionId={sessionId}></SuccessDisplay>;
  } else {
    return <Message message={message}></Message>;
  }
}

npm install --save stripe

touch src/pages/api/create-checkout-session.ts .env.local

import type { NextApiRequest, NextApiResponse } from "next";
import { Stripe } from "stripe";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
    apiVersion: "2022-11-15",
  });

  const prices = await stripe.prices.list({
    lookup_keys: [req.body.lookup_key],
    expand: ["data.product"],
  });

  const session = await stripe.checkout.sessions.create({
    billing_address_collection: "auto",
    line_items: [
      {
        price: prices.data[0].id,
        quantity: 1,
      },
    ],
    mode: "subscription",
    success_url:
      process.env.BASE_URL! + "/?success=true&session_id={CHECKOUT_SESSION_ID}",
    cancel_url: process.env.BASE_URL! + "/?canceled=true",
  });

  res.redirect(303, session.url!);
}

BASE_URL="http://localhost:3000"
STRIPE_SECRET_KEY="sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"

cs_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

touch src/pages/api/create-portal-session.ts

import type { NextApiRequest, NextApiResponse } from "next";
import { Stripe } from "stripe";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
    apiVersion: "2022-11-15",
  });

  const sessionId: string = req.body.session_id;
  const checkoutSession = await stripe.checkout.sessions.retrieve(sessionId);

  const returnUrl = process.env.BASE_URL!;
  const portalSession = await stripe.billingPortal.sessions.create({
    customer: checkoutSession.customer as string,
    return_url: returnUrl,
  });

  res.redirect(303, portalSession.url);
}

brew install stripe/stripe-cli/stripe

stripe login

stripe listen --forward-to localhost:3000/api/webhook

> Ready! You are using Stripe API Version [2022-11-15]. Your webhook signing secret is whsec_12345 (^C to quit)

stripe trigger payment_intent.succeeded

2023-03-02 08:25:14   --> charge.succeeded [evt_3Mgz1NFAkO08wdKW1UfZkhi3]
2023-03-02 08:25:14            [ERROR] Failed to POST: Post "http://localhost:3000/api/webhook": dial tcp [::1]:3000: connect: connection refused

2023-03-02 08:25:15   --> payment_intent.succeeded [evt_3Mgz1NFAkO08wdKW1YiX2aPk]
2023-03-02 08:25:15            [ERROR] Failed to POST: Post "http://localhost:3000/api/webhook": dial tcp [::1]:3000: connect: connection refused

2023-03-02 08:25:15   --> payment_intent.created [evt_3Mgz1NFAkO08wdKW1DGhB8re]
2023-03-02 08:25:15            [ERROR] Failed to POST: Post "http://localhost:3000/api/webhook": dial tcp [::1]:3000: connect: connection refused

touch src/pages/api/webhook.ts

import type { NextApiRequest, NextApiResponse } from "next";
import getRawBody from "raw-body";
import { Stripe } from "stripe";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
    apiVersion: "2022-11-15",
  });

  const endpointSecret = process.env.STRIPE_WEBHOOK_SECRET!;
  let event;

  const requestBody = await getRawBody(req);

  if (endpointSecret) {
    const signature = req.headers["stripe-signature"] as string;

    try {
      event = stripe.webhooks.constructEvent(
        requestBody,
        signature,
        endpointSecret
      );
    } catch (err) {
      if (err instanceof Error) {
        console.error("Webhook signature verification failed.", err.message);
      }

      return res.status(400).end();
    }
  }

  console.log(requestBody.toString());

  res.status(200).end();
}

export const config = {
  api: {
    bodyParser: false,
  },
};

STRIPE_WEBHOOK_SECRET="whsec_12345"

npm run dev

stripe trigger payment_intent.succeeded

2023-03-02 08:51:00   --> charge.succeeded [evt_3MgzQGFAkO08wdKW2JXLr4Bb]
2023-03-02 08:51:00   --> payment_intent.succeeded [evt_3MgzQGFAkO08wdKW2Wl7bgDL]
2023-03-02 08:51:00   --> payment_intent.created [evt_3MgzQGFAkO08wdKW2BXOEviC]
2023-03-02 08:51:00  <--  [200] POST http://localhost:3000/api/webhook [evt_3MgzQGFAkO08wdKW2Wl7bgDL]
2023-03-02 08:51:00  <--  [200] POST http://localhost:3000/api/webhook [evt_3MgzQGFAkO08wdKW2JXLr4Bb]
2023-03-02 08:51:00  <--  [200] POST http://localhost:3000/api/webhook [evt_3MgzQGFAkO08wdKW2BXOEviC]

import type { NextApiRequest, NextApiResponse, PageConfig } from "next";
import getRawBody from "raw-body";
import { Stripe } from "stripe";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
    apiVersion: "2022-11-15",
  });

  let event: Stripe.Event;

  const requestBody = await getRawBody(req);
  const signature = req.headers["stripe-signature"] as string;
  const endpointSecret = process.env.STRIPE_WEBHOOK_SECRET!;

  try {
    event = stripe.webhooks.constructEvent(
      requestBody,
      signature,
      endpointSecret
    );
  } catch (err) {
    console.error(
      "Webhook signature verification failed.",
      err instanceof Error ? err.message : err
    );

    return res.status(400).end();
  }

  if (event.type.startsWith("customer.subscription.")) {
    const subscription = event.data.object as Stripe.Subscription;
    const status = subscription.status;

    console.log(`Subscription status is ${status}`);
  } else {
    console.log(`Unhandled event type ${event.type}`);
  }

  res.status(200).end();
}

export const config: PageConfig = {
  api: {
    bodyParser: false,
  },
};

stripe trigger subscription_schedule.created

Unhandled event type payment_method.attached
Unhandled event type customer.source.created
Unhandled event type customer.created
Unhandled event type product.created
Unhandled event type plan.created
Unhandled event type price.created
Unhandled event type subscription_schedule.created
Unhandled event type customer.updated
Unhandled event type invoice.created
Subscription status is active

Unhandled event type payment_method.attached
Unhandled event type customer.source.created
Unhandled event type customer.created
Unhandled event type product.created
Unhandled event type plan.created
Unhandled event type price.created
Unhandled event type subscription_schedule.created
Unhandled event type customer.updated
Subscription status is active
Unhandled event type invoice.created

npx create-next-app --typescript --eslint --src-dir --import-alias "@/*" --use-npm stripe-usage-based
cd stripe-usage-based
npm install --save stripe
touch src/pages/api/create_session.ts .env.local
npm run dev

// import '@/styles/globals.css'
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default function Home() {
  return (
    <>
      <h1>Stripe Usage Based</h1>
      <form action="/api/create-session" method="POST">
        <button type="submit">Checkout</button>
      </form>
    </>
  );
}

import type { NextApiRequest, NextApiResponse } from "next";
import { Stripe } from "stripe";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
    apiVersion: "2022-11-15",
  });

  const session = await stripe.checkout.sessions.create({
    mode: "subscription",
    line_items: [
      {
        price: process.env.STRIPE_PRICE_ID,
      },
    ],
    success_url: process.env.BASE_URL + "/?success=true",
    cancel_url: process.env.BASE_URL + "/?canceled=true",
  });

  res.redirect(303, session.url!);
}

BASE_URL="http://localhost:3000"
STRIPE_SECRET_KEY="sk_test_12345"
STRIPE_PRICE_ID="price_12345"

npx create-next-app --typescript --eslint --src-dir --import-alias "@/*" --use-npm hello-stripe-0306
cd hello-stripe-0306
npm install --save stripe
touch src/pages/api/create-session.ts .env.local
npm run dev

export default function Home() {
  return (
    <>
      <h1>Hello Stripe 0306</h1>
      <form action="/api/create-session" method="POST">
        <button type="submit">Checkout</button>
      </form>
    </>
  );
}

import type { NextApiRequest, NextApiResponse } from "next";
import { Stripe } from "stripe";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
    apiVersion: "2022-11-15",
  });

  const session = await stripe.checkout.sessions.create({
    mode: "subscription",
    line_items: [
      { price: process.env.STRIPE_PRICE_ID! },
      { price: process.env.STRIPE_CANCEL_PRICE_ID! },
    ],
    success_url: process.env.BASE_URL! + "/?success=true",
    cancel_url: process.env.BASE_URL! + "/?canceled=true",
  });

  res.redirect(303, session.url!);
}

BASE_URL="http://localhost:3000"
STRIPE_SECRET_KEY="sk_test_12345678"
STRIPE_PRICE_ID="price_1234"
STRIPE_CANCEL_PRICE_ID="price_5678"

STRIPE_CUSTOMER_ID="cus_1234"

touch src/pages/api/create-portal-session.ts

import type { NextApiRequest, NextApiResponse } from "next";
import { Stripe } from "stripe";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
    apiVersion: "2022-11-15",
  });

  const session = await stripe.billingPortal.sessions.create({
    customer: process.env.STRIPE_CUSTOMER_ID!,
    return_url: process.env.BASE_URL! + "/?success=true",
  });

  res.redirect(303, session.url!);
}

export default function Home() {
  return (
    <>
      <h1>Hello Stripe 0306</h1>
      <form action="/api/create-session" method="POST">
        <button type="submit">Checkout</button>
      </form>
      <form action="/api/create-portal-session" method="POST">
        <button type="submit">Manage</button>
      </form>
    </>
  );
}

import type { NextApiRequest, NextApiResponse } from "next";
import { Stripe } from "stripe";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
    apiVersion: "2022-11-15",
  });

  const session = await stripe.checkout.sessions.create({
    mode: "subscription",
    customer: process.env.STRIPE_CUSTOMER_ID!, // この行を追加しました。
    line_items: [
      { price: process.env.STRIPE_PRICE_ID! },
      { price: process.env.STRIPE_CANCEL_PRICE_ID! },
    ],
    success_url: process.env.BASE_URL! + "/?success=true",
    cancel_url: process.env.BASE_URL! + "/?canceled=true",
  });

  res.redirect(303, session.url!);
}

npm install --save-dev jest @types/jest ts-jest
npx ts-jest config:init # jest.config.js を生成します。
mkdir tests
touch tests/usage-report.test.ts

{
  "scripts": {
    "test": "jest"
  }
}

test("Stripe API を使用して使用量を報告します。", () => {});

{
  "compilerOptions": {
    "isolatedModules": false
  }
}

 PASS  tests/usage-report.test.ts
  ✓ Stripe API を使用して使用量を報告します。

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.251 s, estimated 1 s
Ran all test suites.

import Stripe from "stripe";

test("Stripe API を使用して使用量を報告します。", async () => {
  const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
    apiVersion: "2022-11-15",
  });

  const subscriptionItemId = process.env.STRIPE_SUBSCRIPTION_ITEM_ID!;
  const response = await stripe.subscriptionItems.createUsageRecord(
    subscriptionItemId,
    {
      quantity: 1,
      action: "set",
      timestamp: "now",
    }
  );

  console.log(JSON.stringify(response, null, 2));
});

STRIPE_SUBSCRIPTION_ITEM_ID="si_1234"

npm install --save-dev dotenv

DOTENV_CONFIG_PATH=.env.local npm test -- --setupFiles dotenv/config

  console.log
    {
      "id": "mbur_1MiSarFAkO08wdKWkUoLDDtp",
      "object": "usage_record",
      "livemode": false,
      "quantity": 1,
      "subscription_item": "si_NTOZU10GrMrPuF",
      "timestamp": 1678065121
    }

      at tests/usage-report.test.ts:18:11

 PASS  tests/usage-report.test.ts
  ✓ Stripe API を使用して使用量を報告します。 (486 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.351 s, estimated 4 s
Ran all test suites.

  const session = await stripe.checkout.sessions.create({
    billing_address_collection: 'auto',
    line_items: [
      {
        price: prices.data[0].id,
        // For metered billing, do not pass quantity
        quantity: 1,

      },
    ],
    mode: 'subscription',
    success_url: `${YOUR_DOMAIN}/?success=true&session_id={CHECKOUT_SESSION_ID}`,
    cancel_url: `${YOUR_DOMAIN}?canceled=true`,
  });

app.post('/create-portal-session', async (req, res) => {
  // For demonstration purposes, we're using the Checkout session to retrieve the customer ID.
  // Typically this is stored alongside the authenticated user in your database.
  const { session_id } = req.body;
  const checkoutSession = await stripe.checkout.sessions.retrieve(session_id);

  // This is the url to which the customer will be redirected when they are done
  // managing their billing with the portal.
  const returnUrl = YOUR_DOMAIN;

  const portalSession = await stripe.billingPortal.sessions.create({
    customer: checkoutSession.customer,
    return_url: returnUrl,
  });

  res.redirect(303, portalSession.url);
});

npx create-next-app --typescript --eslint --src-dir --import-alias "@/*" --use-npm hello-stripe-0307
cd hello-stripe-0307
npm install --save stripe
touch src/pages/api/create-checkout-session.ts .env.local
npm run dev

import { GetServerSideProps } from "next";
import Stripe from "stripe";

type Data = {
  customer: string | null;
};

export default function Home({ customer }: Data) {
  return (
    <>
      <h1>Hello Stripe 0307</h1>
      <form action="/api/create-checkout-session" method="POST">
        <button type="submit">Checkout</button>
      </form>
      {customer && (
        <dl>
          <dt>Customer ID</dt>
          <dd>{customer}</dd>
        </dl>
      )}
    </>
  );
}

export const getServerSideProps: GetServerSideProps<Data> = async (context) => {
  const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
    apiVersion: "2022-11-15",
  });

  const sessionId = context.query.session_id;
  let customer: string | null = null;

  if (sessionId && typeof sessionId === "string") {
    const checkoutSession = await stripe.checkout.sessions.retrieve(sessionId);
    if (typeof checkoutSession.customer === "string") {
      customer = checkoutSession.customer;
    }
  }

  return {
    props: {
      customer,
    },
  };
};

import type { NextApiRequest, NextApiResponse } from "next";
import { Stripe } from "stripe";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
    apiVersion: "2022-11-15",
  });

  const checkoutSession = await stripe.checkout.sessions.create({
    mode: "payment",
    line_items: [
      {
        price: process.env.STRIPE_PRICE_ID!,
        quantity: 1,
      },
    ],
    success_url: process.env.BASE_URL + "/?session_id={CHECKOUT_SESSION_ID}",
    // 常に顧客情報を作成するように指定しています。
    // 顧客情報が作成されなかった場合は index.tsx で顧客 ID が表示されません。
    customer_creation: "always",
  });

  res.redirect(303, checkoutSession.url!);
}

BASE_URL="http://localhost:3000"
STRIPE_SECRET_KEY="sk_test_12345678"
STRIPE_PRICE_ID="price_1234"

import type { NextApiRequest, NextApiResponse } from "next";
import { Stripe } from "stripe";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
    apiVersion: "2022-11-15",
  });

  const checkoutSession = await stripe.checkout.sessions.create({
    mode: "payment",
    line_items: [
      {
        price: process.env.STRIPE_PRICE_ID!,
        quantity: 1,
      },
    ],
    success_url: process.env.BASE_URL + "/?session_id={CHECKOUT_SESSION_ID}",
    // customer_creation: "always",
  });

  res.redirect(303, checkoutSession.url!);
}

import { GetServerSideProps } from "next";
import Stripe from "stripe";

type Data = {
  customer: string | null;
};

export default function Home({ customer }: Data) {
  return (
    <>
      <h1>Hello Stripe 0307</h1>
      <form action="/api/create-checkout-session" method="POST">
        <button type="submit">Checkout</button>
      </form>
      {customer && (
        <dl>
          <dt>Customer ID</dt>
          <dd>{customer}</dd>
        </dl>
      )}
    </>
  );
}

export const getServerSideProps: GetServerSideProps<Data> = async (context) => {
  const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
    apiVersion: "2022-11-15",
  });

  const sessionId = context.query.session_id;
  let customer: string | null = null;

  if (sessionId && typeof sessionId === "string") {
    const checkoutSession = await stripe.checkout.sessions.retrieve(sessionId);
    const paymentIntentId = checkoutSession.payment_intent;

    if (paymentIntentId && typeof paymentIntentId === "string") {
      const paymentIntent = await stripe.paymentIntents.retrieve(
        paymentIntentId,
        {
          expand: ["customer"],
        }
      );

      console.log(paymentIntent.customer); // null が表示されます。
    }
  }

  return {
    props: {
      customer,
    },
  };
};

import type { NextApiRequest, NextApiResponse } from "next";
import { Stripe } from "stripe";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
    apiVersion: "2022-11-15",
  });

  const checkoutSession = await stripe.checkout.sessions.create({
    mode: "setup",
    payment_method_types: ["card"],
    success_url: process.env.BASE_URL + "/?session_id={CHECKOUT_SESSION_ID}",
  });

  res.redirect(303, checkoutSession.url!);
}

npx create-next-app --typescript --eslint --src-dir --import-alias "@/*" --use-npm hello-stripe-0308
cd hello-stripe-0308
npm install --save stripe
touch src/pages/api/create-customer.ts src/pages/api/create-checkout-session.ts src/pages/api/create-payment-intent.ts .env.local
npm run dev

export default function Home() {
  return (
    <>
      <h1>Hello Stripe 0308</h1>
      <form action="/api/create-customer" method="POST">
        <button type="submit">Create Customer</button>
      </form>
    </>
  );
}

import type { NextApiRequest, NextApiResponse } from "next";
import { Stripe } from "stripe";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
    apiVersion: "2022-11-15",
  });

  const createCustomerResponse = await stripe.customers.create();

  console.log(JSON.stringify(createCustomerResponse, null, 2));

  res.status(200).send("OK");
}

STRIPE_SECRET_KEY="sk_test_12345678"

STRIPE_CUSTOMER_ID="cus_NU8LauqJsLCoDl"

export default function Home() {
  return (
    <>
      <h1>Hello Stripe 0308</h1>
      <form action="/api/create-customer" method="POST">
        <button type="submit">Create Customer</button>
      </form>
      <form action="/api/create-checkout-session" method="POST">
        <button type="submit">Create Checkout Session</button>
      </form>
    </>
  );
}

import type { NextApiRequest, NextApiResponse } from "next";
import { Stripe } from "stripe";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
    apiVersion: "2022-11-15",
  });

  const checkoutSession = await stripe.checkout.sessions.create({
    mode: "payment",
    customer: process.env.STRIPE_CUSTOMER_ID!,
    line_items: [{ price: process.env.STRIPE_PRICE_ID!, quantity: 1 }],
    success_url: process.env.BASE_URL + "/",
    payment_method_options: {
      card: {
        setup_future_usage: "off_session",
      },
    },
  });

  if (!checkoutSession.url) {
    throw new Error("Failed to create checkout session");
  }

  res.redirect(checkoutSession.url);
}

BASE_URL="http://localhost:3000"
STRIPE_SECRET_KEY="sk_test_12345678"
STRIPE_CUSTOMER_ID="cus_1234"
STRIPE_PRICE_ID="price_123456"

export default function Home() {
  return (
    <>
      <h1>Hello Stripe 0308</h1>
      <form action="/api/create-customer" method="POST">
        <button type="submit">Create Customer</button>
      </form>
      <form action="/api/create-checkout-session" method="POST">
        <button type="submit">Create Checkout Session</button>
      </form>
      <form action="/api/create-payment-intent" method="POST">
        <button type="submit">Create Payment Intent</button>
      </form>
    </>
  );
}

import type { NextApiRequest, NextApiResponse } from "next";
import { Stripe } from "stripe";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
    apiVersion: "2022-11-15",
  });

  const paymentIntent = await stripe.paymentIntents.create({
    // 金額
    amount: 100,
    // 通貨
    currency: "jpy",
    // 顧客
    customer: process.env.STRIPE_CUSTOMER_ID!,
    // 支払い方法
    payment_method: process.env.STRIPE_PAYMENT_METHOD!,
    // 明細書表記
    statement_descriptor: "Lorem Ipsum / ロレムイプサム",
    // 説明
    description: "ここに説明が入ります。",
    // 請求をすぐに実行するかどうか
    confirm: true,
  });

  console.log(JSON.stringify(paymentIntent, null, 2));

  res.status(200).send("OK");
}

STRIPE_PAYMENT_METHOD="pm_1MjAS2FAkO08wdKWHOXN7u0E"