checkout-payments

チェックアウトと決済

クイックスタート

チェックアウトを実装する際は、次の手順に従います。

1. 注文を作成する前にカートデータを検証します
2. 配送先住所を検証します
3. データベースに注文を作成します
4. MercadoPago と連携します
5. 決済 Webhook を処理します
6. 注文ステータスを更新します

主なファイル

• src/app/checkout/ - チェックアウトページ
• src/components/Checkout/ - チェックアウトコンポーネント
• src/lib/integrations/mercadopago/ - MercadoPago 連携
• src/lib/business/orders/ - 注文ロジック
• src/hooks/useCheckout.ts - チェックアウトフック

よく使うパターン

注文を作成する

import { createOrder } from '@/lib/business/orders/order-service';
import { createPayment } from '@/lib/integrations/mercadopago';

export async function POST(request: NextRequest) {
  const { items, shippingAddress, paymentMethod } = await request.json();
  
  const order = await createOrder({
    items,
    shippingAddress,
    status: 'pending_payment',
  });
  
  const payment = await createPayment({
    transaction_amount: order.total,
    description: `Orden #${order.id}`,
    payer: {
      email: order.customer_email,
    },
  });
  
  await updateOrder(order.id, {
    payment_id: payment.id,
    payment_status: 'pending',
  });
  
  return NextResponse.json({ order, payment });
}

住所を検証する

import { validateAddress } from '@/lib/business/logistics/address-validation';

const validation = await validateAddress({
  street: 'Av. Corrientes 1234',
  city: 'Buenos Aires',
  postalCode: 'C1043AAX',
  country: 'AR',
});

if (!validation.isValid) {
  return { errors: validation.errors };
}

MercadoPago ウォレット

import { initMercadoPago, Wallet } from '@mercadopago/sdk-react';

function CheckoutPayment() {
  const [paymentData, setPaymentData] = useState(null);
  
  useEffect(() => {
    initMercadoPago('YOUR_PUBLIC_KEY');
  }, []);
  
  return (
    <Wallet
      initialization={{ preferenceId: paymentData?.preference_id }}
      onSubmit={onSubmit}
    />
  );
}

注文ステータス

• pending_payment - 決済待ち
• paid - 決済済み
• processing - 処理中
• shipped - 発送済み
• delivered - 配達済み
• cancelled - キャンセル済み
• refunded - 返金済み