Acepta pagos con tarjeta en meses sin intereses

Obtén información sobre cómo aceptar pagos con tarjeta de crédito usando meses sin intereses en una variedad de productos de Stripe.

Los meses sin intereses son una funcionalidad de las tarjetas de crédito en México que les permite a los clientes dividir las compras en varios extractos de facturación. Recibes el pago como si se tratara de un cargo único normal, menos las comisiones, y el banco del cliente gestiona el cobro del dinero a medida que pasa el tiempo.

Hay restricciones respecto de qué transacciones y tarjetas pueden usar cuotas. Revisa los requisitos de compatibilidad.

Al aceptar un pago en cuotas, se incurre en una comisión adicional a la comisión de transacción con tarjeta de crédito estándar.

Puedes activar los meses sin intereses en diferentes productos de Stripe. Elige las instrucciones a continuación que coincidan con tu implementación.

Integra con la API Payment Intents

Puedes aceptar cuotas con la API Payment Intents. Requiere recopilar los datos de pago y la información sobre el plan de meses sin intereses del cliente y completar el pago en el servidor.

Recopila los datos del método de pago del lado del cliente
Recupera planes de cuotas en el servidor
Selecciona un plan de cuotas del lado del cliente
Confirma el PaymentIntent en el servidor

Recopila los datos del método de pago del lado del cliente

La API Payment Intents funciona con Stripe.js y Elements para recopilar los datos de pago de forma segura (por ejemplo, datos de la tarjeta de crédito) del lado del cliente. Para empezar a usar Elements, incluye el siguiente script en tus páginas. Este script siempre debe cargarse directamente desde js.stripe.com para cumplir con PCI. No puedes incluirlo en un paquete ni alojar una copia en tus sistemas.

<script src="https://js.stripe.com/v3/"></script>

Para recopilar de forma segura los datos de las tarjetas de tus clientes, Elements crea componentes de interfaz de usuario alojados en Stripe que nosotros colocamos en tu formulario de pago, en lugar de que tú los crees directamente. Para determinar dónde insertar estos componentes, crea elementos DOM (contenedores) vacíos con ID únicos en tu formulario de pago.

index.html
<div id="details">
  <input id="cardholder-name" type="text" placeholder="Cardholder name">
  <!-- placeholder for Elements -->
  <form id="payment-form">
    <div id="card-element"></div>
    <button id="card-button">Next</button>
  </form>
</div>

A continuación, crea una instancia del objeto Stripe y proporciona tu clave de API publicable como primer parámetro. Luego, crea una instancia del objeto Elements. Usa el objeto recién creado para montar un elemento Card en el marcador de posición correspondiente en la página.

client.js
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

const elements = stripe.elements();
const cardElement = elements.create('card');
cardElement.mount('#card-element');

Por último, usa stripe.createPaymentMethod del lado del cliente para recopilar los datos de la tarjeta y crear un PaymentMethod en cuanto el usuario haga clic en el botón de envío.

client.js
const cardholderName = document.getElementById('cardholder-name');
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (ev) => {
  ev.preventDefault();
  const {paymentMethod, error} = await stripe.createPaymentMethod(
    'card',
    cardElement,
    {billing_details: {name: cardholderName.value}},
  );
  if (error) {
    // Show error in payment form
  } else {
    // Send paymentMethod.id to your server (see Step 2)
    const response = await fetch('/collect_details', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({payment_method_id: paymentMethod.id}),
    });

    const json = await response.json();

    // Handle server response (see Step 3)
    handleInstallmentPlans(json);
  }
});

Recupera planes de cuotas en el servidor

Para recuperar los planes de cuotas disponibles, configura un punto de conexión en tu servidor a fin de recibir la solicitud.

Crea un nuevo PaymentIntent con la ID del PaymentMethod creado en el cliente. Establece payment_method_options.card.installments.enabled=true para permitir que este pago use cuotas. Envía los planes disponibles al cliente para que pueda seleccionar con qué plan desea pagar.

Nota

No confirmes el PaymentIntent aquí, (es decir, no establezcas la propiedad confirm) porque aún no sabemos si el usuario quiere pagar con cuotas.

El objeto PaymentIntent enumera los planes de cuotas disponibles para el PaymentMethod en payment_method_options.card.installments.available_plans.

{
  "id": "pi_1FKDPTJXdud1yP2PpUXNgq0V",
  "object": "payment_intent",
  "amount": 3099,
...
  "payment_method_options": {
    "card": {
      "installments": {
        "enabled": true,
        "plan": null,
        "available_plans": [
          {
            "count": 3,
            "interval": "month",
            "type": "fixed_count"
          },

Selecciona un plan de cuotas del lado del cliente

Permite que el cliente seleccione el plan de Cuotas que quiera usar.

index.html
<div id="plans" hidden>
  <form id="installment-plan-form" >
    <label><input id="immediate-plan" type="radio" name="installment_plan" value="-1" />Immediate</label>
    <input id="payment-intent-id" type="hidden" />
  </form>
  <button id="confirm-button">Confirm Payment</button>
</div>

<div id="result" hidden>
  <p id="status-message"></p>
</div>

client.js
const selectPlanForm = document.getElementById('installment-plan-form');
let availablePlans = [];

const handleInstallmentPlans = async (response) => {
  if (response.error) {
    // Show error from server on payment form
  } else {
    // Store the payment intent ID.
    document.getElementById('payment-intent-id').value = response.intent_id;
    availablePlans = response.available_plans;

    // Show available installment options
    availablePlans.forEach((plan, idx) => {
      const newInput = document.getElementById('immediate-plan').cloneNode();
      newInput.setAttribute('value', idx);
      newInput.setAttribute('id', '');
      const label = document.createElement('label');
      label.appendChild(newInput);
      label.appendChild(
        document.createTextNode(`${plan.count} ${plan.interval}s`),
      );

      selectPlanForm.appendChild(label);
    });

    document.getElementById('details').hidden = true;
    document.getElementById('plans').hidden = false;
  }
};

Envía el plan seleccionado a tu servidor.

client.js
const confirmButton = document.getElementById('confirm-button');

confirmButton.addEventListener('click', async (ev) => {
  const selectedPlanIdx = selectPlanForm.installment_plan.value;
  const selectedPlan = availablePlans[selectedPlanIdx];
  const intentId = document.getElementById('payment-intent-id').value;
  const response = await fetch('/confirm_payment', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      payment_intent_id: intentId,
      selected_plan: selectedPlan,
    }),
  });

  const responseJson = await response.json();

  // Show success / error response.
  document.getElementById('plans').hidden = true;
  document.getElementById('result').hidden = false;

  var message;
  if (responseJson.status === "succeeded" && selectedPlan !== undefined) {
    message = `Success! You made a charge with this plan:${
      selectedPlan.count
    } ${selectedPlan.interval}`;
  } else if (responseJson.status === "succeeded") {
    message = "Success! You paid immediately!";
  } else {
    message = "Uh oh! Something went wrong";
  }

  document.getElementById("status-message").innerText = message;
});

Confirma el PaymentIntent en el servidor

Utilizando otro punto de conexión del servidor, confirma el PaymentIntent para finalizar el pago y completar el pedido.

La respuesta del servidor indicará que seleccionaste el plan en el PaymentIntent y también en el cargo resultante.

{
  "id": "pi_1FKDPFJXdud1yP2PMSXLlPbg",
  "object": "payment_intent",
  "amount": 3099,
...
  "charges": {
    "data": [
      {
        "id": "ch_1FKDPHJXdud1yP2P2u79mcIX",
        "object": "charge",
        "amount": 3099,
        "payment_method_details": {
          "card": {
            "installments": {
              "plan": {
                "count": 3,
                "interval": "month",
                "type": "fixed_count"
              }
            },

Eliminar manualmente el plan de cuotas

Una vez que se establece un plan de cuotas en un PaymentIntent, permanece hasta que lo elimines.

Por ejemplo, considera el caso en el que se rechaza la tarjeta de un cliente cuando intenta pagar en cuotas con su primera tarjeta y, luego, introduce una segunda tarjeta que no admite cuotas. Falla la confirmación del PaymentIntent porque la tarjeta no admite cuotas sin intereses.

Cuando confirmas el PaymentIntent, debes anular expresamente payment_method_options[card][installments][plan] para indicar la ausencia de un plan de cuotas.

Configuraciones personalizadas

Puedes personalizar la configuración de los meses sin intereses con la página de configuración de los métodos de pago del Dashboard de Stripe.

Puedes encontrar la opción para habilitar o deshabilitar los meses sin intereses en tu página de configuración de métodos de pago. Esta configuración te permite habilitar los meses sin intereses para los métodos de pago sin codificación, incluidos Payment Links y Checkout.

En la página de configuración de los métodos de pago, por separado, también puedes configurar los planes mensuales específicos que quieras ofrecer y los montos de transacciones mínimos y máximos para cada plan. Estas configuraciones del plan se aplican a todas las integraciones de meses sin intereses existentes.

Prueba la integración

Puedes usar las siguientes tarjetas para probar tu integración:

Número	Descripción
	Hay planes de meses sin intereses disponibles de 3, 6, 9, 12, 18 y 24 meses
	No hay planes de meses sin intereses disponibles.