mcpField
C
checkout-payments

checkout-payments

github.com/santiagoxorDevelopment69 installs
Repository

About checkout-payments

A development skill for implementing checkout and payment flows. It outlines cart and address validation, order creation, MercadoPago integration, payment webhooks, and order status handling.

Key features

  1. 01Cart data validation
  2. 02Shipping address validation
  3. 03Order creation and management
  4. 04MercadoPago payment integration
  5. 05Payment webhooks and status updates

Use cases

  1. 01Implementing order creation during checkout
  2. 02Integrating MercadoPago wallet payments
  3. 03Updating order status from webhooks

Install

Copy the command and run it in a terminal.

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

After installing, type/checkout-paymentsin Claude Code to confirm it loaded.

Details

From the project README

Checkout and Payments

Quick Start

When working with checkout:

  1. Validate cart data before creating order
  2. Validate shipping address
  3. Create order in database
  4. Integrate with MercadoPago
  5. Handle payment webhooks
  6. Update order status

Key Files

  • src/app/checkout/ - Checkout pages
  • src/components/Checkout/ - Checkout components
  • src/lib/integrations/mercadopago/ - MercadoPago integration
  • src/lib/business/orders/ - Order logic
  • src/hooks/useCheckout.ts - Checkout hook

Common Patterns

Create Order
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 });
}
Validate Address
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 Wallet
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}
    />
  );
}

Order States

  • pending_payment - Waiting for payment
  • paid - Paid
  • processing - Processing
  • shipped - Shipped
  • delivered - Delivered
  • cancelled - Cancelled
  • refunded - Refunded

Comments

Markdown supported