Next.jsでショップを作る #4 チェックアウトと決済シミュレーション

const SUCCESS_RATE = 0.8;
const NETWORK_DELAY_MS = 800;

export async function processPayment({ amount }) {
  await new Promise((resolve) => setTimeout(resolve, NETWORK_DELAY_MS));

  if (Math.random() > SUCCESS_RATE) {
    return { ok: false, error: '決済が拒否されました。もう一度お試しください。' };
  }

  const transactionId = `tx_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
  return { ok: true, transactionId, amount };
}

const orders = new Map();

export function createOrderId() {
  return `ord_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
}

export function saveOrder(order) {
  orders.set(order.id, order);
}

export function getOrder(orderId) {
  return orders.get(orderId) ?? null;
}

'use server';

import { createOrderId, saveOrder } from '../lib/orders';
import { processPayment } from '../lib/payments';

export async function checkoutAction(_prevState, formData) {
  const name = String(formData.get('name') ?? '').trim();
  const phone = String(formData.get('phone') ?? '').trim();
  const address = String(formData.get('address') ?? '').trim();
  const itemsJson = String(formData.get('items') ?? '[]');

  if (!name || !phone || !address) {
    return { ok: false, error: '配送情報をすべて入力してください。' };
  }

  let items;
  try {
    items = JSON.parse(itemsJson);
  } catch {
    return { ok: false, error: 'カートのデータを読み取れませんでした。' };
  }

  if (!Array.isArray(items) || items.length === 0) {
    return { ok: false, error: 'カートが空です。' };
  }

  const total = items.reduce((sum, it) => sum + it.price * it.quantity, 0);

  const payment = await processPayment({ amount: total });
  if (!payment.ok) {
    return { ok: false, error: payment.error };
  }

  const order = {
    id: createOrderId(),
    createdAt: new Date().toISOString(),
    items,
    total,
    shipping: { name, phone, address },
    status: 'paid',
  };

  saveOrder(order);

  return { ok: true, orderId: order.id };
}

'use client';

import { useActionState, useEffect } from 'react';
import { useFormStatus } from 'react-dom';
import { useRouter } from 'next/navigation';
import { useCart } from '../components/CartProvider';
import { formatPrice } from '../lib/format';
import { checkoutAction } from './actions';

const INITIAL_STATE = { ok: false, error: null, orderId: null };

export default function CheckoutForm() {
  const { items, totalPrice, clear } = useCart();
  const router = useRouter();
  const [state, formAction] = useActionState(checkoutAction, INITIAL_STATE);

  useEffect(() => {
    if (state.ok && state.orderId) {
      clear();
      router.push(`/orders/${state.orderId}`);
    }
  }, [state, clear, router]);

  return (
    <form action={formAction} className="space-y-6">
      <input type="hidden" name="items" value={JSON.stringify(items)} />

      <section>
        <h2 className="text-lg font-semibold">配送情報</h2>
        <div className="mt-4 space-y-3">
          <LabeledInput name="name" label="名前" autoComplete="name" />
          <LabeledInput name="phone" label="電話番号" autoComplete="tel" type="tel" />
          <LabeledInput name="address" label="住所" autoComplete="street-address" />
        </div>
      </section>

      <section>
        <h2 className="text-lg font-semibold">注文サマリー</h2>
        <ul className="mt-2 divide-y border-y text-sm">
          {items.map((it) => (
            <li key={it.slug} className="flex justify-between py-2">
              <span>{it.name} × {it.quantity}</span>
              <span>{formatPrice(it.price * it.quantity)}</span>
            </li>
          ))}
        </ul>
        <div className="mt-3 flex justify-between text-lg font-semibold">
          <span>合計</span>
          <span>{formatPrice(totalPrice)}</span>
        </div>
      </section>

      {state.error && (
        <div className="rounded border border-red-300 bg-red-50 px-3 py-2 text-sm text-red-700">
          {state.error}
        </div>
      )}

      <SubmitButton />
    </form>
  );
}

function LabeledInput({ name, label, type = 'text', autoComplete }) {
  return (
    <label className="block">
      <span className="block text-sm text-gray-700">{label}</span>
      <input
        name={name}
        type={type}
        autoComplete={autoComplete}
        required
        className="mt-1 w-full rounded border border-gray-300 px-3 py-2"
      />
    </label>
  );
}

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button
      type="submit"
      disabled={pending}
      className="w-full rounded-md bg-black px-4 py-3 text-white disabled:bg-gray-400"
    >
      {pending ? '決済処理中…' : '決済する'}
    </button>
  );
}

import CheckoutForm from './CheckoutForm';

export const metadata = {
  title: '決済',
  description: '配送情報を入力して決済を進めます。',
};

export default function CheckoutPage() {
  return (
    <main className="mx-auto max-w-2xl px-4 py-8">
      <h1 className="text-2xl font-bold">決済</h1>
      <div className="mt-6">
        <CheckoutForm />
      </div>
    </main>
  );
}