Selección y Comunicación con Magento

Este documento describe el proceso de selección de método de pago y la comunicación con Magento para procesar los pagos.

Flujo de Selección de Método de Pago

1. Listado de Métodos Disponibles

const PaymentMethodsList = () => {
  const { quote } = useMagentoOrderContainer();
  const paymentMethods = quote?.available_payment_methods ?? [];
  
  // Filtrar métodos de pago disponibles
  const availablePaymentMethods = paymentMethods
    .filter((paymentMethod) => paymentMethod.code !== "atrato_paylater");
}

2. Selección del Método

const onSelectPaymentMethod = async (code: string) => {
  // Limpiar configuraciones previas si es necesario
  if (selectedCode === PAYMENT_METHOD_STRIPE) {
    await unsetStripeMonthsFee();
  }
  
  // Actualizar método seleccionado
  setSelectedCode(code);
  
  // Persistir selección
  if (hasLocalStorage()) {
    setItem('payment', code);
  }
}

Comunicación con Magento

1. Estructura Base de Comunicación

interface SetPaymentMethodOnCartInput {
  cart_id: string;
  payment_method: {
    code: string;
    [key: string]: any; // Datos específicos del método
  }
}

2. Servicio de Órdenes

const MagentoOrderService = {
  setPaymentMethod: async (input: SetPaymentMethodOnCartInput) => {
    // Llamada a Magento para establecer método de pago
  },
  
  placeOrder: async (shouldNavigate = true) => {
    // Crear orden en Magento
  }
}

3. Flujo de Datos

1. Selección del Método:

   await onSelectPaymentMethod(paymentCode);

2. Configuración en Magento:

   const setPaymentMethod = async () => {
     const input = {
       cart_id: cartId,
       payment_method: {
         code: paymentCode,
         // Datos específicos del método
       }
     };
     return await MagentoOrderService.setPaymentMethod(input);
   }

3. Procesamiento de Pago:

   const processPayment = async () => {
     try {
       // 1. Bloquear UI
       blockPage();
       
       // 2. Configurar método de pago
       await setPaymentMethod();
       
       // 3. Crear orden
       const order = await placeOrder();
       
       // 4. Tracking
       analytics.track('app:checkout_paymentIntentSuccess', {...});
       
       // 5. Redirección
       if (order?.id) {
         window.location.href = SUCCESS_PAGE;
       }
     } catch (error) {
       handleError(error);
     }
   }

4. Variables y Estado en Magento

• Quote: Estado actual del carrito
• Order: Orden generada
• Payment Information: Información del pago
• Shipping Address: Dirección de envío
• Total Segments: Segmentos de totales

5. Manejo de Errores

const handlePaymentError = async (error) => {
  unblockPage();
  showModalMessage({
    title: 'Error en el pago',
    message: error.message,
    type: 'error'
  });
}