Aceptar un pago
Acepta pagos en línea de forma segura.
Crea un formulario de pago o usa una página del proceso de compra prediseñada para comenzar a aceptar pagos en línea.
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 mismo) en una sola hoja que se muestra encima de tu aplicación.
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:
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):
A continuación, instala otras dependencias necesarias:
- Para iOS, navega hasta el directorio de ios y ejecuta
pod installpara asegurarte de instalar también las dependencias nativas necesarias. - Para Android, no hay más dependencias para instalar.
Nota
Recomendamos seguir la guía oficial de TypeScript para añadir compatibilidad con 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 mediante el componente StripeProvider.
Nota
Usa las claves de prueba de la API durante las pruebas y las tareas de desarrollo, y las claves del modo activo cuando publiques tu aplicación.
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.
Nota
Para mostrar la PaymentSheet antes de crear un PaymentIntent, consulta Recolectar datos de pago antes de crear un Intent.
Esta integración usa tres objetos de la API de Stripe:
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.
(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.
(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.
Nota
Si nunca guardas tarjetas en un objeto Customer y no permites que los clientes que vuelven reutilicen las 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, añade un punto de conexión en tu servidor que:
- Recupere el objeto Customer o cree uno nuevo.
- Cree una clave efímera para el objeto Customer.
- Crea un PaymentIntent con el importe, la divisa y el cliente. También puedes incluir opcionalmente el parámetro
automatic_. Stripe habilita sus funciones de forma predeterminada en la última versión de la API.payment_ methods - Devuelve a tu aplicación el secreto de cliente del Payment Intent, el
secretde 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.
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.
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.
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:
- Registrar una URL personalizada. No se admiten enlaces universales.
- Configurar 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..
Además, debes especificar returnURL cuando invoques el método initPaymentSheet:
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_, 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 el cliente inicia el pago correctamente, pero este aún no se ha efectivizado. En la mayoría de los casos, este evento se envía cuando el cliente inicia un adeudo bancario. Más adelante, le seguirá el evento payment_ o payment_. | Envía al cliente una confirmación del pedido que indique que su pago está pendiente. Para los productos digitales, es posible que desees completar el pedido antes de esperar a que se efectivice el pago. |
| payment_intent.payment_failed | Se envía cuando el cliente intenta realizar un pago, pero este falla. | Si un pago pasa de processing a payment_, ofrécele al cliente otro intento de pago. |
Consulta Pruebas para obtener información adicional para probar tu integración.
Activa Link en tu configuración de método de pago para permitir que tus clientes guarden y reutilicen de forma segura su información de pago mediante el botón de proceso de compra rápida con 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 previamente la mayor cantidad de información posible para optimizar el proceso de compra.
Para completar previamente el nombre, la dirección de correo electrónico y el número de teléfono del cliente, proporciona a defaultBillingDetails la información de tu cliente en initPaymentSheet.
Regístrate para obtener un ID de comerciante de Apple
Obtén un ID de comerciante Apple registrándote para obtener un nuevo identificador en el sitio web de Apple para desarrolladores.
Rellena el formulario incluyendo una descripción y el identificador. La descripción es solo para ti y podrás modificarla después. Stripe te recomienda que uses como identificador el nombre de tu aplicación (por ejemplo, merchant.).
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 Añadir aplicación nueva y sigue las indicaciones.
Descarga un archivo de petición 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 un certificado de manera exacta. Si cambias tu ID de comerciante de Apple, debes ir a la Configuración de certificados de iOS en el Dashboard para obtener un CSR y un certificado nuevos.
Integrar con Xcode
Añade la funcionalidad Apple Pay a tu aplicación. En Xcode, abre la configuración del proyecto, selecciona la pestaña Firma y funcionalidades y añade la funcionalidad Apple Pay. Aquí, es posible que se te pida que inicies 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.
Habilita la funcionalidad Apple Pay en Xcode
Añadir Apple Pay
Seguimiento de pedidos
Para añadir información de seguimiento de pedidos en iOS 16 o en una versión posterior, configura una función de devolución de llamada setOrderTracking. Stripe llama a tu implementación después de que se haya completado el pago, pero antes de que iOS descarte la hoja de Apple Pay.
Al implementar la función de devolución de llamada setOrderTrackingsetOrderTracking’, obtén los detalles del pedido de tu servidor para el pedido completado y transfiere los detalles a la función de completion proporcionada.
Para obtener más información sobre el seguimiento de pedidos, consulta la documentación de Apple sobre los pedidos por monedero.
Configura tu integración
Para usar Google Pay, debes añadir lo siguiente a la etiqueta <application> de tu AndroidManifest.xml para habilitar la API de Google Pay:
Para obtener más detalles, consulta la documentación de Google Pay sobre cómo configurar la API de Google Pay para Android.
Añadir Google Pay
Al iniciar 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 estableciendo el parámetro testEnv. Solo puedes probar Google Pay en un dispositivo físico Android. Consulta la documentación de React Native para probar tu aplicación en un dispositivo físico.
Para habilitar el soporte para el escáner de tarjetas, establece la NSCameraUsageDescription (Privacidad - Descripción del uso de la cámara) en la Info.plist de tu aplicación, y proporciona un motivo para acceder a la cámara (por ejemplo, “Escanear tarjetas”). Los dispositivos con iOS 13 o superior pueden escanear tarjetas.
Todo lo que se quiera personalizar se configura con initPaymentSheet.
Aspecto
Personaliza los colores y las fuentes, entre otros elementos, para que coincidan con el aspecto de tu aplicación mediante la API Appearance.
Nombre con el que aparecerá el comerciante
Configura merchantDisplayName para especificar el nombre de empresa que quieres que vea el cliente; de forma predeterminada, será 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). Esto se puede cambiar si estableces la propiedad styleen alwaysLight o alwaysDark en iOS.
En Android, debes establecer el modo claro u oscuro en tu aplicación:
Datos de facturación predeterminados
Para establecer los valores predeterminados para los datos de facturación recolectados en la PaymentSheet, configura la propiedad defaultBillingDetails. Los campos de la PaymentSheet se rellenaron automáticamente con los valores que proporcionas.
Recopilar datos de facturación
Usa billingDetailsCollectionConfiguration para especificar cómo deseas recolectar los datos de facturación en la 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 requiere el método de pago, debes hacer lo siguiente:
- Adjunta los valores no recopilados por
PaymentSheeta la propiedaddefaultBillingDetails. - Establece
billingDetailsCollectionConfiguration.enattachDefaultsToPaymentMethod true.
Nota
Consulta a tu asesor legal sobre las leyes que se aplican a la recopilación de información. Recopila los números de teléfono solo si los necesitas para la transacción.
PaymentSheet almacena cierta información localmente para recordar si un usuario ha utilizado Link dentro de una aplicación. Para borrar el estado interno de PaymentSheet, llama al método resetPaymentSheetCustomer() cuando tu usuario cierra sesión.
Puedes presentar una hoja de pago para recopilar solo los datos del método de pago y a continuación 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
Tienes un ejemplo de integración disponible en nuestro GitHub.
- Primero, llama a
initPaymentSheety especificacustomFlow: true.initPaymentSheetse 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
presentPaymentSheetpara recopilar datos del pago. Una vez que el cliente termina, la hoja se cierra y se resuelve la promesa. Actualiza la interfaz de usuario con los datos del método de pago seleccionado.
- Usa
confirmPaymentSheetPaymentpara confirmar el pago. Esto se resuelve con el resultado del pago.
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.