# Guarda una tarjeta sin autenticación bancaria Recoge los datos de la tarjeta y cobra 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 introducir el código enviado a un teléfono. Este paso adicional disminuye la conversión si tu cliente no está en tu sitio web o no está usando la aplicación en ese momento, pues no podrá autenticar la compra. ​​Si operas principalmente en los EE. UU. y Canadá, los bancos no requieren autenticación, por lo que puedes seguir esta integración más simple. Esta integración no será compatible en países que exigen autenticación para guardar tarjetas (por ejemplo, India), por lo que crear esta integración significa que expandirse a otros países o añadir otros métodos de pago requerirá cambios significativos. Descubre cómo [guardar tarjetas que requieren autenticación](https://docs.stripe.com/payments/save-and-reuse.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 ejemplo, si quieres guardar su método de pago para usarlo en el futuro, como para cobrarle cuando no esté usando activamente tu sitio web o aplicación. Agrega términos a tu sitio web o aplicación que indiquen cómo planeas guardar los datos del método de pago y permitir que los clientes elijan. Si quieres cobrarles cuando estén desconectados, asegúrate de que en las condiciones se incluya lo siguiente: > > - El consentimiento del cliente para que inicies un pago o una serie de pagos en su nombre para transacciones específicas. - El momento previsto y la frecuencia 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 de la aceptación por escrito de estas condiciones por parte de tu cliente. ## Recopilar datos de la tarjeta [Lado del cliente] Antes de comenzar esta guía, necesitas una cuenta de Stripe. [Regístrate ahora](https://dashboard.stripe.com/register). Crea una página del proceso 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 .js de Stripe con la siguiente secuencia en tu página del proceso de compra. ```html ``` Carga siempre Stripe.js directamente desde js.stripe.com para cumplir con la normativa PCI. No incluyas el script en un paquete ni alojes una copia en tus sistemas. Para aprovechar al máximo la [función de fraude avanzada](https://docs.stripe.com/radar.md) de Stripe, incluye este script en todas las páginas de tu sitio web, no solo en la página del proceso de compra. La inclusión del script en cada página [permite a Stripe detectar comportamientos sospechosos](https://docs.stripe.com/disputes/prevention/advanced-fraud-detection.md) que pueden indicar fraude cuando los usuarios navegan por tu sitio web. ### Añadir Elements a tu página Para recoger 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 tú 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
``` 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. Después, 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 al insertar un único campo de entrada flexible que recopila todos los datos necesarios de la tarjeta de forma segura. De lo contrario, combina los Elements `cardNumber`, `cardExpiry` y `cardCvc` para obtener un formulario flexible de tarjeta de varias entradas. > Recopila siempre el código postal para aumentar las tasas de aceptación de tarjetas y disminuir el fraude. > > El [Card Element de una única 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 tu formulario de pago con Elements divididos ([número de tarjeta](https://docs.stripe.com/js/element/other_element?type=cardNumber), [caducidad](https://docs.stripe.com/js/element/other_element?type=cardExpiry), [CVC](https://docs.stripe.com/js/element/other_element?type=cardCvc)), añade un campo de entrada independiente para el código postal del cliente. ```javascript const stripe = Stripe('<>'); 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 de forma segura 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 tu integración funcione. 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 en el modo activo. ```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 de PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) resultante a tu servidor. ## Configura Stripe [Lado del servidor] Utiliza 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' ``` ## Guarda 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 "<>:" \ -d payment_method={{PAYMENT_METHOD_ID}} ``` Si ya tienes un objeto Customer, puedes vincular el PaymentMethod a ese objeto. ```curl curl https://api.stripe.com/v1/payment_methods/{{PAYMENT_METHOD_ID}}/attach \ -u "<>:" \ -d "customer={{CUSTOMER_ID}}" ``` En este punto, asocia el ID del Customer y el ID del PaymentMethod con tu propia representación interna del cliente, si tienes una. ## Efectuar un cargo en 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 para buscar todos los PaymentMethods disponibles para el cliente. #### Cuentas v2 ```curl curl -G https://api.stripe.com/v1/payment_methods \ -u "<>:" \ -d "customer_account={{CUSTOMERACCOUNT_ID}}" \ -d type=card ``` #### Clientes v1 ```curl curl -G https://api.stripe.com/v1/payment_methods \ -u "<>:" \ -d "customer={{CUSTOMER_ID}}" \ -d type=card ``` Usa el ID del PaymentMethod y el ID del Customer para crear un nuevo PaymentIntent. Establece [error_on_requires_action](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-error_on_requires_action) en `true` para rechazar los pagos que requieran acciones por parte del cliente, como la autenticación en dos pasos. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -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 devuelve un error. Debes enviar una notificación al cliente para que vuelva a tu aplicación (por ejemplo, mediante un correo electrónico) y complete el pago. Comprueba el código de [error](https://docs.stripe.com/api/errors/handling.md) que ha enviado 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) del PaymentIntent para inspeccionar por qué el emisor de la tarjeta ha rechazado el pago. ## Gestionar los errores que se produzcan con la tarjeta Notifica a tu cliente que el pago no se realizó correctamente y dirígelo al formulario de pago que creaste en el Paso 1, donde puede introducir los nuevos datos de la tarjeta. Envía ese nuevo ID del PaymentMethod a tu servidor para [vincularlo](https://docs.stripe.com/api/payment_methods/attach.md) al objeto Customer y realizar de nuevo el pago. Como alternativa, puedes crear un objeto Customer, puedes crear un PaymentIntent y guardar una tarjeta en una sola llamada a la API. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -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 más tarde, sin activar la autenticación innecesariamente. ## Prueba la integración Stripe proporciona [tarjetas de prueba](https://docs.stripe.com/testing.md) que puedes usar en un entorno de prueba para simular el comportamiento de las diferentes tarjetas. Usa dichas tarjetas con cualquier CVC, código postal y fecha de caducidad futura. | Número | Descripción | | ---------------- | ------------------------------------------------------------------------------------------------- | | 4242424242424242 | La transacción se efectúa correctamente y el pago se procesa de inmediato. | | 4000000000009995 | Siempre da error con un código de rechazo `insufficient_funds`. | | 4000002500003155 | Requiere autenticación; en esta integración se rechazará con un código `authentication_required`. | ## Optional: Volver a recopilar un CVC Al crear pagos posteriores con una tarjeta guardada, es posible que quieras volver a recopilar el CVC de la tarjeta como medida antifraude adicional para verificar al usuario. Primero, crea un PaymentIntent desde tu servidor con el importe y la moneda del pago y establece [cliente](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer) en el ID de tu objeto Customer. A continuación, [enumera](https://docs.stripe.com/api/payment_methods/list.md) los PaymentMethods asociados con el objeto Customer para determinar qué métodos de pago le mostrarás al usuario para volver a pedir el CVC. Después de pasar el secreto del cliente de PaymentIntent al navegador, estás listo para volver a recopilar la información del CVC con Stripe Elements en tu cliente. Utiliza el elemento `cardCvc` para volver a recopilar un valor de CVC de tu usuario y, a continuación, confirma el pago de tu cliente utilizando [stripe.confirmCardPayment](https://docs.stripe.com/js.md#stripe-confirm-card-payment). Establece `payment_method` en tu ID de PaymentMethod y `payment_method_options[card][cvc]` en tu elemento `cardCvc`. ```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 de tarjetas integration *declines que exige la autenticación durante el payment*. Si empiezas a ver en el Dashboard muchos pagos que figuran como `Failed[, es hora de`actualizar tu integración](/payments/payment-intents/upgrade-to-handle-actions). La integración global de Stripe gestiona estos pagos en lugar de rechazarlos automáticamente.