Ir a contenido
Crea una cuenta o inicia sesión
Logotipo de la documentación de Stripe
/
Crear cuentaIniciar sesión
ResumenActualiza tu integración
Pagos por Internet
ResumenEncuentra tu caso de usoUsa Managed Payments
Pagos en persona
Métodos de pago
Escenarios de pago
Más allá de los pagos

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
Node.js
Ruby
PHP
Python
Go
.NET
Java
No results
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.

TypeScript
Node.js
Ruby
PHP
Python
Go
.NET
Java
No results
// 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
TypeScript
Node.js
Ruby
PHP
Python
Go
.NET
Java
No results
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.

Ensure you’re on the latest Stripe.js version by including the following script tag <script src=“https://js.stripe.com/clover/stripe.js”></script>. Learn more about Stripe.js versioning.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/clover/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 promesa de clientSecret que se resuelva con el secreto de cliente o defínela como secreto directamente. Llama al proceso de compra y especifica clientSecret. InitCheckout devuelve una promesa que se resuelve en una instancia de Checkout.

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

El objeto devuelto por actions.getSession() contiene tu información sobre los precios. Recomendamos leer y mostrar eltotal, ylineItems 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 manuales en divisas, no tendrás que cambiar la interfaz de usuario si muestras el total.

checkout.js
const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.checkoutSessionClientSecret);
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const session = loadActionsResult.actions.getSession();
  const checkoutContainer = document.getElementById('checkout-container');
  checkoutContainer.append(JSON.stringify(session.lineItems, null, 2));
  checkoutContainer.append(document.createElement('br'));
  checkoutContainer.append(`Total: ${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
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  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;
    actions.updateEmail(newEmail).then((result) => {
      if (result.error) {
        emailErrors.textContent = result.error.message;
      }
    });
  });
}

Recopilar los datos de pago
Lado del cliente

Recolecta 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 recolecció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 Stripe.js docs para ver las opciones compatibles.

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

Presenta un botón Pagar que llame a confirmar desde la instancia de proceso de compra para enviar el pago.

index.html
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>
checkout.js
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

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

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.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/products \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d name=T-shirt

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.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/prices \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d product=
"{{PRODUCT_ID}}"
 \
  -d unit_amount=2000 \
  -d currency=usd

Cada precio que crees tiene un ID. Al crear una Checkout Session, haz referencia al ID del precio y a la cantidad. Si vendes en varias divisas, haz que tu Precio esté en múltiples divisas. El proceso de compra determina la divisa local del cliente automáticamente y la presenta si el Precio lo admite.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d ui_mode=custom \
  -d mode=payment \
  -d "line_items[0][price]"={{PRICE_ID}} \
  -d "line_items[0][quantity]"=1 \
  --data-urlencode return_url="https://example.com/return?session_id={CHECKOUT_SESSION_ID}"

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.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  --data-urlencode customer_email="customer@example.com" \
  -d ui_mode=custom \
  -d mode=payment \
  -d "line_items[0][price]"={{PRICE_ID}} \
  -d "line_items[0][quantity]"=1 \
  --data-urlencode return_url="https://example.com/return?session_id={CHECKOUT_SESSION_ID}"

OpcionalGuarda los datos de los métodos de pago

Descubre cómo aceptar un pago y guardar los datos de pago de tu cliente para futuras compras.

OpcionalEscuchar los cambios en la sesión de Checkout

Escuchar los cambios en la sesión de Checkout

Puedes escuchar los cambios en la Checkout Session añadiendo un oyente de eventos en el evento change con checkout.on.

checkout.js
checkout = stripe.initCheckout({
  clientSecret: promise,
  elementsOptions: { appearance },
});

checkout.on('change', (session) => {
  // Handle changes to the checkout session
});

OpcionalRecolecta las direcciones de facturación y de envío

Recolecta direcciones de facturación

De forma predeterminada, una sesión de Checkout recolecta la cantidad mínima de datos de facturación necesarios para el pago a través del Payment Element.

Cómo usar el Billing Address Element

Puedes recolectar direcciones de facturación completas utilizando el Billing Address Element.

En primer lugar, especifica billing_address_collection=required cuando crees la sesión de Checkout.

Crea un elemento DOM contenedor para montar el Billing Address Element. A continuación, crea una instancia del Billing Address Element mediante checkout.createBillingAddressElement y móntala llamando a element.mount, proporcionando un selector CSS o el elemento DOM contenedor.

index.html
<div id="billing-address"></div>
checkout.js
const billingAddressElement = checkout.createBillingAddressElement();
billingAddressElement.mount('#billing-address');

El Billing Address Element acepta las siguientes opciones:

Usa un formulario personalizado

Puedes crear tu propio formulario para recolectar direcciones de facturación.

  • Si tu página de proceso de compra tiene un paso distinto de recolección de direcciones antes de la confirmación, llama a updateBillingAddress cuando tu cliente envíe la dirección.
  • De lo contrario, puedes enviar la dirección cuando tu cliente haga clic en el botón «Pagar» especificando billingAddress en confirm.

Recolecta direcciones de facturación parciales

Para recolectar direcciones de facturación parciales, como el país y el código postal solamente, especifica billing_address_collection=auto.

Al recolectar direcciones de facturación parciales, debes recolectar las direcciones manualmente. De forma predeterminada, el Payment Element recolecta automáticamente los datos de facturación mínimos necesarios para el pago. Para evitar la doble recolección de datos de facturación, especifica fields.billingDetails=never al crear el Payment Element. Si solo tienes la intención de recolectar un subconjunto de los datos de facturación (como el nombre del cliente), especifica never solo en los campos que tengas la intención de recolectar tú mismo.

Recolecta las direcciones de envío

Para recolectar la dirección de envío de un cliente, especifica el parámetro shipping_address_collection al crear la sesión de Checkout.

Cuando recolectas una dirección de envío, también debes especificar a qué países se permitirá el envío. Configura la propiedad allowed_countries con una matriz de códigos ISO de país de dos letras.

Cómo usar el Shipping Address Element

Puedes recolectar las direcciones de envío completas con el Shipping Address Element.

Crea un elemento DOM contenedor para montar el Shipping Address Element. A continuación, crea una instancia del Shipping Address Element mediante checkout.createShippingAddressElement y móntala llamando a element.mount, proporcionando un selector CSS o el elemento DOM contenedor.

index.html
<div id="shipping-address"></div>
checkout.js
const shippingAddressElement = checkout.createShippingAddressElement();
shippingAddressElement.mount('#shipping-address');

El Shipping Address Element acepta las siguientes opciones:

Escuchar los cambios en la sesión de Checkout

Puedes escuchar los cambios en la Checkout Session añadiendo un oyente de eventos para gestionar los cambios relacionados con la dirección.

Usa el objeto Session para representar el importe del envío en tu formulario del proceso de compra.

index.html
<div>
  <h3> Totals </h3>
  <div id="subtotal" ></div>
  <div id="shipping" ></div>
  <div id="total" ></div>
</div>
checkout.js
const checkout = stripe.initCheckout({clientSecret});
const subtotal = document.getElementById('subtotal');
const shipping = document.getElementById('shipping');
const total = document.getElementById('total');

checkout.on('change', (session) => {
  subtotal.textContent = `Subtotal: ${session.total.subtotal.amount}`;
  shipping.textContent = `Shipping: ${session.total.shippingRate.amount}`;
  total.textContent = `Total: ${session.total.total.amount}`;
});

Usar un formulario personalizado

Puedes crear tu propio formulario para recolectar direcciones de envío.

  • Si tu página del proceso de compra tiene un paso distinto de recolección de direcciones antes de la confirmación, llama a updateShippingAddress cuando tu cliente envíe la dirección.
  • De lo contrario, puedes enviar la dirección cuando tu cliente haga clic en el botón «Pagar» especificando shippingAddress en confirm.

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:

  1. Confirma que Stripe ha autorizado el método de pago del cliente.
  2. Consulta tu sistema de gestión de inventario para confirmar que el artículo sigue disponible.
  3. Actualiza tu sistema de gestión de inventario para indicar que un cliente ha comprado el artículo.
  4. Captura el pago del cliente.
  5. 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.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "line_items[0][price]"={{PRICE_ID}} \
  -d "line_items[0][quantity]"=1 \
  -d mode=payment \
  -d "payment_intent_data[capture_method]"=manual \
  -d return_url={{RETURN_URL}} \
  -d ui_mode=custom

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

OpcionalGestión logística de pedidos

Descubre cómo obtener una notificación mediante programación cuando un cliente paga.

Véase también

¿Te ha sido útil la página?
SíNo
Code quickstart
Guías relacionadas
API Elements Appearance
Más escenarios de pago
Cómo funcionan las tarjetas