Saltar al contenido principal

PayPal

Componente Principal​

  • Nombre: PaypalPayment
  • Código: paypal_express

Funcionalidades​

  • Integración con PayPal Express Checkout
  • Soporte para cuenta PayPal y tarjetas
  • Proceso de pago simplificado
  • Manejo de reembolsos

Implementación​

Configuración Inicial​

const paypalOptions: ReactPayPalScriptOptions = {
  clientId: process.env.NEXT_PUBLIC_PAYPAL_CLIENTID,
  currency: "MXN",
  intent: "capture",
  'disable-funding': 'card'
}

Generación de Token​

const generatePaypalToken = async () => {
  const tokenResult = await createPaypalExpressToken()
  return {
    token: tokenResult.token,
    // Otros detalles del token
  }
}

Integración con Magento​

Establecer Método de Pago​

const setPaypalPaymentMethod = async () => {
  const input: SetPaymentMethodOnCartInput = {
    cart_id: cartId,
    payment_method: {
      code: PAYMENT_METHOD_PAYPAL,
      paypal_express: {
        payer_id: payerId,
        token: paypalToken
      }
    }
  };
  return await MagentoOrderService.setPaymentMethod(input);
}

Flujo de Pago​

  1. Inicialización de PayPal Button
  2. Creación de orden en PayPal
  3. Aprobación del usuario
  4. Captura del pago
  5. Confirmación en Magento
const onApprove = async (data: OnApproveData, actions: OnApproveActions) => {
  // Proceso de aprobación y captura
  await setPaypalPaymentMethod();
  await placeOrder();
}

Comunicación con Backend​

  • La gestión de webhooks y eventos se realiza directamente en Magento
  • Las notificaciones de PayPal (IPN - Instant Payment Notification) son manejadas por el módulo de PayPal en Magento
  • El frontend solo se encarga de la integración con PayPal Express Checkout y la redirección del usuario

Variables de Entorno Requeridas​

NEXT_PUBLIC_PAYPAL_CLIENTID=your_client_id
PAYPAL_SECRET=your_secret
PAYPAL_ENVIRONMENT=sandbox|production