# Guarda el método de pago de un cliente sin realizar un pago

Aprende a guardar un método de pago y a aceptar pagos más tarde.

# Checkout Sessions API

> This is a Checkout Sessions API for when payment-ui is embedded-components. View the full page at https://docs.stripe.com/payments/save-and-reuse?payment-ui=embedded-components.

La [API Checkout Sessions en el modo `setup`](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode) te permite guardar los datos de pago de un cliente sin un pago inicial. Esto es útil si deseas incorporar clientes ahora, configurarlos para los pagos, y cobrarles utilizando la API Payment Intents en el futuro (cuando están fuera de línea).

Utiliza esta integración para configurar pagos recurrentes o crear pagos puntuales cuyo importe final se determinará más adelante, por lo general, después de que el cliente recibe el servicio.

> #### Transacciones con tarjeta presente
> 
> Las transacciones con tarjeta presente, como [recopilar los datos de la tarjeta a través del Terminal de Stripe](https://docs.stripe.com/terminal/features/saving-payment-details/save-directly.md), utilizan un proceso diferente para guardar el método de pago.

## Cumplimiento de la normativa

Al guardar los datos de pago de un cliente, eres responsable de cumplir todas las leyes, normativas y reglas de red aplicables. Estos requisitos generalmente se aplican si deseas guardar el método de pago de tu cliente para su uso futuro, como mostrarle el método de pago de un cliente en el flujo de confirmación de compra para una compra futura o cobrarle cuando no esté utilizando activamente tu sitio web o aplicación. Agrega condiciones a tu sitio web o aplicación que indiquen cómo planeas guardar los datos del método de pago y permite que los clientes las acepten.

Cuando guardas un método de pago, solo puedes usarlo para el uso específico que hayas incluido en tus condiciones. Para cargar un método de pago cuando un cliente está desconectado y guardarlo como una opción para futuras compras, asegúrate de obtener explícitamente el consentimiento del cliente para este uso específico. Por ejemplo, incluye una casilla de verificación que indique «Guardar mi método de pago para usarlo en el futuro» para obtener el consentimiento.

Para cobrar a un cliente cuando no está conectado, asegúrate de que sus Condiciones incluyen lo siguiente:

- El acuerdo del cliente para que puedas iniciar un pago o una serie de pagos en su nombre para transacciones específicas.
- El momento y la frecuencia previstos de los pagos (por ejemplo, si los cargos son por cuotas programadas, pagos de suscripción o recargas no programadas).
- Cómo determinas el importe de pago.
- Tu política de cancelación, si el método de pago es para un servicio de suscripción.

Asegúrate de mantener un registro del acuerdo por escrito de tu cliente en relación con estos términos.

> Si necesitas utilizar la confirmación manual del lado del servidor o su integración requiere presentar los métodos de pago por separado, consulta nuestra [guía alternativa](https://docs.stripe.com/payments/save-and-reuse-cards-only.md) .

## Configurar Stripe [Lado del servidor]

Primero, [crea una cuenta de Stripe](https://dashboard.stripe.com/register) o [inicia sesión](https://dashboard.stripe.com/login).

Usa nuestras bibliotecas oficiales para acceder a la API de Stripe 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 un cliente [Lado del servidor]

Para configurar un método de pago para pagos futuros, debes adjuntarlo a un objeto que represente a tu cliente. Cuando tu cliente cree una cuenta o realice su primera transacción con tu empresa, crea un objeto [Account](https://docs.stripe.com/api/v2/core/accounts/create.md) configurado por el cliente con la API Accounts v2 o un objeto [Customer](https://docs.stripe.com/api/customers/create.md) con la API Customers.

> #### Usa la API Accounts v2 para representar a los clientes
> 
> La API Accounts v2 suele estar disponible para usuarios Connect y en versión preliminar pública para otros usuarios de Stripe. Si eres parte de la versión preliminar Accounts v2, debes especificar una [versión preliminar](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) en tu código.
> 
> Para solicitar el acceso a la versión preliminar Accounts v2, 
> 
> For most use cases, we recommend [modeling your customers as customer-configured Account objects](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) instead of using [Customer](https://docs.stripe.com/api/customers.md) objects.

#### Accounts v2

```curl
curl -X POST https://api.stripe.com/v2/core/accounts \
  -H "Authorization: Bearer <<YOUR_SECRET_KEY>>" \
  -H "Stripe-Version: 2026-04-22.preview"
```

#### Customers&nbsp;v1

```curl
curl -X POST https://api.stripe.com/v1/customers \
  -u "<<YOUR_SECRET_KEY>>:"
```

## Utiliza el modo de configuración [Lado del servidor]

Crea una Checkout Session con [mode=setup](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode).

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d mode=setup \
  -d ui_mode=elements \
  -d currency=usd
```

## Adjuntar el método de pago a un cliente [Lado del servidor]

Si no has creado la sesión de Checkout con un cliente existente, utiliza el identificador del *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) para [adjuntar](https://docs.stripe.com/api/payment_methods/attach.md) el método de pago a un cliente.

De lo contrario, el método de pago se vincula automáticamente al cliente que proporcionaste al crear la Checkout Session.

#### Accounts&nbsp;v2

```curl
curl https://api.stripe.com/v1/payment_methods/{{PAYMENTMETHOD_ID}}/attach \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}"
```

#### Customers&nbsp;v1

```curl
curl https://api.stripe.com/v1/payment_methods/{{PAYMENTMETHOD_ID}}/attach \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer={{CUSTOMER_ID}}"
```

## Recuperar el método de pago [Lado del servidor]

Después de que un cliente complete con éxito su proceso de compra, gestiona el webhook [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed). Recupera el objeto Session en el webhook y, a continuación, haz lo siguiente:

- Obtén el valor de la clave [setup_intent](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-setup_intent), que es el ID de SetupIntent creado durante la Checkout Session.
- Utiliza el ID de SetupIntent para [recuperar](https://docs.stripe.com/api/setup_intents/retrieve.md) el objeto SetupIntent. El objeto devuelto contiene un ID de[payment_method](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-payment_method) que puedes adjuntar a un cliente en el siguiente paso.

Más información sobre [configuración de webhooks](https://docs.stripe.com/webhooks.md).

## Cobra al método de pago más tarde [Lado del servidor]

Después de adjuntar el PaymentMethod a un cliente, puedes realizar un pago *off-session* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information) utilizando un [PaymentIntent](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method):

- Configura [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account) con el ID de la `Account` o [customer](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer) con el ID del `Customer`, y configura [payment_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method) con el ID del `PaymentMethod`.
- Establece [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) como `true` para indicar que el cliente no se encuentra en su flujo de compra durante un intento de pago y no puede autenticar una solicitud realizada por un socio, como un emisor de tarjeta, un banco u otra entidad de pago. Si, durante tu flujo de compra, un socio solicita la autenticación, Stripe solicita exenciones utilizando la información del cliente de una transacción anterior *durante la sesión* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method). Si no se cumplen las condiciones para la exención, el PaymentIntent podría dar lugar a un error.
- Establece el valor de la propiedad [confirm](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) del PaymentIntent como `true`, lo que hace que la confirmación se produzca inmediatamente al crear el PaymentIntent.

#### Accounts&nbsp;v2

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=usd \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}" \
  -d "payment_method={{PAYMENTMETHOD_ID}}" \
  -d off_session=true \
  -d confirm=true
```

#### Customers&nbsp;v1

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=usd \
  -d "customer={{CUSTOMER_ID}}" \
  -d "payment_method={{PAYMENTMETHOD_ID}}" \
  -d off_session=true \
  -d confirm=true
```

Si un intento de pago falla, la solicitud también falla con un código de estado HTTP 402, y el estado de PaymentIntent es *requires\_payment\_method* (This status appears as "requires_source" in API versions before 2019-02-11). Notifica a tu cliente que regrese a tu solicitud (por ejemplo, mediante un correo electrónico o una notificación dentro de la aplicación) y dirígelo a una nueva Checkout Session para que seleccione otro método de pago.

#### Accounts&nbsp;v2

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}" \
  -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]=1099" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d ui_mode=elements \
  --data-urlencode "return_url=https://example.com/return"
```

#### Customers&nbsp;v1

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer={{CUSTOMER_ID}}" \
  -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]=1099" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d ui_mode=elements \
  --data-urlencode "return_url=https://example.com/return"
```


# API Setup Intents

> This is a API Setup Intents for when payment-ui is elements. View the full page at https://docs.stripe.com/payments/save-and-reuse?payment-ui=elements.

La [API Setup Intents](https://docs.stripe.com/api/setup_intents.md) te permite guardar los datos de pago de un cliente sin un pago inicial. Esto es útil si quieres hacer el onboarding de los clientes ahora, configurarlos para los pagos y cobrarles en el futuro, sin que estén conectados.

Utiliza esta integración para configurar pagos recurrentes o crear pagos puntuales cuyo importe final se determinará más adelante, por lo general, después de que el cliente recibe el servicio.

> #### Transacciones con tarjeta presente
> 
> Las transacciones con tarjeta presente, como la recopilación de datos de la tarjeta a través de Stripe Terminal, utilizan un proceso diferente para guardar el método de pago. Para obtener más detalles, consulta [la documentación de Terminal](https://docs.stripe.com/terminal/features/saving-payment-details/save-directly.md).

## Cumplimiento de la normativa

Al guardar los datos de pago de un cliente, eres responsable del cumplimiento de todas las leyes, normativas y reglas de red aplicables. Estos requisitos generalmente se aplican si deseas guardar el método de pago de tu cliente para su uso futuro, como mostrarle el método de pago de un cliente en el flujo de confirmación de compra para una compra futura o cobrarle cuando no esté utilizando activamente tu sitio web o aplicación. Agrega condiciones a tu sitio web o aplicación que indiquen cómo planeas guardar los datos del método de pago y permite que los clientes las acepten.

Cuando guardas un método de pago, solo puedes usarlo para el uso específico que hayas incluido en tus condiciones. Para cargar un método de pago cuando un cliente está desconectado y guardarlo como una opción para futuras compras, asegúrate de obtener explícitamente el consentimiento del cliente para este uso específico. Por ejemplo, incluye una casilla de verificación que indique «Guardar mi método de pago para usarlo en el futuro» para obtener el consentimiento.

Para cobrarles cuando estén desconectados, asegúrate de que tus condiciones incluyan lo siguiente:

- La aceptación del cliente para que inicies un pago o una serie de pagos en su nombre para transacciones específicas.
- El momento y la frecuencia previstos de los pagos (por ejemplo, si los cargos son por cuotas programadas, pagos de suscripciones o recargas no programadas).
- Cómo determinas el importe de pago.
- Tu política de cancelación, si el método de pago es para un servicio por suscripción.

Asegúrate de mantener un registro de la aceptación por escrito de estas condiciones por parte de tu cliente.

> Si necesitas usar la confirmación manual del lado del servidor o tu integración requiere presentar los métodos de pago por separado, consulta nuestra [guía alternativa](https://docs.stripe.com/payments/save-and-reuse-cards-only.md).

## Configurar Stripe [Lado del servidor]

Primero, [crea una cuenta de Stripe](https://dashboard.stripe.com/register) o [inicia sesión](https://dashboard.stripe.com/login).

Usa nuestras bibliotecas oficiales para acceder a la API de Stripe 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'
```

## Habilitar métodos de pago

Visualiza tu [configuración de métodos de pago](https://dashboard.stripe.com/settings/payment_methods) y habilita los que quieras aceptar. Se necesita al menos un método de pago habilitado para crear un *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method).

De forma predeterminada, Stripe habilita tarjetas y otros métodos de pago habituales que pueden ayudarte a llegar a más clientes, pero te recomendamos activar otros métodos de pago que sean pertinentes para tu empresa y tus clientes. Consulta [Admisibilidad de métodos de pago](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) para obtener información sobre productos y métodos de pago admitidos, y consulta nuestra [página de precios](https://stripe.com/pricing/local-payment-methods) para conocer las comisiones.

## Crear un objeto Customer [Lado del servidor]

Para configurar un método de pago para pagos futuros, debes adjuntarlo a un objeto que represente a tu cliente. Cuando tu cliente cree una cuenta o realice su primera transacción con tu empresa, crea un objeto [Account](https://docs.stripe.com/api/v2/core/accounts/create.md) configurado por el cliente con la API Accounts v2 o un objeto [Customer](https://docs.stripe.com/api/customers/create.md) con la API Customers.

> #### Usa la API Accounts v2 para representar a los clientes
> 
> La API Accounts v2 suele estar disponible para usuarios Connect y en versión preliminar pública para otros usuarios de Stripe. Si eres parte de la versión preliminar Accounts v2, debes especificar una [versión preliminar](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) en tu código.
> 
> Para solicitar el acceso a la versión preliminar Accounts v2, 
> 
> For most use cases, we recommend [modeling your customers as customer-configured Account objects](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) instead of using [Customer](https://docs.stripe.com/api/customers.md) objects.

```curl
curl -X POST https://api.stripe.com/v1/customers \
  -u "<<YOUR_SECRET_KEY>>:"
```

## Crear un SetupIntent [Lado del servidor]

> Si quieres procesar el Payment Element antes de crear un SetupIntent, consulta [Recopilar los datos de pago antes de crear un Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=setup).

Un [SetupIntent](https://docs.stripe.com/api/setup_intents.md) es un objeto que representa tu intento de configurar el método de pago de un cliente para pagos futuros. Los métodos de pago que se muestran a los clientes durante el proceso de compra también se incluyen en el `SetupIntent`. Puedes permitir que Stripe extraiga automáticamente los métodos de pago desde la configuración de tu Dashboard o puedes enumerarlos manualmente.

A menos que tu integración requiera una opción basada en código para ofrecer métodos de pago, Stripe recomienda usar la opción automatizada. Esto se debe a que Stripe evalúa la moneda, las restricciones en cuanto a los métodos de pago y otros parámetros para determinar la lista de métodos de pago aceptados. Se les da prioridad a los métodos de pago que aumentan la conversión y guardan mayor relación con la moneda y la ubicación del cliente. Los métodos de pago menos prioritarios se ocultan en un menú de contenido adicional.

#### Gestionar los métodos de pago desde el Dashboard

Algunos métodos de pago no se pueden guardar para pagos futuros y los clientes no los ven como opciones a la hora de configurar pagos futuros. Para obtener más información sobre la gestión de métodos de pago, consulta [Opciones de integración de métodos de pago](https://docs.stripe.com/payments/payment-methods/integration-options.md).

Opcionalmente, puedes crear un SetupIntent con `automatic_payment_methods` habilitado, y el SetupIntent se crea con los métodos de pago que configuraste en el Dashboard. Especificar el parámetro `automatic_payment_methods` es opcional porque Stripe habilita su funcionalidad de forma predeterminada en la última versión de la API.

Puedes administrar los métodos de pago desde el [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gestiona las devoluciones de los métodos de pago elegibles en función de factores como el importe de la transacción, la moneda y el flujo de pago.

#### Accounts&nbsp;v2

```curl
curl https://api.stripe.com/v1/setup_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}" \
  -d "automatic_payment_methods[enabled]=true"
```

#### Customers&nbsp;v1

```curl
curl https://api.stripe.com/v1/setup_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer={{CUSTOMER_ID}}" \
  -d "automatic_payment_methods[enabled]=true"
```

#### Enumera los métodos de pago manualmente

Crea un SetupIntent en tu servidor con una lista de los [métodos de pago](https://docs.stripe.com/payments/payment-methods/integration-options.md) que quieres admitir.

#### Accounts&nbsp;v2

```curl
curl https://api.stripe.com/v1/setup_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}" \
  -d "payment_method_types[]=bancontact" \
  -d "payment_method_types[]=card" \
  -d "payment_method_types[]=ideal"
```

#### Customers&nbsp;v1

```curl
curl https://api.stripe.com/v1/setup_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d customer={{CUSTOMER_ID}} \
  -d "payment_method_types[]=bancontact" \
  -d "payment_method_types[]=card" \
  -d "payment_method_types[]=ideal"
```

### Recuperar el secreto de cliente

El SetupIntent incluye un *secreto de cliente* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) que el lado del cliente usa para completar el proceso de pago de forma segura. Puedes usar diferentes métodos para pasar el secreto del cliente al lado del cliente.

#### Aplicación de una sola página

Recupera el secreto de cliente de un punto de conexión de tu servidor con la funcionalidad `fetch` del navegador. Este método es más conveniente si tu lado del cliente es una aplicación de una sola página, especialmente, si fue diseñada con un marco de front-end moderno como React. Crea el punto de conexión del servidor que se usa para el secreto de cliente:

#### Ruby

```ruby
get '/secret' do
  intent = # ... Create or retrieve the SetupIntent
  {client_secret: intent.client_secret}.to_json
end
```

Luego recupera el secreto de cliente con JavaScript del lado del cliente:

```javascript
(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();
```

#### Renderización del lado del servidor

Especifica el secreto de cliente desde tu servidor al cliente. Este enfoque funciona mejor si tu aplicación genera contenido estático en el servidor antes de enviarlo al navegador.

Agrega [client_secret](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret) en tu formulario de confirmación de compra. En el código del lado de tu servidor, recupera el secreto de cliente del SetupIntent:

#### Ruby

```erb
<form id="payment-form" data-secret="<%= @intent.client_secret %>">
  <div id="payment-element">
    <!-- placeholder for Elements -->
  </div>
  <button id="submit">Submit</button>
</form>
```

```ruby
get '/checkout' do
  @intent = # ... Fetch or create the SetupIntent
  erb :checkout
end
```

> #### Cómo usar Radar
> 
> Al guardar el método de pago de un cliente sin un pago inicial, [Radar](https://docs.stripe.com/radar.md) no actúa sobre el SetupIntent de forma predeterminada. Si deseas activar esta opción como predeterminada, dirígete a la [Configuración de Radar](https://dashboard.stripe.com/settings/radar) y habilita **Usar Radar en los métodos de pago guardados para su uso futuro**.

## Recopilar datos de pago [Lado del cliente]

Ya tienes todo listo para recopilar datos del pago del lado del cliente con el [Payment Element](https://docs.stripe.com/payments/payment-element.md). El Payment Element es un componente de interfaz de usuario (IU) prediseñado que simplifica la recopilación de datos de pago para una amplia variedad de métodos de pago.

El Payment Element contiene un iframe que envía de forma segura la información de pago a Stripe a través de una conexión HTTPS. Para que la integración funcione, la dirección de la página de finalización de compra debe comenzar con `https://` en lugar de `http://`. Puedes probar tu integración sin usar la conexión HTTPS, pero recuerda [habilitarla](https://docs.stripe.com/security/guide.md#tls) cuando todo esté listo para aceptar pagos reales.

#### HTML + JS

### Configurar Stripe.js

El Payment Element se encuentra disponible automáticamente como función de Stripe.js. Incluye el script Stripe.js en tu página de finalización de compra agregá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 en tus sistemas.

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

Crea una instancia de Stripe con el siguiente JavaScript en tu página de finalización de compra:

```javascript
// 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>>');
```

### Agrega el Payment Element a la página de configuración de pagos

El Payment Element necesita un lugar específico en tu página de configuración de pagos. Crea un nodo DOM vacío (contenedor) con un ID único en tu formulario de pago:

```html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>
```

Cuando se cargue el formulario anterior, crea una instancia de Payment Element y móntala en el nodo DOM del contenedor. Especifica el [secreto de cliente](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret) del paso anterior en `options` cuando crees la instancia [Elements](https://docs.stripe.com/js/elements_object/create):

```javascript
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements using the SetupIntent's client secretconst elements = stripe.elements(options);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

```

El Payment Element renderiza un formulario dinámico que le permite a tu cliente elegir un método de pago. Para cada método de pago, el formulario le pide automáticamente al cliente que complete todos los datos de pago necesarios.

### Personaliza el aspecto

Personaliza el Elemento de pago para que coincida con el diseño de tu sitio mediante la especificación del [objeto de apariencia](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance) en `opciones` cuando crees la instancia `elementos`. Stripe Elements es una colección de componentes de interfaz de usuario (IU) listos para usar. Para personalizar aún más tu formulario o recopilar información diferente de los clientes, consulta la [documentación de Elements.](https://docs.stripe.com/payments/elements.md).

### Solicita un token de comerciante de Apple Pay

Si aceptas pagos con Apple Pay, te recomendamos que configures la [opción](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-applePay) `applePay` para modificar lo que se muestra en la interfaz de Apple Pay. Al hacer esto, se utilizan los [tokens de comerciante](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) de Apple Pay. El siguiente ejemplo muestra una configuración para un pago que comienza el 5 de enero de 2030. Esta información se reflejará en la interfaz de Apple Pay.

```javascript
const paymentElement = elements.create('payment', {
  applePay: {
    deferredPaymentRequest: {
      paymentDescription: 'My deferred payment',
      managementURL: 'https://example.com/billing',
      deferredBilling: {
        amount: 2500,
        label: 'Deferred Fee',
        deferredPaymentDate: new Date('2030-01-05')
      },
    }
  },
  // Other options
});
```

#### Reaccionar

### Configurar Stripe.js

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 de npm:

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

### Agrega y configura el proveedor Elements en tu página de configuración de pagos

Para usar el componente Payment Element, envuelve el componente de la página de configuración de pago en un [proveedor Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Llama a `loadStripe` con la clave publicable, y especifica la `Promise` devuelta al proveedor `Elements`. También debes especificar el [secreto de cliente](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret) del paso anterior como `options` al proveedor `Elements`.

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';
import SetupForm from './SetupForm';

// Make sure to call `loadStripe` outside of a component's render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('<<YOUR_PUBLISHABLE_KEY>>');

function App() {
  const options = {
    // passing the SetupIntent's client secret
    clientSecret: '{{CLIENT_SECRET}}',
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

  return (
    <Elements stripe={stripePromise} options={options}>
      <SetupForm />
    </Elements>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
```

### Agregar el componente Payment Element

Usa el componente `PaymentElement` para crear tu formulario:

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

const SetupForm = () => {
  return (
    <form><PaymentElement />
      <button>Submit</button>
    </form>
  );
};

export default SetupForm;
```

Stripe Elements es una colección de componentes de interfaz de usuario (IU) desplegables. Para personalizar aún más tu formulario o recopilar otra información del cliente, consulta los [documentación de Elements](https://docs.stripe.com/payments/elements.md).

El Payment Element renderiza un formulario dinámico que le permite a tu cliente elegir un método de pago. Para cada método de pago, el formulario le pide automáticamente al cliente que complete todos los datos de pago necesarios.

### Personaliza el aspecto

Personaliza el Payment Element para que coincida con el diseño de tu sitio especificando el [objeto appearance](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance) en `options` al crear el proveedor `Elements`.

### Solicita un token de comerciante de Apple Pay

Si aceptas pagos con Apple Pay, te recomendamos que configures la [opción](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-applePay) `applePay` para modificar lo que se muestra en la interfaz de Apple Pay. Al hacer esto, se utilizan los [tokens de comerciante](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) de Apple Pay. El siguiente ejemplo muestra una configuración para un pago que comienza el 5 de enero de 2030. Esta información se reflejará en la interfaz de Apple Pay.

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

const SetupForm = () => {
  const options = {
    applePay: {
      deferredPaymentRequest: {
        paymentDescription: 'My deferred payment',
        managementURL: 'https://example.com/billing',
        deferredBilling: {
          amount: 2500,
          label: 'Deferred Fee',
          deferredPaymentDate: new Date('2030-01-05')
        },
      }
    },
    // Other options
  };

  return (
    <form><PaymentElement options={options} />
      <button>Submit</button>
    </form>
  );
};

export default SetupForm;
```

### Configurar moneda

Cuando usas SetupIntents con [automatic_payment_methods](https://docs.stripe.com/api/setup_intents/create.md#create_setup_intent-automatic_payment_methods), puedes especificar la moneda al [crear el Payment Element.](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-currency). El Payment Element representa los métodos de pago habilitados que admiten la moneda proporcionada. Para obtener más información, consulta [la documentación de Payment Element](https://docs.stripe.com/payments/payment-methods/integration-options.md).

### Recopila las direcciones

Por defecto, el Payment Element solo junta los detalles necesarios de la dirección de facturación. Algunos comportamientos, como el [cálculo de impuestos](https://docs.stripe.com/api/tax/calculations/create.md) o la introducción de datos de envío, requieren la dirección completa de tu cliente. Puedes realizar lo siguiente:

- Utiliza el [Address Element](https://docs.stripe.com/elements/address-element.md) para aprovechar las funcionalidades de autocompletar y localizar para obtener la dirección completa de tu cliente. Esto ayuda a garantizar el cálculo de impuestos más preciso.
- Recopila los datos de la dirección mediante tu propio formulario personalizado.

## Optional: Link in your checkout page [Lado del cliente]

Permite que tu cliente pague más rápido con [Link](https://docs.stripe.com/payments/link.md) en el [elemento Payment](https://docs.stripe.com/payments/payment-element.md). Puedes autocompletar la información de cualquier cliente que haya iniciado sesión y que ya esté usando Link, independientemente de si inicialmente guardó su información en Link con otra empresa. La integración predeterminada del elemento Payment incluye un instrucción de Link en el formulario de la tarjeta. Para administrar Link en el elemento Payment, ve a la [configuración de métodos de pago](https://dashboard.stripe.com/settings/payment_methods).
![Authenticate or enroll with Link directly in the Payment Element during checkout](https://b.stripecdn.com/docs-statics-srv/assets/link-in-pe.2efb5138a4708b781b8a913ebddd9aba.png)

Recopilación de una dirección de correo electrónico del cliente para la autenticación o la inscripción de 

### Opciones de integración

Hay dos formas de integrar Link con el elemento Payment. De estas, Stripe recomienda pasar una dirección de correo electrónico del cliente al elemento Payment si está disponible. Recuerda tener en cuenta cómo funciona tu flujo de compra al decidir entre estas opciones:

| Opción de integración                                                                  | Flujo de compra                                                                                                                                                                                                                                | Descripción                                                                                                                                                                                                                                                     |
| -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Pasa la dirección de correo electrónico de un cliente al Payment Element (Recomendado) | - Tu cliente introduce su dirección de correo electrónico antes de llegar a la página de finalización de compra (en un paso de creación de cuenta anterior, por ejemplo).
  - Prefieres usar tu propio campo de entrada de correo electrónico. | Establece mediante programación una dirección de correo electrónico del cliente en el elemento Payment. En este escenario, un cliente se autentica en Link directamente en el formulario de pago, no en un componente de interfaz de usuario (IU) por separado. |
| Recopilar una dirección de correo electrónico de un cliente en el Payment Element      | - Tus clientes pueden elegir introducir su correo electrónico y autenticarse o inscribirse con Link directamente en el elemento Payment durante el proceso de confirmación de compra.
  - No requiere(n) programación.                         | Si un cliente no se inscribió en Link y elige un método de pago admitido en el elemento Payment, se le pedirá que guarde sus datos a través de Link. Para los que ya se inscribieron, Link completa automáticamente la información de pago.                     |

Utiliza [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) para pasar la dirección de correo electrónico de un cliente al Payment Element.

```javascript
const paymentElement = elements.create('payment', {
  defaultValues: {
    billingDetails: {
      email: 'foo@bar.com',
    }
  },
  // Other options
});
```

Para obtener más información, lee cómo [construir una página de confirmación de compra personalizada que incluya Link](https://docs.stripe.com/payments/link/add-link-elements-integration.md).

## Optional: Guardar y recuperar métodos de pago del cliente

Puedes configurar el Payment Element para guardar los métodos de pago de tu cliente para uso futuro. En esta sección, se muestra cómo integrar la [función de métodos de pago guardados](https://docs.stripe.com/payments/save-customer-payment-methods.md), que permite que el Payment Element realice lo siguiente:

- Solicitar a los compradores su consentimiento para guardar un método de pago
- Cómo guardar métodos de pago cuando los compradores brindan su consentimiento
- Cómo mostrar los métodos de pago guardados a los compradores para compras futuras
- [Actualizar automáticamente tarjetas perdidas o vencidas](https://docs.stripe.com/payments/cards/overview.md#automatic-card-updates) cuando los compradores las reemplacen
![El Payment Element y una casilla de verificación del método de pago guardado](https://b.stripecdn.com/docs-statics-srv/assets/spm-save.fe0b24afd0f0a06e0cf4eecb0ce2403a.png)

Guardar métodos de pago.
![El Payment Element con un método de pago guardado seleccionado](https://b.stripecdn.com/docs-statics-srv/assets/spm-saved.5dba5a8a190a9a0e9f1a99271bed3f4b.png)

Reutiliza un método de pago guardado previamente.

### Cómo habilitar la función para guardar el método de pago en el Payment Element

Crea una [CustomerSession](https://docs.stripe.com/api/customer_sessions/.md) en tu servidor proporcionando el ID del cliente (usando `customer` para un objeto `Customer` o `customer_account` para un objeto `Account` configurado por el cliente) y habilitando el componente [payment_element](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-components-payment_element) para tu sesión. Configura qué [funcionalidades](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features) de método de pago guardadas quieres habilitar. Por ejemplo, habilitando [payment_method_save](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features-payment_method_save), se muestra una casilla de verificación que permite a los clientes guardar sus datos de pago para su uso futuro.

Puedes especificar `setup_future_usage` en una PaymentIntent o sesión de Checkout para anular el comportamiento predeterminado para guardar métodos de pago. Esto garantiza que guardes automáticamente el método de pago para uso futuro, incluso si el cliente no elige guardarlo explícitamente. Si tienes la intención de especificar `setup_future_usage`, no establezcas `payment_method_save_usage` en la misma transacción porque esto causa un error de integración.

> #### Usa la API Accounts v2 para representar a los clientes
> 
> La API Accounts v2 suele estar disponible para usuarios Connect y en versión preliminar pública para otros usuarios de Stripe. Si eres parte de la versión preliminar Accounts v2, debes especificar una [versión preliminar](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) en tu código.
> 
> Para solicitar el acceso a la versión preliminar Accounts v2, 
> 
> For most use cases, we recommend [modeling your customers as customer-configured Account objects](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) instead of using [Customer](https://docs.stripe.com/api/customers.md) objects.

#### Accounts&nbsp;v2

#### Ruby

```ruby

# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/create-intent-and-customer-session' do
  intent = client.v1.setup_intents.create({
    automatic_payment_methods: {enabled: true},
    customer_account: {{CUSTOMER_ACCOUNT_ID}},
  })
  customer_session = client.v1.customer_sessions.create({
    customer_account: {{CUSTOMER_ACCOUNT_ID}},
    components: {
      payment_element: {
          enabled: true,
          features: {
            payment_method_redisplay: 'enabled',
            payment_method_save: 'enabled',
            payment_method_save_usage: 'off_session',
            payment_method_remove: 'enabled',
          },
        },
    },
  })
  {
    client_secret: intent.client_secret,
    customer_session_client_secret: customer_session.client_secret
  }.to_json
end
```

#### Customers&nbsp;v1

#### Ruby

```ruby

# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/create-intent-and-customer-session' do
  intent = client.v1.setup_intents.create({
    # In the latest version of the API, specifying the `automatic_payment_methods` parameter
    # is optional because Stripe enables its functionality by default.
    automatic_payment_methods: {enabled: true},
    customer: {{CUSTOMER_ID}},
  })
  customer_session = client.v1.customer_sessions.create({
    customer: {{CUSTOMER_ID}},
    components: {
      payment_element: {
          enabled: true,
          features: {
            payment_method_redisplay: 'enabled',
            payment_method_save: 'enabled',
            payment_method_save_usage: 'off_session',
            payment_method_remove: 'enabled',
          },
        },
    },
  })
  {
    client_secret: intent.client_secret,
    customer_session_client_secret: customer_session.client_secret
  }.to_json
end
```

Tu instancia de Elements utiliza el *secreto de cliente* (A client secret is used with your publishable key to authenticate a request for a single object. Each client secret is unique to the object it's associated with) de CustomerSession para acceder a los métodos de pago guardados de ese cliente. [Gestiona errores](https://docs.stripe.com/error-handling.md) correctamente al crear la CustomerSession. Si se produce un error, no es necesario que proporciones el secreto de cliente de CustomerSession a la instancia de Elements, ya que es opcional.

Crea la instancia de Elements utilizando los secretos de cliente tanto para SetupIntent como para CustomerSession. Luego, usa esta instancia de Elements para crear un Payment Element.

```javascript
// Create the CustomerSession and obtain its clientSecret
const res = await fetch("/create-intent-and-customer-session", {
  method: "POST"
});

const {
  customer_session_client_secret: customerSessionClientSecret
} = await res.json();

const elementsOptions = {
  clientSecret: '{{CLIENT_SECRET}}',customerSessionClientSecret,
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret
// and CustomerSession's client secret obtained in a previous step
const elements = stripe.elements(elementsOptions);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');
```

Al confirmar el SetupIntent, Stripe.js controla automáticamente la configuración de [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) en el PaymentMethod, dependiendo de si el cliente marcó la casilla para guardar sus datos de pago.

### Cómo detectar la selección de un método de pago guardado

Para controlar el contenido dinámico cuando se selecciona un método de pago guardado, escucha el evento `change` del Payment Element, que se rellena con el método de pago seleccionado.

```javascript
paymentElement.on('change', function(event) {
  if (event.value.payment_method) {
    // Control dynamic content if a saved payment method is selected
  }
})
```

## Envía los datos de pago a Stripe [Lado del cliente]

Usa [stripe.confirmSetup](https://docs.stripe.com/js/setup_intents/confirm_setup) para completar la configuración con los datos recopilados por el Payment Element. Proporciona una [return_url](https://docs.stripe.com/api/setup_intents/create.md#create_setup_intent-return_url) para esta función a fin de que Stripe pueda redirigir al usuario después de completar la configuración. Es posible que primero lo remitamos a un sitio intermedio, como una página de autorización bancaria, antes de redirigirlo a la `return_url`.

Si tu cliente guarda los datos de la tarjeta, inmediatamente lo redirigimos a la `return_url` cuando la configuración se realiza correctamente. Si no quieres redireccionar pagos con tarjeta, puedes configurar el [redireccionamiento](https://docs.stripe.com/js/setup_intents/confirm_setup#confirm_setup_intent-options-redirect) como `if_required`. De este modo, solo se redirigirá a los clientes que compren con métodos de pago que usan el redireccionamiento.

#### HTML + JS

```javascript
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
const {error} = await stripe.confirmSetup({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://example.com/account/payments/setup-complete',
    }
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});
```

#### Reaccionar

Para llamar a [stripe.confirmSetup](https://docs.stripe.com/js/setup_intents/confirm_setup) desde el componente del formulario de pago, utiliza los hooks [useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook) y [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook).

Si prefieres componentes de clase tradicionales en lugar de hooks, puedes utilizar un [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer).

```jsx
import React, {useState} from 'react';
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';

const SetupForm = () => {
  const stripe = useStripe();
  const elements = useElements();

  const [errorMessage, setErrorMessage] = useState(null);

  const handleSubmit = async (event) => {
    // We don't want to let default form submission happen here,
    // which would refresh the page.
    event.preventDefault();

    if (!stripe || !elements) {
      // Stripe.js hasn't yet loaded.
      // Make sure to disable form submission until Stripe.js has loaded.
      return null;
    }
const {error} = await stripe.confirmSetup({
      //`Elements` instance that was used to create the Payment Element
      elements,
      confirmParams: {
        return_url: 'https://example.com/account/payments/setup-complete',
      },
    });

    if (error) {
      // This point will only be reached if there is an immediate error when
      // confirming the payment. Show error to your customer (for example, payment
      // details incomplete)
      setErrorMessage(error.message);
    } else {
      // Your customer will be redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer will be redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button disabled={!stripe}>Submit</button>
      {/* Show error message to your customers */}
      {errorMessage && <div>{errorMessage}</div>}
    </form>
  )
};

export default SetupForm;
```

Asegúrate de que la `return_url` corresponde a una página de tu sitio web que [proporciona el estado](https://docs.stripe.com/payments/payment-intents/verifying-status.md) de la `SetupIntent`. Stripe proporciona los siguientes parámetros de consulta de URL para verificar el estado cuando redirigimos al cliente a la `return_url`. También puedes añadir tus propios parámetros de consulta cuando proporciones la `return_url`, y persistirán durante el proceso de redirección.

| Parámetro                    | Descripción                                                                                                                              |
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `setup_intent`               | El identificador único del `SetupIntent`.                                                                                                |
| `setup_intent_client_secret` | El [secreto de cliente](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret) del objeto `SetupIntent`. |

Puedes usar [stripe.retrieveSetupIntent](https://docs.stripe.com/js/setup_intents/retrieve_setup_intent) para recuperar el `SetupIntent` mediante el parámetro de consulta `setup_intent_client_secret`. Si se confirma correctamente el `SetupIntent`, el ID del `PaymentMethod` resultante (en `result.setupIntent.payment_method`) se guardará en la `Account` o el `Customer` proporcionados por el cliente.

#### HTML + JS

```javascript

// Initialize Stripe.js using your publishable key
const stripe = Stripe('{PUBLISHABLE_KEY}');

// Retrieve the "setup_intent_client_secret" query parameter appended to
// your return_url by Stripe.js
const clientSecret = new URLSearchParams(window.location.search).get(
  'setup_intent_client_secret'
);

// Retrieve the SetupIntent
stripe.retrieveSetupIntent(clientSecret).then(({setupIntent}) => {
  const message = document.querySelector('#message')

  // Inspect the SetupIntent `status` to indicate the status of the payment
  // to your customer.
  //
  // Some payment methods will [immediately succeed or fail][0] upon
  // confirmation, while others will first enter a `processing` state.
  //
  // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
  switch (setupIntent.status) {
    case 'succeeded': {
      message.innerText = 'Success! Your payment method has been saved.';
      break;
    }

    case 'processing': {
      message.innerText = "Processing payment details. We'll update you when processing is complete.";
      break;
    }

    case 'requires_payment_method': {
      message.innerText = 'Failed to process payment details. Please try another payment method.';

      // Redirect your user back to your payment page to attempt collecting
      // payment again

      break;
    }
  }
});
```

#### Reaccionar

```jsx

// PaymentStatus.jsx

import React, {useState, useEffect} from 'react';
import {useStripe} from '@stripe/react-stripe-js';

const PaymentStatus = () => {
  const stripe = useStripe();
  const [message, setMessage] = useState(null);

  useEffect(() => {
    if (!stripe) {
      return;
    }

    // Retrieve the "setup_intent_client_secret" query parameter appended to
    // your return_url by Stripe.js
    const clientSecret = new URLSearchParams(window.location.search).get(
      'setup_intent_client_secret'
    );

    // Retrieve the SetupIntent
    stripe
      .retrieveSetupIntent(clientSecret)
      .then(({setupIntent}) => {
        // Inspect the SetupIntent `status` to indicate the status of the payment
        // to your customer.
        //
        // Some payment methods will [immediately succeed or fail][0] upon
        // confirmation, while others will first enter a `processing` state.
        //
        // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
        switch (setupIntent.status) {
          case 'succeeded':
            setMessage('Success! Your payment method has been saved.');
            break;

          case 'processing':
            setMessage("Processing payment details. We'll update you when processing is complete.");
            break;

          case 'requires_payment_method':
            // Redirect your user back to your payment page to attempt collecting
            // payment again
            setMessage('Failed to process payment details. Please try another payment method.');
            break;
        }
      });
  }, [stripe]);


  return message
};

export default PaymentStatus;
```

> Si tienes herramientas que rastrean la sesión del navegador del cliente, es posible que debas agregar el dominio `stripe.com` a la lista de exclusión de referentes. Las redirecciones hacen que algunas herramientas creen nuevas sesiones, lo que te impide realizar un seguimiento de la sesión completa.

## Cobrar más tarde al método de pago guardado [Lado del servidor]

> #### Cumplimiento de la normativa
> 
> Al guardar los datos de pago de un cliente, eres responsable del cumplimiento de todas las leyes, normativas y reglas de red aplicables. Cuando entregues métodos de pago anteriores a tu cliente final para futuras compras, asegúrate de incluir los métodos de pago para los que obtuviste el consentimiento del cliente para guardar los datos del método de pago para este uso futuro específico. Para diferenciar entre los métodos de pago adjuntos a los clientes que pueden y no pueden presentarse a tu cliente final como un método de pago guardado para futuras compras, usa el parámetro [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay).

A fin de encontrar un método de pago para aceptar pagos, enumera los métodos de pago asociados a tu cliente. En este ejemplo, se enumeran las tarjetas, pero puedes enumerar cualquier [tipo](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-type) de tarjeta admitida.

> #### Usa la API Accounts v2 para representar a los clientes
> 
> La API Accounts v2 suele estar disponible para usuarios Connect y en versión preliminar pública para otros usuarios de Stripe. Si eres parte de la versión preliminar Accounts v2, debes especificar una [versión preliminar](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) en tu código.
> 
> Para solicitar el acceso a la versión preliminar Accounts v2, 
> 
> For most use cases, we recommend [modeling your customers as customer-configured Account objects](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) instead of using [Customer](https://docs.stripe.com/api/customers.md) objects.

#### Accounts&nbsp;v2

```curl
curl -G https://api.stripe.com/v1/payment_methods \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}" \
  -d type=card
```

#### Customers&nbsp;v1

```curl
curl -G https://api.stripe.com/v1/payment_methods \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer={{CUSTOMER_ID}}" \
  -d type=card
```

Cuando tengas todo listo para aceptar pagos *fuera de la sesión* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information) de tu cliente, usa el ID del `cliente` o `cuenta` configurados por el cliente y el ID del `PaymentMethod` para crear un `PayIntent` con el importe y las monedas del pago. Establece algunos otros parámetros con el fin de efectuar el pago fuera de la sesión:

- Establece [off_session](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-off_session) en true para indicar que el cliente no se encuentra en su flujo de compra durante un intento de pago y no puede autenticar una solicitud realizada por un socio, como un emisor de tarjeta, un banco u otra entidad de pago. Si, durante tu flujo de compra, un socio solicita la autenticación, Stripe solicita exenciones usando la información del cliente de una transacción anterior *durante la sesión* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method). Si no se cumplen las condiciones para la exención, el `PaymentIntent` podría dar lugar a un error.
- Establece [confirm](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) en true para activar la confirmación de inmediato cuando se crea el `PagoIntent`.
- Establece [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) en el ID del `PaymentMethod`.
- Según cómo representes a los clientes en tu integración, establece [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account) en el ID de la `cuenta` configurada por el cliente o [cliente](https://docs.stripe.com/api.md#create_payment_intent-customer) en el ID del `cliente`.

#### Accounts&nbsp;v2

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=usd \
  -d "automatic_payment_methods[enabled]=true" \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}" \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  --data-urlencode "return_url=https://example.com/order/123/complete" \
  -d off_session=true \
  -d confirm=true
```

#### Customers&nbsp;v1

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=usd \
  -d "automatic_payment_methods[enabled]=true" \
  -d "customer={{CUSTOMER_ID}}" \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  --data-urlencode "return_url=https://example.com/order/123/complete" \
  -d off_session=true \
  -d confirm=true
```

Cuando falla un intento de pago, la solicitud también falla con un código de estado HTTP 402 y el estado del PaymentIntent es *requires\_payment\_method* (This status appears as "requires_source" in API versions before 2019-02-11). Debes notificar a tu cliente para que regrese a tu aplicación para completar el pago (por ejemplo, enviando un correo electrónico o una notificación en la aplicación).

Comprueba el código del [error](https://docs.stripe.com/api/errors/handling.md) generado por la biblioteca de la API de Stripe. Si el pago falló debido a un código de rechazo de la [authentication_required](https://docs.stripe.com/declines/codes.md), usa el secreto de cliente del PaymentIntent rechazado con confirmPayment para permitir que el cliente autentique el pago.

```javascript
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmPayment({
    // The client secret of the PaymentIntent
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});
```

> `stripe.confirmPayment` puede tardar varios segundos en completarse. Durante ese tiempo, deshabilita tu formulario para no se vuelva e enviar y muestra un indicador de espera, por ejemplo, un indicador giratorio. Si recibes un mensaje de error, muéstraselo al cliente, rehabilita el formulario y oculta el indicador de espera. Si el cliente debe cumplir pasos adicionales para completar el pago, como la autenticación, Stripe.js lo guiará en ese proceso.

Si el pago falló por otros motivos, por ejemplo, debido a fondos insuficientes, remite al cliente a una página de pago para que ingrese otro método. Puedes volver a usar el PaymentIntent existente para reintentar el pago con los nuevos datos.

## Probar la integración

Usa datos de pago de prueba y la página de redireccionamiento de prueba para verificar tu integración. Haz click en las siguientes pestañas para ver los detalles de cada método de pago.

#### Tarjetas

| Método de pago     | Escenario                                                                                                                                                                                                                                                                                                                                | Cómo hacer la prueba                                                                                                                                    |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Tarjeta de crédito | La configuración de la tarjeta se realiza correctamente y no 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 nuestro formulario de tarjeta de crédito con el número de tarjeta `4242 4242 4242 4242` y la fecha de vencimiento, el CVC o el código postal.  |
| Tarjeta de crédito | La tarjeta requiere autenticación para la configuración inicial, pero no en los pagos sucesivos.                                                                                                                                                                                                                                         | Completa nuestro formulario de tarjeta de crédito con el número de tarjeta `4000 0025 0000 3155` y cualquier fecha de vencimiento, CVC y código postal. |
| Tarjeta de crédito | La tarjeta requiere autenticación para la configuración inicial y también requiere autenticación para los pagos sucesivos.                                                                                                                                                                                                               | Completa nuestro formulario de tarjeta de crédito con el número de tarjeta `4000 0027 6000 3184` y cualquier fecha de vencimiento, CVC y código postal. |
| Tarjeta de crédito | La tarjeta es rechazada durante la configuración.                                                                                                                                                                                                                                                                                        | Completa nuestro formulario de tarjeta de crédito con el número de tarjeta `4000 0000 0000 9995` y la fecha de vencimiento, el CVC o el código postal.  |

#### Redireccionamientos bancarios

| Método de pago      | Escenario                                                                                                                                                 | Cómo hacer la prueba                                                                                                                                                                |
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Bancontact          | Tu cliente configura correctamente un método de pago con débito directo SEPA para uso futuro con Bancontact.                                              | Usa cualquier nombre en el formulario de Bancontact y luego haz click en **Autorizar la configuración de prueba** en la página de redireccionamiento.                               |
| Bancontact          | Tu cliente no pasó la autenticación en la página de redireccionamiento de Bancontact.                                                                     | Usa cualquier nombre en el formulario de Bancontact y luego haz click en **Error en la configuración de prueba** en la página de redireccionamiento.                                |
| Débito directo BECS | Tu cliente paga correctamente con débito directo BECS.                                                                                                    | Completa el formulario con el número de cuenta `900123456`. El estado `PaymentIntent` confirmado pasa inicialmente al estado `processing` y, tres 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`.                                                                                                                         |
| iDEAL               | Tu cliente configura correctamente un método de pago con [débito directo SEPA](https://docs.stripe.com/payments/sepa-debit.md) para uso futuro con iDEAL. | Usa cualquier nombre y banco en el formulario de iDEAL y luego haz click en **Autorizar configuración de prueba** en la página de redireccionamiento.                               |
| iDEAL               | Tu cliente no pasa la autenticación en la página de redireccionamiento de iDEAL.                                                                          | Selecciona cualquier banco y usa cualquier nombre en el formulario de iDEAL. Luego, haz click en **Error en la configuración de prueba** en la página de redireccionamiento.        |

#### Débitos bancarios

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

### Prueba de cargo a un PaymentMethod de débito SEPA guardado

La confirmación del `SetupIntent` usando iDEAL, Bancontact o Sofort genera un [débito directo SEPA](https://docs.stripe.com/payments/sepa-debit.md) *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs). El débito directo SEPA es un método de pago de [notificación diferida](https://docs.stripe.com/payments/payment-methods.md#payment-notification) que pasa a un estado de `processing` intermedio antes de pasar a un estado `succeeded` o `requires_payment_method` varios días después.

#### Correo electrónico

Define `payment_method.billing_details.email` con uno de los siguientes valores para probar las transiciones de estado del `PaymentIntent`. Puedes incluir tu propio texto personalizado al inicio de la dirección de correo electrónico seguido de un guion bajo. Por ejemplo, `test_1_generatedSepaDebitIntentsFail@example.com` genera un PaymentMethod con débito directo SEPA que siempre da error cuando se usa con un `PaymentIntent`.

| Dirección de correo electrónico                                    | Descripción                                                                                                                |
| ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
| `generatedSepaDebitIntentsSucceed@example.com`                     | El estado del `PaymentIntent`pasa de `processing` a `succeeded`.                                                           |
| `generatedSepaDebitIntentsSucceedDelayed@example.com`              | El estado del `PaymentIntent` pasa de `processing` a `succeeded` después de, al menos, tres minutos.                       |
| `generatedSepaDebitIntentsFail@example.com`                        | El estado del `PaymentIntent` pasa de `processing` a `requires_payment_method`.                                            |
| `generatedSepaDebitIntentsFailDelayed@example.com`                 | El estado del `PaymentIntent` pasa de `processing` a `requires_payment_method` después de, al menos, tres minutos.         |
| `generatedSepaDebitIntentsSucceedDisputed@example.com`             | El estado del `PaymentIntent` pasa de `processing` a `succeeded`, pero se crea inmediatamente una disputa.                 |
| `generatedSepaDebitIntentsFailsDueToInsufficientFunds@example.com` | El estado del `PaymentIntent` pasa de `processing` a `requires_payment_method` con el código de error `inufficient_funds`. |

#### PaymentMethod

Usa estos PaymentMethods para probar que el `PaymentIntent` haga la transición. Estos tokens son útiles para que las pruebas automáticas adjunten un PaymentMethod al SetupIntent en el servidor.

| Método de pago                                                      | Descripción                                                                                                                |
| ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| `pm_bancontact_generatedSepaDebitIntentsSucceed`                    | El estado del `PaymentIntent`pasa de `processing` a `succeeded`.                                                           |
| `pm_bancontact_generatedSepaDebitIntentsSucceedDelayed`             | El estado del `PaymentIntent` pasa de `processing` a `succeeded` después de, al menos, tres minutos.                       |
| `pm_bancontact_generatedSepaDebitIntentsFail`                       | El estado del `PaymentIntent` pasa de `processing` a `requires_payment_method`.                                            |
| `pm_bancontact_generatedSepaDebitIntentsFailDelayed`                | El estado del `PaymentIntent` pasa de `processing` a `requires_payment_method` después de, al menos, tres minutos.         |
| `pm_bancontact_generatedSepaDebitIntentsSucceedDisputed`            | El estado del `PaymentIntent` pasa de `processing` a `succeeded`, pero se crea inmediatamente una disputa.                 |
| `pm_bancontact_generadoSepaDebitIntentsFailsDueToInsufficientFunds` | El estado del `PaymentIntent` pasa de `processing` a `requires_payment_method` con el código de error `inufficient_funds`. |

## Optional: Personalizar el diseño [Lado del cliente]

Puedes personalizar el diseño del Payment Element (en acordeón o en pestañas) para que se adapte a tu experiencia de confirmación de compra. Para obtener más información sobre cada una de las propiedades, consulta [elements.create](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options).

#### Acordeón

Puedes comenzar a usar las funcionalidades de diseño especificando un `type` de diseño y otras propiedades opcionales al crear el Payment Element:

```javascript
const paymentElement = elements.create('payment', {
  layout: {
    type: 'accordion',
    defaultCollapsed: false,
    radios: 'always',
    spacedAccordionItems: false
  }
});
```

#### Pestañas

### Especifica el diseño

Establece el valor para el diseño en `tabs`. También tienes la opción de especificar otras propiedades, como las del siguiente ejemplo:

```javascript
const paymentElement = elements.create('payment', {
  layout: {
    type: 'tabs',
    defaultCollapsed: false,
  }
});
```

En la siguiente imagen, se muestra el mismo Payment Element renderizado usando diferentes configuraciones de diseño:
![Tres experiencias de formulario de compra](https://b.stripecdn.com/docs-statics-srv/assets/pe_layout_example.525f78bcb99b95e49be92e5dd34df439.png)

Diseños del Payment Element

## Optional: Apple Pay y Google Pay [Lado del cliente]

Cuando [habilitas pagos con tarjeta](https://docs.stripe.com/payments/save-and-reuse.md?platform=web&ui=elements#create-intent), mostramos Apple Pay y Google Pay para los clientes cuyo entorno cumple con las [condiciones de visualización de la cartera](https://docs.stripe.com/testing/wallets.md). Para aceptar pagos de estas carteras, también debes realizar lo siguiente:

- Habilítalos en tu [configuración de métodos de pago](https://dashboard.stripe.com/settings/payment_methods). Apple Pay está habilitado de forma predeterminada.
- [Registra tu dominio](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).

> #### Pruebas regionales
> 
> Stripe Elements no es compatible con Google Pay o Apple Pay para cuentas y clientes de Stripe en la India. Por lo tanto, no puedes probar tu integración de Google Pay o Apple Pay si la dirección IP de quien realiza la prueba es de la India, incluso si la cuenta de Stripe está establecida fuera de la India.

## Cuéntales a tus clientes qué es Stripe

Stripe recopila información sobre las interacciones de los clientes con Elements para proporcionarte servicios, mejorarlos y prevenir el fraude. Esto incluye el uso de cookies y direcciones IP para identificar qué Elements vio un cliente durante una sola sesión de finalización de compra. Tienes la responsabilidad de divulgar y obtener todos los derechos y consentimientos necesarios para que Stripe use los datos para dichos fines. Si deseas obtener más información, visita nuestro [centro de privacidad](https://stripe.com/legal/privacy-center#as-a-business-user-what-notice-do-i-provide-to-my-end-customers-about-stripe).

## See also

- [Aceptar un pago](https://docs.stripe.com/payments/accept-a-payment.md)
- [Guarda los datos de pago durante el pago](https://docs.stripe.com/payments/save-during-payment.md)
- [La API Elements Appearance](https://docs.stripe.com/elements/appearance-api.md)
- [Envía factores de riesgo completos](https://docs.stripe.com/radar/optimize-risk-factors.md)