Accept meses sin intereses card payments

Learn how to accept credit card payments using meses sin intereses across a variety of Stripe products.

Installments (meses sin intereses) is a feature of consumer credit cards in Mexico that allows customers to split purchases over multiple billing statements. You receive payment as if it were a normal one-time charge, with fees deducted, and the customer’s bank handles collecting the money over time.

Some restrictions apply to which transactions and cards can use installments. Review the compatibility requirements.

Accepting an installment payment incurs an additional fee to the standard credit card transaction fee.

You can enable installments across a variety of Stripe products. Choose the instructions below matching your implementation.

Integrate with the Payment Intents API

You can accept installments using the Payment Intents API. It requires collecting payment details and installment plan information on the client and completing the payment on the server.

Collect payment method details on the client
Retrieve installment plans on the server
Select an installment plan on the client
Confirm the PaymentIntent on the server

Collect payment method details on the client

The Payment Intents API works with Stripe.js & Elements to securely collect payment information (for example, credit card details) on the client side. To get started with Elements, include the following script on your pages. This script must always load directly from js.stripe.com in order to remain PCI compliant—you can’t include it in a bundle or host a copy of it yourself.

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

To securely collect card details from your customers, Elements creates Stripe-hosted UI components for you that we place into your payment form, rather than you creating them directly. To determine where to insert these components, create empty DOM elements (containers) with unique IDs within your payment form.

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>

Next, create an instance of the Stripe object, providing your publishable API key as the first parameter, and then create an instance of the Elements object. Use the newly created object to mount a Card element in the relevant placeholder in the page.

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

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

Finally, use stripe.createPaymentMethod on your client to collect the card details and create a PaymentMethod when the user clicks the submit button.

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);
  }
});

Retrieve installment plans on the server

To retrieve available installment plans, set up an endpoint on your server to receive the request.

Create a new PaymentIntent with the ID of the PaymentMethod created on your client. Set payment_method_options.card.installments.enabled=true to allow this payment to use Installments. Send the available plans to the client so the customer can select which plan to pay with.

Nota

Don’t confirm the PaymentIntent here (that is, don’t set the confirm property) because we don’t know if the user wants to pay with installments yet.

The PaymentIntent object lists the available installment plans for the PaymentMethod under 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"
          },

Select an installment plan on the client

Allow the customer to select the Installments plan they want to use.

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;
  }
};

Send the selected plan to your server.

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;
});

Confirm the PaymentIntent on the server

Using another server endpoint, confirm the PaymentIntent to finalize the payment and fulfill the order.

The response from the server will indicate that you selected the plan on the PaymentIntent and also on the resulting charge.

{
  "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"
              }
            },

Manually remove installment plan

After an installment plan is set on a PaymentIntent, it remains until you remove it.

For example, consider the case where a customer’s card declines when trying to pay with installments on their first card, then enters a second card that doesn’t support installments. The PaymentIntent confirmation fails because the installments aren’t supported on the card.

You must explicitly unset payment_method_options[card][installments][plan] when confirming the PaymentIntent again to indicate the absence of an installment plan.

Custom settings

You can customize your installments configuration using the Stripe Dashboard payment methods settings page.

You can find the option to enable or disable installments in your payment methods settings page. This setting allows you to enable installments for no-code payment methods, including Payment Links and Checkout.

Separately, on the payment methods settings page, you can also configure the specific monthly plans you want to offer and the minimum and maximum transaction amounts for each plan. These plan configurations apply to all of your existing installments integrations.

Test the integration

You can use the following cards to test your integration:

Number	Description
	3, 6, 9, 12, 18, and 24 month installment plans available
	No installment plans available.