Personnalisation dynamique des options de livraison

Apprenez à créer différents tarifs de livraison pour vos clients.

Découvrez comment mettre à jour de manière dynamique les options d’expédition en fonction de l’adresse saisie par votre client lorsque vous utilisez la version intégrée de Checkout. Les mises à jour dynamiques ne sont pas disponibles avec la version de Checkout hébergée par Stripe.

Cas d’utilisation

Valider une adresse : Confirmez si vous pouvez expédier un produit à l’adresse d’un client en utilisant vos propres règles de validation personnalisées. Vous pouvez également créer une interface utilisateur personnalisée permettant aux clients de confirmer leur adresse préférée.
Afficher les options de livraison pertinentes : Affichez uniquement les modes de livraison disponibles, en fonction de l’adresse du client. Par exemple, proposez la livraison le lendemain uniquement pour les adresses dans votre pays.
Calculer de manière dynamique les frais de livraison : Calculez et affichez les frais de livraison en fonction de l’adresse de livraison du client.
Mettre à jour les frais de livraison en fonction du montant total de la commande : Proposez des frais de livraison basés sur l’adresse de livraison ou le montant total de la commande (par exemple, la livraison gratuite pour les commandes supérieures à 100 USD). Pour les paiements autorisant les changements de quantité ou les ventes croisées, consultez la page Mise à jour dynamique des postes.

Limitations

Uniquement pris en charge en mode paiement. Les frais de livraison ne sont pas disponibles en mode abonnement.

API Payment Intents

Si vous utilisez l’API Payment Intents, vous devez mettre à jour manuellement les options d’expédition et modifier le montant du paiement en fonction d’une option d’expédition établie, ou en créant un nouveau PaymentIntent avec des montants réajustés.

Configurer les autorisations de mise à jour pour la session Checkout
Côté serveur

Définissez le paramètre : shipping_address_collection.allowed_countries en fonction de la liste des pays vers lesquels vous souhaitez proposer des services d’expédition.

Lorsque vous créez la session Checkout, transmettez l’option permissions.update_shipping_details=server_only pour désactiver la méthode updateShippingAddress côté client et permettre la mise à jour de l’adresse de livraison et des options d’expédition à partir de votre serveur.

Personnaliser les options de livraison
Côté serveur

Créer un endpoint sur votre serveur pour calculer les options de livraison établies en fonction de l’adresse de livraison du client.

Récupérez la Session Checkout en utilisant le checkoutSessionId du corps de la requête.
Validez les informations de livraison du client fournies dans le corps de la demande.
Établir les options de livraison en fonction de l’adresse de livraison du client et des postes de la session Checkout.
Mettez à jour la session Checkout avec les shipping_details et les shipping_options du client.

Mettre à jour le SDK client
Côté client

Initialisez Stripe.js avec l’en-tête custom_checkout_server_updates_1 beta.

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

Requête de mise à jour du serveur
Côté client

Créez une fonction asynchrone qui envoie une requête à votre serveur pour mettre à jour les options d’expédition et encapsulez-la dans runServerUpdate Une requête réussie met à jour l’objet Sessions avec les nouvelles options d’expédition.

L’exemple de code suivant montre comment mettre à jour les options de livraison avec l’AddressElement.

index.html
<div id="shipping-form">
    <!-- Shipping Address Element will be mounted here -->
    <div id="shipping-address-element"></div>
    <button id="save-button">Save</button>
    <div id="error-message"></div>
  </div>

  <div id="shipping-display" style="display: none">
    <div id="address-display"></div>
    <button id="edit-button">Edit</button>
  </div>

checkout.js
// mount the Shipping Address Element
const shippingAddressElement = checkout.createShippingAddressElement();
shippingAddressElement.mount('#shipping-address-element');

const toggleViews = (isEditing) => {
  document.getElementById('shipping-form').style.display = isEditing ? 'block' : 'none';
  document.getElementById('shipping-display').style.display = isEditing ? 'none' : 'block';
}

const displayAddress = (address) => {
  const displayDiv = document.getElementById('address-display');
  displayDiv.innerHTML = `
    <div>${address.name}</div>
    <div>${address.address.line1}</div>
    <div>${address.address.city}, ${address.address.state} ${address.address.postal_code}</div>
  `;
}

const updateShippingOptions = async (shippingDetails) => {
  const response = await fetch("/calculate-shipping-options", {
    method: "POST",
    headers: { 'Content-type': 'application/json' },
    body: JSON.stringify({
      checkout_session_id: 'session_id',
      shipping_details: shippingDetails
    })
  });

  const result = await response.json();

Tester l’intégration

Suivez ces étapes pour tester votre intégration et vous assurer que vos options de livraison personnalisées fonctionnent correctement.

Configurez un environnement de test qui reflète votre configuration en mode production. Utilisez les clés API d’environnement de test Stripe pour cet environnement.
Simulez différentes adresses de livraison pour vérifier que votre fonction calculateShippingOptions traite correctement les différents scénarios.
Vérifiez la logique côté serveur en utilisant des outils de journalisation ou de débogage pour confirmer que votre serveur :
- Récupère la session Checkout.
- Valide les informations de livraison.
- Calcule les options de livraison.
- Ajoute de nouvelles informations et options de livraison à la session Checkout. Assurez-vous que la réponse de modification contient les nouvelles informations et options d’expédition.
Vérifiez la logique côté client en effectuant plusieurs fois le processus de paiement dans votre navigateur. Observez la façon dont l’interface utilisateur se met à jour après avoir saisi les informations de l’expédition. Vérifiez que :
- La fonction runServerUpdate est appelée comme prévu.
- Les options de livraison sont correctement mises à jour en fonction de l’adresse fournie.
- Les messages d’erreur s’affichent correctement lorsque l’expédition n’est pas disponible.
Saisissez des adresses de livraison non valides ou simulez des erreurs de serveur pour tester la gestion des erreurs, côté serveur et côté client.