Pasarelas de Pago: Panorama

Paso 6 de 11

Integrar pagos en una App móvil no significa “guardar tarjetas”, sino conectar con expertos procesadores. Estas son las opciones líderes para el ecosistema Expo:

Stripe

El estándar de oro. SDK Nativo (@stripe/stripe-react-native) y documentación impecable.

Sitio Oficial | Docs Expo

Mercado Pago

Rey en Latinoamérica. Integración fuerte con cuotas locales y métodos regionales.

Sitio Oficial | MP Developers

PayPal

Confianza universal. Suele integrarse mediante WebViews o Braintree.

Sitio Oficial | PayPal Developer

Conceptos Clave

Client-Side vs Server-Side : El front-end (Expo) solo maneja la captura de datos (tokens). El cargo real siempre debe suceder en un servidor seguro para evitar fraudes.
Tokens de Seguridad : Nunca manejes números de tarjeta reales en tu base de datos. Las pasarelas te devuelven un “token” de un solo uso.
Webhooks : Servidores que escuchan eventos de la pasarela (ej: “Pago Completado”) para actualizar tu base de datos de forma asíncrona.

Modalidad de Integración en Expo

SDKs Nativos: @stripe/stripe-react-native. Requiere development builds.
Webview Bridge: Ideal para PayPal o integraciones rápidas donde el checkout sucede en una web segura y luego vuelve a la App.

Regla de Oro

Jamás almacenes información sensible de crédito. Deja que los expertos (Stripe/MP) se encarguen de la seguridad PCI DSS.

Stripe: Mi primer pago (Tutorial Rápido)

Si decides ir por el camino de Stripe, estos son los pasos para empezar hoy mismo:

1. Instalación

Necesitas el SDK de Stripe y habilitarlo en tu proyecto Expo.

# terminal
npx expo install @stripe/stripe-react-native

2. Configuración (EAS Build)

Al ser un módulo nativo, requiere un Development Build. Agrega el plugin en tu app.json:

{
  "expo": {
    "plugins": [
      [
        "@stripe/stripe-react-native",
        {
          "merchantIdentifier": "merchant.com.tuapp",
          "enableGooglePay": true
        }
      ]
    ]
  }
}

3. El Provider (Root Layout)

Envuelve tu aplicación con el StripeProvider en el archivo raíz.

import { StripeProvider } from '@stripe/stripe-react-native';

export default function RootLayout() {
  return (
    <StripeProvider
      publishableKey="pk_test_tu_llave_aqui"
      merchantIdentifier="merchant.com.tuapp"
    >
      <Stack />
    </StripeProvider>
  );
}