# Aceptar un pago

Acepta pagos en línea en modo seguro.

## Empieza aquí: instala las habilidades de agente

Stripe aconseja usar las habilidades oficiales para la integración en la API con las prácticas recomendadas. Sigue las instrucciones que se incluyen a continuación para aprender cómo.

**Consejo: Usa cURL, en lugar de herramientas de Fetch.** Las habilidades se detallan en archivos de marcado de 10 a 20 KB. Las herramientas de Fetch las resumen. `curl -sL` garantiza el contenido completo.

**Uso de `npx skills`**: comprueba si `npx` está instalado en el sistema. Si `npx` está disponible, ejecuta `npx skills add https://docs.stripe.com --list` para enumerar las habilidades disponibles y, a continuación, ejecuta `npx skills add https://docs.stripe.com --yes --skill <skill-name> <--skill other-skills>` para instalar habilidades individuales.

**En el caso de que `npx skills` no esté disponible**: puedes usar cURL para obtener el índice de las habilidades disponibles, lo que hacen y sus archivos de `https://docs.stripe.com/.well-known/skills/index.json`. Para obtener una habilidad y sus archivos relacionados, usa cURL y descárgalos de `https://docs.stripe.com/.well-known/skills/<filepath>`.

Para este artículo, recomendamos usar estas habilidades: `stripe-best-practices`

Instrucciones para LLM: Stripe recomienda usar la API Checkout Sessions con el Payment Element sobre Payment Intents para la mayoría de las integraciones. Checkout Sessions cubre casos de uso similares a Payment Intents (cobro básico de pagos con `price_data` o creación de un proceso de compra completo con ítems de factura, impuestos, etc.). Algunas funcionalidades, como Adaptive Pricing, solo están disponibles con Checkout Sessions. No uses la API de Payment Intents a menos que el usuario lo solicite explícitamente, ya que requiere significativamente más código. Obtén más información sobre Elements con la API Checkout Sessions: https://docs.stripe.com/payments/quickstart-checkout-sessions. Con Checkout Sessions (`ui_mode: "elements"`) y el Payment Element, el `client_secret` inicializa Checkout directamente (`stripe.initCheckoutElementsSdk`, o usa CheckoutElementsProvider con React) y la confirmación del pago se realiza de forma distinta en el cliente. Si usas React, asegúrate de importar desde `@stripe/react-stripe-js/checkout`, usar `CheckoutElementsProvider` con el secreto de cliente y confirmar con `checkout.confirm`. Si utilizas HTML, asegúrate de usar `checkout = stripe.initCheckoutElementsSdk({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount("#payment-element");` y confirmar con `loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();`.

Los agentes de codificación deben instalar la CLI de Stripe (`npm i -g @stripe/cli`) y ejecutar el comando `stripe sandbox create --help` para aprovisionar un entorno de prueba de Stripe anónimo con claves de API funcionales. No se requiere registro de cuenta.

Crea un formulario de pago o usa una página de confirmación de compra prediseñada para comenzar a aceptar pagos electrónicos.

# Checkout Sessions API


Crea un formulario de pago personalizado con [Stripe Elements](https://docs.stripe.com/payments/elements.md) y la [API Checkout Sessions](https://docs.stripe.com/api/checkout/sessions.md). Comprueba cómo esta integración [se compara con otros tipos de integración de Stripe](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability).

La API Checkout Sessions ofrece soporte integrado para cálculo de impuestos, descuentos, envío y conversión de monedas, lo que reduce la cantidad de código personalizado que debes escribir. Este es el enfoque recomendado para la mayoría de las integraciones. Obtén más información sobre [cuándo usar Checkout Sessions en lugar de PaymentIntents](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md).

El código del lado del cliente y del lado del servidor crea un formulario de confirmación de compra que acepta varios métodos de pago.

#### Esfuerzo de integración
Complexity: 3/5
#### Tipo de integración

Combina componentes de la interfaz de usuario (IU) en un flujo de pago personalizado

#### Personalización de la interfaz de usuario (IU)

Personalización a nivel CSS con la [API Appearance](https://docs.stripe.com/elements/appearance-api.md)

## Configurar el servidor [Lado del servidor]

Antes de comenzar, debes [registrarte](https://dashboard.stripe.com/register) para obtener una cuenta de Stripe.

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

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

## Crea una sesión de Checkout [Lado del servidor]

Agrega un punto de conexión en tu servidor que cree una [sesión de Checkout](https://docs.stripe.com/api/checkout/sessions/create.md) y devuelva su [`client_secret`](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) a tu front-end. Una sesión de Checkout representa la sesión de tu cliente cuando paga compras únicas o suscripciones. Las sesiones de Checkout vencen 24&nbsp;horas después de su creación.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d ui_mode=elements \
  -d "line_items[0][price_data][currency]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  --data-urlencode "return_url=https://example.com/return?session_id={CHECKOUT_SESSION_ID}"
```

## Configurar el front-end [Lado del cliente]

#### HTML + JS

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.

Asegúrate de estar usando la última versión Stripe.js. Obtén más información sobre [Stripe.js versioning](https://docs.stripe.com/sdks/stripejs-versioning.md).

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

> Stripe proporciona un paquete npm que puedes usar para cargar Stripe.js como módulo. Ver el [proyecto en GitHub](https://github.com/stripe/stripe-js). Se requiere la versión [7.0.0](https://www.npmjs.com/package/%40stripe/stripe-js/v/7.0.0) o posterior.

Inicializa stripe.js.

```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(
  '<<YOUR_PUBLISHABLE_KEY>>',
);
```

#### React

Instala [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) y el [cargador Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) desde el registro público npm. Necesitas al menos la versión 5.0.0 para React Stripe.js y la versión 8.0.0 para el cargador Stripe.js.

```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```

Inicializa una instancia `stripe` en tu front-end con tu clave publicable.

```javascript
import {loadStripe} from '@stripe/stripe-js';
const stripe = loadStripe("<<YOUR_PUBLISHABLE_KEY>>");
```

## Inicializar Checkout [Lado del cliente]

#### HTML + JS

Llama a [initCheckoutElementsSdk](https://docs.stripe.com/js/custom_checkout/init) y pasa `clientSecret`.

`initCheckoutElementsSdk` resuelve un objeto de [Checkout](https://docs.stripe.com/js/custom_checkout) que contiene datos de la Checkout Session y métodos para actualizarla.

Lee el `total` y los `lineItems` de [actions.getSession()](https://docs.stripe.com/js/custom_checkout/session) y muéstralos en tu interfaz de usuario (IU). Esto te permite activar nuevas funcionalidades con cambios mínimos en el código. Por ejemplo, si agregas [precios manuales de monedas](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md), no es necesario hacer cambios en la interfaz de usuario (IU) si muestras el `total`.

```html
<div id="checkout-container"></div>
```

```javascript
const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.client_secret);

const checkout = stripe.initCheckoutElementsSdk({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}`);
}
```

#### React

Integra la solicitud con el componente [CheckoutProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider), pasa `clientSecret` y la instancia `stripe`.

```jsx
import React from 'react';
import {CheckoutElementsProvider} from '@stripe/react-stripe-js/checkout';
import CheckoutForm from './CheckoutForm';

const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.client_secret);

const App = () => {
  return (
    <CheckoutElementsProvider
      stripe={stripe}options={{clientSecret}}
    >
      <CheckoutForm />
    </CheckoutElementsProvider>
  );
};

export default App;
```

Accede al objeto [Checkout](https://docs.stripe.com/js/custom_checkout) en el componente de tu formulario de confirmación de compra usando el hook `useCheckoutElements()`. El objeto `Checkout` contiene los datos de la sesión de Checkout y los métodos para actualizarla.

Lee el `total` y los `lineItems` del objeto `Checkout` y muéstralos en tu interfaz de usuario (IU). Esto te permite habilitar funcionalidades con cambios mínimos de código. Por ejemplo, agregar [precios manuales de monedas](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) no requiere cambios en la interfaz de usuario (IU) si muestras el `total`.

```jsx
import React from 'react';
import {useCheckoutElements} from '@stripe/react-stripe-js/checkout';

const CheckoutForm = () => {const checkoutState = useCheckoutElements();

  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  }

  if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }

  return (
    <form>{JSON.stringify(checkoutState.checkout.lineItems, null, 2)}
      {/* A formatted total amount */}
      Total: {checkoutState.checkout.total.total.amount}
    </form>
  );
};
```

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

#### HTML + JS

Debes proporcionar un correo electrónico del cliente válido cuando completas una sesión de Checkout.

Usa el [Contact Details Element](https://docs.stripe.com/js/custom_checkout/create_contact_details_element) para recopilar la dirección de correo electrónico de tu cliente. Se encarga de la recopilación y la validación de los correos electrónicos por ti, y ayuda a los clientes a iniciar sesión en Link.

Como alternativa, puedes hacer lo siguiente:

- Especifica [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), [customer_account](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (para clientes representados como objetos `Cuenta` configurada como cliente) o [cliente](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (para clientes representados como objetos `Cliente`) cuando se crea la sesión de Checkout. Stripe valida los correos electrónicos proporcionados de esta manera.
  - Estos completan previamente la sesión con un correo electrónico que los clientes no pueden editar en la página de confirmación de compra. Si quieres completarla previamente con un correo electrónico editable, usa [defaultValues.email](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-defaultValues-email) cuando inicies Checkout.
- Especifica un correo electrónico que ya hayas validado en [updateEmail](https://docs.stripe.com/js/custom_checkout/update_email) o [checkout.confirm](https://docs.stripe.com/js/custom_checkout/confirm).

```html
<div id="contact-details-element">
  <!--Stripe.js injects the Contact Details Element-->
</div>
```

```javascript
const contactDetailsElement = checkout.createContactDetailsElement();
contactDetailsElement.mount("#contact-details-element");
```

#### React

Debes proporcionar un correo electrónico del cliente válido cuando completas una sesión de Checkout.

Usa el [ContactDetailsElement](https://docs.stripe.com/js/react_stripe_js/checkout/contact_details_element) para recopilar la dirección de correo electrónico de tu cliente. Se encarga de la recopilación y la validación de los correos electrónicos por ti, y ayuda a los clientes a iniciar sesión en Link.

Como alternativa, puedes hacer lo siguiente:

- Especifica [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), [customer_account](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (para clientes representados como objetos `Cuenta` configurada como cliente) o [cliente](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (para clientes representados como objetos `Cliente`) cuando se crea la sesión de Checkout. Stripe valida los correos electrónicos proporcionados de esta manera.
  - Estos completan previamente la sesión con un correo electrónico que los clientes no pueden editar en la página de confirmación de compra. Si quieres completarla previamente con un correo electrónico editable, usa [defaultValues.email](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-defaultValues-email) cuando inicies Checkout.
- Especifica un correo electrónico que ya hayas validado en [updateEmail](https://docs.stripe.com/js/react_stripe_js/checkout/update_email) o [confirm](https://docs.stripe.com/js/react_stripe_js/checkout/confirm).

```jsx
import {ContactDetailsElement} from '@stripe/react-stripe-js/checkout';

// Inside your CheckoutForm component:
<ContactDetailsElement/>
```

## Recopila datos de pago [Lado del cliente]

Recopila los datos de pago del cliente con el [Payment Element](https://docs.stripe.com/payments/payment-element.md). 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.

El Payment Element contiene un iframe que envía la información de pago a Stripe de manera segura mediante una conexión HTTPS. No coloques el Payment Element dentro de otro iframe porque, para algunos métodos de pago, se requiere la redirección a otra página para la confirmación del pago.

Si optas por usar un iframe y quieres aceptar Apple Pay o Google Pay, el iframe debe tener el atributo [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) establecido en `«payment*»`.

Para que la integración funcione, la dirección de la página del proceso de compra debe empezar con `https://` rather en lugar de `http://` for. Puedes probar tu integración sin usar HTTPS, pero recuerda [habilitarla](https://docs.stripe.com/security/guide.md#tls) cuando todo esté listo para aceptar pagos activos.

#### HTML + JS

En primer lugar, crea un elemento DOM contenedor para montar el [Payment Element](https://docs.stripe.com/payments/payment-element.md). Luego, crea una instancia del `Payment Element` usando [checkout.createPaymentElement](https://docs.stripe.com/js/custom_checkout/create_payment_element) y móntala llamando a [element.mount](https://docs.stripe.com/js/element/mount), proporcionando un selector CSS o el elemento DOM contenedor.

```html
<div id="payment-element"></div>
```

```javascript
const paymentElement = checkout.createPaymentElement();
paymentElement.mount('#payment-element');
```

Consulta la [documentación Stripe.js](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options) para ver las opciones admitidas.

Puedes [personalizar el aspecto](https://docs.stripe.com/payments/checkout/customization/appearance.md) de todos los Elements pasando [elementsOptions.appearance](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-appearance) al inicializar Checkout en el front-end.

#### React

Arma el componente [Payment Element](https://docs.stripe.com/payments/payment-element.md) dentro del [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider).

```jsx
import React from 'react';import {PaymentElement, useCheckoutElements} from '@stripe/react-stripe-js/checkout';

const CheckoutForm = () => {
  const checkoutState = useCheckoutElements();

  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  }

  if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }

  return (
    <form>

      {JSON.stringify(checkoutState.checkout.lineItems, null, 2)}
      {/* A formatted total amount */}
      Total: {checkoutState.checkout.total.total.amount}
<PaymentElement options={{layout: 'accordion'}}/>
    </form>
  );
};

export default CheckoutForm;
```

Consulta la [documentación Stripe.js](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options) para ver las opciones admitidas.

Puedes [personalizar el aspecto](https://docs.stripe.com/payments/checkout/customization/appearance.md) de todos los Elements especificando [elementsOptions.appearance](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-appearance) en el [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider).

## Envía el pago [Lado del cliente]

#### HTML + JS

Presenta un botón **Pagar** que llame a [confirmar](https://docs.stripe.com/js/custom_checkout/confirm) desde la instancia de `Checkout` para enviar el pago.

```html
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>
```

```js
const checkout = stripe.initCheckoutElementsSdk({clientSecret});

checkout.on('change', (session) => {
  document.getElementById('pay-button').disabled = !session.canConfirm;
});

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

#### React

Renderiza un botón **Pay** que llame a [confirm](https://docs.stripe.com/js/custom_checkout/confirm) desde [useCheckoutElements](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout_elements) para enviar el pago.

```jsx
import React from 'react';
import {useCheckoutElements} from '@stripe/react-stripe-js/checkout';

const PayButton = () => {
  const checkoutState = useCheckoutElements();
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);

  if (checkoutState.type !== "success") {
    return null;
  }

  const handleClick = () => {
    setLoading(true);checkoutState.checkout.confirm().then((result) => {
      if (result.type === 'error') {
        setError(result.error)
      }
      setLoading(false);
    })
  };

  return (
    <div>
      <button disabled={!checkoutState.checkout.canConfirm || loading} onClick={handleClick}>
        Pay
      </button>
      {error && <div>{error.message}</div>}
    </div>
  )
};

export default PayButton;
```

## 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](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful). 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](https://docs.stripe.com/checkout/fulfillment.md).

#### Tarjetas

| Número de tarjeta   | Escenario                                                                                                                                                                                                                                                                                       | Cómo hacer la prueba                                                                                                                   |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| 4242424242424242    | 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. |
| 4000002500003155    | El pago con tarjeta requiere *autenticación* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | 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. |
| 4000000000009995    | 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. |
| 6205500000000000004 | 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. |

#### Billeteras

| Método de pago | Escenario                                                                                                                                                                                             | Cómo hacer la prueba                                                                                                                                                                                 |
| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Alipay         | Tu cliente realiza un pago correctamente con un método de pago basado en redireccionamiento y con [notificación inmediata](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Elige cualquier método de pago basado en redireccionamiento, completa los datos solicitados y confirma el pago. Luego, haz click en **Completar pago de prueba** en la página de redireccionamiento. |

#### Redireccionamientos bancarios

| Método de pago                      | Escenario                                                                                                                                                                                                            | Cómo hacer la prueba                                                                                                                                                                                   |
| ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Débito directo BECS                 | Tu cliente paga satisfactoriamente con débito directo BECS.                                                                                                                                                          | Completa el formulario con el número de cuenta `900123456` y BSB `000000`. El PaymentIntent confirmado pasa en un principio al estado `processing` y, 3 minutos más tarde, a `succeeded`.              |
| Débito directo BECS                 | El pago de tu cliente falla con un código de error `account_closed`.                                                                                                                                                 | Completa el formulario con el número de cuenta `111111113` y BSB `000000`.                                                                                                                             |
| Bancontact, EPS, iDEAL y Przelewy24 | Tu cliente no pasa la autenticación en la página de redireccionamiento de un método de pago basado en redireccionamiento y con notificación inmediata.                                                               | Elige cualquier método de pago basado en redireccionamiento, completa los datos solicitados y confirma el pago. Luego, haz click en **Error en el pago de prueba** en la página de redireccionamiento. |
| Pay by Bank                         | Tu cliente paga satisfactoriamente con un método de pago basado en redireccionamiento y con [notificación diferida](https://docs.stripe.com/payments/payment-methods.md#payment-notification).                       | Elige el método de pago, completa los datos solicitados y confirma el pago. Luego, haz click en **Completar el pago de prueba** en la página de redireccionamiento.                                    |
| Pay by Bank                         | Tu cliente no pasa la autenticación en la página de redireccionamiento de un método de pago basado en redireccionamiento y con notificación diferida.                                                                | Elige el método de pago, completa los datos solicitados y confirma el pago. Luego, haz click en **Error en el pago de prueba** en la página de redireccionamiento.                                     |
| BLIK                                | Los pagos BLIK generan errores de varias maneras: errores inmediatos (por ejemplo, el código venció o no es válido), errores demorados (el banco lo rechaza) o tiempos de espera (el cliente no respondió a tiempo). | Usa patrones de correo electrónico para [simular los diferentes errores.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures)                                                 |

#### Débitos bancarios

| Método de pago      | Escenario                                                                                     | Cómo hacer la prueba                                                                                                                                                                   |
| ------------------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Débito directo SEPA | Tu cliente paga satisfactoriamente con débito directo SEPA.                                   | Completa el formulario con el número de cuenta `AT321904300235473204`. El PaymentIntent confirmado pasa inicialmente al estado “en proceso” y, tres minutos más tarde, a “completado”. |
| Débito directo SEPA | El estado del intento de pago de tu cliente pasa de `processing` a `requires_payment_method`. | Completa el formulario con el número de cuenta `AT861904300235473202`.                                                                                                                 |

#### Vales

| Método de pago | Escenario                                  | Cómo hacer la prueba                                                                                     |
| -------------- | ------------------------------------------ | -------------------------------------------------------------------------------------------------------- |
| Boleto, OXXO   | Tu cliente paga con un vale Boleto u OXXO. | Selecciona Boleto u OXXO como método de pago y envía el pago. Cierra el diálogo después de que aparezca. |

Consulta [Pruebas](https://docs.stripe.com/testing.md) para obtener información adicional para probar tu integración.

## Optional: Crear productos y precios

Antes de crear una sesión de Checkout, puedes crear *productos* (Products represent what your business sells—whether that's a good or a service) y *precios* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) por adelantado. Utiliza productos para representar diferentes bienes físicos o niveles de servicio, y *precios* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) para representar los precios de cada producto. Puedes [configurar tu sesión de Checkout](https://docs.stripe.com/payments/checkout/pay-what-you-want.md) para aceptar propinas y donaciones, o vender productos y servicios de pagos a voluntad.

Por ejemplo, puedes crear una camiseta como producto con un precio de USD&nbsp;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](https://docs.stripe.com/products-prices/how-products-and-prices-work.md).

#### API

La API solo necesita un `name` para crear un [Producto](https://docs.stripe.com/api/products.md). Checkout muestra los atributos `name`, `description` e `images` que indiques para el producto.

```curl
curl https://api.stripe.com/v1/products \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d name=T-shirt
```

A continuación, crea un [precio](https://docs.stripe.com/api/prices.md) para definir cuánto cobrar por tu producto. Esto incluye cuánto cuesta el producto y qué moneda usar.

```curl
curl https://api.stripe.com/v1/prices \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "product={{PRODUCT_ID}}" \
  -d unit_amount=2000 \
  -d currency=usd
```

#### Dashboard

> Copia los productos creados en un entorno de prueba al modo activo para que no tengas que volver a crearlos. En la vista detallada de Productos del Dashboard, haz clic en **Copiar al modo activo** en la esquina superior derecha. Puedes copiar el mismo producto del entorno de prueba al modo activo más de una vez. Cada copia crea un producto activo independiente, y las actualizaciones posteriores al producto del entorno de prueba no se reflejan en las copias reales existentes.

Asegúrate de estar en un entorno de prueba al hacer clic en **Entornos de prueba** dentro del selector de cuentas del Dashboard. A continuación, define los artículos que quieres vender. Para crear un nuevo producto y precio:

- Entra en la sección [Productos](https://dashboard.stripe.com/test/products) del Dashboard.
- Haz click en **Agregar producto**.
- Selecciona **Por única vez** al establecer el precio.

Checkout muestra el nombre, la descripción y las imágenes del producto que indiques.

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* (A single Price object can support multiple currencies. Each purchase uses one of the supported currencies for the Price, depending on how you use the Price in your integration). Checkout automáticamente [determina la moneda local del cliente](https://docs.stripe.com/payments/checkout/localize-prices/manual-currency-prices.md) y presenta esa moneda si el Precio la admite.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d ui_mode=elements \
  -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}"
```

## Optional: Completar 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](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) cuando crees una sesión de Checkout.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  --data-urlencode "customer_email=customer@example.com" \
  -d ui_mode=elements \
  -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}"
```

## Optional: Guardar datos de métodos de pago

Aprende a [aceptar un pago y a guardar los datos de pago de tus clientes](https://docs.stripe.com/payments/save-during-payment.md) para futuras compras.

## Optional: Escucha 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](https://docs.stripe.com/api/checkout/sessions.md) agregando un oyente de eventos en el evento `change` con [checkout.on](https://docs.stripe.com/js/custom_checkout/change_event).

#### HTML + JS

```javascript
checkout = stripe.initCheckoutElementsSdk({
  clientSecret: promise,
  elementsOptions: { appearance },
});

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

#### React

```jsx
import React from 'react';
import { useCheckoutElements } from '@stripe/react-stripe-js/checkout';

const CheckoutForm = () => {
  const checkoutState = useCheckoutElements();
  if (checkoutState.type === 'success') {
    checkoutState.checkout.on('change', (session) => {
      // Handle changes to the checkout session
    });
  }
};
```

## Optional: Recopila 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](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-billing_address_collection) cuando crees la Checkout Session.

#### HTML + JS

Crea un elemento DOM contenedor para montar el Billing Address Element. Luego, crea una instancia del Billing Address Element con [checkout.createBillingAddressElement](https://docs.stripe.com/js/custom_checkout/create_billing_address_element) y móntalo llamando a [element.mount](https://docs.stripe.com/js/element/mount), y proporciona un selector CSS o el elemento DOM contenedor.

```html
<div id="billing-address"></div>
```

```javascript
const billingAddressElement = checkout.createBillingAddressElement();
billingAddressElement.mount('#billing-address');
```

El Billing Address Element admite las siguientes opciones:

- [contactos](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-contacts)
- [pantalla](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-display)

#### React

Arma el componente `BillingAddressElement` dentro del `CheckoutElementsProvider`.

```jsx
import React from 'react';
import {BillingAddressElement} from '@stripe/react-stripe-js/checkout';

const CheckoutForm = () => {
  return (
    <form>
      <BillingAddressElement/>
    </form>
  )
};
```

El Billing Address Element admite los siguientes accesorios:

- [contactos](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-contacts)
- [pantalla](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-display)

### 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 de recopilación de direcciones distinto antes de la confirmación, llama a [updateBillingAddress](https://docs.stripe.com/js/react_stripe_js/checkout/update_billing_address) 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» pasando [billingAddress](https://docs.stripe.com/js/custom_checkout/confirm#custom_checkout_session_confirm-options-billingAddress) para [confirmar](https://docs.stripe.com/js/custom_checkout/confirm).

### 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](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-billing_address_collection).

Cuando recopiles direcciones de facturación parciales, debes [recopilar direcciones manualmente](https://docs.stripe.com/payments/accept-a-payment.md#collect-billing-addresses-manually). 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](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options-fields-billingDetails) 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](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-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](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_address_collection-allowed_countries) con una matriz de [códigos ISO de país de dos letras](https://www.nationsonline.org/oneworld/country_code_list.htm).

### Cómo usar el Element Shipping Address

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

#### HTML + JS

Crea un elemento DOM contenedor para montar el elemento Shipping Address. A continuación, crea una instancia del Element Shipping Address mediante [checkout.createShippingAddressElement](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element) y móntala llamando a [element.mount](https://docs.stripe.com/js/element/mount), proporcionando un selector CSS o el elemento DOM contenedor.

```html
<div id="shipping-address"></div>
```

```javascript
const shippingAddressElement = checkout.createShippingAddressElement();
shippingAddressElement.mount('#shipping-address');
```

El Shipping Address Element admite las siguientes opciones:

- [contactos](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-contacts)
- [pantalla](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-display)

#### React

Arma el componente `ShippingAddressElement` dentro del `CheckoutElementsProvider`.

```jsx
import React from 'react';
import {ShippingAddressElement} from '@stripe/react-stripe-js/checkout';

const CheckoutForm = () => {
  return (
    <form>
      <ShippingAddressElement/>
    </form>
  )
};
```

El Shipping Address Element admite los siguientes accesorios:

- [contactos](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-contacts)
- [pantalla](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-display)

### Escucha los cambios de la sesión de Checkout

Puedes escuchar los cambios en la [sesión de Checkout](https://docs.stripe.com/api/checkout/sessions.md) agregando un receptor de eventos para manejar los cambios relacionados con la dirección.

#### HTML + JS

Usa el [objeto Session](https://docs.stripe.com/js/custom_checkout/session_object) para representar el importe del envío en tu formulario del proceso de compra.

```html
<div>
  <h3> Totals </h3>
  <div id="subtotal" ></div>
  <div id="shipping" ></div>
  <div id="total" ></div>
</div>
```

```javascript
const checkout = stripe.initCheckoutElementsSdk({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}`;
});

```

#### React

Usa [useCheckoutElements](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout_elements) para mostrar el costo de envío en tu formulario de confirmación de compra.

```jsx
import React from 'react';
import {useCheckoutElements, ShippingAddressElement} from '@stripe/react-stripe-js/checkout';

const CheckoutForm = () => {
  const checkoutState = useCheckoutElements();

  if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }

  return (
    <div>
      <div>
        <form>
          <ShippingAddressElement />
        </form>
      </div>
      <div>
        <h2>Checkout Summary</h2>
        {checkoutState.type === 'success' && (
          <>
            <pre>
              {JSON.stringify(checkoutState.checkout.lineItems, null, 2)}
            </pre>
            <h3>Totals</h3>
            <pre>
              Subtotal: {checkoutState.checkout.total.subtotal.amount}
              Shipping: {checkoutState.checkout.total.shippingRate.amount}
              Total: {checkoutState.checkout.total.total.amount}
            </pre>
          </>
        )}
      </div>
    </div>
  )
};
```

### Sincronizar direcciones de facturación y envío

Cuando utilizas tanto un elemento de Dirección de facturación como un elemento de Dirección de envío, puedes mostrar una casilla de verificación que permita a los clientes sincronizar sus direcciones de facturación y envío.

#### HTML + JS

Pasa la opción [syncAddressCheckbox](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-syncAddressCheckbox) en `elementsOptions` al iniciar Checkout para configurar qué elemento de Dirección mostrará la casilla de verificación.

```javascript
const checkout = stripe.initCheckoutElementsSdk({
  clientSecret,
  elementsOptions: {
    syncAddressCheckbox: 'shipping',
  },
});
```

#### React

Pasa la opción [syncAddressCheckbox](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-syncAddressCheckbox) en `ElementsOptions` en el `CheckoutElementsProvider` para configurar qué elemento de Dirección mostrará la casilla de verificación.

```jsx
<CheckoutElementsProvider
  stripe={stripePromise}
  options={{
    fetchClientSecret: () => promise,
    elementsOptions: {
      syncAddressCheckbox: 'shipping',
    },
  }}
>
  <CheckoutForm />
</CheckoutElementsProvider>
```

Establece el valor en `'facturación'` o `'envío'` para elegir qué elemento de dirección mostrará la casilla de verificación. Establece `'ninguno'` para ocultar la casilla o déjala en blanco para usar el valor predeterminado (`'facturación'`).

### 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 de recopilación de direcciones distinto antes de la confirmación, llama a [updateShippingAddress](https://docs.stripe.com/js/react_stripe_js/checkout/update_shipping_address) 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](https://docs.stripe.com/js/custom_checkout/confirm#custom_checkout_session_confirm-options-shippingAddress) para [confirmar](https://docs.stripe.com/js/custom_checkout/confirm).

## Optional: Separar la autorización de la captura [Lado del servidor]

Stripe admite pagos con tarjeta en dos pasos, de modo que primero puedes autorizar una tarjeta y luego capturar 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](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md#auth-capture-limitations). 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 de la captura es útil si necesitas tomar medidas adicionales entre la confirmación de la capacidad de pago del cliente y el cobro de los fondos. Por ejemplo, si vendes artículos de stock limitado y un cliente compra un producto con Checkout, puede 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](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-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.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -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=elements
```

Para capturar un pago que solo fue autorizado, puedes usar el punto de conexión del [Dashboard](https://dashboard.stripe.com/test/payments?status%5B%5D=uncaptured) o de [captura](https://docs.stripe.com/api/payment_intents/capture.md). 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](https://docs.stripe.com/api/payment_intents/capture.md).

## Optional: Gestión de cuentas de clientes [Sin código]

Para permitir que tus clientes [gestionen](https://docs.stripe.com/customer-management.md) sus propias cuentas, comparte un enlace a tu *portal de clientes* (The customer portal is a secure, Stripe-hosted page that lets your customers manage their subscriptions and billing details). 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.

## Optional: Gestión logística del pedido

Obtén información sobre cómo [programar la recepción de una notificación](https://docs.stripe.com/checkout/fulfillment.md?payment-ui=embedded-components) cuando un cliente paga.

## See also

- [Agregar descuentos para pagos únicos](https://docs.stripe.com/payments/advanced/discounts.md)
- [Cobrar impuestos](https://docs.stripe.com/tax/checkout/elements.md)
- [Permitir cantidades ajustables por partida](https://docs.stripe.com/payments/advanced/adjustable-quantity.md)
- [Agregar botones de un clic](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md?payment-ui=embedded-components)
- [Proyecto de muestra en GitHub](https://github.com/stripe-samples/accept-a-payment/tree/main/elements-with-checkout-sessions)