Ir a contenido
Crea una cuenta
o
Inicia sesión
Logotipo de Stripe Docs
/
Pregúntale a la IA
Crear una cuenta
Iniciar sesión
Empieza ahora
Pagos
Ingresos
Plataformas y marketplaces
Gestión del dinero
Recursos para desarrolladores
ResumenConoce todos los productos
Empieza a desarrollar
Empezar a desarrollar
    Configura tu entorno de desarrollo
    Envía tu primera solicitud de API
    Acepta un pago
    Diseña y prueba nuevas funcionalidades
    Lista de verificación de modo activo
Acerca de las API
Crea con un LLM
Utiliza Stripe sin necesidad de programación
Configura Stripe
Crea una cuenta.
Dashboard web
Dashboard móvil
Migra a Stripe
InicioEmpieza ahoraStart developing

Aceptar un pago

Acepta pagos en línea en modo seguro.

Crea un formulario de pago o usa una página de confirmación de compra prediseñada para comenzar a aceptar pagos electrónicos.

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

Vista previa de Checkout integradoVista previa de Checkout integrado
powdur.me

Esfuerzo de integración

Baja codificación (low code)

Tipo de integración

Integra 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 que el Checkout coincida con el diseño de tu sitio.

Primero, inscríbete para obtener una cuenta de Stripe.

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

Command Line
Ruby
Python
PHP
Java
Node
Go
.NET
No results
# Available as a gem sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node
Go
.NET
No results
# If you use bundler, you can add this line to your Gemfile gem 'stripe'

Crear una sesión de Checkout
Lado del servidor

Desde tu servidor, crea una sesión de Checkout y establece el ui_mode en embedded. Puedes configurar la sesión de Checkout con partidas que se incluyan y opciones como la moneda.

También puedes crear una Checkout Session para un cliente existente, lo que te permite completar previamente los campos de Checkout con información de contacto conocida y unificar tu historial de compras para ese cliente.

Para que los clientes regresen 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 la ID de la sesión de Checkout antes de redirigir al usuario.

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 código client_secret que se devolvió en la respuesta para montar Checkout.

Ruby
Python
PHP
Java
Nodo
Ir
.NET
No results
# This example sets up an endpoint using the Sinatra framework. # To learn more about Sinatra, watch this video: https://youtu.be/8aA9Enb8NVc. require 'json' require 'sinatra' require 'stripe' # Set your secret key. Remember to switch to your live secret key in production. # See your keys here: https://dashboard.stripe.com/apikeys Stripe.api_key =
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'
post '/create-checkout-session' do session = Stripe::Checkout::Session.create({ line_items: [{ price_data: { currency: 'usd', product_data: { name: 'T-shirt', }, unit_amount: 2000, }, quantity: 1, }], mode: 'payment', ui_mode: 'embedded', return_url: 'https://example.com/checkout/return?session_id={CHECKOUT_SESSION_ID}' }) {clientSecret: session.client_secret}.to_json end

Incorporar Checkout
Lado del cliente

Checkout está disponible como parte de Stripe.js. Incluye el script de Stripe.js en tu página agregándolo al encabezado de tu archivo HTML. A continuación, crea un nodo DOM vacío (contenedor) para usarlo en 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 tu API.

Crea una función fetchClientSecret asincrónica que haga una solicitud a tu servidor para crear la sesión de Checkout y recuperar el secreto de cliente. Pasa esta función a options al crear 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 en modo seguro a través de una conexión HTTPS.

Errores habituales

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

Personaliza el aspecto

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

De forma predeterminada, Checkout procesa sin relleno o margen externos. Te recomendamos usar un elemento contenedor como un div para aplicar el margen deseado (por ejemplo, 16 px en todos los lados).

Mostrar página de devolución

Luego de que el cliente intente realizar el pago, Stripe lo redirige a una página de retorno que alojas en tu sitio. Cuando creaste la sesión de Checkout, especificaste la 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.

Cuando muestres tu página de retorno, recupera el estado de la sesión de Checkout con el ID de sesión de Checkout en la URL. Gestiona el resultado de acuerdo con el estado de la sesión de la siguiente manera:

  • complete: el pago se efectuó correctamente. Usa la información de la sesión de Checkout para mostrar una página que indique que el pago se realizó correctamente.
  • open: el pago falló o se canceló. Vuelve a montar Checkout para que tu cliente pueda volver a intentarlo.
Ruby
Python
PHP
Java
Node
Go
.NET
No results
get '/session-status' do session = Stripe::Checkout::Session.retrieve(params[:session_id]) {status: session.status, customer_email: session.customer_details.email}.to_json end
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 redirecciones

Durante el proceso de 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 métodos de pago que requieren redireccionamientos y comportamiento de redireccionamiento.

Administra eventos posteriores al pago

Stripe envía un evento checkout.session.completed cuando un cliente completa un pago de la Checkout Session. Usa la herramienta de webhooks del Dashboard o sigue la guía de webhooks para recibir y gestionar estos eventos, que podrían 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 tareas de envío.

Recibe notificaciones de estos eventos en lugar de esperar a que se redirija a tu cliente de nuevo a tu sitio web. Activar el cumplimiento del pedido solo desde la página de inicio de Checkout no es confiable. Si configuras tu integración para recibir notificaciones de eventos asincrónicos, podrás aceptar diferentes tipos de métodos de pago con una sola integración.

Obtén más información en nuestra guía de gestión logística para Checkout.

Gestiona los siguientes eventos al cobrar pagos con Checkout:

EventoDescripciónAcción
checkout.session.completedSe envía cuando un cliente completa correctamente una Checkout Session.Envía al cliente una confirmación del pedido y completa el pedido.
checkout.session.async_payment_succeededSe envía cuando un pago realizado con un método de pago retrasado, como el débito directo ACH, se efectúa correctamente.Envía al cliente una confirmación del pedido y completa el pedido.
checkout.session.async_payment_failedSe envía cuando falla un pago realizado con un método de pago retrasado, como el débito directo ACH.Notifica al cliente el error y regrésalo a la sesión para que vuelva a intentar el pago.

Prueba tu integración

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

  1. Crea una sesión de Checkout incrustada e incorpora Checkout en tu página.
  2. Completa los datos del pago con un método de la siguiente tabla.
    • Ingresa una fecha futura como fecha de vencimiento.
    • Ingresa cualquier número de 3 dígitos como CVC.
    • Ingresa un código postal de facturación.
  3. Haz clic en Pagar. Te redirigiremos a tu return_url.
  4. Ve al Dashboard y busca el pago en la página Transacciones. Si tu pago se realizó correctamente, lo verás en esa lista.
  5. Haz clic en tu pago para ver más detalles, como un resumen de pago 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 tarjetaEscenarioCómo hacer la prueba
El pago con tarjeta se efectúa correctamente y no requiere autenticación.Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal.
El pago con tarjeta requiere autenticación.Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal.
La tarjeta es rechazada con un código de rechazo insufficient_funds.Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal.
La tarjeta UnionPay puede tener entre 13 y 19 dígitos.Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal.

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

OpcionalAgrega más métodos de pago

OpcionalCrear productos y precios

OpcionalCompletar los datos del cliente automáticamente
Lado del servidor

OpcionalGuardar datos de métodos de pago
Lado del servidor

OpcionalGestión de cuentas de clientes
Sin código

OpcionalSeparar la autorización de la captura
Lado del servidor

OpcionalGestión logística del pedido

Consulta también

  • Agrega descuentos
  • Recauda impuestos
  • Recopila las identificaciones fiscales
  • Agrega envío
  • Personaliza tu imagen de marca
¿Te fue útil esta página?
SíNo
  • ¿Necesitas ayuda? Ponte en contacto con soporte.
  • Únete a nuestro programa de acceso anticipado.
  • Echa un vistazo a nuestro registro de cambios.
  • ¿Tienes alguna pregunta? Contacto.
  • ¿LLM? Lee llms.txt.
  • Con tecnología de Markdoc
Code quickstart
Guías relacionadas
API Elements Appearance
Más escenarios de pago
¿Cómo funcionan las tarjetas?
Productos utilizados
Payments
Elements
Checkout