Aceptar un pago

Acepta pagos en línea en modo seguro.

Crea un formulario de pago o usa una página de confirmación de compra prediseñada para comenzar a aceptar pagos electrónicos.

Esta integración combina todos los pasos necesarios para efectuar el pago (la recopilación de los datos de pago y la confirmación del pago) en una sola hoja que aparece arriba en tu aplicación.

Configurar Stripe
Lado del servidor
Lado del cliente

Primero, necesitas una cuenta de Stripe. Inscríbete ahora.

Lado del servidor

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

Lado del cliente

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

A continuación, instala otras dependencias necesarias:

Para iOS, vaya al directorio ios y ejecute pod install para asegurarse de que también instala las dependencias nativas necesarias.
Para Android, no hay más dependencias para instalar.

Nota

Recomendamos seguir la guía oficial de TypeScript para agregar soporte para TypeScript.

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 usando el componente StripeProvider.

Nota

Usa las claves de prueba de la API durante las pruebas y el desarrollo, y tus claves para modo activo cuando publiques tu aplicación.

Habilitar métodos de pago

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 pertinentes para tu empresa y tus clientes. Consulta Admisibilidad de métodos de pago para obtener información sobre productos y métodos de pago admitidos, y consulta nuestra página de precios para conocer las comisiones.

Agregar un punto de conexión
Lado del servidor

Nota

Para mostrar la PaymentSheet antes de crear un PaymentIntent, consulta Recopila datos de pago antes de crear un Intent.

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

PaymentIntent: Stripe lo utiliza para representar tu intención de cobrarle a un cliente, haciendo el seguimiento de los intentos de cobro y de los cambios en el estado del pago a lo largo del proceso.
(Opcional) Cliente: Para configurar un método de pago para pagos futuros, debes adjuntarlo a un Cliente. Crea el “Customer Object” cuando tu cliente cree una cuenta en tu empresa. Si tu cliente hace un pago como invitado, puedes crear un “Customer Object” antes del pago y asociarlo con tu propia representación interna de la cuenta del cliente más adelante.
(Opcional) Clave efímera del cliente: la información que contiene el Customer Object es confidencial y no se puede recuperar directamente desde una aplicación. Una clave efímera le otorga al SDK acceso temporal al cliente.

Nota

Si nunca guardas tarjetas en el objeto Customer y no permites que los clientes frecuentes vuelvan a usar tarjetas guardadas, puedes omitir los objetos Customer y Customer Ephemeral Key en tu integración.

Por motivos de seguridad, tu aplicación no puede crear estos objetos. En su lugar, agrega un punto de conexión en tu servidor que haga lo siguiente:

Recupere el objeto Customer o cree uno nuevo.
Cree una Ephemeral Key para el objeto Customer.
Crea una PaymentIntent con el importe, la moneda y el cliente. También puedes incluir opcionalmente el parámetro automatic_payment_methods. Stripe habilita su funcionalidad de forma predeterminada en la última versión de la API.
Devuelve a tu aplicación el secreto de cliente del Payment Intent, el secret de la clave efímera, la ID del cliente 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 los métodos de pago de tu configuración del Dashboard o puedes enumerarlos manualmente. Independientemente de la opción que elijas, debes saber que la moneda 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 OXXO no admite 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 moneda, las restricciones de los métodos de pago y otros parámetros para determinar la lista de métodos de pago admitidos. Se les da prioridad a los métodos de pago que aumentan la conversión y guardan mayor relación con la moneda y la ubicación del cliente.

Recopilar datos de pago
Lado del cliente

Antes de mostrar el Payment Element móvil, tu página de finalización de compra debe cumplir con los siguientes requisitos:

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.

Cuando el cliente toque el botón Pagar, llama a presentPaymentSheet() para abrir la hoja. Después de que el cliente completa el pago, la hoja se cierra y la promesa se resuelve con un StripeError<PaymentSheetError> opcional.

Si no se produjo ningún error, infórmale al usuario que el proceso terminó (por ejemplo, mostrándole una pantalla de confirmación del pedido).

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

Configurar una URL de retorno (solo para iOS)
Lado del cliente

Cuando un cliente sale de tu aplicación (por ejemplo, para autenticarse en Safari o en su aplicación bancaria), proporciona una forma de regresar automáticamente a tu aplicación. Muchos tipos de métodos de pago requieren una URL de retorno. Si no la proporcionas, no podemos presentarles a tus usuarios métodos de pago que requieran una URL de retorno, incluso si los habilitaste.

Para proporcionar una URL de retorno:

Registra una URL personalizada. No se admiten vínculos universales.
Configura tu URL personalizada.
Configura tu componente raíz para reenviar la URL al SDK de Stripe como se muestra a continuación.

Nota

Si utilizas Expo, configura tu esquema en el archivo app.json.

Además, al llamar al método initPaymentSheet, debes especificar returnURL:

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

Gestionar eventos posteriores al pago

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

Escucha estos eventos en lugar de esperar una devolución de llamada del cliente. De su lado, el cliente puede cerrar la ventana del navegador o salir de la aplicación antes de que se ejecute la devolución de llamada, y clientes malintencionados podrían manipular la respuesta. 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:

Evento	Descripción	Acción
payment_intent.succeeded	Se envía cuando un cliente completa correctamente un pago.	Envía al cliente una confirmación del pedido y completa el pedido.
payment_intent.processing	Se envía cuando un cliente inicia con éxito un pago, pero éste aún no se completó. Este evento se envía normalmente cuando el cliente inicia un débito bancario. Le sigue un evento `payment_intent.succeeded` o `payment_intent.payment_failed` en el futuro.	Envía al cliente una confirmación del pedido que indique que el pago está pendiente. En caso de productos digitales, quizá te convenga completar el pedido antes de esperar que se complete el pago.
payment_intent.payment_failed	Enviado cuando un cliente intenta un pago, pero el pago falla.	Si un pago pasa de `processing` a `payment_failed`, ofrécele al cliente otro intento de pago.

Probar la integración

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

OpcionalHabilitar Link

Habilita Link en tu configuración de métodos de pago para permitir que tus clientes guarden y reutilicen de forma segura su información de pago con el botón de finalización de compra rápido de un solo clic de Link.

Pasa el correo electrónico de tu cliente al Payment Element móvil

Link autentica a un cliente utilizando su dirección de correo electrónico. Stripe recomienda completar automáticamente la mayor cantidad de información posible para agilizar el proceso de finalización de compra.

Para completar automáticamente el nombre, la dirección de correo electrónico y el número de teléfono del cliente, proporciona defaultBillingDetails con la información de tu cliente a initPaymentSheet.

OpcionalHabilitar Apple Pay

Inscribirse para obtener un ID de comerciante Apple

Obtén un ID de comerciante Apple solicitando un nuevo identificador en el sitio web de desarrolladores de Apple.

Completa el formulario con una descripción y el identificador. La descripción es para tus registros y se puede modificar en el futuro. Stripe recomienda usar el nombre de tu aplicación como identificador (por ejemplo, merchant.com.{{YOUR_APP_NAME}}).

Crear un nuevo certificado de Apple Pay

Crea un certificado para que tu aplicación cifre los datos de pago.

Ve a Configuración de certificados de iOS en el Dashboard, haz clic en Agregar nueva aplicación y sigue la guía.

Descarga un archivo de solicitud de firma de certificado (CSR) para obtener un certificado seguro de Apple que te permita utilizar Apple Pay.

Se debe usar un archivo CSR para emitir exactamente un certificado. Si cambias tu ID de comerciante de Apple, debes ir a la Configuración de certificados de iOS en el Dashboard para obtener una nueva CSR y un nuevo certificado.

Integrarse con Xcode

Agrega la funcionalidad Apple Pay a tu aplicación. En Xcode, abre la configuración del proyecto, selecciona la pestaña Firma y funcionalidades y agrega la funcionalidad Apple Pay. En este paso, quizá se te solicite iniciar sesión en tu cuenta de desarrollador. Selecciona el ID de comerciante que creaste antes, y tu aplicación estará lista para aceptar Apple Pay.

Habilitar la funcionalidad Apple Pay en Xcode

Agregar Apple Pay

Seguimiento de pedidos

Para agregar información de seguimiento de pedidos en iOS 16 o posterior, configura una función de de llamadasetOrderTracking. Stripe llama a tu implementación después de que se complete el pago, pero antes de que iOS descarte la hoja de Apple Pay.

En su implementación de la función de devolución de llamada setOrderTracking, obtén los detalles del pedido de tu servidor para el pedido completado y transfiere los datos a la función de completion proporcionada.

Para obtener más información sobre el seguimiento de pedidos, consulta la documentación sobre pedidos de billetera de Apple.

OpcionalHabilitar Google Pay

Configura tu integración

Para usar Google Pay, primero habilita la API de Google Pay agregando lo siguiente a la etiqueta <application> de tu AndroidManifest.xml:

Para obtener más detalles, consulta cómo configurar la API de Google Pay para Android en Google Pay.

Agregar Google Pay

Al inicializar PaymentSheet. establece merchantCountryCode en el código de país de tu empresa y establece googlePay en verdadero.

También puedes usar el entorno de prueba especificando el parámetro testEnv. Solo puedes probar Google Pay en un dispositivo Android físico. Sigue la documentación de React Native para probar tu aplicación en un dispositivo físico.

OpcionalHabilitar escaneo de tarjeta (solo para iOS)
Lado del cliente

A fin de habilitar el soporte para escaneo de tarjetas, establece NSCameraUsageDescription (Privacidad - Descripción del uso de la cámara) en el Info.plist de tu aplicación y especifica el motivo por el que se necesita acceder a la cámara (por ejemplo, “Para escanear tarjetas”). Los dispositivos con iOS 13 o posterior aceptan el escaneo de tarjetas.

OpcionalPersonalizar la hoja
Lado del cliente

Todo lo que se quiera personalizar se configura usando initPaymentSheet.

Aspecto

Personaliza los colores y las fuentes, entre otros elementos, para que combinen con el aspecto de tu aplicación usando la API Appearance.

Nombre de pantalla para el comerciante

Especifica el nombre que quieres que el cliente vea para tu empresa configurando merchantDisplayName. El valor predeterminado es el nombre de tu aplicación.

Modo oscuro

De forma predeterminada, PaymentSheet se adapta automáticamente a la configuración de aspecto de todo el sistema del usuario (modo claro y modo oscuro). Puedes cambiarla definiendo la propiedad style en alwaysLight o alwaysDark en iOS.

En Android, debes definir modo claro u oscuro en tu aplicación:

Datos de facturación predeterminados

Para establecer los valores predeterminados para los datos de facturación recopilados en PaymentSheet, configura la propiedad defaultBillingDetails. Los campos de PaymentSheet se completan automáticamente con los valores que proporcionas.

Recopila datos de facturación

UsabillingDetailsCollectionConfiguration para especificar cómo deseas recopilar los datos de facturación en PaymentSheet.

Puedes recopilar el nombre, el correo electrónico, el número de teléfono y la dirección del cliente.

Si no tienes intención de recopilar los valores que exige el método de pago, debes hacer lo siguiente:

Adjunta los valores no recopilados por PaymentSheet a la propiedad defaultBillingDetails.
Configura billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod en true.

Nota

Pregúntale a tu asesor legal sobre las leyes que se aplican a la recopilación de información. Solicita los números de teléfono solo si los necesitas para la transacción.

OpcionalGestiona el cierre de sesión del usuario

PaymentSheet almacena cierta información de manera local para recordar si un usuario usó Link dentro de una aplicación. A fin de borrar el estado interno de PaymentSheet, llama al método resetPaymentSheetCustomer() cuando el usuario cierre la sesión.

OpcionalCompleta el pago en tu interfaz de usuario

Puedes presentar una hoja de pago para recopilar solo los datos del método de pago y luego llamar al método confirm para completar el pago en la interfaz de usuario de tu aplicación. Esto resulta útil si tienes un botón de compra personalizado o solicitas pasos adicionales después de recopilar los datos del pago.

Nota

Un ejemplo de integración está a tu disposición en nuestro GitHub.

Primero, llama a initPaymentSheet y especifica customFlow: true. initPaymentSheet se resuelve con una opción de pago inicial que contiene una imagen y una etiqueta que representan el método de pago del cliente. Actualiza tu interfaz de usuario con estos datos.

Usa presentPaymentSheet para recopilar datos del pago. Una vez que el cliente termina, la hoja se cierra y se resuelve la promesa. Actualiza la interfaz de usuario (IU) con los datos del método de pago elegido.

Usa confirmPaymentSheetPayment para confirmar el pago. Esto se resuelve con el resultado del pago.