Guarda los datos de pago durante el pago
Usa la API Payment Intents para guardar los datos de pago de una compra. Sirve para varios casos de uso:
- Cobrarle al cliente por un pedido de e-commerce y almacenar los datos para compras futuras.
- Iniciar el primer pago de una serie de pagos recurrentes.
- Cobrar un depósito y almacenar los datos para cobrar el importe total más tarde.
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.
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:
Crear un objeto CustomerLado del servidor
Para configurar una tarjeta para pagos futuros, debes adjuntarla a un Customer. Crea el objeto Customer cuando tu cliente cree una cuenta en tu empresa. Los objetos Customer permiten reutilizar métodos de pago y hacer el seguimiento de varios pagos.
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 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.
Crear un PaymentIntentLado del servidor
Nota
Si quieres procesar el Payment Element sin crear primero un PaymentIntent, consulta Recolectar los datos de pago antes de crear un Intent.
El objeto PaymentIntent representa tu intención de cobrarle a un cliente y hace el seguimiento de los intentos de cobro y de los cambios en el estado a lo largo del proceso de pago.
Crea el PaymentIntent
Crea un PaymentIntent en tu servidor con un importe y una divisa. En la última versión de la API, especificar el parámetro automatic_payment_methods
es opcional porque Stripe habilita su funcionalidad de forma predeterminada. Puedes administrar los métodos de pago desde el Dashboard. Stripe gestiona la devolución de los métodos de pago que cumplen los requisitos en función de factores como el importe de la transacción, la divisa y el flujo de pagos.
Crea un PaymentIntent en tu servidor. Especifica un importe, una divisa y un cliente. En la última versión de la API, especificar el parámetro automatic_payment_methods
es opcional porque Stripe habilita su funcionalidad de forma predeterminada. Habilita setup_future_usage. Los métodos de pago que configuraste en el Dashboard se añaden automáticamente al Payment Intent.
Si no quieres usar el Dashboard o si quieres especificar métodos de pago de forma manual, puedes incluirlos usando el atributo payment_method_types
.
Nota
Decide cuánto cobrar siempre del lado del servidor, un entorno de confianza, y no del lado del cliente. De esta forma, se evita que los clientes malintencionados puedan elegir sus propios precios.
Recupera el secreto del cliente
El PaymentIntent 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.
Recopila datos de pagoLado del cliente
Recopila 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 del pago a Stripe de modo seguro a través de una conexión HTTPS. Evita colocar el Payment Element en otro iframe porque algunos métodos de pago requieren redirigir a otra página para la confirmación del pago.
If you do choose to use an iframe and want to accept Apple Pay or Google Pay, the iframe must have the allow attribute set to equal "payment *"
.
Para que la integración funcione, la dirección de la página del proceso de compra debe empezar con https://
en lugar de http://
. Puedes probar tu integración sin usar HTTPS, pero recuerda habilitarla cuando todo esté listo para aceptar pagos activos.
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.
Personalizar 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
.
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.
Solicitar token de comerciante de Apple Pay
Si has configurado tu integración para aceptar pagos de Apple Pay, te recomendamos que configures la interfaz de Apple Pay para devolver un token de comercio y habilitar las transacciones iniciadas por el comerciante (MIT). Solicita el tipo de token de comercio correspondiente en el Pago Element.
Enviar el pago a StripeLado del cliente
Usa stripe.confirmPayment para completar el pago con los datos de Payment Element. Proporciona una dirección return_url para esta función que indique a Stripe dónde redirigir al usuario después de que complete el pago. Si bien, antes de ser redirigido a la return_url
, puede que primero se redirija al usuario a un sitio intermedio, como una página de autorización del banco. Los pagos con tarjeta se redirigen de inmediato a la return_url
si el pago se ha hecho efectivo.
Si no quieres hacer redireccionamiento de pagos con tarjeta una vez que se completan los pagos, puedes configurar el redireccionamiento como if_required
. Esto solo redirige a los clientes que finalizan su compra con métodos de pago basados en redireccionamiento.
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 guía a través de ese proceso.
Si el pago se realizó correctamente, la tarjeta se guarda en el objeto Customer. Esto se refleja en el campo cliente del PaymentMethod. En este punto, si tienes una representación interna de cliente, asocia el ID del objeto Customer a dicha representación. Ahora puedes usar el objeto PaymentMethod almacenado para cobrar futuros pagos a tu cliente sin pedirle de nuevo los datos de pago.
Asegúrate de que la return_url
corresponda a una página de tu sitio web que proporcione el estado del pago. Cuando Stripe redirige al cliente a la return_url
, proporcionamos los siguientes parámetros de consulta de URL:
Parámetro | Descripción |
---|---|
payment_intent | El identificador único del PaymentIntent . |
payment_intent_client_secret | El secreto de cliente del objeto PaymentIntent . |
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.
Usa uno de los parámetros de consulta para recuperar el PaymentIntent. Examina el estado del PaymentIntent para decidir qué mostrarás a tus clientes. También puedes adjuntar tus propios parámetros de consulta cuando proporciones la return_url
; estos parámetros se mantendrán durante el proceso de redireccionamiento.
Cobrar más tarde con el método de pago guardadoLado del servidor
Advertencia
bancontact
, ideal
y sofort
son, de forma predeterminada, métodos de pago únicos. Al configurar el consumo futuro, generan un tipo de método de pago sepa_debit
reutilizable, por lo que debes usar sepa_debit
para consultar los métodos de pago guardados.
Compliance
You’re responsible for your compliance with all applicable laws, regulations, and network rules when saving a customer’s payment details. When rendering past payment methods to your end customer for future purchases, make sure you’re listing payment methods where you’ve collected consent from the customer to save the payment method details for this specific future use. To differentiate between payment methods attached to customers that can and can’t be presented to your end customer as a saved payment method for future purchases, use the allow_redisplay parameter.
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.
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 PaymentIntent 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.