Integración con pasarela de pagos y notificaciones

Tipo de lección: Video

Concepto clave

La integración con pasarelas de pago y sistemas de notificaciones es el corazón de cualquier app de comercio electrónico funcional. Imagina que estás construyendo una tienda física: la pasarela de pagos es tu caja registradora que procesa tarjetas de crédito de forma segura, mientras que las notificaciones son los mensajes que envías a los clientes confirmando su compra o avisando sobre envíos.

En React Native con Expo, no podemos acceder directamente a APIs nativas de pago como Apple Pay o Google Pay sin usar módulos específicos. Por eso utilizamos servicios como Stripe o PayPal que ofrecen SDKs compatibles con Expo Go y EAS Build. Estas pasarelas actúan como intermediarios seguros: tu app envía los datos de pago tokenizados (nunca el número de tarjeta completo) a sus servidores, ellos procesan la transacción y te devuelven un resultado. Paralelamente, las notificaciones push con Expo Notifications permiten mantener a los usuarios informados sobre el estado de sus pedidos, mejorando la experiencia y reduciendo consultas al soporte.

Cómo funciona en la práctica

Vamos a implementar un flujo completo de checkout en 5 pasos:

1. Configuración inicial: Instalar las dependencias necesarias y configurar credenciales en app.json.
2. Crear pantalla de checkout: Diseñar la interfaz donde el usuario ingresa datos de envío y pago.
3. Integrar Stripe Elements: Usar componentes preconstruidos de Stripe para capturar datos sensibles de forma segura.
4. Procesar pago en backend: Enviar el token de pago a tu servidor para crear el cargo real.
5. Enviar notificación de confirmación: Usar Expo Notifications para informar al usuario que su pedido fue exitoso.

La clave está en separar responsabilidades: el frontend solo maneja la UI y tokenización, mientras que el backend (usualmente Node.js con Express) se comunica con la API de Stripe para ejecutar el cargo. Esto mantiene las claves secretas seguras en tu servidor.

Codigo en accion

Primero, instalemos las dependencias necesarias:

expo install @stripe/stripe-react-native expo-notifications

Ahora, implementemos la pantalla de checkout con Stripe Elements:

import React, { useState } from 'react';
import { View, Button, Alert } from 'react-native';
import {
  CardField,
  useStripe,
} from '@stripe/stripe-react-native';
import * as Notifications from 'expo-notifications';

const CheckoutScreen = () => {
  const { confirmPayment } = useStripe();
  const [cardDetails, setCardDetails] = useState(null);

  const handlePay = async () => {
    if (!cardDetails?.complete) {
      Alert.alert('Error', 'Completa los datos de la tarjeta');
      return;
    }

    // 1. Obtener token de pago desde tu backend
    const response = await fetch('https://tu-backend.com/create-payment-intent', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ amount: 2999, currency: 'usd' }),
    });
    const { clientSecret } = await response.json();

    // 2. Confirmar pago con Stripe
    const { paymentIntent, error } = await confirmPayment(clientSecret, {
      type: 'Card',
      billingDetails: { email: 'cliente@ejemplo.com' },
    });

    if (error) {
      Alert.alert('Pago fallido', error.message);
    } else if (paymentIntent) {
      // 3. Enviar notificación push
      await Notifications.scheduleNotificationAsync({
        content: {
          title: '¡Pago exitoso!',
          body: `Tu pedido #${paymentIntent.id} ha sido procesado`,
        },
        trigger: null, // Enviar inmediatamente
      });
      Alert.alert('Éxito', 'Tu compra ha sido procesada');
    }
  };

  return (
    
       {
          setCardDetails(cardDetails);
        }}
      />
      
    
  );
};

export default CheckoutScreen;

Errores comunes

• Procesar pagos directamente desde el cliente: Nunca envíes la clave secreta de Stripe a tu app. Siempre usa un backend para crear PaymentIntents.
• Olvidar configurar app.json para notificaciones: En app.json, debes agregar "plugins": ["expo-notifications"] y configurar permisos para iOS/Android.
• No manejar estados de pago pendientes: Stripe puede devolver estados como requires_action para 3D Secure. Implementa lógica para redirigir al usuario si es necesario.
• Enviar notificaciones sin solicitar permisos: En iOS, debes pedir permiso explícito con Notifications.requestPermissionsAsync() antes de enviar notificaciones.
• Usar tarjetas de prueba incorrectas: En desarrollo, usa números de prueba como 4242 4242 4242 4242. Tarjetas reales fallarán en modo test.

Checklist de dominio

1. Puedo configurar Stripe en un proyecto Expo instalando dependencias y agregando configuraciones en app.json
2. Sé crear una pantalla de checkout con CardField que capture datos de tarjeta de forma segura
3. Implemento correctamente el flujo: tokenización en frontend → procesamiento en backend → manejo de respuesta
4. Configuro y envío notificaciones push usando Expo Notifications después de un pago exitoso
5. Manejo errores comunes como tarjetas rechazadas, falta de conexión o permisos denegados
6. Uso variables de entorno para claves API y diferencio entre modo test y producción
7. Testeo el flujo completo con tarjetas de prueba y verifico que las notificaciones lleguen al dispositivo

Implementa checkout con Stripe y notificaciones en app de e-commerce

En este ejercicio, integrarás Stripe y notificaciones push en una app de comercio electrónico existente. Sigue estos pasos:

1. Prepara el entorno:
   • Crea una cuenta de prueba en stripe.com y obtén tu Publishable Key
   • En tu proyecto Expo, instala @stripe/stripe-react-native y expo-notifications
   • Agrega la configuración necesaria en app.json para ambos servicios
2. Modifica la pantalla de checkout:
   • Reemplaza los inputs de tarjeta actuales por el componente CardField de Stripe
   • Implementa la función handlePay que:
     1. Obtiene un clientSecret desde tu backend simulado (puedes usar un mock)
     2. Llama a confirmPayment con los datos del CardField
     3. Maneja la respuesta mostrando Alert apropiados
3. Agrega notificaciones:
   • Solicita permisos para notificaciones al iniciar la app
   • Después de un pago exitoso, programa una notificación inmediata con detalles del pedido
   • Incluye en la notificación el ID del paymentIntent y el monto pagado
4. Testea el flujo completo:
   • Usa la tarjeta de prueba 4242 4242 4242 4242 con cualquier fecha futura y CVC
   • Verifica que la notificación llegue a tu dispositivo/emulador
   • Simula un error usando la tarjeta 4000 0000 0000 0002 y maneja el mensaje apropiado

Pistas

• Recuerda que Stripe necesita configurarse con StripeProvider en el nivel superior de tu app
• Para el backend simulado, puedes crear un archivo mock que devuelva un clientSecret fijo para testing
• En iOS, las notificaciones solo funcionan en dispositivos reales o con permisos especiales en simulador

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.