Guarda el método de pago de un cliente cuando lo utilice para un pago

Descubre cómo guardar el método de pago del cliente cuando confirmas un PaymentIntent o Checkout Session.

Nota

La API de Checkout Sessions también permite guardar métodos de pago cuando los clientes la utilizan para hacer un pago. Para obtener más información, consulta nuestra guía de la API de Checkout Sessions.

Utiliza la API Payment Intents para guardar los datos de pago de una compra. Tiene varios casos de uso:

Cobrarle al cliente por un pedido de e-commerce y almacenar los datos para compras futuras.
Iniciar el primer pago de una serie de pagos recurrentes.
Cobrar un depósito y almacenar los datos para cobrar el importe total más tarde.

Transacciones con tarjeta presente

Las transacciones con tarjeta presente, como los pagos 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.

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

Configurar Stripe
Lado del servidor

Primero, regístrate para obtener una cuenta de Stripe.

Usa nuestras bibliotecas oficiales para acceder a la API de Stripe desde tu aplicación:

Crear un objeto Customer
Lado del servidor

Para configurar una tarjeta para pagos futuros, debes adjuntarla a un Customer. Crea el objeto Customer cuando tu cliente cree una cuenta en tu empresa. Los objetos Customer permiten reutilizar métodos de pago y hacer el seguimiento de varios pagos.

La creación correcta devuelve el objeto Customer. Puedes inspeccionar el objeto en busca del id del cliente y almacenar el valor en tu base de datos para recuperarlo más tarde.

Puedes encontrar a estos clientes en la página Clientes del Dashboard.

Habilitar métodos de pago

Visualiza tu configuración de métodos de pago y habilita los que quieras aceptar. Se necesita al menos un método de pago habilitado para crear un PaymentIntent.

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 para obtener información sobre productos y métodos de pago y nuestra página de tarifas para conocer las comisiones.

Crear un pago
Lado del servidor

Nota

Si quieres procesar el Payment Element sin crear primero un PaymentIntent, consulta Recopilar datos de pago antes de crear un Intent.

El objeto Checkout Session representa tu intención de cobrarle a un cliente y hace el seguimiento de los intentos de cobro y de los cambios en el estado a lo largo del proceso de pago.

Crea la Checkout Session

Crea una Checkout Session en tu servidor. Stripe utiliza tu configuración de métodos de pago para mostrar los métodos de pago que has habilitado. Para ver cómo se muestran tus métodos de pago a los clientes, introudce un ID de transacción o establece el importe y la divisa de un pedido en el Dashboard. Para anular los métodos de pago, enumera manualmente los que quieras habilitar usando el atributo payment_method_types.

Nota

Decide cuánto cobrar siempre del lado del servidor, un entorno de confianza, y no del lado del cliente. Esto impide que clientes malintencionados puedan elegir sus propios precios.

Recopila datos de pago
Lado del cliente

Recolecta los datos de pago del cliente con el Payment Element. El Payment Element es un componente de interfaz de usuario prediseñado que simplifica la recolección de datos de pago para varios métodos de pago.

El Payment Element contiene un iframe que envía la información del pago a Stripe de modo seguro a través de una conexión HTTPS. Evita colocar el Payment Element en otro iframe porque algunos métodos de pago requieren redirigir a otra página para la confirmación del pago.

Si eliges usar un iframe y quieres aceptar Apple Pay o Google Pay, el iframe debe tener el atributo allow establecido para ser igual a "payment *".

La dirección de la página del proceso de compra debe empezar por https:// en lugar de http:// para que tu integración funcione. Puedes probar tu integración sin usar HTTPS, pero recuerda habilitarla cuando todo esté listo para aceptar pagos reales.

Configurar 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 en tus sistemas.

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

Crea una instancia de Stripe con el siguiente JavaScript en tu página de pago:

checkout.js
// 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('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

Añade el Payment Element a tu página de pago

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

checkout.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 y móntala en el nodo DOM del contenedor. Especifica el secreto de cliente del paso anterior en options cuando crees la instancia de Elements:

Administra el secreto de cliente con cuidado porque sirve para completar el cargo. No lo registres, no lo insertes en direcciones URL ni lo expongas a nadie que no sea el cliente.

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

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous step
const 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.

Personalizar la apariencia

Personaliza el Payment Element para que coincida con el diseño de tu sitio especificando el objeto Appearance en options al crear el proveedor Elements.

Recopila las direcciones

De forma predeterminada, el Payment Element solo recolecta los datos necesarios de la dirección de facturación. Para recolectar la dirección de facturación completa de un cliente (con el fin de calcular el impuesto sobre bienes y servicios digitales, por ejemplo) o su dirección de envío, utiliza el Address Element.

Solicitar token de comerciante de Apple Pay

Si has configurado tu integración para aceptar pagos de Apple Pay, te recomendamos que configures la interfaz de Apple Pay para devolver un token de comercio y habilitar las transacciones iniciadas por el comerciante (MIT). Solicita el tipo de token de comerciante correspondiente en el Payment Element.

OpcionalEnlace en la página del proceso de compra
Lado del cliente

OpcionalGuarda y recupera los métodos de pago del cliente

OpcionalRecopilar datos de la dirección
Lado del cliente

OpcionalPersonalizar el diseño
Lado del cliente

OpcionalPersonaliza el diseño
Lado del cliente

OpcionalRecuperar actualizaciones del servidor
Lado del cliente

Enviar el pago a Stripe
Lado del cliente

Usa stripe.confirmPayment para efectivizar el pago con los datos de Payment Element. Proporciona una return_url a esta función para indicar a dónde Stripe debe redirigir al usuario después de efectivizar el pago. Es posible que primero se redirija al usuario a un sitio intermedio, como una página de autorización bancaria, antes de redirigirle al return_url. Los pagos con tarjeta redireccionan inmediatamente al return_url cuando el pago se ha hecho efectivo.

Si no quieres redireccionar los pagos con tarjeta después de completar el pago, puedes configurar el redireccionamiento como if_required. Esto solo redirecciona a los clientes que finalizan su compra con métodos de pago basados en redireccionamiento.

checkout.js
const form = document.getElementById('payment-form');

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

  const {error} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    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`.
  }
});

Nota

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 guía a través de ese proceso.

Si el pago se realizó correctamente, la tarjeta se guarda en el objeto Customer. Esto se refleja en el campo cliente del PaymentMethod. En este punto, asocia el ID del objeto Customer con tu propia representación interna de cliente, si tienes una. Ahora puedes usar el objeto PaymentMethod almacenado para cobrar pagos futuros a tu cliente sin volver a pedirle los datos de pago.

Asegúrate de que la return_url corresponda a una página de tu sitio web que proporcione el estado del pago. Cuando Stripe redirige al cliente a la return_url, proporcionamos los siguientes parámetros de consulta de URL:

Parámetro	Descripción
`payment_intent`	El identificador único del `PaymentIntent`.
`payment_intent_client_secret`	El secreto de cliente del objeto `PaymentIntent`.

Precaución

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.

Usa uno de los parámetros de consulta para recuperar el PaymentIntent. Examina el estado del PaymentIntent para decidir qué mostrarás a tus clientes. También puedes adjuntar tus propios parámetros de consulta cuando proporciones el return_url, que se mantendrá durante el proceso de redireccionamiento.

status.js
// Initialize Stripe.js using your publishable key
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

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

// Retrieve the PaymentIntent
stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => {
  const message = document.querySelector('#message')

  // Inspect the PaymentIntent `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 (paymentIntent.status) {
    case 'succeeded':
      message.innerText = 'Success! Payment received.';
      break;

    case 'processing':
      message.innerText = "Payment processing. We'll update you when payment is received.";
      break;

    case 'requires_payment_method':
      message.innerText = 'Payment failed. Please try another payment method.';
      // Redirect your user back to your payment page to attempt collecting
      // payment again
      break;

    default:
      message.innerText = 'Something went wrong.';
      break;
  }
});

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

Advertencia

bancontact, ideal y sofort son, de forma predeterminada, métodos de pago únicos. Al configurar el consumo futuro, generan un tipo de método de pago sepa_debit reutilizable, por lo que debes usar sepa_debit para consultar los métodos de pago guardados.

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.

Cuando todo esté listo para cobrarle al cliente fuera de la sesión, usa los ID del Customer y del PaymentMethod para crear un PaymentIntent. Para encontrar un método de pago al que efectuar el cargo, enumera los métodos de pago asociados con tu cliente. En este ejemplo se incluyen tarjetas, pero puedes enumerar cualquier tipo aceptado.

Cuando tengas los ID del Customer y el PaymentMethod, crea un PaymentIntent con el importe y la divisa del pago. Establece algún que otro parámetro más para efectuar el pago fuera de la sesión:

Define off_session en true para indicar que el cliente no está en tu flujo del proceso de compra durante un intento de pago y no puede cumplir con una solicitud de autenticación realizada por un socio, como un emisor de tarjeta, un banco u otra institución de pago. Si, durante el flujo del proceso de compra, un socio solicita la autenticación, Stripe solicitará exenciones utilizando la información del cliente de una transacción anterior durante la sesión. Si no se cumplen las condiciones para la exención, el PaymentIntent podría generar un error.
Establece el valor de la propiedad confirmar del PaymentIntent en true, lo que genera una confirmación inmediata cuando se crea el PaymentIntent.
Establece payment_method en el ID del PaymentMethod y customer en el ID del Customer.

OpcionalGuardar los datos de pago para uso futuro
Lado del servidor

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.

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

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

La confirmación del PaymentIntent con iDEAL, Bancontact o Sofort genera un PaymentMethod adeudo directo SEPA. El adeudo directo SEPA es un método de pago de notificación diferida que pasa a un estado de processing intermedio antes de pasar a un estado succeeded o requires_payment_method varios días después.

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` después de al menos tres minutos.
`generatedSepaDebitIntentsFail@example.com`	El estado del PaymentIntent pasa de `processing` a `requires_payment_method`.
`generatedSepaDebitIntentsFailDelayed@example.com`	El estado PaymentIntent pasa de `processing` a `requires_payment_method` después de al menos tres minutos.
`generatedSepaDebitIntentsSucceedDisputed@example.com`	El estado del PaymentIntent pasa de `processing` a `succeeded`, pero se crea inmediatamente una disputa.

Guarda el método de pago de un cliente cuando lo utilice para un pago

Descubre cómo guardar el método de pago del cliente cuando confirmas un PaymentIntent o Checkout Session.

Nota

Transacciones con tarjeta presente

Cumplimiento de la normativa

Configurar Stripe
Lado del servidor

Crear un objeto Customer
Lado del servidor

Habilitar métodos de pago

Crear un pago
Lado del servidor

Nota

Crea la Checkout Session

Nota

Recopila datos de pago
Lado del cliente

Configurar Stripe.js

Añade el Payment Element a tu página de pago

Personalizar la apariencia

Recopila las direcciones

Solicitar token de comerciante de Apple Pay

OpcionalEnlace en la página del proceso de compra
Lado del cliente

OpcionalGuarda y recupera los métodos de pago del cliente

OpcionalRecopilar datos de la dirección
Lado del cliente

OpcionalPersonalizar el diseño
Lado del cliente

OpcionalPersonaliza el diseño
Lado del cliente

OpcionalRecuperar actualizaciones del servidor
Lado del cliente

Enviar el pago a Stripe
Lado del cliente

Nota

Precaución

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

Advertencia

Cumplimiento de la normativa

OpcionalGuardar los datos de pago para uso futuro
Lado del servidor

Probar la integración

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

OpcionalApple Pay y Google Pay
Lado del cliente

Véase también

Guarda el método de pago de un cliente cuando lo utilice para un pago

Descubre cómo guardar el método de pago del cliente cuando confirmas un PaymentIntent o Checkout Session.

Nota

Transacciones con tarjeta presente

Cumplimiento de la normativa

Configurar StripeLado del servidor

Crear un objeto CustomerLado del servidor

Habilitar métodos de pago

Crear un pagoLado del servidor

Nota

Crea la Checkout Session

Nota

Recopila datos de pagoLado del cliente

Configurar Stripe.js

Añade el Payment Element a tu página de pago

Personalizar la apariencia

Recopila las direcciones

Solicitar token de comerciante de Apple Pay

OpcionalEnlace en la página del proceso de compraLado del cliente

OpcionalGuarda y recupera los métodos de pago del cliente

OpcionalRecopilar datos de la direcciónLado del cliente

OpcionalPersonalizar el diseñoLado del cliente

OpcionalPersonaliza el diseñoLado del cliente

OpcionalRecuperar actualizaciones del servidorLado del cliente

Enviar el pago a StripeLado del cliente

Nota

Precaución

Cobrar más tarde con el método de pago guardadoLado del servidor

Advertencia

Cumplimiento de la normativa

OpcionalGuardar los datos de pago para uso futuroLado del servidor

Probar la integración

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

OpcionalApple Pay y Google PayLado del cliente

Véase también

Configurar Stripe
Lado del servidor

Crear un objeto Customer
Lado del servidor

Crear un pago
Lado del servidor

Recopila datos de pago
Lado del cliente

OpcionalEnlace en la página del proceso de compra
Lado del cliente

OpcionalRecopilar datos de la dirección
Lado del cliente

OpcionalPersonalizar el diseño
Lado del cliente

OpcionalPersonaliza el diseño
Lado del cliente

OpcionalRecuperar actualizaciones del servidor
Lado del cliente

Enviar el pago a Stripe
Lado del cliente

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

OpcionalGuardar los datos de pago para uso futuro
Lado del servidor

OpcionalApple Pay y Google Pay
Lado del cliente