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

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

Copier la page

Version bêta privée

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

Learn how to dynamically add, remove, or update line items included in a Checkout Session.

Use cases

This guide demonstrates how to update line items to upsell a subscription, but you can also:

Check inventory: Run inventory checks and holds when customers attempt to change item quantities.
Add new products: Add a complimentary product if the order total exceeds a specific amount.
Update shipping rates: If the order total changes, update shipping rates by combining the method described in this guide with what’s out on Customize shipping options during checkout.
Update tax rates: If you’re not using Stripe Tax, you can dynamically update tax rates on line items based on the shipping address entered.

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

Use cases

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