Ir a contenido
Crea una cuenta
 o
Inicia sesión
Logotipo de Stripe Docs
/
Crear una cuenta
Iniciar sesión

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.

Crea una página de confirmación de compra en tu sitio web con Stripe Elements y Checkout Sessions, una integración que gestiona impuestos, descuentos, tasas de envío y mucho más.

Ubicación del cliente
Tamaño
Tema
Disposición
En esta demostración, solo se muestra Google Pay o Apple Pay si tienes una tarjeta activa con cualquiera de las billeteras.

Configurar el servidor
Lado del servidor

Antes de comenzar, debes registrarte para obtener una cuenta de Stripe.

Usa las bibliotecas oficiales de Stripe para acceder a la API desde tu aplicación.

Command Line
npm install stripe@18.0.0 --save

Configura el SDK para que use, como mínimo, la versión de la API 2025-03-31.basil.

// Set your secret key. Remember to switch to your live secret key in production.
// See your keys here: https://dashboard.stripe.com/apikeys
import Stripe from 'stripe';
const stripe = new Stripe(
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'
, {
  apiVersion: '2025-03-31.basil' as any,
});

Crea una sesión de Checkout
Lado del servidor

Agrega un punto de conexión en el servidor que cree una sesión de Checkout y devuelva su secreto de cliente al front-end. Una sesión de Checkout representa la sesión del cliente cuando paga por compras únicas o suscripciones. Las sesiones de Checkout vencen 24 horas después de su creación.

server.ts
import express, {Express} from 'express';

const app: Express = express();

app.post('/create-checkout-session', async (req: Express.Request, res: Express.Response) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price_data: {
          currency: 'usd',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 2000,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'custom',
    // The URL of your payment completion page
    return_url: 'https://example.com/return?session_id={CHECKOUT_SESSION_ID}'
  });

  res.json({checkoutSessionClientSecret: session.client_secret});
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});

Configurar el front-end
Lado del cliente

Incluye el script de Stripe.js en tu página de confirmación de compra agregándolo al head del archivo HTML. Carga siempre Stripe.js directamente desde js.stripe.com para cumplir con la normativa PCI. No incluyas el guion en un paquete ni alojes una copia por tu cuenta.

Tendrás que actualizar Stripe.js a basil desde la versión 3 incluyendo la siguiente etiqueta de script <script src="https://js.stripe.com/basil/stripe.js"></script>. Obtén más información sobre Stripe.js versioning.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>

Nota

Stripe proporciona un paquete npm que puedes usar para cargar Stripe.js como módulo. Ver el proyecto en GitHub. Se requiere la versión 7.0.0 o posterior.

Inicializa stripe.js.

checkout.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe(
  
'pk_test_TYooMQauvdEDq54NiTphI7jx'
,
);

Inicializar Checkout
Lado del cliente

Crea la función fetchClientSecret. Esta función recupera el secreto de cliente del servidor y devuelve una promesa que se resuelve con el secreto de cliente. Llama a initCheckout e introduce fetchClientSecret. initCheckout devuelve una promesa que se resuelve en una instancia del proceso de compra.

El objeto checkout actúa como la base de la página del proceso de compra y contiene datos de la Checkout Session y los métodos para actualizar la sesión.

El objeto devuelto por checkout.session() contiene la información de los precios. Recomendamos leer y mostrar total y lineItems de la sesión en tu interfaz de usuario.

Esto te permite activar nuevas funcionalidades con cambios mínimos en el código. Por ejemplo, agregar precios de moneda manualmente no requiere cambios en la interfaz de usuario si muestras el total.

checkout.js
const fetchClientSecret = () => {
  return fetch('/create-checkout-session', {method: 'POST'})
    .then((response) => response.json())
    .then((json) => json.checkoutSessionClientSecret);
};
stripe.initCheckout({fetchClientSecret})
  .then((checkout) => {
    const checkoutContainer = document.getElementById('checkout-container');
    checkoutContainer.append(JSON.stringify(checkout.lineItems, null, 2));
    checkoutContainer.append(document.createElement('br'));
    checkoutContainer.append(`Total: ${checkout.session().total.total.amount}`);
  });
index.html
<div id="checkout-container"></div>

Recopila el correo electrónico de los clientes
Lado del cliente

Crea una entrada de correo electrónico para recopilar la dirección de correo electrónico de tu cliente. Llama a updateEmail cuando el cliente termine la entrada para validar y guardar la dirección de correo electrónico.

Según el diseño de tu formulario de finalización de compra, puedes llamar a updateEmail de las siguientes maneras:

  • Directamente antes de enviar el pago. También puedes llamar a updateEmail para realizar la validación antes, como en el desenfoque de entrada.
  • Antes de dar el siguiente paso, como hacer clic en el botón Guardar, si el formulario incluye varios pasos.
index.html
<input type="text" id="email" />
<div id="email-errors"></div>
checkout.js
stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const emailInput = document.getElementById('email');
  const emailErrors = document.getElementById('email-errors');

  emailInput.addEventListener('input', () => {
    // Clear any validation errors
    emailErrors.textContent = '';
  });

  emailInput.addEventListener('blur', () => {
    const newEmail = emailInput.value;
    checkout.updateEmail(newEmail).then((result) => {
      if (result.error) {
        emailErrors.textContent = result.error.message;
      }
    });
  });
});

Recopila datos de pago
Lado del cliente

Recopila 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 recopilación de datos de pago para una variedad de métodos de pago.

En primer lugar, crea un elemento DOM contenedor para montar el Payment Element. Luego, crea una instancia del Payment Element usando checkout.createPaymentElement y móntala llamando a element.mount, proporcionando un selector CSS o el elemento DOM contenedor.

index.html
<div id="payment-element"></div>
checkout.js
const paymentElement = checkout.createPaymentElement();
paymentElement.mount('#payment-element');

Consulta la documentación de Stripe.js para ver qué opciones se admiten.

Puedes personalizar el aspecto de todos los Elements pasando elementsOptions.appearance al inicializar Checkout en el front-end.

Envía el pago
Lado del cliente

Muestra un botón de “pago” que llama a confirm desde la instancia de checkout para enviar el pago.

index.html
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>
checkout.js
stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    checkout.confirm().then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
});

Prueba tu integración

  1. Navega a tu página de finalización de compra.
  2. Completa los datos de pago con un método de pago de la siguiente tabla. Para pagos con tarjeta:
    • 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. Envía el pago a Stripe.
  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 la información de facturación y la lista de artículos comprados. Puedes utilizar esta información para completar el pedido.
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.

Consulta también

¿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