Saltar al contenido principal

Mercado Pago

Componente Principal​

  • Nombre: MercadopagoPayment
  • Código: mercadopago_adbpayment_checkout_pro

Funcionalidades​

  • Checkout Pro de Mercado Pago
  • Múltiples métodos de pago dentro de la plataforma
  • MSI para tarjetas seleccionadas
  • Manejo de preferencias de pago

Implementación​

Inicialización​

initMercadoPago(MERCADO_PAGO_KEY)
const paymentMethod = 'mercadopago_adbpayment_checkout_pro'

Creación de Preferencia​

const createPreference = async () => {
  // Bloquear página durante el proceso
  blockPage()
  
  // Establecer método de pago
  await setMercadoPagoPaymentMethod()
  
  // Crear orden
  const order = await placeOrder(false)
  
  // Obtener preferencia de MP
  const preference = await getMercadoPagoPreference()
  
  // Tracking de analytics
  analytics.track(
    'app:checkout_paymentIntentSuccess',
    paymentIntentProperties(processId, paymentMethod, quote, {
      order: {
        id: orderId
      }
    })
  )
}

Integración con Magento​

Establecer Método de Pago​

const setMercadoPagoPaymentMethod = async () => {
  const input: SetPaymentMethodOnCartInput = {
    cart_id: cartId,
    payment_method: {
      code: PAYMENT_METHOD_MERCADOPAGO
    }
  };
  return await MagentoOrderService.setPaymentMethod(input);
}

Obtener Preferencia​

const getMercadoPagoPreference = async () => {
  // Obtiene la preferencia de pago desde Magento/MP
}

Comunicación con Backend​

  • La gestión de webhooks y notificaciones IPN se realiza directamente en Magento
  • El módulo de Mercado Pago en Magento maneja las notificaciones de pago y actualizaciones de estado
  • El frontend solo se encarga de:
    • Inicialización del Checkout Pro
    • Creación de preferencias de pago
    • Redirección del usuario al checkout de Mercado Pago
    • Manejo de respuesta post-pago

Variables de Configuración​

const MERCADO_PAGO_KEY = process.env.NEXT_PUBLIC_MP_PUBLIC_KEY
const MP_OPTIONS = {
  locale: 'es-MX',
  advancedOptions: {
    checkoutOptions: {
      theme: {
        headerColor: '#000000',
        elements: {
          formBackgroundColor: '#FFFFFF'
        }
      }
    }
  }
}