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.

Usa Stripe Checkout 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 para obtener una cuenta de Stripe.

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

Crea un cliente
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.

Crea una Checkout Session
Lado del servidor

Desde tu servidor, crea una Checkout Session y establece el ui_mode en embedded. Puedes configurar la Checkout Session con partidas individuales para incluir y opciones como divisa.

También puedes crear una sesión de Checkout para un cliente existente, 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. 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.

Obtén más información sobre cómo configurar la página de retorno y otras opciones para personalizar el comportamiento de redireccionamiento.

Después de crear la sesión de Checkout, usa el client_secret devuelto en la respuesta para activar Checkout.

Montar Checkout
Lado del cliente
Lado del servidor

Checkout está disponible como parte de Stripe.js. 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.

index.html
<head>
  <script src="https://js.stripe.com/v3/"></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:

index.js
// Initialize Stripe.js
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

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.initEmbeddedCheckout({
    fetchClientSecret,
  });

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

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.

Error habitual

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

Si utilizas Checkout en el modo subscription, Stripe guarda automáticamente el método de pago para cargar los pagos posteriores. Los métodos de pago con tarjeta guardados para los clientes que utilizan el modo setup_future_usage o subscription no aparecen para las compras de devolución en Checkout (consulta más información sobre esto a continuación). Te recomendamos que utilices el texto personalizado para incluir un enlace a las condiciones pertinentes relativas al uso de la información de pago guardada.

Precaución

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, 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 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, Checkout utiliza Link para ofrecer a tus clientes la opción de guardar y reutilizar de forma segura su información de pago. Si prefieres administrar los métodos de pago tú mismo, usa saved_payment_method_options.payment_method_save al crear una Checkout Session para que tus clientes guarden sus métodos de pago para futuras compras en Checkout.

Si se especifica este parámetro en el modo de pago o suscripción, 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. 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.

Para usar saved_payment_method_options.payment_method_save se requiere un Customer. Para guardar un nuevo cliente, establece el valor de la sesión de Checkout customer_creation en always. De lo contrario, la sesión no guarda 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 y cómo cambiar o anular el comportamiento allow_redisplay.

Nota

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. Para guardar un método de pago sin un pago inicial, usa Checkout en el modo de configuración.