Collecter les adresses physiques

Collecter une adresse de facturation

Par défaut, une session Checkout collecte les informations de facturation minimales requises pour le paiement via le Payment Element.

Utiliser le Billing Address Element

Vous pouvez collecter des adresses de facturation complètes à l’aide du composant Billing Address Element.

Tout d’abord, transmettez billing_address_collection=required lors de la création de la session Checkout.

<div id="billing-address"></div>

const billingAddressElement = checkout.createBillingAddressElement();
billingAddressElement.mount('#billing-address');

Utiliser un formulaire personnalisé

Vous pouvez créer votre propre formulaire pour collecter les adresses de facturation.

• Si votre page de paiement comporte une étape distincte de collecte d’adresses avant confirmation, appelez updateBillingAddress lorsque votre client envoie l’adresse.
• Vous pouvez également envoyer l’adresse lorsque votre client clique sur le bouton « Payer » en transmettant billingAddress à confirm.

Collecter des adresses de facturation partielles

Pour collecter des adresses de facturation partielles, telles que le pays et le code postal seulement, transmettez billing_address_collection=auto.

Lors de la collecte d’adresses de facturation partielles, vous devez collecter les adresses manuellement. Par défaut, le Payment Element collecte automatiquement les informations de facturation minimales requises pour le paiement. Pour éviter la double collecte des informations de facturation, transmettez fields.billingDetails=never lors de la création du Payment Element. Si vous avez l’intention de collecter uniquement un sous-ensemble d’informations de facturation (telles que le nom du client), ne transmettez never que pour les champs que vous avez l’intention de collecter vous-même.

Collecter une adresse de livraison

Pour collecter l’adresse de livraison d’un client, transmettez le paramètre shipping_address_collection lors de la création de la session Checkout.

Lorsque vous collectez une adresse de livraison, vous devez également préciser les pays pour lesquels vous autorisez la livraison. Configurez la propriété allowed_countries à l’aide du tableau des codes pays ISO à deux lettres.

Comment utiliser le composant Element Shipping Address

Vous pouvez collecter des adresses de livraison complètes à l’aide du composant Shipping Address Element.

<div id="shipping-address"></div>

const shippingAddressElement = checkout.createShippingAddressElement();
shippingAddressElement.mount('#shipping-address');

Écouter les modifications de session Checkout

Vous pouvez écouter les modifications apportées à la session Checkout en ajoutant un écouteur d’événements pour gérer les changements liés à l’adresse.

<div>
  <h3> Totals </h3>
  <div id="subtotal" ></div>
  <div id="shipping" ></div>
  <div id="total" ></div>
</div>

stripe.initCheckout({clientSecret}).then((checkout) => {
  const subtotal = document.getElementById('subtotal');
  const shipping = document.getElementById('shipping');
  const total = document.getElementById('total');

  checkout.on('change', (session) => {
    subtotal.textContent = `Subtotal: ${session.total.subtotal.amount}`;
    shipping.textContent = `Shipping: ${session.total.shippingRate.amount}`;
    total.textContent = `Total: ${session.total.total.amount}`;
  })
})

Utiliser un formulaire personnalisé

Vous pouvez créer votre propre formulaire pour collecter les adresses de livraison.

• Si votre page de paiement comporte une étape distincte de collecte d’adresse avant confirmation, appelez updateShippingAddress lorsque votre client envoie l’adresse.
• Vous pouvez également envoyer l’adresse lorsque votre client clique sur le bouton « Payer » en transmettant shippingAddress à confirm.