Configurar una suscripción con débito directo SEPA

Obtén información sobre cómo crear y cobrar una suscripción con débito directo SEPA.

Aprende a crear y cobrar una suscripción con débito directo SEPA.

Nota

Si eres un usuario nuevo, usa el Payment Element en lugar de usar Stripe Elements como se describe en esta guía. El Payment Element proporciona una ruta de integración con poca programación que tiene optimizaciones de conversión incorporadas. Para obtener instrucciones, consulta Cómo crear una suscripción.

Crear un producto y un precio
Dashboard

Los Productos representan el artículo o servicio que vendes. Los Precios definen cuánto cobras un producto y con qué frecuencia. Esto incluye el costo del producto, la moneda aceptada y si se trata de un cargo único o recurrente. Si tienes pocos productos y precios, puedes crearlos y gestionarlos en el Dashboard.

La guía toma como ejemplo una foto de archivo de un servicio por el que se cobra a los clientes una suscripción mensual de 15 EUR. Para modelar la suscripción:

Ve a la página de Productos y haz clic en Crear producto.
Ingresa el Nombre del producto. De forma opcional, puedes agregar una Descripción y subir una imagen del producto.
Selecciona un Código de impuesto del producto. Obtén más información sobre códigos de impuestos de productos.
Selecciona Recurrente. Luego ingresa 15 para el precio y selecciona EUR como la moneda.
Elige si deseas Incluir impuestos en el precio. Puedes usar el valor predeterminado de tu configuración de impuestos o establecer el valor manualmente. En este ejemplo, selecciona Automático.
Selecciona Mensual para el período de facturación.
Haz clic en Más opciones de tarifas. Luego selecciona Tarifa fija como el modelo de tarifas para este ejemplo. Obtén más información sobre tarifa fija y otros modelos de precios.
Agrega una Descripción del precio interna y una Clave de búsqueda para organizar, consultar y actualizar precios específicos en el futuro.
Haz clic en Siguiente. Luego haz clic en Agregar producto.

Después de crear el producto y el precio, registra el ID del precio para usarlo en pasos sucesivos. La página de tarifas te muestra el ID, que será similar a esto: price_G0FvDp6vZvdwRZ.

Crea un cliente
Lado del servidor

Una suscripción necesita un cliente para poder reutilizar los métodos de pago y hacer un seguimiento de los pagos recurrentes. Crea un objeto Customer cuando tu cliente cree una cuenta en tu empresa.

Crear la suscripción
Lado del servidor

Crea la suscripción con los ID de cliente y precio. Devuelve al lado del cliente el client_secret del confirmation_secret.client_secret de la última factura o, para las suscripciones que no cobran un pago por adelantado, el pending_setup_intent. Además, establece lo sigueinte:

Establece payment_behavior en default_incomplete para simplificar el cobro de la orden de débito directo SEPA.
Establece save_default_payment_method en on_subscription para guardar el método de pago como determinado para la suscripción cuando el pago se realiza correctamente. Guardar un método de pago predeterminado aumenta la tasa de éxito de futuros pagos de suscripción.

Recopilar datos del método de pago y la confirmación del mandato
Lado del cliente

Ya tienes todo listo para recopilar información de pago del lado del cliente con Stripe Elements. Elements es un conjunto de componentes de interfaz de usuario prediseñados para recopilar datos de pago.

Un Stripe Element contiene un iframe que envía la información del pago a Stripe en modo seguro a través de una conexión HTTPS. La dirección de la página de finalización de compra también debe empezar con https:// en lugar de http:// para que funcione tu integración.

Puedes probar tu integración sin usar HTTPS. Habilítala cuando todo esté listo para aceptar pagos reales.

Configurar Stripe Elements

Stripe Elements se encuentra disponible automáticamente como función de Stripe.js. Incluye el script de Stripe.js en tu página de finalización de compra agregándolo al head de tu archivo HTML. Carga siempre Stripe.js directamente desde js.stripe.com para cumplir con la normativa PCI. No incluyas el script en un paquete ni alojes una copia en tus sistemas.

payment_setup.html
<head>
  <title>Submit Payment</title>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>

Crea una instancia de Elements con el siguiente JavaScript en tu página de pago:

const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);
const elements = stripe.elements();

Agregar y configurar un IBAN Element

Elements necesita un lugar específico en tu formulario de pago. Crea nodos DOM (contenedores) vacíos con ID únicos en el formulario de pago. Además, tu cliente debe leer y aceptar el mandato para débitos directos SEPA.

Muestra el siguiente texto estándar de autorización al cliente para que implícitamente firme el mandato.

Reemplaza Rocket Rides con el nombre de tu empresa.

Authorization text template

By providing your payment information and confirming this payment, you authorise (A) and Stripe, our payment service provider, to send instructions to your bank to debit your account and (B) your bank to debit your account in accordance with those instructions. As part of your rights, you are entitled to a refund from your bank under the terms and conditions of your agreement with your bank. A refund must be claimed within 8 weeks starting from the date on which your account was debited. Your rights are explained in a statement that you can obtain from your bank. You agree to receive notifications for future debits up to 2 days before they occur.

Copiar

La configuración de un método de pago equivale a la aceptación del mandato. Puesto que el cliente ha firmado el mandato implícitamente al aceptar estas condiciones, debes comunicar estas últimas en tu formulario o por correo electrónico.

payment_setup.html
<form action="/form" method="post" id="setup-form">
  <div class="form-row inline">
    <div class="col">
      <label for="accountholder-name">
        Name
      </label>
      <input
        id="accountholder-name"
        name="accountholder-name"
        placeholder="Jenny Rosen"
        required
      />
    </div>

    <div class="col">
      <label for="email">
        Email Address
      </label>
      <input
        id="email"
        name="email"
        type="email"
        placeholder="jenny.rosen@example.com"
        required
      />
    </div>
  </div>

  <div class="form-row">
    <!--
      Using a label with a for attribute that matches the ID of the
      Element container enables the Element to automatically gain focus
      when the customer clicks on the label.
    -->
    <label for="iban-element">
      IBAN
    </label>
    <div id="iban-element">
      <!-- A Stripe Element will be inserted here. -->
    </div>
  </div>

  <!-- Add the client_secret from the SetupIntent as a data attribute   -->
  <button id="submit-button" data-secret="{CLIENT_SECRET}">
    Set up SEPA Direct Debit
  </button>

  <!-- Display mandate acceptance text. -->
  <div id="mandate-acceptance">
    By providing your payment information and confirming this payment, you
    authorise (A) Rocket Rides and Stripe, our payment service provider
    and/or PPRO, its local service provider, to send instructions to your
    bank to debit your account and (B) your bank to debit your account in
    accordance with those instructions. As part of your rights, you are
    entitled to a refund from your bank under the terms and conditions of
    your agreement with your bank. A refund must be claimed within 8 weeks
    starting from the date on which your account was debited. Your rights
    are explained in a statement that you can obtain from your bank. You
    agree to receive notifications for future debits up to 2 days before
    they occur.
  </div>
  <!-- Used to display form errors. -->
  <div id="error-message" role="alert"></div>
</form>

Una vez cargado el formulario, puedes crear una instancia del IBAN Element y montarlo en el contenedor Element:

// Custom styling can be passed to options when creating an Element.
const style = {
  base: {
    color: '#32325d',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    },
    ':-webkit-autofill': {
      color: '#32325d',
    },
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a',
    ':-webkit-autofill': {
      color: '#fa755a',
    },
  },
};

const options = {
  style,
  supportedCountries: ['SEPA'],
  // Elements can use a placeholder as an example IBAN that reflects
  // the IBAN format of your customer's country. If you know your
  // customer's country, we recommend passing it to the Element as the
  // placeholderCountry.
  placeholderCountry: 'DE',
};

// Create an instance of the IBAN Element
const iban = elements.create('iban', options);

// Add an instance of the IBAN Element into the `iban-element` <div>
iban.mount('#iban-element');

Enviar los datos del método de pago a Stripe
Lado del cliente

Usa confirmSepaDebitPayment o, en el caso de las suscripciones que no cobran un pago por adelantado, confirmSepaDebitSetup para confirmar la suscripción y crear un PaymentMethod para débito directo SEPA. Incluye el nombre y la dirección de correo electrónico del cliente en las propiedades payment_method.billing_details.

PaymentSetup.js
// Define stripe with your publishable key
var stripe = Stripe('pk_test_1234');

// Get the IBAN information from your element
var iban = document.getElementById('iban-element');

const form = document.getElementById('payment-form');
const accountholderName = document.getElementById('accountholder-name');
const email = document.getElementById('email');

form.addEventListener('submit', async(event) => {
  event.preventDefault();
  // Create the subscription
  const res = await fetch('/create-subscription', {
    method: 'POST',
  });
  const {type, clientSecret} = await res.json();
  const confirmIntent = type === 'setup' ? stripe.confirmSepaDebitSetup : stripe.confirmSepaDebitPayment;

  const {error} = await confirmIntent({
    clientSecret,
    {
      payment_method: {
        sepa_debit: iban,
        billing_details: {
          name: accountholderName.value,
          email: email.value,
        },
      },
    }
  });
});

Configurar el método de pago predeterminado
Lado del servidor

Tienes que agregarle al cliente un método de pago guardado de modo que se puedan efectuar los próximos pagos. Para ello, establece el método de pago que acabas de recopilar en el nivel superior del objeto Customer como método de pago predeterminado para las facturas:

Gestionar el estado de la suscripción
Lado del cliente

Si el pago inicial se efectúa correctamente, el estado de la suscripción será active y no se necesitará realizar ninguna otra acción. Cuando los pagos fallan, el estado cambia al estado de suscripción definido en tu configuración de cobro automático. Debes notificar al cliente si el pago falla y cobrarle con un método de pago distinto.

Nota

Los pagos con débito directo SEPA nunca se reintentan automáticamente, aunque tengas un cronograma de reintentos configurado para otros métodos de pago.

Probar la integración

Puedes probar tu integración usando los Códigos Internacionales de Cuenta Bancaria (IBAN) que figuran a continuación. Los detalles del método de pago se recopilan para cada IBAN, pero muestran un comportamiento diferente cuando se cobran.

Prueba los IBAN

Número de cuenta	Descripción
`DE89370400440532013000`	El estado del PaymentIntent pasa de `processing` a `succeeded`.
`DE08370400440532013003`	El estado del PaymentIntent pasa de `processing` a `succeeded` después de al menos tres minutos.
`DE62370400440532013001`	El estado del PaymentIntent pasa de `processing` a `requires_payment_method`.
`DE78370400440532013004`	El estado del PaymentIntent pasa de `processing` a `requires_payment_method` después de al menos tres minutos.
`DE35370400440532013002`	El estado del PaymentIntent pasa de `processing` a `succeeded`, pero se crea inmediatamente una disputa.
`DE65370400440000343434`	El pago falla con un código de falla `charge_exceeds_source_limit` debido a que el monto del pago hace que la cuenta exceda su límite de volumen de pago semanal.
`DE27370400440000121212`	El pago falla con un código de error `charge_exceeds_weekly_limit` debido a que el monto del pago excede el límite de volumen de transacciones de la cuenta.
`DE65370400440002222227`	Se produce un error en el pago con un código de error `insufficient_funds`.

Configurar una suscripción con débito directo SEPA

Obtén información sobre cómo crear y cobrar una suscripción con débito directo SEPA.

Nota

Crear un producto y un precio
Dashboard

Crea un cliente
Lado del servidor

Crear la suscripción
Lado del servidor

Recopilar datos del método de pago y la confirmación del mandato
Lado del cliente

Configurar Stripe Elements

Agregar y configurar un IBAN Element

Enviar los datos del método de pago a Stripe
Lado del cliente

Configurar el método de pago predeterminado
Lado del servidor

Gestionar el estado de la suscripción
Lado del cliente

Nota

Probar la integración

Prueba los IBAN

OpcionalCómo definir el ciclo de facturación

OpcionalPeríodos de prueba para suscripciones

OpcionalCrear pagos con débito directo SEPA usando otros métodos de pago

Configurar una suscripción con débito directo SEPA

Obtén información sobre cómo crear y cobrar una suscripción con débito directo SEPA.

Nota

Crear un producto y un precioDashboard

Crea un clienteLado del servidor

Crear la suscripciónLado del servidor

Recopilar datos del método de pago y la confirmación del mandatoLado del cliente

Configurar Stripe Elements

Agregar y configurar un IBAN Element

Enviar los datos del método de pago a StripeLado del cliente

Configurar el método de pago predeterminadoLado del servidor

Gestionar el estado de la suscripciónLado del cliente

Nota

Probar la integración

Prueba los IBAN

OpcionalCómo definir el ciclo de facturación

OpcionalPeríodos de prueba para suscripciones

OpcionalCrear pagos con débito directo SEPA usando otros métodos de pago

Crear un producto y un precio
Dashboard

Crea un cliente
Lado del servidor

Crear la suscripción
Lado del servidor

Recopilar datos del método de pago y la confirmación del mandato
Lado del cliente

Enviar los datos del método de pago a Stripe
Lado del cliente

Configurar el método de pago predeterminado
Lado del servidor

Gestionar el estado de la suscripción
Lado del cliente