Aceptar un pago

Primero, necesitas una cuenta de Stripe. Regístrate ahora.

Lado del servidor

Esta integración necesita puntos de conexión de tu servidor que se comuniquen con la API de Stripe. Usa las bibliotecas oficiales para acceder a la API de Stripe desde tu servidor:

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Lado del cliente

El SDK para React Native es de código abierto y está plenamente documentado. Internamente, utiliza el SDK de iOS nativo y Android. Para instalar el SDK para React Native de Stripe, ejecuta uno de los siguientes comandos en el directorio del proyecto (en función del administrador de paquetes que utilices):

yarn add @stripe/stripe-react-native

A continuación, instala otras dependencias necesarias:

• Para iOS, navega hasta el directorio de ios y ejecuta pod install para asegurarte de instalar también las dependencias nativas necesarias.
• Para Android, no hay más dependencias para instalar.

Inicialización de Stripe

Para inicializar Stripe en tu aplicación React Native, ajusta tu pantalla de pago con el componente StripeProvider o usa el método de inicialización initStripe. Solo se requiere la clave publicable de la API en publishableKey. El siguiente ejemplo muestra cómo inicializar Stripe mediante el componente StripeProvider.

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

function App() {
  const [publishableKey, setPublishableKey] = useState('');

  const fetchPublishableKey = async () => {
    const key = await fetchKey(); // fetch key from your server here
    setPublishableKey(key);
  };

  useEffect(() => {
    fetchPublishableKey();
  }, []);

  return (
    <StripeProvider
      publishableKey={publishableKey}
      merchantIdentifier="merchant.identifier" // required for Apple Pay
      urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
    >
      {/* Your app code here */}
    </StripeProvider>
  );
}

Visualiza tu configuración de métodos de pago y habilita los que quieras aceptar. Se necesita al menos un método de pago habilitado para crear un PaymentIntent.

De forma predeterminada, Stripe habilita tarjetas y otros métodos de pago habituales que pueden ayudarte a llegar a más clientes, pero te recomendamos activar otros métodos de pago que sean relevantes para tu empresa y tus clientes. Consulta Compatibilidad con métodos de pago para obtener información sobre productos y métodos de pago y nuestra página de tarifas para conocer las comisiones.

Esta integración usa tres objetos de la API de Stripe:

1. PaymentIntent: Stripe usa este dato para representar tu intención de cobrarle a un cliente y hacer el seguimiento de los intentos de cobro y de los cambios en el estado del pago a lo largo del proceso.

2. (Opcional) Customer: para configurar un método de pago para pagos futuros, debes vincularlo a un Customer. Crea el objeto Customer cuando tu cliente cree una cuenta en tu empresa. Si tu cliente hace un pago como invitado, puedes crear el objeto Customer antes del pago y asociarlo más tarde con tu propia representación interna de la cuenta del cliente.

3. (Opcional) Clave efímera del cliente: la información que contiene el objeto Customer es confidencial y no puede recuperarse directamente desde una aplicación. La clave efímera otorga al SDK acceso temporal al objeto Customer.

Por motivos de seguridad, tu aplicación no puede crear estos objetos. En su lugar, añade un punto de conexión en tu servidor que:

1. Recupere el objeto Customer o cree uno nuevo.
2. Cree una clave efímera para el objeto Customer.
3. Crea un PaymentIntent con el importe, la divisa y el cliente. También puedes incluir opcionalmente el parámetro automatic_payment_methods. Stripe habilita sus funciones de forma predeterminada en la última versión de la API.
4. Devuelve a tu aplicación el secreto de cliente del Payment Intent, el secret de la clave efímera, el id del Customer y tu clave publicable.

Los métodos de pago que se muestran a los clientes durante el proceso de compra también se incluyen en el PaymentIntent. Puedes permitir que Stripe extraiga automáticamente los métodos de pago de la configuración de tu Dashboard o puedes enumerarlos de forma manual. Independientemente de la opción que elijas, debes saber que la divisa especificada en el PaymentIntent filtra los métodos de pago que se muestran al cliente. Por ejemplo, si especificas eur en el PaymentIntent y tienes habilitado OXXO en el Dashboard, OXXO no se mostrará al cliente porque no acepta pagos en eur.

A menos que tu integración requiera una opción basada en código para ofrecer métodos de pago, Stripe recomienda usar la opción automatizada. Esto se debe a que Stripe evalúa la divisa, las restricciones en cuanto a los métodos de pago y otros parámetros para determinar la lista de métodos de pago aceptados. Se da prioridad a los métodos de pago que aumentan la conversión y guardan mayor relación con la divisa y la ubicación del cliente.

# Create a Customer (use an existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST"

# Create an Ephemeral Key for the Customer
curl https://api.stripe.com/v1/ephemeral_keys \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -H "Stripe-Version: 2025-06-30.basil" \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \
  # In the latest version of the API, specifying the `automatic_payment_methods` parameter
  # is optional because Stripe enables its functionality by default.
  -d "automatic_payment_methods[enabled]"=true \

Antes de mostrar el Payment Element móvil, tu página de finalización de compra debe:

• Mostrar los productos de la compra y el importe total
• Recopilar la información de envío necesaria
• Incluir un botón de pago para presentar la interfaz de usuario de Stripe

En la finalización de compra de tu aplicación, haz una solicitud de red al punto de conexión de back-end que creaste en el paso anterior y llama a initPaymentSheet desde el hook useStripe.

export default function CheckoutScreen() {
  const { initPaymentSheet, presentPaymentSheet } = useStripe();
  const [loading, setLoading] = useState(false);

  const fetchPaymentSheetParams = async () => {
    const response = await fetch(`${API_URL}/payment-sheet`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
    });
    const { paymentIntent, ephemeralKey, customer } = await response.json();

    return {
      paymentIntent,
      ephemeralKey,
      customer,
    };
  };

  const initializePaymentSheet = async () => {
    const {
      paymentIntent,
      ephemeralKey,
      customer,
    } = await fetchPaymentSheetParams();

    const { error } = await initPaymentSheet({
      merchantDisplayName: "Example, Inc.",
      customerId: customer,
      customerEphemeralKeySecret: ephemeralKey,
      paymentIntentClientSecret: paymentIntent,
      // Set `allowsDelayedPaymentMethods` to true if your business can handle payment
      //methods that complete payment after a delay, like SEPA Debit and Sofort.
      allowsDelayedPaymentMethods: true,
      defaultBillingDetails: {
        name: 'Jane Doe',
      }
    });
    if (!error) {
      setLoading(true);
    }
  };

  const openPaymentSheet = async () => {
    // see below
  };

  useEffect(() => {
    initializePaymentSheet();
  }, []);

  return (
    <Screen>
      <Button
        variant="primary"
        disabled={!loading}
        title="Checkout"
        onPress={openPaymentSheet}
      />
    </Screen>
  );
}

Cuando el cliente toca el botón Pagar, llama a presentPaymentSheet() para abrir la hoja. Después de que complete el pago, la hoja se cerrará y la promesa se resolverá con un StripeError<PaymentSheetError> opcional.

export default function CheckoutScreen() {
  // continued from above

  const openPaymentSheet = async () => {
    const { error } = await presentPaymentSheet();

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else {
      Alert.alert('Success', 'Your order is confirmed!');
    }
  };

  return (
    <Screen>
      <Button
        variant="primary"
        disabled={!loading}
        title="Checkout"
        onPress={openPaymentSheet}
      />
    </Screen>
  );
}

Si no se ha producido ningún error, comunícale al usuario que el proceso ya ha terminado (por ejemplo, mostrándole una pantalla de confirmación del pedido).

Establecer allowsDelayedPaymentMethods en true permite utilizar métodos de pago de notificación diferida como cuentas bancarias de EE. UU. Para estos métodos de pago, el estado final del pago no se conoce cuando se completa la PaymentSheet, sino que se efectúa correctamente o con errores más tarde. Si aceptas este tipo de métodos de pago, infórmale al cliente de que su pedido está confirmado y solo complétalo (por ejemplo, envía el producto) cuando el pago se haya realizado correctamente.

Cuando un cliente sale de tu aplicación (por ejemplo, para autenticarse en Safari o en su aplicación bancaria), proporciónale una forma de volver automáticamente a tu aplicación. Muchos tipos de métodos de pago requieren una URL de retorno. Si no proporcionas una, no podremos presentar a tus usuarios métodos de pago que requieran una URL de retorno, aunque los hayas habilitado.

Para proporcionar una URL de retorno:

1. Registrar una URL personalizada. No se admiten enlaces universales.
2. Configurar tu URL personalizada.
3. Configura tu componente raíz para reenviar la URL al SDK de Stripe como se muestra a continuación.

import { useEffect, useCallback } from 'react';
import { Linking } from 'react-native';
import { useStripe } from '@stripe/stripe-react-native';

export default function MyApp() {
  const { handleURLCallback } = useStripe();

  const handleDeepLink = useCallback(
    async (url: string | null) => {
      if (url) {
        const stripeHandled = await handleURLCallback(url);
        if (stripeHandled) {
          // This was a Stripe URL - you can return or add extra handling here as you see fit
        } else {
          // This was NOT a Stripe URL – handle as you normally would
        }
      }
    },
    [handleURLCallback]
  );

  useEffect(() => {
    const getUrlAsync = async () => {
      const initialUrl = await Linking.getInitialURL();
      handleDeepLink(initialUrl);
    };

    getUrlAsync();

    const deepLinkListener = Linking.addEventListener(
      'url',
      (event: { url: string }) => {
        handleDeepLink(event.url);
      }
    );

    return () => deepLinkListener.remove();
  }, [handleDeepLink]);

  return (
    <View>
      <AwesomeAppComponent />
    </View>
  );
}

Además, debes especificar returnURL cuando invoques el método initPaymentSheet:

await initPaymentSheet({
  ...
  returnURL: 'your-app://stripe-redirect',
  ...
});

Para obtener más información sobre los esquemas de URL nativos, consulta la documentación para Android e iOS.

Stripe envía un evento payment_intent.succeeded cuando se efectiviza el pago. Usa la herramienta webhook del Dashboard o sigue las indicaciones de la guía de webhooks para recibir estos eventos y acciones de ejecución, como enviar a tu cliente un correo electrónico de confirmación del pedido, registrar la venta en una base de datos o iniciar el flujo de trabajo de los envíos.

Escucha estos eventos en lugar de esperar una devolución de llamada del cliente. Por su parte, el cliente puede cerrar la ventana del navegador o salir de la aplicación antes de que se ejecute la devolución de llamada. Si configuras tu integración para escuchar eventos asincrónicos, podrás aceptar diferentes tipos de métodos de pago con una sola integración.

Además de administrar el evento payment_intent.succeeded, recomendamos administrar estos otros eventos si se cobran pagos con el Payment Element:

Consulta Pruebas para obtener información adicional para probar tu integración.