Guarda datos de pago durante el pago

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

Nota

La compatibilidad con métodos de pago guardados con Elements y la API Checkout Sessions solo incluye tarjetas. No es compatible con otros métodos de pago guardados, como cuentas bancarias.

Habilita los métodos de pago guardados

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

Para guardar un método de pago es necesario un objeto Customer. Pasa un cliente existente o, para crear un nuevo cliente, configura customer_creation de la sesión de Checkout en always.

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

Precaución

Las leyes sobre privacidad a nivel mundial son complicadas y están llenas de matices. Antes de implementar la capacidad de almacenar los datos de los métodos de pago de los clientes, consulta a tu equipo legal para asegurarte de que coincida con tu marco de privacidad y cumplimiento.

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 guardas los datos de pago de un cliente, eres responsable de cumplir con todas las leyes, normativas y normas de la 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 anteriormente para que el cliente los utilice durante el proceso de compra.

Identifica a tu cliente

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

Renderiza los métodos de pago guardados

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

Nota

La matriz savedPaymentMethods incluye solo los métodos de pago que se han allow_redisplay configurado en always. Sigue los pasos para obtener el consentimiento de tu cliente, que garantiza que allow_redisplay esté configurado 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 completar el proceso de compra, llama a confirm e introduce el ID de 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.
      }
    });
  });
});

Guarda datos de pago durante el pago

Aprende a 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

Renderiza los métodos de pago guardados

Nota

Confirma con un método de pago guardado