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.
Crea una integración de pagos personalizada incrustando componentes de interfaz de usuario en tu sitio web con Stripe Elements. Descubre cómo esta integración se compara con los otros tipos de integración de Stripe.
El código del lado del cliente y del lado del servidor crea un formulario del proceso de compra que acepta varios métodos de pago.
Esfuerzo de integración
Tipo de integración
Combinar componentes de la interfaz de usuario en un flujo de pago personalizado
Personalización de la interfaz de usuario
Personalización a nivel de CSS con la API Appearance
¿Te interesa utilizar Stripe Tax, los descuentos, los envíos o la conversión de divisas?
Stripe tiene una integración de Payment Element que gestiona los impuestos, los descuentos, el envío y la conversión de divisas por ti. Para obtener más información, consulta cómo crear una página del proceso de compra.
Configura StripeLado del servidor
Primero, crea una cuenta de Stripe o inicia sesión.
Utiliza nuestras bibliotecas oficiales para acceder a la API de Stripe desde tu aplicación:
Crear un PaymentIntentLado del servidor
Nota
Si quieres procesar el Payment Element sin crear primero un PaymentIntent, consulta Recopilar 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_
es opcional porque Stripe habilita sus funciones de forma predeterminada. Puedes gestionar los métodos de pago desde el Dashboard. Stripe gestiona la devolución de métodos de pago que cumplan los requisitos en función de factores como el importe de la transacción, la divisa y el flujo de pago.
Stripe utiliza la configuración de métodos de pago para mostrar los métodos de pago que has habilitado. Para ver cómo se muestran tus métodos de pago a los clientes, introduce un ID de transacción o establece el importe y la divisa de un pedido en el Dashboard. Para anular los métodos de pago, enumera manualmente los que quieras habilitar 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.
Recopilar datos de pagoLado del cliente
Recolecta los datos de pago del cliente con el Payment Element. El Payment Element es un componente de interfaz de usuario prediseñado que simplifica la recolecció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.
Si eliges usar un iframe y quieres aceptar Apple Pay o Google Pay, el iframe debe tener el atributo allow establecido para ser igual a "payment *"
.
La dirección de la página del proceso de compra debe empezar por https://
en lugar de http://
para que tu integración funcione. Puedes probar tu integración sin usar HTTPS, pero recuerda habilitarla cuando todo esté listo para aceptar pagos reales.
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 Appearance en options
al crear el proveedor Elements
.
Recopila las direcciones
De forma predeterminada, el Payment Element solo recolecta los datos necesarios de la dirección de facturación. Para recolectar la dirección de facturación completa de un cliente (con el fin de calcular el impuesto sobre bienes y servicios digitales, por ejemplo) o su dirección de envío, utiliza 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 comerciante correspondiente en el Payment Element.
OpcionalGuardar y recuperar métodos de pago del cliente
Puedes configurar el Payment Element para guardar los métodos de pago de tu cliente para su uso futuro. En esta sección, se muestra cómo integrar la función de métodos de pago guardados, que permite al Payment Element lo siguiente:
- Solicite a los compradores su consentimiento para guardar un método de pago
- Guardar métodos de pago cuando los compradores brindan su consentimiento
- Mostrar los métodos de pago guardados a los compradores para compras futuras
- Actualiza automáticamente tarjetas perdidas o caducadas cuando los compradores las reemplacen

Guarda los métodos de pago.

Reutiliza un método de pago guardado previamente.
Permite que se guarde el método de pago en el Payment Element
Al crear una PaymentIntent en tu servidor, crea también una CustomerSession proporcionando el ID de cliente y habilitando el componente payment_element para tu sesión. Configura las funciones guardadas que quieres habilitar. Por ejemplo, al habilitar payment_method_save, se muestra una casilla de verificación que ofrece a los clientes guardar sus datos de pago para usarlos en el futuro.
Puedes especificar setup_
en un PaymentIntent o en una sesión de Checkout para anular el comportamiento predeterminado al guardar los métodos de pago. Esto garantiza que guardes automáticamente el método de pago para usarlo en el futuro, incluso si el cliente no elige explícitamente guardarlo.
Precaución
Permitir que los compradores eliminen sus métodos de pago guardados habilitando payment_method_remove afecta a las suscripciones que dependen de ese método de pago. Al eliminar el método de pago, el PaymentMethod se separa de ese cliente.
Tu instancia de Elements utiliza el secreto de cliente de CustomerSession para acceder a los métodos de pago guardados de ese cliente. Gestiona los errores correctamente cuando crees la CustomerSession. Si se produce un error, no es necesario que proporciones el secreto de cliente de CustomerSession a la instancia de Elements, ya que es opcional.
Crea la instancia de Elements utilizando los secretos de cliente tanto para PaymentIntent y para CustomerSession. A continuación, usa esta instancia de Elements para crear un Payment Element.
// Create the CustomerSession and obtain its clientSecret const res = await fetch("/create-intent-and-customer-session", { method: "POST" }); const { customer_session_client_secret: customerSessionClientSecret } = await res.json(); const elementsOptions = { clientSecret: '{{CLIENT_SECRET}}', customerSessionClientSecret, // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout form, passing the client secret // and CustomerSession's client secret obtained in a previous step const elements = stripe.elements(elementsOptions); // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element');
Al confirmar el PaymentIntent, Stripe.js controla automáticamente la configuración de setup_future_usage en el PaymentIntent y allow_redisplay en el PaymentMethod, en función de si el cliente ha marcado la casilla para guardar sus datos de pago.
Exigir la recolección del CVC
Otra opción es especificar require_
al crear el PaymentIntent para garantizar que se recoja el CVC cuando un cliente paga con tarjeta.
Detectar la elección de un método de pago guardado
Para controlar el contenido dinámico cuando se elige un método de pago guardado, escucha el evento change
del Payment Element, que se rellena con el método de pago elegido.
paymentElement.on('change', function(event) { if (event.value.payment_method) { // Control dynamic content if a saved payment method is selected } })
OpcionalEnlace en la página del proceso de compraLado del cliente
Para que tu cliente pueda pagar más rápido, usa Link en Payment Element. Puedes rellenar automáticamente la información de cualquier cliente que haya iniciado sesión y que ya esté utilizando Link, independientemente de si guardó inicialmente su información en Link con otra empresa. La integración predeterminada de Payment Element incluye una solicitud de Link en el formulario de la tarjeta. Para gestionar Link en el Payment Element, consulta la configuración de tu método de pago.

Recopilar una dirección de correo electrónico del cliente para la autenticación o registro de Link
Opciones de integración
Hay dos formas de integrar Link con el Payment Element. De ellas, Stripe recomienda pasar una dirección de correo electrónico del cliente al Payment Element si está disponible. Recuerda tener en cuenta cómo funciona tu flujo del proceso de compra al decidir entre estas opciones:
Opción de integración | Flujo del proceso de compra | Descripción |
---|---|---|
Pasa una dirección de correo electrónico del cliente al Payment Element Recomendado |
| Pasa programáticamente una dirección de correo electrónico del cliente al Payment Element. En este caso, un cliente se autentica en Link directamente en el formulario de pago en lugar de en un componente de interfaz de usuario separado. |
Recolecta una dirección de correo electrónico del cliente en el Payment Element | Tus clientes introducen su correo electrónico y se autentican o se registran con Link directamente en Payment Element durante el proceso de compra. | Si un cliente no se ha registrado con Link y elige un método de pago admitido en el Payment Element, se le pedirá que guarde sus datos usando Link. En el caso de los que ya se han registrado, Link rellena automáticamente su información de pago. |
OpcionalRecuperar actualizaciones del servidorLado del cliente
Es posible que desees actualizar algunos atributos del PaymentIntent después de que se procese el Payment Element, como el importe (por ejemplo, códigos de descuento o costes de envío). Puedes actualizar el PaymentIntent en tu servidor y, a continuación, llamar a elements.fetchUpdates para ver el nuevo importe reflejado en el Payment Element. En este ejemplo se muestra cómo crear el punto de conexión del servidor que actualiza el importe en el PaymentIntent:
Este ejemplo ilustra cómo actualizar la interfaz de usuario para que estos cambios se vean en el lado del cliente:
(async () => { const response = await fetch('/update'); if (response.status === 'requires_payment_method') { const {error} = await elements.fetchUpdates(); } })();
Enviar el pago a StripeLado del cliente
Usa stripe.confirmPayment para efectivizar el pago con los datos de Payment Element. Proporciona una return_url a esta función para indicar a dónde Stripe debe redirigir al usuario después de efectivizar el pago. Es posible que primero se redirija al usuario a un sitio intermedio, como una página de autorización bancaria, antes de redirigirle al return_
. Los pagos con tarjeta redireccionan inmediatamente al return_
cuando el pago se ha hecho efectivo.
Si no quieres redireccionar los pagos con tarjeta después de completar el pago, puedes configurar el redireccionamiento como if_
. Esto solo redirecciona a los clientes que finalizan su compra con métodos de pago basados en redireccionamiento.
Asegúrate de que la return_
corresponda a una página de tu sitio web que proporcione el estado del pago. Cuando Stripe redirige al cliente a la return_
, proporcionamos los siguientes parámetros de consulta de URL:
Parámetro | Descripción |
---|---|
payment_ | El identificador único del PaymentIntent . |
payment_ | 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.
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 el return_
, que se mantendrá durante el proceso de redireccionamiento.
Administrar eventos posteriores al pagoLado del servidor
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. |
Prueba tu integración
Para probar tu integración de pagos personalizados:
- Crea una intención de pago y recupera el secreto del cliente.
- Completa los datos del pago con un método de la siguiente tabla.
- Introduce cualquier fecha futura como fecha de caducidad.
- Introduce cualquier número de 3 dígitos como CVC.
- Introduce cualquier código postal de facturación.
- Envía el pago a Stripe. Se redirigirá a tu
return_
.url - Ve al Dashboard y busca el pago en la página Transacciones. Si tu pago se ha efectuado correctamente, lo verás en esa lista.
- Haz clic en el pago para ver más detalles, como la información de facturación y la lista de artículos comprados. Puedes usar esta información para completar el pedido.
Más información sobre probar la integración.
Consulta Pruebas para obtener información adicional para probar tu integración.
OpcionalAñadir más métodos de pago
El Payment Element admite muchos métodos de pago de forma predeterminada. Tienes que tomar medidas adicionales para habilitar y mostrar algunos métodos de pago.
Affirm
Para comenzar a usar Affirm, debes habilitarlo en el Dashboard. Al crear un PaymentIntent con el método de pago Affirm, debes incluir una dirección de envío. Según este ejemplo, te sugerimos especificar la información de envío del cliente después de que el cliente elija su método de pago. Obtén más información sobre cómo usar Affirm con Stripe.
Prueba Affirm
Aprende a probar diferentes escenarios usando la siguiente tabla:
Escenario | Cómo hacer la prueba |
---|---|
Tu cliente efectúa correctamente un pago con Affirm. | Rellena el formulario (asegúrate de incluir la dirección de envío) y autentica el pago. |
Tu cliente no se autentifica en la página de redireccionamiento de Affirm. | Completa el formulario y haz click en Error en el pago de prueba en la página de redireccionamiento. |
Afterpay (Clearpay)
Al crear un PaymentIntent con el método de pago Afterpay, debes incluir una dirección de envío. Obtén más información sobre el uso de Afterpay con Stripe.
Puedes gestionar los métodos de pago desde el Dashboard. Stripe gestiona la devolución de métodos de pago que cumplan los requisitos en función de factores como el importe de la transacción, la divisa y el flujo de pago. En el siguiente ejemplo se usa el atributo automatic_payment_methods, pero puedes enumerar afterpay_
con tipos de métodos de pago. En la última versión de la API, especificar el parámetro automatic_
es opcional porque Stripe habilita sus funciones de forma predeterminada. Independientemente de la opción que elijas, asegúrate de habilitar Afterpay Clearpay en el Dashboard.
Prueba Afterpay (Clearpay)
Aprende a probar diferentes escenarios usando la siguiente tabla:
Escenario | Cómo hacer la prueba |
---|---|
Tu cliente ha efectuado correctamente un pago con Afterpay. | Rellena el formulario (asegúrate de incluir la dirección de envío) y autentica el pago. |
Tu cliente no se autentifica en la página de redireccionamiento de Afterpay. | Completa el formulario y haz click en Error en el pago de prueba en la página de redireccionamiento. |
Apple Pay y Google Pay
Cuando habilitas pagos con tarjeta, mostramos Apple Pay y Google Pay para clientes cuyo entorno cumple con las condiciones de visualización del monedero. Para aceptar pagos desde estos monederos, también debes hacer lo siguiente:
- Habilítalos en la configuración de los métodos de pago. Apple Pay está habilitado de forma predeterminada.
- Presenta tu aplicación a través de HTTPS en desarrollo y producción.
- Registra tu dominio.
- Obtener actualizaciones del servidor si actualizas el importe de un PaymentIntent para mantener sincronizado el modo de pago del monedero.
Pruebas regionalesIndia
Stripe Elements no es compatible con Google Pay ni Apple Pay para cuentas y clientes de Stripe en la India. Por lo tanto, no puedes probar tu integración de Google Pay o Apple Pay si la dirección IP del probador está en la India, incluso si la cuenta de Stripe se encuentra fuera de la India.
Más información sobre el uso de Apple Pay y Google Pay con Stripe.
Adeudo directo ACH
Al usar el Payment Element con el método de pago de adeudo directo ACH, sigue estos pasos:
Crea un objeto Customer.
Especifica el ID del cliente cuando crees el
PaymentIntent
.Selecciona un método de verificación.
Cuando uses el método de pago de adeudo directo de ACH con Payment Element, solo podrás seleccionar automatic
o instant
.
Más información sobre el uso del adeudo directo ACH con Stripe.
Probar el adeudo directo ACH
Escenario | Cómo hacer la prueba |
---|---|
Tu cliente efectúa correctamente el pago con una cuenta bancaria de EE. UU. mediante la verificación instantánea. | Selecciona Cuenta bancaria de EE. UU. y completa el formulario. Haz clic en la entidad de prueba. Sigue las instrucciones del cuadro de diálogo para vincular tu cuenta bancaria. Haz clic en el botón de pago. |
Tu cliente efectúa correctamente el pago con una cuenta bancaria de EE. UU usando microdepósitos. | Selecciona Cuenta bancaria de EE. UU. y completa el formulario. Haz clic en Introducir datos bancarios manualmente. Sigue las instrucciones del cuadro de diálogo para vincular tu cuenta bancaria. Puedes usar estos números de cuenta de prueba. Haz clic en el botón de pago. |
Tu cliente no completa el proceso de vinculación de cuenta bancaria. | Selecciona Cuenta bancaria de EE. UU. y haz clic en la entidad de prueba o en Introducir datos bancarios manualmente. Cierra el cuadro de diálogo sin completarlo. |
BLIK
Al utilizar el Payment Element con BLIK, el usuario puede cerrar el cuadro de diálogo en el que se le pide que autorice el pago en su aplicación bancaria. Esta acción activa un redireccionamiento a tu return_
y no devuelve al usuario a la página del proceso de compra. Obtén más información sobre cómo usar BLIK con Stripe.
Para gestionar casos en que los usuarios cierran el cuadro de diálogo, inspecciona el status
del Payment Intent en el controlador del lado del servidor de tu return_
para verificar si pasó a succeeded
o todavía está en estado requires_
(lo que significa que el usuario cerró el cuadro de diálogo sin autorización), gestionando cada caso según sea necesario.
Métodos de pago con código QR
Cuando se usa el Payment Element con un método de pago basado en códigos QR (WeChat Pay, PayNow, Pix, PromptPay, Cash App Pay), el usuario puede cerrar el código de diálogo del código QR. De este modo, se activa un redireccionamiento a tu return_
y el usuario no vuelve a la página del proceso de compra.
Para gestionar el momento en el que los usuarios cierran las modales de los códigos QR, en el controlador del lado del servidor de tu return_
, inspecciona el status
del PaymentIntent para verificar si ya ha pasado a succeeded
o todavía está en estado requires_
(es decir, que el usuario ha cerrado la modal sin haber pagado). Gestiona cada caso según sea necesario.
Como alternativa, evita el redireccionamiento automático a tu return_
si estableces el parámetro avanzado opcional redirect=if_
, que evita redirigir al cliente cuando este cierra la modal del código QR.
Cash App Pay
El Payment Element presenta un formulario dinámico de forma diferente en la web de escritorio o en la web móvil, ya que utiliza diferentes métodos de autenticación de clientes. Obtén más información sobre cómo usar Cash App Pay con Stripe.
PayPal
Para usar PayPal, asegúrate de que tienes un dominio registrado.
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.