mcpField
C
checkout-payments

checkout-payments

github.com/santiagoxor开发69 次安装
代码仓库

关于 checkout-payments

面向实现结账与支付流程的开发者，整理购物车和地址校验、订单创建及支付状态处理步骤。内容包含 MercadoPago 集成、支付 Webhook 和订单状态示例。

主要功能

  1. 01购物车数据校验
  2. 02配送地址校验
  3. 03创建并管理订单
  4. 04MercadoPago 支付集成
  5. 05支付 Webhook 与状态更新

适用场景

  1. 01实现结账时的订单创建流程
  2. 02接入 MercadoPago 钱包支付
  3. 03根据 Webhook 更新订单状态

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/santiagoxor/pintureria-digital --skill checkout-payments

安装后在 Claude Code 中输入/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 - 结账 Hook

常见模式

创建订单
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 - 已退款

评论

支持 Markdown