Accepter les paiements par carte avec Meses sin intereses

Comment accepter les paiements par carte bancaire avec meses sin intereses sur un large éventail de produits Stripe.

Au Mexique, les cartes bancaires disposent de la fonctionnalité de versements échelonnés (meses sin intereses), qui permet aux clients de répartir le règlement de leurs achats sur plusieurs relevés. Vous recevez le règlement (après déduction de frais) comme pour un paiement normal, tandis que la banque du client se charge d’encaisser les différents versements.

Certaines restrictions s’appliquent quant aux transactions et cartes qui peuvent utiliser des versements échelonnés. Consultez les exigences de compatibilité.

L’acceptation d’un paiement échelonné entraîne l’ajout de frais supplémentaires aux frais de transaction standard par carte.

Vous pouvez activer les versements échelonnés sur une variété de produits Stripe. Choisissez les instructions ci-dessous correspondant à votre implémentation.

Intégrer à l’aide de l’API Payment Intents

Vous pouvez accepter des versements échelonnés à l’aide de l’API Payment Intents. Cela implique la collecte des informations concernant le paiement et le plan de versements échelonnés côté client, ainsi que la réalisation du paiement côté serveur.

Collecter les informations relatives au moyen de paiement côté client
Récupérer les plans de versements échelonnés sur le serveur
Sélectionner un plan de versements échelonnés côté client
Confirmer le PaymentIntent sur le serveur

Collecter les informations relatives au moyen de paiement côté client

L’API Payment Intents fonctionne avec Stripe.js et Elements pour collecter de manière sécurisée les informations de paiement (par exemple, celles relatives à la carte) côté client. Pour commencer à utiliser Elements, ajoutez le script suivant à vos pages. Chargez toujours ce script directement depuis js.stripe.com pour maintenir votre conformité PCI. Vous ne devez pas l’inclure dans un lot ni en héberger de copie.

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

Pour collecter les informations de carte de vos clients en toute sécurité, Elements crée pour vous des composants d’interface utilisateur hébergés par Stripe que nous plaçons dans votre formulaire de paiement. Vous n’avez ainsi pas à le faire directement. Pour déterminer l’emplacement d’insertion de ces composants, créez des éléments DOM (contenants) vides dotés d’ID uniques dans votre formulaire de paiement.

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>

Créez ensuite une instance de l’objet Stripe en indiquant comme premier paramètre votre clé API publique, puis créez une instance de l’objet Elements. Utilisez le nouvel objet pour ajouter un élément Card à l’emplacement réservé correspondant sur la page.

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

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

Enfin, utilisez stripe.createPaymentMethod côté client pour recueillir les informations de carte bancaire et créer un objet PaymentMethod lorsque l’utilisateur clique sur le bouton de validation.

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

Récupérer les plans de versements échelonnés sur le serveur

Pour récupérer les plans de versements échelonnés disponibles, configurez sur votre serveur un endpoint qui recevra la requête.

Créez un PaymentIntent avec l’ID de l’objet PaymentMethod créé côté client. Définissez le paramètre payment_method_options.card.installments.enabled=true afin d’autoriser les versements échelonnés pour ce paiement, puis envoyez les plans disponibles côté client afin que votre client puisse sélectionner le plan de paiement souhaité.

Remarque

À cette étape, ne confirmez pas le PaymentIntent (en définissant la propriété confirm), car vous ne savez pas encore si l’utilisateur souhaite régler en versements échelonnés.

L’objet PaymentIntent liste les plans de versements échelonnés disponibles pour l’objet PaymentMethod sous 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"
          },

Sélectionner un plan de versements échelonnés côté client

Laissez le client sélectionner le plan de versements échelonnés de son choix.

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

Envoyez le plan sélectionné à votre serveur.

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

Confirmer le PaymentIntent sur le serveur

À l’aide d’un autre endpoint du serveur, confirmez le PaymentIntent afin de finaliser le paiement et traiter la commande.

La réponse du serveur indiquera que vous avez sélectionné le plan sur le PaymentIntent ainsi que sur le paiement correspondant.

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

Supprimer manuellement un plan de versements échelonnés

Une fois qu’un plan de versements échelonnés est défini sur un PaymentIntent, il demeure en place jusqu’à ce que vous le supprimiez.

Par exemple, imaginons le cas où la carte bancaire d’un client est refusée lorsqu’il tente de payer en versements échelonnés sur sa première carte, puis saisit une deuxième carte qui ne prend pas en charge les versements échelonnés. La confirmation du PaymentIntent échoue car les versements échelonnés ne sont pas pris en charge sur la carte.

Vous devez annuler explicitement la définition du paramètre payment_method_options[card][installments][plan] lorsque vous confirmez à nouveau le PaymentIntent pour indiquer l’absence de plan de versements échelonnés.

Paramètres personnalisés

Vous pouvez personnaliser votre configuration des versements échelonnés en utilisant la page des paramètres des moyens de paiement du Dashboard Stripe.

Vous trouverez l’option permettant d’activer ou de désactiver les versements échelonnés sur la page des paramètres des moyens de paiement. Ce paramètre vous permet d’activer les versements échelonnés pour les moyens de paiement sans code, y compris Payment Links et Checkout.

Dans la page des paramètres des moyens de paiement, vous pouvez aussi configurer séparément les plans mensuels spécifiques que vous souhaitez proposer et les montants de transaction minimum et maximum de chaque plan. Ces configurations de plan s’appliquent à toutes vos intégrations de versements échelonnés existantes.

Tester l’intégration

Pour tester votre intégration, vous pouvez utiliser les cartes bancaires suivantes :

Numéro	Description
	Plans de versements échelonnés disponibles sur 3, 6, 9, 12, 18 et 24 mois
	Aucun plan de versements échelonnés n’est disponible.