Ir a contenido
Crea una cuenta
 o
inicia sesión
Logotipo de la documentación de Stripe
/
Crear cuenta
Iniciar sesión

Aceptar un pago

Acepta pagos en línea de forma segura.

Copia la página

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 incrustadaVista 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.

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

Command Line
# Available as a gem
sudo gem install stripe
Gemfile
# 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 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.

# 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

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/v3/"></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.
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 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:

EventoDescripciónAcción
checkout.session.completedSe 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_succeededSe 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_failedSe 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:

  1. Crea una sesión de Checkout integrada y monta Checkout en tu página.
  2. 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.
  3. Haz clic en Pagar. Se te redireccionará a tu return_url.
  4. 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.
  5. 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 tarjetaSituaciónCó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.

Véase también

¿Te ha sido útil la página?
SíNo
¿Necesitas ayuda? Ponte en contacto con el equipo de soporte.
Únete a nuestro programa de acceso anticipado.
Echa un vistazo a nuestro registro de cambios.
¿Tienes alguna pregunta? Ponte en contacto con el equipo de ventas.
¿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