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
- 01Cart data validation
- 02Shipping address validation
- 03Order creation and management
- 04MercadoPago payment integration
- 05Payment webhooks and status updates
Use cases
- 01Implementing order creation during checkout
- 02Integrating MercadoPago wallet payments
- 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-paymentsAfter installing, type/checkout-paymentsin Claude Code to confirm it loaded.
Details
From the project READMECheckout and Payments
Quick Start
When working with checkout:
- Validate cart data before creating order
- Validate shipping address
- Create order in database
- Integrate with MercadoPago
- Handle payment webhooks
- Update order status
Key Files
src/app/checkout/- Checkout pagessrc/components/Checkout/- Checkout componentssrc/lib/integrations/mercadopago/- MercadoPago integrationsrc/lib/business/orders/- Order logicsrc/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 paymentpaid- Paidprocessing- Processingshipped- Shippeddelivered- Deliveredcancelled- Cancelledrefunded- Refunded
Comments
Markdown supported