Ir a contenido
Crea una cuenta o Inicia sesión
Logotipo de Stripe Docs
/
Crear una cuentaIniciar sesión
ResumenActualiza tu integración
Pagos electrónicos
ResumenEncuentra tu caso de usoUsar pagos administrados
Pagos en persona
Métodos de pago
Escenarios de pago
Más allá de los pagos

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

TypeScript
Node.js
Ruby
PHP
Python
Ir
.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 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
TypeScript
Node.js
Ruby
PHP
Python
Ir
.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');
});

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.

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 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 una promesa clientSecret que se resuelva con el secreto de cliente o establécela como secreto directamente. Llama a initCheckout, pasando clientSecret. initCheckout devuelve una promesa que se resuelve una instancia de confirmación de compra.

The checkout object acts as the foundation of your checkout page, and contains data from the Checkout Session and methods to update the Session.

El objeto devuelto por actions.getSession() contiene tu información de tarifas. Te recomendamos que leas y visualices el total y los lineItems de la sesión en tu interfaz de usuario (IU).

Esto te permite activar nuevas funcionalidades con cambios mínimos en el código. Por ejemplo, añadir precios manuales de las monedas no requiere cambios en la interfaz de usuario si muestra 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 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
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;
      }
    });
  });
}

Recopila datos de pago
Lado del cliente

Recopila los datos de pago del cliente con el Payment Element. 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');

See the Stripe.js docs to view the supported options.

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

Renderiza un botón de 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. 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.

OpcionalCrear productos y precios

Antes de crear una sesión de Checkout, puedes crear productos y precios por adelantado. Utiliza 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 USD 20. Esto te permite actualizar y agregar precios sin necesidad de cambiar los detalles de tus productos subyacentes. Puedes crear productos y precios con el Dashboard de Stripe o 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 que indiques para el producto.

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 por tu producto. Esto incluye cuánto cuesta el producto y qué moneda usar.

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 creas tiene un ID. Cuando crees una Checkout Session, haz referencia al ID del precio y a la cantidad. Si vendes en múltiples monedas, haz que tu Precio sea en múltiples monedas. Checkout automáticamente determina la moneda local del cliente y presenta esa moneda si el Precio la 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}"

OpcionalCompletar automáticamente los datos de los clientes
Lado del servidor

Si ya tienes el correo electrónico del cliente y quieres completarlo automáticamente en la sesión de Checkout, especifica customer_email cuando crees una sesión de Checkout.

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}"

OpcionalGuardar datos de métodos de pago

Obtén información sobre cómo aceptar un pago y guardar los datos de pago de tu cliente para futuras compras.

OpcionalEscucha los cambios de la sesión de Checkout

Escucha los cambios de la sesión de Checkout

Puedes escuchar los cambios en la sesión de Checkout agregando 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
});

OpcionalRecopila las direcciones de facturación y envío

Reopilar una dirección de facturación

De forma predeterminada, una Checkout Session recopila los detalles mínimos de facturación necesarios para el pago a través del Payment Element.

Cómo usar el Billing Address Element

Puedes recopilar direcciones de facturación completas con el Billing Address Element.

Primero, especifica billing_address_collection=required cuando crees la Checkout Session.

Crea un elemento DOM contenedor para montar el Billing Address Element. Luego, crea una instancia del Billing Address Element con checkout.createBillingAddressElement y móntalo llamando a element.mount, y proporciona 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 admite las siguientes opciones:

Uso de un formulario personalizado

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

  • Si tu página de confirmación de compra tiene un paso distinto para recopilar la dirección antes de la confirmación, llama a updateBillingAddress cuando el cliente envíe la dirección.
  • De lo contrario, puedes enviar la dirección cuando tu cliente haga clic en el botón «pagar» pasando billingAddress para confirmar.

Recopila direcciones de facturación parcial

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

Cuando recopiles direcciones de facturación parciales, debes recopilar direcciones manualmente. De forma predeterminada, el Payment Element recopila automáticamente los datos mínimos de facturación necesarios para el pago. Para evitar la doble recopilación de datos de facturación, especifica fields.billingDetails=never cuando crees el Payment Element. Si solo tienes la intención de recopilar un subconjunto de datos de facturación (como el nombre del cliente), especifica never solo en los campos que pretendes recopilar tú mismo.

Recopilar una dirección de envío

Para recopilar la dirección de envío de un cliente, especifica el parámetro shipping_address_collection cuando crees la Checkout Session.

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

Cómo usar el Element Shipping Address

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

Crea un elemento DOM contenedor para montar el elemento Shipping Address. A continuación, crea una instancia del Element Shipping Address 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 admite las siguientes opciones:

Escucha los cambios de la sesión de Checkout

Puedes escuchar los cambios en la sesión de Checkout agregando un receptor de eventos para manejar 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}`;
});

Usa un formulario personalizado

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

  • Si tu página de confirmación de compra tiene un paso distinto de recopilació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 el cliente haga clic en el botón «pagar» especificando shippingAddress para confirmar.

OpcionalSeparar la autorización de la captura
Lado del servidor

Stripe admite 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 tiempo para capturar los fondos, según la tarjeta). Si no capturas el pago antes del vencimiento de la autorización, se cancela el pago y el emisor libera los fondos retenidos.

Separar la autorización y la captura es útil si tienes que 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 stock limitado y un cliente compra un producto con Checkout, es posible que tengas que confirmar si hay stock del artículo antes de capturar el pago y completar la compra. Para conseguirlo, usa el siguiente flujo de trabajo:

  1. Confirma que Stripe autorizó el método de pago del cliente.
  2. Consulta tu sistema de gestión de inventario para confirmar si hay stock del artículo.
  3. Actualiza tu sistema de gestión de inventario para indicar que el cliente ha comprado el artículo.
  4. Captura el pago del cliente.
  5. Informa a tu cliente si se concretó la compra en tu página de confirmación.

Para indicar que quieres separar la autorización de 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 en 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 que solo fue autorizado, puedes usar el punto de conexión del Dashboard o de captura. Para capturar pagos mediante programación, es necesario acceder al PaymentIntent creado durante la sesión de Checkout, al que llegas desde el objeto Session.

OpcionalGestión de cuentas de clientes
Sin código

Para permitir que tus clientes gestionen sus propias cuentas, comparte un enlace a tu portal de clientes. El portal de clientes les 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 del pedido

Obtén información sobre cómo programar la recepción de una notificación cuando un cliente paga.

Consulta también

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