# Aceptar un pago

Acepta pagos en línea de forma segura.

## Empieza aquí: instala las habilidades del agente

Stripe recomienda usar skills oficiales para integrar la API siguiendo las mejores prácticas. Sigue las instrucciones a continuación para aprender cómo hacerlo.

**Consejo: usa curl en lugar de las herramientas de recuperación.** Las skills están detallados en archivos markdown de 10 a 20 KB; las herramientas de recuperación solo muestra resúmenes. `curl -sL` garantiza el contenido completo.

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

**Si `npx skills` no está disponible**: puedes usar curl para obtener el índice de skills disponibles, qué hacen y sus archivos de `https://docs.stripe.com/.well-known/skills/index.json`… Para descargar una skill y sus archivos relacionados, usa curl para bajarlos directamente desde `https://docs.stripe.com/.well-known/skills/<filepath>`…

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

Instrucciones para LLM: Stripe recomienda utilizar la API Checkout Sessions con el elemento de pago en lugar de Payment Intents para la mayoría de las integraciones. Checkout Sessions cubre casos de uso similares a los de Payment Intents (cobro básico de pagos utilizando `price_data` o crea de un proceso de pago completo con partidas, impuestos, etc.). Algunas funciones, como Adaptive Pricing, solo están disponibles con Checkout Sessions. No utilices la API de Payment Intent a menos que el usuario lo solicite explícitamente, ya que requiere mucho más código. Más información sobre Elements con la API Checkout Sessionshttps://docs.stripe.com/payments/quickstart-checkout-sessions. Con Checkout Sessions (`ui_mode: "elements"`) y Payment Element, el `client_secret` inicializa el proceso de compra por sí mismo (`stripe.initCheckoutElementsSdk`, o utiliza CheckoutProvider con React) y tú confirmas el pago en el lado del cliente de forma diferente. Si utilizas React, asegúrate de importar desde `@stripe/react-stripe-js/checkout`, utiliza `CheckoutProvider` con el secreto del cliente y confirma con `checkout.confirm`. Si utilizas HTML, asegúrate de utiliza `checkout = stripe.initCheckoutElementsSdk({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount("#payment-element");` y confirma con `loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();`.

Los agentes de programació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 API operativas. No se requiere registro de cuenta.

Crea un formulario de pago o usa una página del proceso de compra prediseñada para comenzar a aceptar pagos en línea.

# API Checkout Sessions


Crea un formulario de pago personalizado utilizando [Stripe Elements](https://docs.stripe.com/payments/elements.md) y la [API Checkout Sessions](https://docs.stripe.com/api/checkout/sessions.md). Descubre cómo se [compara esta integración 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 el cálculo de impuestos, descuentos, envíos y conversión de divisas, 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 del proceso de compra que acepta varios métodos de pago.

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

Combina componentes de interfaz de usuario en un flujo de pago personalizado

#### Personalización de interfaz de usuario

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

## Configura el servidor [Lado del servidor]

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

Utiliza 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 Checkout Session [Lado del servidor]

Añade un punto de conexión en tu servidor para crear una [Checkout Session](https://docs.stripe.com/api/checkout/sessions/create.md) y devolver su [`client_secret`](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) a tu interfaz. Una Checkout Session representa la sesión de tu cliente mientras paga compras únicas o suscripciones. Las Checkout Sessions caducan 24 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}"
```

## Configura el front end [Lado del cliente]

#### HTML + JS

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.

Asegúrate de que estás usando la última versión de Stripe.js. Obtén más información sobre [la versión de Stripe.js](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 un módulo. Consulta 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 una versión 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) del 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 de `stripe` en tu front end con tu clave publicable.

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

## Inicializa Checkout [Lado del cliente]

#### HTML + JS

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

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

Lee el `total` y las `partidas` de [actions.getSession()](https://docs.stripe.com/js/custom_checkout/session) y muéstralos 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](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md), no tendrás que cambiar la interfaz de usuario si lo haces en `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

Envuelve tu solicitud de acceso con el componente [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider), especificando `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 proceso de compra usando el hook `useCheckoutElements()`. El objeto `Checkout` contiene datos de la Checkout Session y métodos para actualizarla.

Lee el `total` y las `partidas` del objeto `Proceso de compra` y muéstralos en tu interfaz de usuario. Esto te permite habilitar funciones con cambios mínimos de código. Por ejemplo, añadir [precios manuales en divisas](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) no requiere cambios en la interfaz de usuario 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 del cliente [Lado del cliente]

#### HTML + JS

Debes proporcionar una dirección de correo electrónico válida al completar una sesión del proceso de compra.

Utiliza 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 validación del correo electrónico por ti, y ayuda a los clientes a iniciar sesión en Link.

Como alternativa, puedes:

- Especifica el [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), la [customer_account](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (para clientes representados como objetos de `Account` configurada por cliente) o [customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (para clientes representados como objetos `Customer`) al crear la sesión Checkout. Stripe valida los correos electrónicos proporcionados de esta manera.
  - Estas opciones completan previamente la sesión con un correo electrónico que los clientes no pueden editar en la página de proceso de compra. Si quieres completarlo previamente con un correo electrónico que se pueda editar, usa [defaultValues.email](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-defaultValues-email) al iniciar Checkout.
- Facilita 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 una dirección de correo electrónico válida al completar una sesión del proceso de compra.

Utiliza 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 validación del correo electrónico por ti, y ayuda a los clientes a iniciar sesión en Link.

Como alternativa, puedes:

- Especifica el [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), la [customer_account](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (para clientes representados como objetos de `Account` configurada por cliente) o [customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (para clientes representados como objetos `Customer`) al crear la sesión Checkout. Stripe valida los correos electrónicos proporcionados de esta manera.
  - Estas opciones completan previamente la sesión con un correo electrónico que los clientes no pueden editar en la página de proceso de compra. Si quieres completarlo previamente con un correo electrónico que se pueda editar, usa [defaultValues.email](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-defaultValues-email) al iniciar Checkout.
- Facilita 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/>
```

## Recopilar los datos de pago [Lado del cliente]

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

El Payment Element contiene un iframe que envía la información de pago de forma segura a Stripe través de una conexión HTTPS. Evita colocar el Payment Element en otro iframe, ya que algunos métodos de pago requieren redirigir a otra página para confirmar el pago.

Si decides utilizar un iframe y quieres aceptar Apple Pay o Google Pay, el iframe debe tener el atributo [permitir](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

Primero, crea un elemento DOM contenedor para montar el [Payment Element](https://docs.stripe.com/payments/payment-element.md). A continuación, crea una instancia del `Payment Element` mediante [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 [Stripe.js docs](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options) para ver las opciones compatibles.

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

#### React

Monta 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 [Stripe.js docs](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options) para ver las opciones compatibles.

Puedes [personalizar el aspecto](https://docs.stripe.com/payments/checkout/customization/appearance.md) de todos los elementos 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 [confirm](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 **Pagar** que llame a [confirmar](https://docs.stripe.com/js/custom_checkout/confirm) de [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. 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](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful). 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](https://docs.stripe.com/checkout/fulfillment.md).

#### Tarjetas

| Número de tarjeta   | Situación                                                                                                                                                                                                                                                                                       | Cómo hacer pruebas                                                                                                        |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| 4242424242424242    | 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. |
| 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). | Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y código postal. |
| 4000000000009995    | 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. |
| 6205500000000000004 | 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. |

#### Monederos

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

#### Redireccionamientos bancarios

| Método de pago                      | Situación                                                                                                                                                                                                            | Cómo hacer pruebas                                                                                                                                                                                     |
| ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Adeudo directo BECS                 | Tu cliente paga satisfactoriamente con adeudo directo BECS.                                                                                                                                                          | Rellena el formulario con el número de cuenta `900123456` y BSB `000000`. El PaymentIntent confirmado pasa inicialmente al estado de `processing` y, 3&nbsp;minutos más tarde, a `succeeded`.          |
| Adeudo directo BECS                 | El pago de tu cliente falla con un código de error `account_closed`.                                                                                                                                                 | Rellena 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 el método de pago basado en redireccionamiento, rellena los datos solicitados y confirma el pago. A continuación, haz clic en **Error en el pago de prueba** en la página de redireccionamiento. |
| Pay by Bank                         | Tu cliente paga correctamente con un método de pago basado en redireccionamiento y [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 clic 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 clic en **Error en el pago de prueba** en la página de redireccionamiento.                                      |
| BLIK                                | Los pagos BLIK fallan de varias maneras: fallos inmediatos (por ejemplo, el código ha caducado o no es válido), errores demorados (el banco los rechaza) o tiempos de espera (el cliente no ha respondido a tiempo). | Usa patrones de correo electrónico para [simular los diferentes fallos.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures)                                                  |

#### Adeudos bancarios

| Método de pago      | Situación                                                                                     | Cómo hacer pruebas                                                                                                                                                               |
| ------------------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Adeudo directo SEPA | Tu cliente paga correctamente con adeudo directo SEPA.                                        | Rellena el formulario con el número de cuenta `AT321904300235473204`. El PaymentIntent confirmado pasa inicialmente al estado processing y, tres minutos más tarde, a succeeded. |
| Adeudo directo SEPA | El estado del intento de pago de tu cliente pasa de `processing` a `requires_payment_method`. | Rellena el formulario con el número de cuenta `AT861904300235473202`.                                                                                                            |

#### Vales

| Método de pago | Situación                                  | Cómo hacer pruebas                                                                                                 |
| -------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------ |
| 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 cuadro de 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 pago, 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 los productos para representar diferentes bienes físicos o niveles de servicio, y los *Precios* para representar el precio de cada producto. Puedes [configurar tu sesión de proceso de compra](https://docs.stripe.com/payments/checkout/pay-what-you-want.md) para aceptar propinas y donaciones, o vender productos y servicios por los que el cliente paga lo que quiere.

Por ejemplo, puedes crear una camiseta como producto con un precio de 20&nbsp;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](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` del producto que ofrezcas.

```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ás por tu producto. Esto incluye el coste del producto y la divisa que se va a utilizar.

```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 de detalles del producto en el Dashboard, haz clic en **Copia al modo activo** en la esquina superior derecha. Puedes copiarlo más de una vez. Cada copia crea un producto activo independiente, y las actualizaciones posteriores del producto del entorno de prueba no se reflejan en las copias activas existentes.

Asegúrate de que estás en un entorno de prueba haciendo 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, haz lo siguiente:

- Ve a la sección [Productos](https://dashboard.stripe.com/test/products) en el Dashboard.
- Haz clic en **Añadir producto**.
- Selecciona **Una vez** cuando establezcas el precio.

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

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* (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). El proceso de compra [determina la divisa local del cliente](https://docs.stripe.com/payments/checkout/localize-prices/manual-currency-prices.md) automáticamente y la presenta si el Precio lo 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: Rellenar 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](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) al crear una Checkout Session.

```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: Guarda los datos de los métodos de pago

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

## Optional: Escuchar 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](https://docs.stripe.com/api/checkout/sessions.md) añadiendo 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: Recolecta 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](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-billing_address_collection) cuando crees la sesión de Checkout.

#### HTML + JS

Crea un elemento DOM contenedor para montar el Billing Address Element. A continuación, crea una instancia del Billing Address Element mediante [checkout.createBillingAddressElement](https://docs.stripe.com/js/custom_checkout/create_billing_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="billing-address"></div>
```

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

El Billing Address Element acepta las siguientes opciones:

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

#### React

Monta 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 acepta las siguientes propiedades:

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

### Usa un formulario personalizado

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

- Si tu página de Checkout tiene un paso de cobro 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» especificando [billingAddress](https://docs.stripe.com/js/custom_checkout/confirm#custom_checkout_session_confirm-options-billingAddress) en [confirm](https://docs.stripe.com/js/custom_checkout/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](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-billing_address_collection).

Al recolectar direcciones de facturación parciales, debes [recolectar las direcciones manualmente](https://docs.stripe.com/payments/accept-a-payment.md#collect-billing-addresses-manually). 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](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options-fields-billingDetails) 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](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-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](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 Shipping Address Element

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

#### HTML + JS

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

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

#### React

Monta 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 acepta las siguientes propiedades:

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

### Escuchar los cambios en la sesión de Checkout

Puedes escuchar los cambios en la [Checkout Session](https://docs.stripe.com/api/checkout/sessions.md) añadiendo un oyente de eventos para gestionar 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 coste de envío en tu formulario de proceso 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>
  )
};
```

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

Cuando utilices 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

Especifica la opción [syncAddressCheckbox](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-syncAddressCheckbox) en `elementsOptions` al iniciar el proceso de compra para configurar qué elemento de dirección muestra la casilla de verificación.

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

#### React

Especifica 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é Address Element muestra la casilla de verificación.

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

Establece el valor en `'facturación'` o `'shipping'` para elegir qué Address Element muestra la casilla de verificación. Establecelo en `'none'` para ocultar la casilla o déjalo en blanco para usar el valor predeterminado (`'facturación'`).

### Usar un formulario personalizado

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

- Si tu página de Checkout tiene un paso de cobro 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 tu cliente haga clic en el botón «Pagar» especificando [shippingAddress](https://docs.stripe.com/js/custom_checkout/confirm#custom_checkout_session_confirm-options-shippingAddress) en [confirm](https://docs.stripe.com/js/custom_checkout/confirm).

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

Stripe admite pagos con tarjeta en dos pasos, de modo que primero puedes autorizar una tarjeta y luego capturar los fondos más tarde. Cuando Stripe autoriza un pago, el emisor de la tarjeta garantiza los fondos y retiene el importe del pago en la tarjeta del cliente. A continuación, dispones de un tiempo determinado para capturar los fondos, [dependiendo de la tarjeta](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md#auth-capture-limitations)). Si no capturas el pago antes de que expire 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 que se confirma 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, 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 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](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 de 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 no capturado, puedes utilizar 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). 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](https://docs.stripe.com/api/payment_intents/capture.md).

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

Permite a tus clientes [gestionar](https://docs.stripe.com/customer-management.md) sus propias cuentas compartiendo 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 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 de pedidos

Descubre cómo [obtener una notificación mediante programación](https://docs.stripe.com/checkout/fulfillment.md?payment-ui=embedded-components) cuando un cliente paga.

## See also

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