# Guardar una tarjeta sin autenticación bancaria

Recopila los datos de la tarjeta y cóbrale al cliente más tarde.

Stripe te permite recopilar los datos de la tarjeta y cobrarle después al cliente. En algunas regiones, los bancos exigen una segunda forma de autenticación, como el ingreso de un código enviado a un teléfono. Este paso extra disminuye la conversión si tu cliente no está en tu sitio web o usando la aplicación en ese momento porque no estará disponible para autenticar la compra.

​​Si operas principalmente en EE. UU. y Canadá, los bancos no exigen autenticación, por lo que puedes seguir esta integración más simple. Esta integración no cumplirá con la normativa en países que exijan autenticación para guardar tarjetas (por ejemplo, India), por lo que desarrollarla implica que la expansión a otros países o el agregado de otros métodos de pago necesitarán cambios importantes. Obtén información sobre cómo [guardar tarjetas que exigen autenticación](https://docs.stripe.com/payments/save-and-reuse.md).

> #### Cumplimiento
> 
> Al guardar los datos de pago de un cliente, eres responsable de cumplir con todas las leyes, normativas y reglas de red aplicables, por ejemplo, si quieres guardar su método de pago para un uso futuro, como cobrarle cuando no esté usando activamente tu sitio web o aplicación. Agrega condiciones a tu sitio web o aplicación que indiquen cómo planeas guardar los datos del método de pago y permite que los clientes las acepten. Si quieres cobrarles cuando estén desconectados, asegúrate de que las condiciones incluyan lo siguiente:
> 
> - El acuerdo del cliente para que puedas iniciar un pago o una serie de pagos en su nombre para transacciones específicas.
- El momento y la frecuencia previstos de los pagos (por ejemplo, si los cargos son por cuotas programadas, pagos de suscripción o recargas no programadas).
- Cómo determinas el importe de pago.
- Tu política de cancelación, si el método de pago es para un servicio de suscripción.
> 
> Asegúrate de mantener un registro del acuerdo por escrito de tu cliente en relación con estos términos.

## Recopilar datos de tarjeta [Lado del cliente]

Antes de empezar con la guía, necesitas una cuenta de Stripe. [Inscríbete ahora](https://dashboard.stripe.com/register).

Crea una página de finalización de compra para recopilar los datos de la tarjeta de tu cliente. Usa [Stripe Elements](https://docs.stripe.com/payments/elements.md), una biblioteca de interfaz de usuario que te ayuda a crear formularios de pago personalizados. Para empezar a usar Elements, incluye la biblioteca Stripe.js con el siguiente script en tu página de finalización de compra.

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

Carga siempre Stripe.js directamente desde js.stripe.com para cumplir con la normativa PCI. No incluyas el script en un paquete ni alojes una copia en tus sistemas.

Para aprovechar al máximo la [funcionalidad avanzada contra el fraude de Stripe](https://docs.stripe.com/radar.md), incluye este script en todas las páginas de tu sitio, no solo en la página de confirmación de compra. Si incluyes el script en todas las páginas, [Stripe podrá detectar comportamientos sospechosos](https://docs.stripe.com/disputes/prevention/advanced-fraud-detection.md) que podrían indicar intentos de fraude cuando los usuarios naveguen por tu sitio web.

### Agrega Elements a tu página

Para recopilar los datos de las tarjetas de tus clientes de forma segura, Elements crea componentes de interfaz de usuario para ti alojados por Stripe. Luego se colocan en tu formulario de pago, en lugar de que tengas que crearlos directamente. Para determinar dónde insertar estos componentes, crea elementos DOM vacíos (contenedores) con ID únicos en tu formulario de pago.

```html
<input id="cardholder-name" type="text">
<!-- placeholder for Elements -->
<div id="card-element"></div>
<div id="card-result"></div>
<button id="card-button">Save Card</button>
```

A continuación, crea una instancia del [objeto Stripe](https://docs.stripe.com/js.md#stripe-function) suministrando tu [clave de API](https://docs.stripe.com/keys.md) publicable como primer parámetro. Luego, crea una instancia del [objeto Elements](https://docs.stripe.com/js.md#stripe-elements) y úsala para montar un elemento `card` en el DOM.

El `card` Element simplifica el formulario de pago y minimiza la cantidad de campos obligatorios insertando un único campo de entrada flexible que recopila todos los datos necesarios de la tarjeta en modo seguro.

De lo contrario, combina `cardNumber`, `cardExpiry` y `cardCvc` Elements para obtener un formulario de tarjeta de múltiples entradas flexible.

> Recopila siempre el código postal para aumentar las tasas de aceptación de tarjetas y disminuir el fraude.
> 
> El [Card Element de una sola línea](https://docs.stripe.com/js/element/other_element?type=card) recopila y envía automáticamente el código postal del cliente a Stripe. Si creas un formulario de pago con Elements divididos ([número de tarjeta](https://docs.stripe.com/js/element/other_element?type=cardNumber), [vencimiento](https://docs.stripe.com/js/element/other_element?type=cardExpiry), [CVC](https://docs.stripe.com/js/element/other_element?type=cardCvc)), agrega un campo de entrada separado para el código postal del cliente.

```javascript
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

const elements = stripe.elements();
const cardElement = elements.create('card');
cardElement.mount('#card-element');
```

Un Stripe Element contiene un iframe que envía la información del pago a Stripe en modo seguro a través de una conexión HTTPS. La dirección de la página de finalización de compra también debe empezar con `https://` en lugar de `http://` para que funcione tu integración.

Puedes probar tu integración sin usar HTTPS. [Habilítala](https://docs.stripe.com/security/guide.md#tls) cuando todo esté listo para aceptar pagos reales.

```javascript
const cardholderName = document.getElementById('cardholder-name');
const cardButton = document.getElementById('card-button');
const resultContainer = document.getElementById('card-result');

cardButton.addEventListener('click', async (ev) => {
  const {paymentMethod, error} = await stripe.createPaymentMethod({
      type: 'card',
      card: cardElement,
      billing_details: {
        name: cardholderName.value,
      },
    }
  );

  if (error) {
    // Display error.message in your UI.
    resultContainer.textContent = error.message;
  } else {
    // You have successfully created a new PaymentMethod
    resultContainer.textContent = "Created payment method: " + paymentMethod.id;
  }
});
```

Envía el ID del *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) resultante a tu servidor.

## Configurar Stripe [Lado del servidor]

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

## Guardar la tarjeta [Lado del servidor]

Guarda la tarjeta asociando el PaymentMethod a un objeto *Customer* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments). Puedes usar el objeto `Customer` para almacenar otros datos sobre tu cliente, como los datos de envío y la dirección de correo electrónico.

```curl
curl https://api.stripe.com/v1/customers \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d payment_method={{PAYMENT_METHOD_ID}}
```

Si ya tienes un objeto Customer, puedes asociar el PaymentMethod a ese objeto.

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

En este punto, si tienes un cliente, asocia el ID del objeto Customer y el ID del PaymentMethod con tu propia representación interna del cliente.

## Cobrar a la tarjeta guardada [Lado del servidor]

Cuando esté todo listo, busca el ID del PaymentMethod y el ID del Customer para efectuar el cargo. Puedes hacerlo almacenando los ID de ambos en tu base de datos o utilizando el ID del Customer a fin de buscar todos los PaymentMethods disponibles para el cliente.

#### Accounts&nbsp;v2

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

#### Customers&nbsp;v1

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

Usa el ID del PaymentMethod y el ID del objeto Customer para crear un nuevo PaymentIntent. Define [error_on_requires_action](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-error_on_requires_action) como `verdadero` para pagos rechazados que requieran acciones de tu cliente, como la autenticación de dos factores.

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=usd \
  -d "payment_method_types[]=card" \
  -d "customer={{CUSTOMER_ID}}" \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  -d error_on_requires_action=true \
  -d confirm=true
```

Cuando falla un intento de pago, también falla la solicitud con un código de estado HTTP 402, y Stripe arroja un error. Debes notificar al cliente para que vuelva a tu aplicación (por ejemplo, enviándole un correo electrónico) y complete el pago. Comprueba el código de [error](https://docs.stripe.com/api/errors/handling.md) que arrojó la biblioteca de la API de Stripe o revisa el [last_payment_error.decline_code](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-decline_code) en el PaymentIntent para inspeccionar por qué el emisor de la tarjeta rechazó el pago.

## Gestionar los errores de tarjetas

Informa al cliente que hubo un error en el pago y dirígelo al formulario de pago que creaste en el paso 1&nbsp;para que ingrese los nuevos datos de la tarjeta. Envía el ID del nuevo PaymentMethod a tu servidor para [asociarlo](https://docs.stripe.com/api/payment_methods/attach.md) al Customer Object y volver a realizar el pago.

Como alternativa, puedes crear un PaymentIntent y guardar una tarjeta en una sola llamada API si ya creaste un cliente.

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=usd \
  -d "payment_method_types[]=card" \
  -d "customer={{CUSTOMER_ID}}" \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  -d error_on_requires_action=true \
  -d confirm=true \
  -d setup_future_usage=on_session
```

Configurar [setup_future_usage](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-setup_future_usage) en `on_session` indica a Stripe que quieres guardar la tarjeta para usarla más adelante, sin generar autenticaciones innecesarias.

## Probar la integración

Stripe ofrece [tarjetas de prueba](https://docs.stripe.com/testing.md) que puedes usar en un entorno de prueba para simular el comportamiento de distintos tipos de tarjetas. Úsalas con cualquier CVC, código postal y una fecha de vencimiento futura.

| Número           | Descripción                                                                                               |
| ---------------- | --------------------------------------------------------------------------------------------------------- |
| 4242424242424242 | Realice correctamente la transacción y procese el pago de inmediato.                                      |
| 4000000000009995 | Dé error cada vez que obtenga un código de rechazo `insufficient_funds`.                                  |
| 4000002500003155 | Se requiere autenticación, que en esta integración se rechaza con un código de `authentication_required`. |

## Optional: Volver a pedir el CVC

Cuando se crean pagos sucesivos con una tarjeta guardada, es conveniente volver a pedir el CVC de la tarjeta como una medida adicional de protección contra el fraude para verificar al usuario.

Primero, crea un PaymentIntent desde tu servidor con el importe junto con la moneda del pago y establece el [cliente](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer) en el ID de tu cliente. Luego, [enumera](https://docs.stripe.com/api/payment_methods/list.md) los PaymentMethods asociados con el cliente para determinar qué métodos de pago le mostrarás al usuario para volver a pedir el CVC.

Después de especificar la clave secreta de cliente del PaymentIntent en el navegador, está todo listo para volver a recopilar la información del CVC con Stripe Elements sobre tu cliente. Usa el `cardCvc` Element para volver a obtener el CVC del usuario y, luego, confirma el pago de tu cliente con [stripe.confirmCardPayment](https://docs.stripe.com/js.md#stripe-confirm-card-payment). Establece el `payment_method` en el ID de tu PaymentMethod y `payment_method_options[card][cvc]` en tu `cardCvc` Element.

```javascript
const result = await stripe.confirmCardPayment(clientSecret, {
  payment_method: '{{PAYMENT_METHOD_ID}}',
  payment_method_options: {
    card: {
      cvc: cardCvcElement
    }
  },
});

if (result.error) {
  // Show error to your customer
  console.log(result.error.message);
} else {
  if (result.paymentIntent.status === 'succeeded') {
    // Show a success message to your customer
    // There's a risk of the customer closing the window before callback
    // execution. Set up a webhook or plugin to listen for the
    // payment_intent.succeeded event that handles any business critical
    // post-payment actions.
  }
}
```

Un pago puede efectuarse correctamente aunque falle la verificación del CVC. Para evitarlo, configura las [reglas de Radar](https://docs.stripe.com/radar/rules.md#traditional-bank-checks) para que bloqueen los pagos en los que falla la verificación del CVC.

## Actualiza tu integración para gestionar la autenticación de tarjetas

Esta integración *rechaza las tarjetas que exigen autenticación durante el pago*. Si empiezas a ver en el Dashboard muchos pagos que figuran como `Error`, es momento de [actualizar tu integración](https://docs.stripe.com/payments/payment-intents/upgrade-to-handle-actions.md). La integración global de Stripe gestiona estos pagos en lugar de rechazarlos automáticamente.