Configurar futuros pagos
La API Setup Intents te permite guardar los datos de pago de un cliente sin que se haya realizado un pago inicial. Esta opción resulta útil si quieres hacer el onboarding de clientes ahora, realizar la configuración de pagos y cobrarles más adelante, cuando no estén conectados.
Utiliza esta integración para configurar pagos recurrentes o crear pagos puntuales cuyo importe final se determinará más adelante, por lo general, después de que el cliente reciba el servicio.
Cumplimiento de la normativa
You’re responsible for your compliance with all applicable laws, regulations, and network rules when saving a customer’s payment details. These requirements generally apply if you want to save your customer’s payment method for future use, such as displaying a customer’s payment method to them in the checkout flow for a future purchase or charging them when they’re not actively using your website or app. Add terms to your website or app that state how you plan to save payment method details and allow customers to opt in.
When you save a payment method, you can only use it for the specific usage you have included in your terms. To charge a payment method when a customer is offline and save it as an option for future purchases, make sure that you explicitly collect consent from the customer for this specific use. For example, include a “Save my payment method for future use” checkbox to collect consent.
To charge them when they’re offline, make sure your terms include the following:
- La aceptación por parte del cliente de que inicies un pago o una serie de pagos en su nombre para transacciones específicas.
- El momento y la frecuencia previstos de los pagos (por ejemplo, si los cargos son por cuotas programadas, pagos de suscripción o recargas no programadas).
- Cómo determinas el importe del pago.
- Tu política de cancelación, si el método de pago es para un servicio de suscripción.
Asegúrate de mantener un registro de la aceptación por escrito de tu cliente con estas condiciones.
Nota
Si necesitas usar la confirmación manual del lado del servidor o tu integración requiere presentar los métodos de pago por separado, consulta nuestra guía alternativa.
Configurar StripeLado del servidor
Primero, crea una cuenta de Stripe o inicia sesión.
Usa nuestras bibliotecas oficiales para acceder a la API de Stripe desde tu aplicación:
Habilita los 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 SetupIntent.
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 las opciones de integración de métodos de pago para obtener información sobre los productos y métodos de pago que se aceptan y las comisiones en nuestra página de precios.
Crea un objeto CustomerLado del servidor
Para configurar un método de pago para pagos futuros, debes adjuntarlo a un cliente. Crea un objeto de Customer
cuando tu cliente cree una cuenta en tu empresa. Los objetos de Customer
permiten reutilizar los métodos de pago y hacer el seguimiento de múltiples pagos.
Crear un SetupIntentLado del servidor
Nota
Si quieres mostrar el Payment Element sin crear primero un SetupIntent, consulta Recopilar datos de pago antes de crear un Intent.
El SetupIntent es un objeto que representa tu intención de establecer un método de pago para los pagos futuros de un cliente. Los métodos de pago que los clientes pueden ver durante el proceso de compra también se incluyen en el SetupIntent. Puedes dejar que Stripe tome los métodos de pago de forma automática desde la configuración de tu Dashboard o puedes enumerarlos de forma manual.
A menos que tu integración requiera una opción basada en código para ofrecer métodos de pago, Stripe recomienda la opción automatizada. Esto se debe a que Stripe evalúa la divisa, las restricciones del método de pago y otros parámetros para determinar la lista de métodos de pago aceptados. Se priorizan los métodos de pago que aumentan la conversión y que son más relevantes para la divisa y la ubicación del cliente. Los métodos de pago de menor prioridad se ocultan bajo un menú de desbordamiento.
Recupera el secreto del cliente
El SetupIntent incluye un secreto de cliente que el lado del cliente utiliza para completar el proceso de pago de forma segura. Puedes usar diferentes métodos para pasar el secreto del cliente al lado del cliente.
Cómo usar Radar
Al guardar el método de pago de un cliente sin un pago inicial, Radar no actúa sobre el SetupIntent de forma predeterminada. Si quieres activar esto como predeterminado, ve a configuración de Radar y activa Usar Radar en los métodos de pago guardados para uso futuro.
Recopila datos de pagoLado del cliente
Ya tienes todo listo para recopilar los datos de pago del lado del cliente con Payment Element. El Payment Element es un componente de interfaz de usuario prediseñado que simplifica la recopilación de datos de pago para varios métodos de pago.
El Payment Element contiene un iframe que envía la información de pago a Stripe de forma segura a través de una conexión HTTPS. Para que la integración funcione, la dirección de la página del proceso de compra debe comenzar con https://
en lugar de http://
. Puedes probar tu integración sin hacerlo, pero recuerda habilitar HTTPS cuando lo tengas todo listo para aceptar pagos en modo activo.
El Payment Element presenta un formulario dinámico que le permite a tu cliente elegir un método de pago. Para cada método de pago, el formulario solicita automáticamente que el cliente complete todos los datos de pago necesarios.
Personaliza la apariencia
Personaliza el Payment Element para que coincida con el diseño de tu sitio especificando el objeto de apariencia en options
al crear el proveedor Elements
.
Solicitar token de comerciante de Apple Pay
Si aceptas pagos de Apple Pay, te recomendamos configurar la interfaz de Apple Pay para devolver un token de comerciante para habilitar las transacciones iniciadas por el comerciante (MIT). Solicita el tipo de token de comercio correspondiente en el Pago Element. El siguiente ejemplo muestra una solicitud del token de comercio de pagos diferidos.
const paymentElement = elements.create('payment', { applePay: { deferredPaymentRequest: { paymentDescription: 'My deferred payment', managementURL: 'https://example.com/billing', deferredBilling: { amount: 2500, label: 'Deferred Fee', deferredPaymentDate: new Date('2024-01-05') }, } }, // Other options });
Configurar divisa
Al usar SetupIntents con automatic_payment_methods, si se especifica currency en options
cuando se crea el proveedor de Elements
, esto influye en los métodos de pago que el Payment Element representa. El Payment Element muestra los métodos de pago habilitados en el Dashboard de Stripe que admiten la divisa proporcionada. Consulta las Opciones de integración de métodos de pago para obtener más información sobre lo que se admite.
Recopila las direcciones
De forma predeterminada, el Payment Element solo recopila los detalles necesarios de la dirección de facturación. Para recopilar la dirección de facturación completa de un cliente (por ejemplo, para calcular el impuesto sobre bienes y servicios digitales) o la dirección de envío, usa el Address Element.
Envía los datos del pago a StripeLado del cliente
Usa stripe.confirmSetup para completar la configuración con los datos recopilados por el Payment Element. Proporciona una return_url a esta función para que Stripe pueda redirigir al usuario después de que complete la configuración. Es posible que primero le redirijamos a un sitio intermedio, como una página de autorización bancaria, antes de redirigirle a la return_url
.
Si tu cliente guarda los datos de la tarjeta, lo redirigimos de inmediato a la return_url
cuando la configuración se realiza correctamente. Si no quieres hacer redireccionamientos de pagos con tarjeta, puedes configurar el redireccionamiento como if_required
. Esta acción solo redirige a los clientes que efectúan una compra con métodos de pago basados en redireccionamiento.
Asegúrate de que la return_url
corresponde a una página de tu sitio web que provea el estado del SetupIntent
. Stripe proporciona los siguientes parámetros de consulta de URL para verificar el estado cuando redirige al cliente a la return_url
. Asimismo, puedes adjuntar tus propios parámetros de consulta cuando proporciones la return_url
, y se mantendrán durante todo el proceso de redireccionamiento.
Parámetro | Descripción |
---|---|
setup_intent | El identificador único del SetupIntent . |
setup_intent_client_secret | El secreto de cliente del objeto SetupIntent . |
Puedes usar stripe.retrieveSetupIntent para recuperar el SetupIntent mediante el parámetro de consulta setup_intent_client_secret
. Si se confirma correctamente el SetupIntent, el ID del PaymentMethod
resultante (en result.setupIntent.payment_method
) se guardará en el Customer
proporcionado.
Precaución
Si tienes herramientas que llevan a cabo el seguimiento de la sesión de navegador del cliente, es posible que tengas que añadir el dominio stripe.com
a la lista de exclusión de referentes. Los redireccionamientos hacen que algunas herramientas creen nuevas sesiones que te impiden hacer el seguimiento de la sesión completa.
Cobrar más tarde con el método de pago guardadoLado del servidor
Cumplimiento de la normativa
Al guardar los datos de pago de un cliente, eres responsable de cumplir con todas las leyes, normativas y reglas de red aplicables. Cuando muestres métodos de pago anteriores a tu cliente final para futuras compras, asegúrate de incluir los métodos de pago en los que has obtenido el consentimiento del cliente para guardar los datos del método de pago para este uso futuro específico. Para diferenciar entre los métodos de pago adjuntos a los clientes que pueden y no pueden presentarse a tu cliente final como un método de pago guardado para futuras compras, utiliza el parámetro allow_redisplay.
Cuando todo esté listo para cobrarle al cliente off-session, usa los ID del Customer y del PaymentMethod para crear un PaymentIntent. Para encontrar un método de pago al que realizar el cargo, enumera los métodos de pago asociados con tu cliente. En este ejemplo, se incluyen las tarjetas, pero puedes enumerar cualquier tipo de método de pago aceptado.
Cuando tengas los ID del Customer y el PaymentMethod, crea un PaymentIntent con el importe y la divisa del pago. Establece algún que otro parámetro más para efectuar el pago fuera de la sesión:
- Define off_session como
true
para indicar que el cliente no está en tu flujo de pago durante un intento de pago y no puede cumplir con una solicitud de autenticación realizada por un socio, como un emisor de tarjeta, un banco u otra institución de pago. Si, durante el proceso de pago, un socio solicita la autenticación, Stripe solicitará exenciones utilizando la información del cliente de una transacción anterior durante la sesión. Si no se cumplen las condiciones para la exención, el PaymentIntent podría generar un error. - Establece el valor de la propiedad confirm del PaymentIntent en
true
, lo que genera una confirmación inmediata cuando se crea el PaymentIntent. - Establece payment_method en el ID del PaymentMethod y customer en el ID del Customer.
Cuando un intento de pago falla, la solicitud también falla con un código de estado HTTP 402 y el estado del PaymentIntent es requires_payment_method. Debes notificar a tu cliente para que vuelva a tu aplicación para completar el pago (por ejemplo, mediante un correo electrónico o una notificación en la aplicación).
Comprueba el código del error generado por la biblioteca de la API de Stripe. Si el pago no se ha podido realizar debido a un código de pago rechazado authentication_required, usa el secreto de cliente del PaymentIntent que se ha rechazado con confirmPayment para permitir que el cliente autentique el pago.
const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {error} = await stripe.confirmPayment({ // The client secret of the PaymentIntent clientSecret, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message; } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } });
Nota
stripe.confirmPayment
puede tardar varios segundos en completarse. Durante ese tiempo, deshabilita tu formulario para que no se reenvíe y muestra un indicador de espera, por ejemplo, un indicador giratorio. Si recibes un mensaje de error, muéstraselo al cliente, rehabilita el formulario y oculta el indicador de espera. Si el cliente debe llevar a cabo pasos adicionales para completar el pago, como la autenticación, Stripe.js lo guiará a través de ese proceso.
Si el pago no ha podido realizarse por otros motivos, por ejemplo, por fondos insuficientes, remite al cliente a una página de pago para que introduzca un nuevo método de pago. Puedes volver a utilizar el PaymentIntent existente para reintentar el pago con los nuevos datos de pago.
Probar la integración
Usa datos de pago de prueba y la página de redireccionamiento de prueba para verificar tu integración. Haz click en las siguientes pestañas para ver los detalles de cada método de pago.
Prueba de cargo a un PaymentMethod de débito SEPA guardado
La confirmación del SetupIntent con iDEAL o Sofort genera un PaymentMethod adeudo directo SEPA. El adeudo directo SEPA es un método de pago de notificación con retraso que pasa a un estado de processing
intermedio antes de pasar a un estado succeeded
o requires_payment_method
varios días después.
Comunica a tus clientes qué es Stripe
Stripe recoge información sobre las interacciones de los clientes con Elements para brindarte servicios, prevenir el fraude y mejorar sus servicios. Entre los datos recogidos, se incluyen el uso de cookies y direcciones IP para identificar qué Elements ha visto un cliente durante una sola sesión del proceso de compra. Tú eres responsable de divulgar y obtener todos los derechos y consentimientos necesarios para que Stripe use los datos de estas maneras. Para obtener más información, visita nuestro centro de privacidad.