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.

Nota

El soporte para métodos de pago guardados con Elements y la API Checkout Sessions solo incluye tarjetas. No admite otros métodos de pago guardados, como las cuentas bancarias.

Habilita los métodos de pago guardados

Para que un cliente pueda guardar su método de pago para usarlo en el futuro, especifica el parámetro saved_payment_method_options.payment_method_save al crear la sesión de Checkout.

Para guardar un método de pago se requiere un Cliente. Pasa un cliente existente o, para crear un nuevo cliente, establece el valor de la sesión de Checkout customer_creation en always.

Después de crear la sesión de Checkout, usa el secreto de cliente devuelto en la respuesta para crear tu página del proceso de compra.

Precaución

Las leyes internacionales de privacidad son complicadas y tienen muchos matices. Antes de implementar la capacidad de almacenar los datos de los métodos de pago de los clientes, trabaja con tu equipo legal para asegurarte de que cumple con tu marco de privacidad y cumplimiento de la normativa.

En la mayoría de los casos, debes obtener el consentimiento del cliente antes de guardar sus métodos de pago. En el ejemplo siguiente se muestra cómo obtener el consentimiento mediante una casilla de verificación.

index.html
<label>
  <input type="checkbox" id="save-payment-method-checkbox" />
  Save my payment information for future purchases
</label>
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>

Indica a Stripe si tu cliente ha dado su consentimiento cuando llames a confirm pasando el parámetro savePaymentMethod. Cuando guardes los datos de pago de un cliente, serás responsable de cumplir con todas las leyes, regulaciones y reglas de red aplicables.

checkout.js
stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  const checkbox = document.getElementById('save-payment-method-checkbox');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    const savePaymentMethod = checkbox.checked;
    checkout.confirm({savePaymentMethod}).then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
});

Reutiliza un método de pago guardado previamente

Puedes volver a mostrar los métodos de pago guardados previamente para que tu cliente los use durante el proceso de compra.

Identifica a tu cliente

Cada método de pago guardado está vinculado a un objeto Customer. Antes de crear una sesión de Checkout, autentica al cliente y especifica el ID de cliente correspondiente en la sesión de Checkout.

Procesa métodos de pago guardados

Usa la matriz savedPaymentMethods en el front end para mostrar los métodos de pago disponibles del cliente.

Nota

La matriz savedPaymentMethods incluye solo los métodos de pago que tienen allow_redisplay establecido en always. Sigue los pasos para obtener el consentimiento de tu cliente, lo que garantiza que allow_redisplay se establezca correctamente.

index.html
<div id="saved-payment-methods"></div>

checkout.js
stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const container = document.getElementById('saved-payment-methods');
  checkout.session().savedPaymentMethods.forEach((pm) => {
    const label = document.createElement('label');
    const radio = document.createElement('input');

    radio.type = 'radio';
    radio.value = pm.id;

    label.appendChild(radio);
    label.appendChild(document.createTextNode(`Card ending in ${pm.card.last4}`));
    container.appendChild(label);
  });
});

Confirma con un método de pago guardado

Cuando tu cliente haya seleccionado un método de pago guardado y esté listo para finalizar el proceso de compra, llama a confirm y especifica el ID del paymentMethod.

index.html
<button id="pay-button">Pay</button>

checkout.js
stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const button = document.getElementById('pay-button');
  button.addEventListener('click', () => {
    checkout.confirm({paymentMethod: selectedPaymentMethod}).then((result) => {
      if (result.error) {
        // Confirmation failed. Display the error message.
      }
    });
  });
});

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.

Nota

Habilita los métodos de pago guardados

Obtén el consentimiento

Precaución

Reutiliza un método de pago guardado previamente

Identifica a tu cliente

Procesa métodos de pago guardados

Nota

Confirma con un método de pago guardado