Einzelposten dynamisch aktualisierenPrivate Vorschau

Aktualisieren Sie Posten als Reaktion auf Änderungen, die während des Bezahlvorgangs vorgenommen wurden.

Seite kopieren

Private Vorschau

Diese Funktion befindet sich in der privaten Vorschau. 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.

SDK einrichten
Serverseitig

Verwenden Sie unsere offiziellen Bibliotheken, um von Ihrer Anwendung aus auf die Stripe API zuzugreifen:

Server-SDK aktualisieren
Serverseitig

Um diese Beta-Version zu verwenden, aktualisieren Sie zunächst Ihr SDK, um den checkout_server_update_beta=v1-Header für die Beta-Version zu verwenden.

Berechtigungen zum Aktualisieren der Checkout-Sitzung konfigurieren
Serverseitig

Übergeben Sie permissions.update_line_items=server_only, wenn Sie die Checkout-Sitzung erstellen, um die Aktualisierung von Posten von Ihrem Server aus zu ermöglichen. Durch Übergeben dieser Option werden auch clientseitige Aktualisierungen von Posten wie updateLineItemQuantity deaktiviert, wodurch sichergestellt wird, dass alle Aktualisierungen Ihren Server durchlaufen.

Einzelposten dynamisch aktualisieren
Serverseitig

Erstellen Sie einen neuen Endpoint auf Ihrem Server, um die Posten in der Checkout-Sitzung zu aktualisieren. Sie werden dies in einem späteren Schritt vom Frontend aus aufrufen.

Sicherheitshinweis

Es ist wichtig zu verstehen, dass clientseitiger Code in einer Umgebung ausgeführt wird, die vollständig von Nutzern/Nutzerinnen kontrolliert wird. Ein/e böswillige/r Nutzer/in kann Ihre clientseitige Validierung umgehen, Anfragen abfangen und ändern oder sogar völlig neue Anfragen an Ihren Server erstellen.

Beim Entwerfen des Endpoints wird Folgendes empfohlen:

Entwerfen Sie Endpoints für spezifische Kundeninteraktionen, anstatt sie zu allgemein zu halten (z. B. „Cross-Selling-Posten hinzufügen“ statt einer allgemeinen „Aktualisierungs“-Aktion). Spezifische Endpoints helfen dabei, den Zweck klar zu halten und die Validierungslogik einfacher zu schreiben und zu pflegen.
Vermeiden Sie es, Sitzungsdaten direkt vom Client an Ihren Endpunkt zu übertragen. Böswillige Clients können Anforderungsdaten ändern, was sie zu einer unzuverlässigen Quelle für die Bestimmung des Checkout-Sitzungsstatus macht. Übertragen Sie stattdessen die Sitzungs-ID an Ihren Server und verwenden Sie sie, um die Daten sicher von der Stripe-API abzurufen.

Beim Aktualisieren von Posten müssen Sie den gesamten Bereich der Posten erneut übertragen.

Um eine vorhandene Position beizubehalten, geben Sie ihre id an.
Um einen vorhandenen Posten zu aktualisieren, geben Sie die entsprechende id zusammen mit den neuen Werten der zu aktualisierenden Felder an.
Um einen neuen Posten hinzuzufügen, geben Sie einen price und eine quantity ohne eine id an.
Um einen vorhandenen Posten zu entfernen, lassen Sie die ID des Postens aus dem erneut übertragenen Array weg.
Um eine Position neu anzuordnen, geben Sie die entsprechende id an der gewünschten Position im erneut übertragenen Array an.

Client-SDK aktualisieren
Clientseitig

Initialisieren Sie stripe.js mit dem Beta-Header custom_checkout_server_updates_1.

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

Serveraktualisierungen aufrufen
Clientseitig

Lösen Sie das Update von Ihrem Frontend aus, indem Sie eine Anfrage an Ihren Server stellen und diese in runServerUpdate einschließen. Wenn die Anfrage erfolgreich ist, wird das Session-Objekt mit den neuen Posten aktualisiert.

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

Einzelposten dynamisch aktualisierenPrivate Vorschau

Aktualisieren Sie Posten als Reaktion auf Änderungen, die während des Bezahlvorgangs vorgenommen wurden.

Private Vorschau

Use cases

SDK einrichtenServerseitig

Server-SDK aktualisierenServerseitig

Berechtigungen zum Aktualisieren der Checkout-Sitzung konfigurierenServerseitig

Einzelposten dynamisch aktualisierenServerseitig