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

Más información sobre cómo guardar un método de pago y cobrar más tarde.

# API Checkout Sessions

> This is a API Checkout Sessions 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 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 que se haya realizado un pago inicial. Esta opción resulta útil si quieres hacer el onboarding de clientes ahora, realizar la configuración de pagos y cobrarles más adelante usando la API Payment Intents cuando no 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 reciba el servicio.

> #### Transacciones con tarjeta presente
> 
> Las transacciones con tarjeta presente, como la [recopilación de datos de la tarjeta mediante Stripe Terminal](https://docs.stripe.com/terminal/features/saving-payment-details/save-directly.md), se procesan de manera diferente para guardar el método de pago.

## 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 para mostrarle el método de pago de un cliente en el flujo del proceso de compra para una compra futura o aceptar un pago cuando no esté utilizando activamente su sitio web o aplicación. Añade a tu sitio web o aplicación las condiciones que detallen cómo planeas guardar los datos del método de pago y permitir que los clientes acepten.

Cuando guardas un método de pago, solo puedes usarlo para el consumo específico que has 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 esté desconectado, asegúrate de que tus condiciones incluyan lo siguiente:

- La aceptación por parte del cliente de que inicies un pago o una serie de pagos en su nombre para transacciones específicas.
- El plazo de pagos y la frecuencia previstos (por ejemplo, si los cargos son por cuotas programadas, pagos por suscripción o recargas no programadas).
- Cómo determinas el importe del 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 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'
```

## Crear un cliente [Lado del servidor]

Para configurar un método para pagar en 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 [Cuenta](https://docs.stripe.com/api/v2/core/accounts/create.md) configurada por el cliente con la API Accounts v2 o un objeto [Cliente](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 los usuarios de Connect y en vista previa pública para otros usuarios de Stripe. Si tienes acceso a la vista previa de Accounts v2, debes especificar [vista previa](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) en tu código.
> 
> Para solicitar acceso a la vista previa de 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.

#### Cuentas 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"
```

#### Clientes v1

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

## Usa 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
```

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

Si no creaste la Checkout Session con un cliente existente, usa el ID del *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) para [vincular](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 adjunta automáticamente al cliente que proporcionaste al crear la Checkout Session.

#### Cuentas v2

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

#### Clientes v1

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

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

Una vez que el cliente completa correctamente su Checkout Session, 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.
- Usa el ID del SetupIntent para [recuperar](https://docs.stripe.com/api/setup_intents/retrieve.md) el objeto SetupIntent. El objeto devuelto contiene un ID del [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.

Obtén más información sobre [cómo configurar webhooks](https://docs.stripe.com/webhooks.md).

## Carga el método de pago más tarde [Lado del servidor]

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

- Establece [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account) con el ID de la `cuenta` o [cliente](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer) con el ID del `cliente` y establece el [payment_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method) con el ID del `PaymentMethod`.
- Define [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) como `true` para indicar que el cliente no está en tu flujo del proceso de compra durante un intento de pago y no puede completar una petición de autenticación realizada por un socio, como un emisor de tarjeta, un banco u otra institución de pago. Si, durante tu flujo del proceso de compra, un socio solicita autenticación, Stripe solicita exenciones utilizando información del cliente de una transacción anterior de *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 de exención, el PaymentIntent podría generar un error.
- Establece el valor de la propiedad [confirmar](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.

#### Cuentas 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
```

#### Clientes 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
```

Cuando se produce un error en un intento de pago, también falla la petición con un código de estatus HTTP 402, y el estatus del PaymentIntent es *requires\_payment\_method* (This status appears as "requires_source" in API versions before 2019-02-11). Debes enviar una notificación al cliente para que vuelva a tu aplicación (por ejemplo, mediante un correo electrónico o una notificación en la aplicación) y dirija a tu cliente a una nueva sesión de pago para que seleccione otro método de pago.

#### Cuentas 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"
```

#### Clientes 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. Esta opción resulta útil si quieres hacer el onboarding de clientes ahora, realizar la configuración de pagos y cobrarles más adelante, cuando no 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 reciba el servicio.

> #### Transacciones con tarjeta presente
> 
> Las transacciones con tarjeta presente, como la recolecció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 información, 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 de cumplir con todas las leyes, normativas y reglas de red aplicables. Por lo general, estos requisitos se aplican si quieres guardar el método de pago de tu cliente para usarlo en el futuro, como mostrarle el método de pago de un cliente en el flujo del proceso de compra para una compra futura o cobrarle cuando no esté utilizando activamente tu sitio web o aplicación. En tu sitio web, añade condiciones que indiquen cómo planeas guardar los datos del método de pago y permite que los clientes elijan.

Cuando guardas un método de pago, solo puedes usarlo para el consumo específico que has 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 por parte del cliente de 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 suscripción o recargas no programadas).
- Cómo determinas el importe del 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 de la aceptación por escrito de tu cliente con estas condiciones.

> 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'
```

## Habilita los 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 relevantes para tu empresa y tus clientes. Consulta [Compatibilidad con 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 y nuestra [página de tarifas](https://stripe.com/pricing/local-payment-methods) para conocer las comisiones.

## Crea un objeto Customer [Lado del servidor]

Para configurar un método para pagar en 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 [Cuenta](https://docs.stripe.com/api/v2/core/accounts/create.md) configurada por el cliente con la API Accounts v2 o un objeto [Cliente](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 los usuarios de Connect y en vista previa pública para otros usuarios de Stripe. Si tienes acceso a la vista previa de Accounts v2, debes especificar [vista previa](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) en tu código.
> 
> Para solicitar acceso a la vista previa de 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 mostrar el Payment Element sin crear primero un SetupIntent, consulta [Recopilar datos de pago antes de crear un Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=setup).

El [SetupIntent](https://docs.stripe.com/api/setup_intents.md) es un objeto que representa tu intención de establecer un método de pago para los pagos futuros de un cliente. Los métodos de pago que los clientes pueden ver durante el proceso de compra también se incluyen en el `SetupIntent`. Puedes permitir que Stripe tome los métodos de pago de forma automática desde la configuración de tu Dashboard o puedes enumerarlos de forma manual.

A menos que tu integración requiera una opción basada en código para ofrecer métodos de pago, Stripe recomienda la opción automatizada. Esto se debe a que Stripe evalúa la divisa, las restricciones del método de pago y otros parámetros para determinar la lista de métodos de pago aceptados. Se priorizan los métodos de pago que aumentan la conversión y que son más relevantes para la divisa y la ubicación del cliente. Los métodos de pago de menor prioridad se ocultan bajo un menú de desbordamiento.

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

Algunos métodos de pago no pueden guardarse 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 cómo gestionar los métodos de pago, consulta [las 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 utilizando 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 la devolución de los métodos de pago que cumplan con los requisitos en función de factores como el importe de la transacción, la moneda y el flujo de pago.

#### Cuentas 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"
```

#### Clientes 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 de forma manual

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

#### Cuentas 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"
```

#### Clientes 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"
```

### Recupera el secreto del 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 utiliza 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 en tu servidor, utilizando la función `fetch` del navegador. Este enfoque es mejor si tu lado del cliente es una aplicación de una sola página, en particular una construida con un marco de front-end moderno como React. Crea el punto de conexión del servidor que se utiliza para el secreto de cliente:

#### Ruby

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

Y luego busca el secreto del 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

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

Añade el [client_secret](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret) en tu formulario de proceso de compra. En el código del lado del servidor, recupera el secreto de cliente de 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 quieres activarlo como opción predeterminada, ve a [Configuración de Radar](https://dashboard.stripe.com/settings/radar) y activa **Usar Radar en los métodos de pago guardados para uso futuro**.

## Recopila datos de pago [Lado del cliente]

Ya tienes todo listo para recopilar 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 recopilación de datos de pago para distintos métodos de pago.

El Payment Element contiene un iframe que envía la información del pago a Stripe de forma segura a través de una conexión HTTPS. La dirección de la página del proceso de compra debe comenzar por `https://` en lugar de por `http://` para que tu integración funcione. Esto no es necesario para probar tu integración, pero recuerda [habilitar HTTPS](https://docs.stripe.com/security/guide.md#tls) cuando estés listo para aceptar pagos en tiempo real.

#### HTML + JS

### Configura Stripe.js

El Payment Element se encuentra disponible automáticamente como función de Stripe.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.

```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 del proceso 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>>');
```

### Añade el Payment Element a tu página de configuración de pago

El Payment Element necesita un lugar específico en tu página de configuración de pago. 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 del Payment Element e insértala en el nodo DOM del contenedor. Pasa el [secreto del cliente](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret) del paso anterior a `options` cuando crees la instancia de [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 presenta un formulario dinámico que le permite a tu cliente elegir un método de pago. Para cada método de pago, el formulario solicita automáticamente que el cliente complete todos los datos de pago necesarios.

### Personaliza la apariencia

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 las `opciones` al crear la instancia `Elements`. Stripe Elements es una colección de componentes de interfaz de usuario listos para usar. Para personalizar aún más tu formulario o recopilar información diferente de los clientes, consulta la [documentación Elements](https://docs.stripe.com/payments/elements.md).

### Solicitar 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) de `applePay` para modificar lo que se muestra en la interfaz de Apple Pay. Para ello, se utilizan los [tókenes comerciantes](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
});
```

#### React

### Configura Stripe.js

Instala [React, Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) y el [cargador de Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) desde el registro público npm:

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

### Añade y configura el proveedor del Elements en tu página de configuración de pago

Para usar el componente Payment Element, ajusta el componente de tu página de configuración del proceso de compra en un [proveedor Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Llama a `loadStripe` con tu clave publicable y especifica la `Promise` devuelta en el proveedor del `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 del `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'));
```

### Añade el componente Payment Element

Utiliza 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 desplegables. Para personalizar aún más tu formulario o recopilar otros datos del cliente, consulta la [documentación de Elements](https://docs.stripe.com/payments/elements.md).

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

### Personaliza la apariencia

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

### Solicitar 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) de `applePay` para modificar lo que se muestra en la interfaz de Apple Pay. Para ello, se utilizan los [tókenes comerciantes](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 divisa

Al usar SetupIntents con [automatic_payment_methods](https://docs.stripe.com/api/setup_intents/create.md#create_setup_intent-automatic_payment_methods), puedes especificar la divisa al [crear el Payment Element.](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-currency) El Payment Element muestra los métodos de pago habilitados que admiten la divisa 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

De forma predeterminada, el Payment Element solo recopila los datos necesarios de la dirección de facturación. Algunas acciones, como [calcular impuestos](https://docs.stripe.com/api/tax/calculations/create.md) o introducir datos de envío, requieren la dirección completa de tu cliente. Puedes:

- Utiliza el [Address Element](https://docs.stripe.com/elements/address-element.md) para aprovechar las funciones de autocompletado y localización y recopilar la dirección completa del cliente, lo que te ayudará a calcular los impuestos con la mayor precisión.
- Recopila datos de la dirección con tu propio formulario personalizado.

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

Permite que tu cliente finalice la compra más rápido utilizando [Link ](https://docs.stripe.com/payments/link.md)en el [Payment Element](https://docs.stripe.com/payments/payment-element.md). Puedes autocompletar la información de cualquier cliente que haya iniciado sesión en Link, independientemente de si guardó su información inicialmente en Link con otro negocio. La integración predeterminada del Payment Element incluye un aviso de Link en el formulario de tarjeta. Para gestionar Link en el Payment Element, 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)

Cobrar una dirección de correo electrónico del cliente para la autenticación o registro de Link

### Opciones de integración

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

| Opción de integración                                                                                 | Flujo del proceso de compra                                                                                                                                                                                                              | Descripción                                                                                                                                                                                                                                              |
| ----------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Especifica una dirección de correo correo electrónico del cliente en el Payment Element (Recommended) | - Tu cliente ingresa su dirección de correo electrónico antes de llegar a la página del proceso de compra (en un paso de creación de cuenta anterior, por ejemplo).
  - Prefieres usar tu propio campo de entrada de correo electrónico. | Pasa programáticamente la dirección de correo electrónico del cliente al Payment Element. En este caso, el cliente se autentica en Link directamente en el formulario de pago en lugar de hacerlo en un componente de interfaz de usuario independiente. |
| Recopila una dirección de correo electrónico del cliente en el Payment Element                        | - Tus clientes pueden elegir introducir su correo electrónico y autenticarse o registrarse con Link directamente en Payment Element durante el proceso de compra.
  - No es necesario realizar cambios en la programación.               | Si un cliente no se ha registrado en Link y elige un método de pago compatible en el Payment Element, se le pedirá que guarde sus datos utilizando Link. Para aquellos que ya se han registrado, Link completa automáticamente su información de pago.   |

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

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

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

## Optional: Guarda y recupera los métodos de pago del cliente

Puedes configurar el Payment Element para guardar los métodos de pago de tu cliente para su 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 al Payment Element lo siguiente:

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

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

### Permite que se guarde 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 `cliente` para un objeto `Cliente` o `customer_account` para un objeto `Cuenta` configurada 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é [funciones](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features) de método para pagar 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 para pagar para su uso futuro.

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

> #### Usa la API Accounts v2 para representar a los clientes
> 
> La API Accounts v2 suele estar disponible para los usuarios de Connect y en vista previa pública para otros usuarios de Stripe. Si tienes acceso a la vista previa de Accounts v2, debes especificar [vista previa](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) en tu código.
> 
> Para solicitar acceso a la vista previa de 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.

#### Cuentas 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
```

#### Clientes 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 los errores](https://docs.stripe.com/error-handling.md) correctamente cuando crees 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 y para CustomerSession. A continuación, 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, en función de si el cliente ha marcado la casilla para guardar sus datos de pago.

### Detectar la elección de un método de pago guardado

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

```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 del 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) a esta función para que Stripe pueda redirigir al usuario después de que complete la configuración. Es posible que primero le redirijamos a un sitio intermedio, como una página de autorización bancaria, antes de redirigirle a la `return_url`.

Si tu cliente guarda los datos de la tarjeta, lo redirigimos de inmediato a la `return_url` cuando la configuración se realiza correctamente. Si no quieres hacer redireccionamientos de pagos con tarjeta, puedes configurar el [redireccionamiento](https://docs.stripe.com/js/setup_intents/confirm_setup#confirm_setup_intent-options-redirect) como `if_required`. Esta acción solo redirige a los clientes que efectúan una compra con métodos de pago basados en 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`.
  }
});
```

#### React

Para llamar a [stripe.confirmSetup](https://docs.stripe.com/js/setup_intents/confirm_setup) desde el componente de tu 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 [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 [provea el estatus](https://docs.stripe.com/payments/payment-intents/verifying-status.md) del `SetupIntent`. Stripe proporciona los siguientes parámetros de consulta de URL para verificar el estatus cuando redirige al cliente a la `return_url`. Asimismo, puedes adjuntar tus propios parámetros de consulta cuando proporciones la `return_url`, y se mantendrán durante todo el proceso de redireccionamiento.

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

#### React

```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 llevan a cabo el seguimiento de la sesión de navegador del cliente, es posible que tengas que añadir el dominio `stripe.com` a la lista de exclusión de referentes. Los redireccionamientos hacen que algunas herramientas creen nuevas sesiones que te impiden hacer el seguimiento de la sesión completa.

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

> #### Cumplimiento de la normativa
> 
> Al guardar los datos de pago de un cliente, eres responsable de cumplir con todas las leyes, normativas y reglas de red aplicables. Al mostrar métodos de pago anteriores a tu cliente final para compras futuras, asegúrate de incluir solo aquellos para los que hayas obtenido su consentimiento para guardar los detalles del método de pago con ese fin 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, utiliza el parámetro [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay).

Para encontrar un método de pago que puedas cobrar, 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) aceptado.

> #### Usa la API Accounts v2 para representar a los clientes
> 
> La API Accounts v2 suele estar disponible para los usuarios de Connect y en vista previa pública para otros usuarios de Stripe. Si tienes acceso a la vista previa de Accounts v2, debes especificar [vista previa](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) en tu código.
> 
> Para solicitar acceso a la vista previa de 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.

#### Cuentas v2

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

#### Clientes v1

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

Cuando estés listo para cobrar a tu cliente % glossary term=“off-session” %}fuera de la sesión**, usa el ID del `cliente` o de la `cuenta` configurada por el cliente y el ID del `PaymentMethod` para crear un `PaymentIntent` con el importe y divisas del pago. Establece otros parámetros para 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) como verdadero para indicar que el cliente no está en tu flujo del proceso de compra para responder a una petición de autenticación. Si, durante tu flujo del proceso de compra, un socio (como un emisor de tarjeta o un banco) solicita autenticación, Stripe solicita exenciones utilizando 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 de exención, el `PaymentIntent` podría generar un error.
- Establece [confirmar](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) como verdadero para activar la confirmación de inmediato cuando se cree el `PaymentIntent`.
- Establece [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) en el ID del `PaymentMethod`.
- Dependiendo de 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`.

#### Cuentas 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
```

#### Clientes 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 un intento de pago falla, 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 vuelva a tu aplicación para completar el pago (por ejemplo, mediante 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 [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 que no se reenvíe 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 llevar a cabo pasos adicionales para completar el pago, como la autenticación, Stripe.js lo guiará a través de ese proceso.

Si el pago no ha podido realizarse por otros motivos, por ejemplo, por fondos insuficientes, remite al cliente a una página de pago para que introduzca un nuevo método de pago. Puedes volver a utilizar el PaymentIntent existente para reintentar el pago con los nuevos datos de pago.

## 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     | Situación                                                                                                                                                                                                                                                                                                                                | 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). | Rellena nuestro formulario de tarjeta de crédito con el número de tarjeta `4242 4242 4242 4242` y cualquier fecha de caducidad, CVC y código postal. |
| Tarjeta de crédito | La tarjeta requiere autenticación para la configuración inicial, pero no para los pagos posteriores.                                                                                                                                                                                                                                     | Rellena nuestro formulario de tarjeta de crédito con el número de tarjeta `4000 0025 0000 3155` y cualquier fecha de caducidad, CVC y código postal. |
| Tarjeta de crédito | La tarjeta requiere autenticación para la configuración inicial y también para los pagos posteriores.                                                                                                                                                                                                                                    | Rellena nuestro formulario de tarjeta de crédito con el número de tarjeta `4000 0027 6000 3184` y cualquier fecha de caducidad, CVC y código postal. |
| Tarjeta de crédito | La tarjeta se ha rechazado durante la configuración.                                                                                                                                                                                                                                                                                     | Rellena nuestro formulario de tarjeta de crédito con el número de tarjeta `4000 0000 0000 9995` y cualquier fecha de caducidad, CVC y código postal. |

#### Redireccionamientos bancarios

| Método de pago      | Situación                                                                                                                                                         | Cómo hacer la prueba                                                                                                                                                                                              |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Bancontact          | Tu cliente configura correctamente un método de pago con adeudo directo SEPA para usarlo en el futuro con Bancontact.                                             | Usa cualquier nombre en el formulario de Bancontact y después haz clic en **Autorizar la configuración de prueba** en la página de redireccionamiento.                                                            |
| Bancontact          | Tu cliente no pasa la autenticación en la página de redireccionamiento de Bancontact.                                                                             | Usa cualquier nombre en el formulario de Bancontact y después haz clic en **Error en la configuración de prueba** en la página de redireccionamiento.                                                             |
| Adeudo directo BECS | Tu cliente paga correctamente con adeudo directo BECS.                                                                                                            | Completa el formulario con el número de cuenta `900123456`. El estado `PaymentIntent` confirmado pasa inicialmente al estado `procesamiento en curso` y, tres minutos más tarde pasa a `efectuado correctamente`. |
| 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`.                                                                                                                                                        |
| iDEAL               | Tu cliente configura correctamente un método de pago de [adeudo directo SEPA](https://docs.stripe.com/payments/sepa-debit.md) para usarlo en el futuro con iDEAL. | Usa cualquier nombre y banco en el formulario de iDEAL y después haz clic 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; después, haz clic en **Error en la configuración de prueba** en la página de redireccionamiento.                                     |

#### Adeudos bancarios

| Método de pago      | Situación                                                                                                 | Cómo hacer la prueba                                                                                                                                                                                                        |
| ------------------- | --------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Adeudo directo SEPA | Tu cliente paga correctamente con adeudo directo SEPA.                                                    | Rellena el formulario con el número de cuenta `AT321904300235473204`. El estado `PaymentIntent` confirmado pasa inicialmente al estado `procesamiento en curso` y, tres minutos más tarde pasa a `efectuado correctamente`. |
| Adeudo directo SEPA | El estado del `PaymentIntent` de tu cliente pasa de `procesamiento en curso` a `requires_payment_method`. | Rellena 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` con iDEAL, Bancontact o Sofort genera un *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) [adeudo directo SEPA](https://docs.stripe.com/payments/sepa-debit.md). El adeudo 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 `procesamiento` intermedio antes de pasar varios días después a un estado de `efectuado correctamente` o `requiere_payment_method`.

#### Correo electrónico

Establece `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 principio de la dirección de correo electrónico seguido de un guion bajo. Por ejemplo, `test_1_generatedSepaDebitIntentsFail@example.com` genera un PaymentMethod de adeudo 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` al menos tres minutos después.                            |
| `generatedSepaDebitIntentsFail@example.com`                        | El estado del `PaymentIntent` pasa de `processing` a `requires_payment_method`.                                            |
| `generatedSepaDebitIntentsFailDelayed@example.com`                 | Una vez transcurridos tres minutos, el estado del `PaymentIntent` pasa de `processing` a `requires_payment_method`.        |
| `generatedSepaDebitIntentsSucceedDisputed@example.com`             | El estado del `PaymentIntent` pasa de `processing` a `succeeded`, pero se crea una disputa instantáneamente.               |
| `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 automatizadas vinculen al instante 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` al menos tres minutos después.                            |
| `pm_bancontact_generatedSepaDebitIntentsFail`                        | El estado del `PaymentIntent` pasa de `processing` a `requires_payment_method`.                                            |
| `pm_bancontact_generatedSepaDebitIntentsFailDelayed`                 | Una vez transcurridos tres minutos, el estado del `PaymentIntent` pasa de `processing` a `requires_payment_method`.        |
| `pm_bancontact_generatedSepaDebitIntentsSucceedDisputed`             | El estado del `PaymentIntent` pasa de `processing` a `succeeded`, pero se crea una disputa instantáneamente.               |
| `pm_bancontact_generatedSepaDebitIntentsFailsDueToInsufficientFunds` | 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 (acordeón o pestañas) para que se ajuste a tu interfaz del proceso 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 funciones 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,
  }
});
```

La siguiente imagen muestra el mismo Payment Element con diferentes configuraciones de diseño:
![Tres experiencias de formularios del proceso 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 a los clientes cuyo entorno cumple con las [condiciones de visualización de los monederos](https://docs.stripe.com/testing/wallets.md). Para aceptar pagos desde estos monederos, también debes:

- Habilítalos en la [configuración de los 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 ni 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 del probador está en la India, incluso si la cuenta de Stripe se encuentra fuera de la India.

## Comunica a tus clientes qué es Stripe

Stripe recoge información sobre las interacciones de los clientes con Elements para brindarte servicios, prevenir el fraude y mejorar sus servicios. Entre los datos recogidos, se incluyen el uso de cookies y direcciones IP para identificar qué Elements ha visto un cliente durante una sola sesión del proceso de compra. Tú eres responsable de divulgar y obtener todos los derechos y consentimientos necesarios para que Stripe use los datos de estas maneras. Para 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

- [Acepta un pago](https://docs.stripe.com/payments/accept-a-payment.md)
- [Guarda 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)
- [Enviar factores de riesgo completos](https://docs.stripe.com/radar/optimize-risk-factors.md)