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.

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 página del proceso de compra en tu sitio web con Stripe Elements y Checkout Sessions, una integración que gestiona impuestos, descuentos, tarifas de envío y mucho más.

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

Configura el servidor
Lado del servidor

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

Utiliza 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 utilice al menos 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 Checkout Session
Lado del servidor

Añade a tu servidor un punto de conexión que cree una sesión de Checkout y devuelve el secreto de cliente a tu front end. Una sesión de Checkout representa la sesión de tu cliente mientras paga por compras o suscripciones únicas. Las sesiones de Checkout caducan a las 24 horas de crearse.

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');
});

Configura el front end
Lado del cliente

Incluye el script de Stripe.js en tu página del proceso de compra añadiéndolo al head de tu archivo HTML. Carga siempre Stripe.js directamente desde js.stripe.com para cumplir con la normativa PCI. No incluyas el script en un paquete ni alojes una copia tú mismo.

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

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 un módulo. Consulta el proyecto en GitHub. Se requiere la versión 7.0.0 o una versión 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'
,
);

Inicializa Checkout
Lado del cliente

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

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

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

Esto te permite activar nuevas funciones con cambios mínimos en el código. Por ejemplo, si añades precios en divisas manuales, no necesitarás cambios en la interfaz de usuario si exhibes 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 del cliente
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 tu cliente termine de introducir la dirección de correo electrónico para validarla y guardarla.

Dependiendo del diseño de tu formulario del proceso de compra, puedes llamar a updateEmail de las siguientes maneras:

  • Directamente antes de enviar el pago. También puedes llamar a updateEmail para validar antes, como en el desenfoque de entrada.
  • Antes de pasar al 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;
      }
    });
  });
});

Recopilar los 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 varios métodos de pago.

Primero, crea un elemento DOM contenedor para montar el Payment Element. A continuación, crea una instancia del Payment Element mediante 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 aceptan.

Puedes personalizar la apariencia de todos los Elements especificando elementsOptions.appearance al inicializar el proceso de compra en el front end.

Envía el pago
Lado del cliente

Muestra un botón de «Pagar» que llame a confirmar desde la instancia de finalización del proceso de compra 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. Dirígete a tu página del proceso de compra.
  2. Rellena los datos de pago con un método de pago de la siguiente tabla. Para pagos con tarjeta:
    • 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. Envía el pago a Stripe.
  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 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.
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