# Guardar datos de pago durante el pago

Descubre cómo aceptar un pago y guardar los datos de pago de tu cliente para futuras compras.

# Página completa integrada


Usa [Stripe Checkout](https://docs.stripe.com/payments/checkout.md) para integrar un formulario de pago prediseñado en tu sitio web que permita a tus clientes guardar sus datos de pago para futuras compras.

## Configura Stripe [Lado del servidor]

Primero, [regístrate](https://dashboard.stripe.com/register) para obtener una cuenta de Stripe.

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

#### Cuentas v2

```curl
curl -X POST https://api.stripe.com/v2/core/accounts \
  -H "Authorization: Bearer <<YOUR_SECRET_KEY>>" \
  -H "Stripe-Version: 2026-05-27.preview" \
  --json '{
    "contact_email": "jenny.rosen@example.com",
    "display_name": "Jenny Rosen",
    "configuration": {
        "customer": {}
    },
    "include": [
        "configuration.customer"
    ]
  }'
```

La creación correcta devuelve el objeto [Cuenta](https://docs.stripe.com/api/v2/core/accounts/object.md#v2_account_object-configuration-customer) configurada por el cliente. Inspecciona el objeto en busca del `id` del cliente y almacena el valor en tu base de datos para poder recuperarlo más tarde.

#### Clientes v1

```curl
curl https://api.stripe.com/v1/customers \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "name=Jenny Rosen" \
  --data-urlencode "email=jennyrosen@example.com"
```

La creación correcta devuelve el objeto [Customer](https://docs.stripe.com/api/customers/object.md). Inspecciona el objeto en busca del `id` del cliente y almacena el valor en tu base de datos para poder recuperarlo más tarde.

Puedes encontrar a estos clientes en la página [Clientes](https://dashboard.stripe.com/customers) del Dashboard.

## Crea una Checkout Session [Lado del servidor]

Desde tu servidor, crea una *sesión de pago* (A Checkout Session represents your customer's session as they pay for one-time purchases or subscriptions through Checkout. After a successful payment, the Checkout Session contains a reference to the Customer, and either the successful PaymentIntent or an active Subscription) y configura el [ui_mode](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-ui_mode) en `embedded_page`. Puedes configurar la [Checkout Session](https://docs.stripe.com/api/checkout/sessions/create.md) con [partida individual](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-line_items) que incluir y opciones como [divisas](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-currency).

También puedes crear una sesión de Checkout para un [cliente existente](https://docs.stripe.com/payments/existing-customers.md?platform=web&ui=stripe-hosted), lo que te permite rellenar automáticamente los campos de Checkout con información de contacto conocida y unificar tu historial de compras para ese cliente.

Para devolver a los clientes a una página personalizada que alojas en tu sitio web, especifica la URL de esa página en el parámetro [return_url](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-return_url). Incluye la variable de plantilla `{CHECKOUT_SESSION_ID}` en la URL para recuperar el estado de la sesión en la página de retorno. Checkout sustituye automáticamente la variable con el ID de la sesión de Checkout antes de redireccionar.

Consigue más información sobre [cómo configurar la página de retorno](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=embedded-page#return-page) y otras opciones para [personalizar el comportamiento de redireccionamiento](https://docs.stripe.com/payments/checkout/custom-success-page.md?payment-ui=embedded-page).

Después de crear la sesión de Checkout, usa el `client_secret` devuelto en la respuesta para [activar Checkout](https://docs.stripe.com/payments/checkout/save-during-payment.md#mount-checkout).

#### Ruby

```ruby
# This example sets up an endpoint using the Sinatra framework.
require 'json'
require 'sinatra'
require 'stripe'

# 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-checkout-session' do
  session = client.v1.checkout.sessions.create({
    line_items: [{
      price_data: {
        currency: 'usd',
        product_data: {
          name: 'T-shirt',
        },
        unit_amount: 2000,
      },
      quantity: 1,
    }],
    mode: 'payment',ui_mode: 'embedded_page',
    return_url: 'https://example.com/checkout/return?session_id={CHECKOUT_SESSION_ID}'
  })

  {clientSecret: session.client_secret}.to_json
end
```

## Montar Checkout [Lado del cliente] [Lado del servidor]

#### HTML + JS

Checkout está disponible como parte de [Stripe.js](https://docs.stripe.com/js.md). Incluye el script de Stripe.js en tu página añadiéndolo al encabezado de tu archivo HTML. A continuación, crea un nodo DOM vacío (contenedor) para utilizarlo para el montaje.

```html
<head>
  <script src="https://js.stripe.com/dahlia/stripe.js"></script>
</head>
<body>
  <div id="checkout">
    <!-- Checkout will insert the payment form here -->
  </div>
</body>
```

Inicializa Stripe.js con la clave publicable de la API.

Crea una función asincrónica `fetchClientSecret` que haga una petición a tu servidor para crear la Checkout Session y recuperar el secreto de cliente. Especifica esta función en `options` cuando crees la instancia de Checkout:

```javascript
// Initialize Stripe.js
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

initialize();

// Fetch Checkout Session and retrieve the client secret
async function initialize() {
  const fetchClientSecret = async () => {
    const response = await fetch("/create-checkout-session", {
      method: "POST",
    });
    const { clientSecret } = await response.json();
    return clientSecret;
  };

  // Initialize Checkout
  const checkout = await stripe.createEmbeddedCheckoutPage({
    fetchClientSecret,
  });

  // Mount Checkout
  checkout.mount('#checkout');
}
```

#### React

Instala [react-stripe-js](https://docs.stripe.com/sdks/stripejs-react.md) y el cargador Stripe.js desde npm:

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

Para usar el componente Embedded Checkout, crea un `EmbeddedCheckoutProvider`. Llama a `loadStripe` con tu clave publicable de la API y especifica la `Promise` devuelta al proveedor.

Crea una función asincrónica `fetchClientSecret` para que haga una petición a tu servidor para crear la Checkout Session y recupere el secreto de cliente. Especifica esta función en la propiedad `options` aceptada por el proveedor.

```jsx
import * as React from 'react';
import {loadStripe} from '@stripe/stripe-js';
import {
  EmbeddedCheckoutProvider,
  EmbeddedCheckout
} from '@stripe/react-stripe-js';

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

const App = () => {
  const fetchClientSecret = React.useCallback(() => {
    // Create a Checkout Session
    return fetch("/create-checkout-session", {
      method: "POST",
    })
      .then((res) => res.json())
      .then((data) => data.clientSecret);
  }, []);

  const options = {fetchClientSecret};

  return (
    <div id="checkout">
      <EmbeddedCheckoutProvider
        stripe={stripePromise}
        options={options}
      >
        <EmbeddedCheckout />
      </EmbeddedCheckoutProvider>
    </div>
  )
}
```

Checkout se representa en un iframe que envía la información del pago a Stripe de forma segura a través de una conexión HTTPS.

> Evita colocar Checkout dentro de otro iframe, ya que algunos métodos de pago requieren un redireccionamiento a otra página para confirmar el pago.

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

Después de configurar la integración de Checkout integrada, elige una configuración para que tu integración guarde los métodos de pago utilizados por tus clientes.

De forma predeterminada, los métodos de pago que se utilizan para hacer un pago único con Checkout no están disponibles para usarlos en el futuro.

### Guarda métodos de pago para cargarlos fuera de la sesión

Puedes configurar Checkout para guardar los métodos de pago utilizados para realizar un pago único especificando el argumento [payment_intent_data.setup_future_usage](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-setup_future_usage). Esto es útil si necesitas capturar un método de pago registrado para usarlo en comisiones futuras, como comisiones de cancelación o de no presentación.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d customer_creation=always \
  -d "line_items[0][price_data][currency]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d ui_mode=embedded_page \
  --data-urlencode "return_url=https://example.com/return" \
  -d "payment_intent_data[setup_future_usage]=off_session"
```

Si utilizas Checkout en modo `suscripción`, Stripe guarda automáticamente el método de pago para realizar los cobros de los pagos posteriores. Los métodos de pago con tarjeta guardados para los clientes que utilizan el modo `setup_future_usage` o `suscripción` no aparecen en Checkout en caso de nuevas compras (más información al respecto a continuación). Recomendamos utilizar [texto personalizado](https://docs.stripe.com/payments/checkout/custom-components.md#customize-text) para incluir un enlace a cualquier condición relevante relativa al uso de la información de pago guardada.

> Las leyes internacionales de privacidad son complicadas y tienen muchos matices. Te recomendamos que te pongas en contacto con tu equipo legal y de privacidad antes de implementar [setup_future_usage](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-setup_future_usage), ya que podría afectar a tu marco existente de cumplimiento de la normativa de privacidad. Consulta [la guía emitida por el Consejo Europeo de Protección](https://edpb.europa.eu/system/files/2021-05/recommendations022021_on_storage_of_credit_card_data_en_1.pdf) para obtener más información sobre cómo guardar los datos de pago.

### Guarda los métodos de pago para completarlos automáticamente en Checkout

De forma predeterminada, el proceso de compra utiliza [Link](https://docs.stripe.com/payments/link/checkout-link.md) para ofrecer a tus clientes la opción de guardar y reutilizar de forma segura su información de pago. Si prefieres gestionar los métodos de pago tú mismo, utiliza [saved_payment_method_options.payment_method_save](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_save) al crear una sesión de proceso de compra para permitir que tus clientes guarden sus métodos de pago para futuras compras durante el proceso de compra.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d customer_creation=always \
  -d "line_items[0][price_data][currency]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d ui_mode=embedded_page \
  --data-urlencode "return_url=https://example.com/return" \
  -d "saved_payment_method_options[payment_method_save]=enabled"
```

Si se especifica este parámetro en el modo de [pago](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode) o [suscripción](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode), se muestra una casilla de verificación opcional que permite a los clientes guardar explícitamente su método de pago para futuras compras. Cuando los clientes marcan esta casilla, Checkout guarda el método de pago con [allow_redisplay: siempre](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay). Checkout utiliza este parámetro para determinar si un método de pago puede completarse automáticamente en futuras compras. Cuando uses `saved_payment_method_options.payment_method_save`, no necesitarás transferir `setup_future_usage` para guardar el método de pago.

> #### 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, 
> 
> En la mayoría de los casos de uso, recomendamos [modelar a tus clientes como objetos Cuenta](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) configurados por el cliente en lugar de usar objetos [Cliente](https://docs.stripe.com/api/customers.md).

El uso de [saved_pago_method_options.pago_method_save](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_save) requiere que exista un objeto que represente a tu cliente (ya sea una `cuenta` configurada por un cliente, o un `cliente` propiamente dicho). Para guardar un cliente nuevo, configura [customer_creation](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_creation) en la sesión del proceso de compra como `siempre`. En caso contrario, la sesión no almacenará ni el cliente ni el método de pago.

Si no se especifica `payment_method_save` o si el cliente no acepta guardar el método de pago, Checkout aún guarda los métodos de pago creados en modo `subscription` o que utilizan `setup_future_usage`. Estos métodos de pago tienen un valor `allow_redisplay` de `limited`, lo que evita que se rellenen previamente para devolver compras y te permite cumplir con las reglas de la red de tarjetas y las normativas de protección de datos. Aprende a [cambiar el comportamiento predeterminado habilitado por estos modos](https://support.stripe.com/questions/prefilling-saved-cards-in-checkout) y cómo cambiar o anular el comportamiento `allow_redisplay`.

> Puedes usar Checkout para guardar tarjetas y otros métodos de pago para cargarlas fuera de la sesión, pero Checkout solo rellena automáticamente las tarjetas guardadas. Descubre cómo [rellenar automáticamente tarjetas guardadas](https://support.stripe.com/questions/prefilling-saved-cards-in-checkout). Para guardar un método de pago sin un pago inicial, [usa Checkout en el modo de configuración](https://docs.stripe.com/payments/save-and-reuse.md?platform=checkout).

### Permite que los clientes eliminen los métodos de pago guardados

Para permitir que tus clientes eliminen un método de pago guardado para que no vuelva a aparecer en pagos futuros, usa [saved_payment_method_options.payment_method_remove](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_remove) al crear una sesión de Checkout.

#### 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]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d ui_mode=embedded_page \
  --data-urlencode "return_url=https://example.com/return" \
  -d "saved_payment_method_options[payment_method_remove]=enabled"
```

#### 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]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d ui_mode=embedded_page \
  --data-urlencode "return_url=https://example.com/return" \
  -d "saved_payment_method_options[payment_method_remove]=enabled"
```

El cliente no puede eliminar un método de pago si está vinculado a una suscripción activa y el cliente no tiene un método de pago predeterminado guardado para los pagos de facturas y suscripciones.