Mettre à jour dynamiquement les postesVersion bêta privée

Mettez à jour les postes en réponse aux modifications apportées lors du paiement.

Version bêta privée

Cette fonctionnalité est disponible en version bêta privée. Request access to dynamic updates to checkout.

Découvrez comment ajouter, supprimer ou mettre à jour dynamiquement les postes inclus dans une session Checkout.

Cas d’usage

Ce guide vous explique comment mettre à jour des postes pour augmenter la vente d’un abonnement, mais vous pouvez également :

Vérifier l’inventaire : effectuez une vérification de vos stocks et réservez des articles lorsque les clients tentent de modifier des quantités d’articles.
Ajout de nouveaux produits : Ajoutez un produit gratuit si le total de la commande dépasse un certain montant.
Mise à jour des tarifs de livraison : Si le total de la commande change, mettez à jour les frais de livraison en combinant la méthode décrite dans ce guide avec celle indiqués à la rubrique Personnalisation des options de livraison lors du paiement.
Mise à jour des taux de taxe : Si vous n’utilisez pas Stripe Tax, vous pouvez mettre à jour de manière dynamique les taux de taxe appliqués aux postes de facture en fonction de l’adresse de livraison saisie.

Configurer le SDK
Côté serveur

Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre application :

Mettre à jour le SDK du serveur
Côté serveur

Pour utiliser cette version bêta, commencez par mettre à jour votre SDK afin d’utiliser l’en-tête checkout_server_update_beta=v1 de la version bêta.

Configurer les autorisations de mise à jour de Checkout Session
Côté serveur

Transmettez permissions.update_line_items=server_only lors de la création de la session Checkout pour activer la mise à jour des postes à partir de votre serveur. La transmission de cette option désactive également les mises à jour des postes côté client, tels que updateLineItemQuantity, ce qui garantit que toutes les mises à jour transitent par votre serveur.

Mise à jour dynamique des postes
Côté serveur

Créez un nouvel endpoint sur votre serveur pour mettre à jour les postes de la session Checkout. Vous l’appellerez à partir du front-end dans une étape ultérieure.

Conseil en matière de sécurité

Il est essentiel de comprendre que le code côté client s’exécute dans un environnement entièrement contrôlé par l’utilisateur. Un utilisateur malveillant peut contourner votre validation côté client, intercepter et modifier les requêtes, ou même créer des requêtes entièrement nouvelles pour votre serveur.

Pour concevoir l’endpoint, nous recommandons ce qui suit :

Concevez des endpoints pour des interactions spécifiques avec le client plutôt que de les formuler de manière trop générique (par exemple, « ajouter un article de vente croisée » plutôt qu’une action générale comme « mettre à jour »). Des endpoints spécifiques contribuent à la clarté de l’objectif et facilitent l’écriture et le maintien de la logique de validation.
Évitez de transmettre les données de session directement du client à votre endpoint. Les clients malveillants peuvent modifier les données de requête, ce qui en fait une source peu fiable pour déterminer l’état de la session Checkout. Transmettez plutôt l’ID de session à votre serveur et utilisez-le pour récupérer en toute sécurité les données auprès de l’API de Stripe.

Lorsque vous mettez à jour des postes, vous devez retransmettre l’intégralité du tableau des postes.

Pour conserver un poste existant, indiquez son id.
Pour mettre à jour un poste existant, indiquez son id ainsi que les nouvelles valeurs des champs à mettre à jour.
Pour ajouter un nouveau poste, indiquez un prix dans price et une quantité dans quantity sans saisir un id.
Pour supprimer un poste existant, omettez l’ID du poste dans le tableau retransmis.
Pour modifier l’ordre d’un poste, indiquez son id à l’endroit souhaité dans le tableau retransmis.

Mettre à jour le SDK du client
Côté client

Initialisez stripe.js avec l’en-tête bêta custom_checkout_server_updates_1.

checkout.js
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
, {
  betas: ['custom_checkout_server_updates_1'],
});

Appeler les mises à jour du serveur
Côté client

Déclenchez la mise à jour à partir de votre front-end en envoyant une requête à votre serveur et en l’incluant dans runServerUpdate. Si la demande aboutit, l’objet Session est mis à jour avec les nouveaux postes.

index.html
<button id="change-subscription-interval" role="switch" aria-checked="false">
  Save with a yearly subscription
</button>

checkout.js
document.getElementById('change-subscription-interval')
  .addEventListener("click", async (event) => {
    const button = event.target;
    const isCurrentSubscriptionMonthly =
      button.getAttribute("aria-checked") === "false";

    const updateCheckout = () => {
      return fetch("/change-subscription-interval", {
        method: "POST",
        headers: {
          "Content-type": "application/json",
        },
        body: JSON.stringify({
          checkout_session_id: checkout.session().id,
          interval: isCurrentSubscriptionMonthly ? "yearly" : "monthly",
        })
      });
    };

    const response = await checkout.runServerUpdate(updateCheckout);
    if (!response.ok) {
      // Handle error state
      return;
    }

    // Update toggle state on success
    const isNewSubscriptionMonthly = !isCurrentSubscriptionMonthly;
    button.setAttribute("aria-checked", !isNewSubscriptionMonthly);
    button.textContent = isNewSubscriptionMonthly
      ? "Save with a yearly subscription"
      : "Use monthly subscription";
  });

Mettre à jour dynamiquement les postesVersion bêta privée

Mettez à jour les postes en réponse aux modifications apportées lors du paiement.

Version bêta privée

Cas d’usage

Configurer le SDKCôté serveur

Mettre à jour le SDK du serveurCôté serveur

Configurer les autorisations de mise à jour de Checkout SessionCôté serveur

Mise à jour dynamique des postesCôté serveur