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.

Integra un formulario de pago prediseñado en tu sitio con Stripe Checkout. Descubre cómo esta integración se compara con los otros tipos de integración de Stripe.

Vista previa del proceso de compra incrustada

powdur.me

Esfuerzo de integración

Poca programación

Tipo de integración

Incrusta un formulario de pago prediseñado en tu sitio

Personalización de la interfaz de usuario

Personalización limitada

Usa la configuración de imagen de marca en el Dashboard de Stripe para hacer coincidir el proceso de compra con el diseño de tu sitio.

Primero, regístrate para obtener una cuenta de Stripe.

Utiliza nuestras bibliotecas oficiales para acceder a la API de Stripe desde tu aplicación:

Crear una sesión de Checkout
Lado del servidor

Desde tu servidor, crea una Checkout Session y establece el ui_mode en embedded. Puedes configurar la Checkout Session con partidas individuales para incluir y opciones como divisa.

También puedes crear una sesión de Checkout para un cliente existente, lo que te permite rellenar automáticamente los campos de Checkout con información de contacto conocida y unificar tu historial de compras para ese cliente.

Para devolver a los clientes a una página personalizada que alojas en tu sitio web, especifica la URL de esa página en el parámetro return_url. Incluye la variable de plantilla {CHECKOUT_SESSION_ID} en la URL para recuperar el estado de la sesión en la página de retorno. Checkout sustituye automáticamente la variable con el ID de la sesión de Checkout antes de redireccionar.

Obtén más información sobre cómo configurar la página de retorno y otras opciones para personalizar el comportamiento de redireccionamiento.

Después de crear la sesión de Checkout, usa el client_secret devuelto en la respuesta para activar Checkout.

Montar Checkout
Lado del cliente

Checkout está disponible como parte de Stripe.js. Incluye el script de Stripe.js en tu página añadiéndolo al encabezado de tu archivo HTML. A continuación, crea un nodo DOM vacío (contenedor) para utilizarlo para el montaje.

index.html
<head>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>
<body>
  <div id="checkout">
    <!-- Checkout will insert the payment form here -->
  </div>
</body>

Inicializa Stripe.js con la clave publicable de la API.

Crea una función asincrónica fetchClientSecret que haga una petición a tu servidor para crear la Checkout Session y recuperar el secreto de cliente. Especifica esta función en options cuando crees la instancia de Checkout:

index.js
// Initialize Stripe.js
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

initialize();

// Fetch Checkout Session and retrieve the client secret
async function initialize() {
  const fetchClientSecret = async () => {
    const response = await fetch("/create-checkout-session", {
      method: "POST",
    });
    const { clientSecret } = await response.json();
    return clientSecret;
  };

  // Initialize Checkout
  const checkout = await stripe.initEmbeddedCheckout({
    fetchClientSecret,
  });

  // Mount Checkout
  checkout.mount('#checkout');
}

Checkout se representa en un iframe que envía la información del pago a Stripe de forma segura a través de una conexión HTTPS.

Error habitual

Evita colocar Checkout dentro de otro iframe, ya que algunos métodos de pago requieren un redireccionamiento a otra página para confirmar el pago.

Personaliza la apariencia

Personaliza Checkout para que coincida con el diseño de tu sitio configurando el color de fondo, el color del botón, el radio del borde y las fuentes en la configuración de la imagen de marca de tu cuenta.

Por defecto, Checkout se muestra sin márgenes externos. Te recomendamos que utilices un elemento contenedor, como un div, para aplicar el margen que desees (por ejemplo, 16 px en todos los lados).

Mostrar una página de retorno

Después de que tu cliente intente pagar, Stripe lo redirige a una página de retorno que alojas en tu sitio. Al crear la Checkout Session, especificaste la dirección URL de la página de retorno en el parámetro return_url. Obtén más información sobre otras opciones para personalizar el comportamiento de redireccionamiento.

Al renderizar tu página de retorno, recupera el estado de la sesión de Checkout utilizando el ID de la sesión de Checkout en la URL. Maneja el resultado según el estado de la sesión de la siguiente manera:

complete: el pago se ha realizado correctamente. Usa la información de la sesión de Checkout para renderizar una página de pago realizado correctamente.
open: el pago ha fallado o se ha cancelado. Vuelve a activar Checkout para que tu cliente pueda volver a intentarlo.

client.js
const session = await fetch(`/session_status?session_id=${session_id}`)
if (session.status == 'open') {
  // Remount embedded Checkout
} else if (session.status == 'complete') {
  // Show success page
  // Optionally use session.payment_status or session.customer_email
  // to customize the success page
}

Métodos de pago basados en el redireccionamiento

Durante el pago, algunos métodos de pago redirigen al cliente a una página intermedia, como una página de autorización bancaria. Cuando completan esa página, Stripe los redirige a tu página de retorno.

Obtén más información sobre los métodos de pago basados en el redireccionamiento y el comportamiento del redireccionamiento.

Gestionar eventos posteriores al pago

Stripe envía un evento checkout.session.completed cuando un cliente completa un pago de Checkout Session. Usa la herramienta webhook Dashboard o sigue las indicaciones de la guía de webhooks para recibir y gestionar estos eventos, que pueden hacer que hagas lo siguiente:

Envía un correo electrónico de confirmación del pedido a tu cliente.
Registra la venta en una base de datos.
Inicia el flujo de trabajo de un envío.

Escucha estos eventos en lugar de esperar a que el cliente sea redirigido a tu sitio web. No es fiable activar el cumplimiento únicamente desde la página de inicio de Checkout. Configurar tu integración para escuchar eventos asincrónicos te permite aceptar diferentes tipos de métodos de pago con una sola integración.

Encontrarás más detalles en nuestra guía para completar pedidos con Checkout.

Gestiona los siguientes eventos al cobrar pagos con Checkout:

Evento	Descripción	Acción
checkout.session.completed	Se envía cuando un cliente completa correctamente una sesión de Checkout.	Envía al cliente una confirmación del pedido y completa el pedido.
checkout.session.async_payment_succeeded	Se envía cuando se efectúa correctamente un pago realizado con un método de pago retrasado, como una deuda directa ACH.	Envía al cliente una confirmación del pedido y completa el pedido.
checkout.session.async_payment_failed	Se envía cuando falla un pago realizado con un método de pago retrasado, como una deuda directa ACH.	Avisa al cliente del fallo y haz que vuelva durante la sesión para intentar el pago de nuevo.

Prueba tu integración

Para probar la integración de tu formulario de pago integrado:

Crea una sesión de Checkout integrada y monta Checkout en tu página.
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.
Haz clic en Pagar. Se te redireccionará a tu return_url.
Ve al Dashboard y busca el pago en la página de Transacciones. Si tu pago se ha efectuado correctamente, lo verás en esa lista.
Haz clic en tu pago para ver más detalles, como un resumen de Checkout con la información de facturación y la lista de artículos comprados. Puedes usar esta información para completar el pedido.

Obtén más información sobre cómo probar tu integración.

Número de tarjeta	Situación	Cómo hacer pruebas
	El pago con tarjeta se realiza correctamente y no requiere autenticación.	Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y código postal.
	El pago con tarjeta requiere autenticación.	Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y código postal.
	La tarjeta se rechaza con un código de rechazo como, por ejemplo, `insufficient_funds`.	Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y código postal.
	La tarjeta UnionPay tiene una longitud variable de 13-19 dígitos.	Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y código postal.

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

OpcionalAñadir más métodos de pago

De forma predeterminada, Checkout admite muchos métodos de pago. Tienes que tomar medidas adicionales para habilitar y mostrar algunos métodos, como Apple Pay, Google Pay y los métodos de «compra ahora y paga después».

Apple Pay y Google Pay

Para aceptar pagos con Apple Pay y Google Pay, 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.
Presenta tu aplicación a través de HTTPS en desarrollo y producción. Puedes usar un servicio como ngrok para ofrecer tu aplicación para pruebas locales.

Además, una sesión de Checkout solo muestra el botón de Apple Pay a los clientes cuando se cumplen todas las condiciones siguientes:

El dispositivo del cliente funciona con macOS 17, iOS 17 o con versiones posteriores.
El cliente está utilizando el navegador Safari.
El cliente tiene una tarjeta válida registrada en Apple Pay.

Una sesión de Checkout solo muestra el botón de Google Pay a los clientes cuando se cumplen todas las condiciones siguientes:

El dispositivo del cliente ejecuta Chrome 61 o una versión posterior.
El cliente tiene una tarjeta válida registrada en Google Pay.

Pruebas regionales
India

Stripe Checkout no es compatible con Apple Pay ni Google Pay para cuentas o clientes de Stripe en la India. Si tu dirección IP está en la India, no podrás probar tu integración de Apple Pay o Google Pay, ni siquiera aunque la cuenta de Stripe esté fuera de la India.

OpcionalCrear productos y precios

Antes de crear una sesión de Checkout, puedes crear Productos y Precios por adelantado. Usa productos para representar diferentes bienes físicos o niveles de servicio y Precios para representar los precios de cada producto.

Por ejemplo, puedes crear una camiseta como producto con un precio de 20 USD. Esto te permite actualizar y añadir precios sin necesidad de cambiar los detalles de tus productos subyacentes. Puedes crear productos y precios con el Dashboard de Stripe o con la API. Obtén más información sobre Cómo funcionan los productos y los precios.

La API solo necesita un name para crear un producto. Checkout muestra los atributos name, description, e images del producto que ofrezcas.

A continuación, crea un Precio para definir cuánto cobrarás por tu producto. Esto incluye el coste del producto y la divisa que se va a utilizar.

Cada precio que creas tiene un ID. Al crear una sesión de Checkout, haz referencia al ID del precio y a la cantidad. Si vendes en varias divisas, haz que tu precio esté en varias divisas. Checkout determina la divisa local del cliente automáticamente y la presenta si el precio lo admite.

OpcionalRellenar automáticamente los datos del cliente
Lado del servidor

Si ya has recopilado el correo electrónico de tu cliente y quieres que se rellene automáticamente en la Checkout Session, especifica customer_email al crear una Checkout Session.

OpcionalGuarda los datos de los métodos de pago
Lado del servidor

De forma predeterminada, los métodos de pago que se utilizan para hacer un pago único con Checkout no están disponibles para usarlos en el futuro.

Guarda métodos de pago para cargarlos fuera de la sesión

Puedes configurar Checkout para guardar los métodos de pago utilizados para realizar un pago único especificando el argumento payment_intent_data.setup_future_usage. Esto es útil si necesitas capturar un método de pago registrado para usarlo en comisiones futuras, como comisiones de cancelación o de no presentación.

Si utilizas Checkout en el modo subscription, Stripe guarda automáticamente el método de pago para cargar los pagos posteriores. Los métodos de pago con tarjeta guardados para los clientes que utilizan el modo setup_future_usage o subscription no aparecen para las compras de devolución en Checkout (consulta más información sobre esto a continuación). Te recomendamos que utilices el texto personalizado para incluir un enlace a las condiciones pertinentes relativas al uso de la información de pago guardada.

Precaución

Las leyes internacionales de privacidad son complicadas y tienen muchos matices. Te recomendamos que te pongas en contacto con tu equipo legal y de privacidad antes de implementar setup_future_usage, ya que podría afectar a tu marco existente de cumplimiento de la normativa de privacidad. Consulta la guía emitida por el Consejo Europeo de Protección para obtener más información sobre cómo guardar los datos de pago.

Guarda los métodos de pago para completarlos automáticamente en Checkout

De forma predeterminada, Checkout utiliza Link para ofrecer a tus clientes la opción de guardar y reutilizar de forma segura su información de pago. Si prefieres administrar los métodos de pago tú mismo, usa saved_payment_method_options.payment_method_save al crear una Checkout Session para que tus clientes guarden sus métodos de pago para futuras compras en Checkout.

Si se especifica este parámetro en el modo de pago o suscripción, se muestra una casilla de verificación opcional que permite a los clientes guardar explícitamente su método de pago para futuras compras. Cuando los clientes marcan esta casilla, Checkout guarda el método de pago con allow_redisplay: siempre. Checkout utiliza este parámetro para determinar si un método de pago puede completarse automáticamente en futuras compras. Cuando uses saved_payment_method_options.payment_method_save, no necesitarás transferir setup_future_usage para guardar el método de pago.

Para usar saved_payment_method_options.payment_method_save se requiere un Customer. Para guardar un nuevo cliente, establece el valor de la sesión de Checkout customer_creation en always. De lo contrario, la sesión no guarda el cliente ni el método de pago.

Si no se especifica payment_method_save o si el cliente no acepta guardar el método de pago, Checkout aún guarda los métodos de pago creados en modo subscription o que utilizan setup_future_usage. Estos métodos de pago tienen un valor allow_redisplay de limited, lo que evita que se rellenen previamente para devolver compras y te permite cumplir con las reglas de la red de tarjetas y las normativas de protección de datos. Aprende a cambiar el comportamiento predeterminado habilitado por estos modos y cómo cambiar o anular el comportamiento allow_redisplay.

Nota

Puedes usar Checkout para guardar tarjetas y otros métodos de pago para cargarlas fuera de la sesión, pero Checkout solo rellena automáticamente las tarjetas guardadas. Descubre cómo rellenar automáticamente tarjetas guardadas. Para guardar un método de pago sin un pago inicial, usa Checkout en el modo de configuración.

Permite que los clientes eliminen los métodos de pago guardados

Para permitir que tus clientes eliminen un método de pago guardado para que no vuelva a aparecer en pagos futuros, usa saved_payment_method_options.payment_method_remove al crear una sesión de Checkout.

El cliente no puede eliminar un método de pago si está vinculado a una suscripción activa y el cliente no tiene un método de pago predeterminado guardado para los pagos de facturas y suscripciones.

OpcionalGestión de cuentas de clientes
Sin programación

Permite a tus clientes gestionar sus propias cuentas compartiendo un enlace a tu portal de clientes. El portal de clientes permite a los clientes iniciar sesión con su correo electrónico para gestionar las suscripciones, actualizar los métodos de pago, etc.

OpcionalSeparar la autorización y la captura
Lado del servidor

Stripe acepta los pagos con tarjeta en dos pasos, de modo que primero puedes autorizar una tarjeta y luego capturar los fondos. Cuando Stripe autoriza un pago, el emisor de la tarjeta garantiza los fondos y retiene el importe del pago en la tarjeta del cliente. Luego, tienes un cierto período para capturar los fondos, dependiendo de la tarjeta). Si no capturas el pago antes de que caduque la autorización, el pago se cancela y el emisor libera los fondos retenidos.

Separar la autorización de la captura es útil si necesitas tomar medidas adicionales entre la confirmación de que el cliente puede pagar y el cobro de los fondos. Por ejemplo, si vendes artículos de existencias limitadas y un cliente compra un producto con Checkout, es posible que tengas que confirmar si hay existencias del artículo antes de capturar el pago y completar la compra. Para conseguirlo, usa el siguiente flujo de trabajo:

Confirma que Stripe ha autorizado el método de pago del cliente.
Consulta tu sistema de gestión de inventario para confirmar que el artículo sigue disponible.
Actualiza tu sistema de gestión de inventario para indicar que un cliente ha comprado el artículo.
Captura el pago del cliente.
Si la compra se realiza correctamente, informa a tu cliente en tu página de confirmación.

Para indicar que deseas separar la autorización y la captura, debes establecer el valor de payment_intent_data.capture_method en manual al crear la sesión de Checkout. Esto le indica a Stripe que solo debe autorizar el importe de la tarjeta del cliente.

Para capturar un pago no capturado, puedes utilizar el punto de conexión del Dashboard o de captura. La captura de pagos mediante programación requiere acceso a los PaymentIntent creados durante la sesión de Checkout, que puedes obtener desde el objeto Session.

OpcionalGestión logística de pedidos

Descubre cómo obtener una notificación mediante programación cada vez que un cliente paga.