Guarda datos de pago durante el pago

Aprende a aceptar un pago y guardar los datos de pago de tu cliente para futuras compras.

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

Configurar Stripe
Lado del servidor

Primero, inscríbete para obtener una cuenta de Stripe.

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

Crear 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 de la 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 sesión de Checkout
Lado del servidor

Desde tu servidor, crea una sesión de Checkout y establece el ui_mode en embedded. Puedes configurar la sesión de Checkout con partidas que se incluyan y opciones como la moneda.

También puedes crear una Checkout Session para un cliente existente, lo que te permite completar previamente los campos de Checkout con información de contacto conocida y unificar tu historial de compras para ese cliente.

Para que los clientes regresen 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 la ID de la sesión de Checkout antes de redirigir al usuario.

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 código client_secret que se devolvió en la respuesta para montar 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 agregándolo al encabezado de tu archivo HTML. A continuación, crea un nodo DOM vacío (contenedor) para usarlo en 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 tu API.

Crea una función fetchClientSecret asincrónica que haga una solicitud a tu servidor para crear la sesión de Checkout y recuperar el secreto de cliente. Pasa esta función a options al crear 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 en modo seguro a través de una conexión HTTPS.

Errores habituales

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

Guardar método de pago
Lado del servidor

Después de configurar tu integración integrada de Checkout, 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 utilizados para realizar pagos únicos con Checkout no están disponibles para su uso futuro.

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

Puedes configurar Checkout para que guarde los métodos de pago utilizados para realizar un pago único especificando el argumento payment_intent_data.setup_future_usage. Esta opción es útil si necesitas capturar un método de pago en el archivo para usarlo en comisiones futuras, como comisiones de cancelación o de no presentación.

Si utilizas Checkout en modo subscription, Stripe guarda automáticamente el método de pago para usarlo en pagos posteriores. Los métodos de pago con tarjeta guardados en los clientes que utilizan el modo setup_future_usage o subscription no aparecen en caso de devolución en Checkout (más información a continuación). Te recomendamos que utilices texto personalizado para vincular los términos relevantes relacionados con el uso de la información de pago guardada.

Precaución

Las leyes mundiales sobre privacidad son complicadas y están llenas de matices. Te recomendamos que te comuniques 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 la Junta Europea 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 previamente 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 sesión de Checkout para que tus clientes puedan guardar sus métodos de pago para futuras compras en Checkout.

Si pasas este parámetro ya sea en modo de pago o suscripción, se muestra una casilla de verificación opcional que les 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: always. Checkout usa este parámetro para determinar si un método de pago puede completarse previamente en futuras compras. Al usar saved_payment_method_options.payment_method_save, no necesitas especificar setup_future_usage para guardar el método de pago.

El uso de saved_payment_method_options.payment_method_save requiere un Customer. Para guardar a un nuevo cliente, configura la customer_creation de la sesión de Checkout en always. De lo contrario, la sesión no guardará 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 guardará los métodos de pago creados en modo subscription o con setup_future_usage. Estos métodos de pago tienen un valor allow_redisplay de limited, lo que evita que se completen previamente para la devolución de 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 a cambiar o anular el comportamiento allow_redisplay.

Nota

Puedes usar Checkout para guardar tarjetas y otros métodos de pago para cargarlos fuera de la sesión, pero Checkout solo completa automáticamente las tarjetas guardadas. Obtén información sobre cómo completar automáticamente las tarjetas guardadas. Para guardar un método de pago sin un pago inicial, usa Checkout en modo de configuración.