# Address Element Utilisez l'Address Element pour collecter les addresses de facturation et de livraison. Le composant Element Address est un composant d’interface utilisateur intégrable permettant d’accepter des adresses complètes. Utilisez-le pour collecter des adresses de livraison ou lorsque vous avez besoin d’une adresse de facturation complète, à des fins fiscales, par exemple. | Option | Description | | ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Thème** | Utilisez la liste déroulante pour choisir un thème ou le personnaliser avec l’[API Elements Appearance](https://docs.stripe.com/elements/address-element.md#appearance). | | **Taille ordinateur de bureau et mobile** | Utilisez la liste déroulante pour définir la largeur maximale de pixels de l’élément parent auquel est monté le composant Address Element. Vous pouvez la définir sur 750px (bureau) ou 320px (mobile). | | **Pays ou région du client** | Utilisez cette [option](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-locale) pour sélectionner le lieu d’acceptation des adresses complètes. Le changement de lieu adapte la langue de l’interface utilisateur. | | **Numéro de téléphone** | Activez cette [option](https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options-fields-phone) pour autoriser la collecte du numéro de téléphone lors de la saisie d’une adresse ou lors de l’utilisation d’un contact existant. | | **Saisie semi-automatique** | Activez cette [option](https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options-autocomplete) pour accélérer le tunnel de paiement, réduire les erreurs de validation et améliorer le taux de conversion grâce à la saisie automatique d’adresse intégrée. Stripe prend en charge 236 formats d’adresse régionaux, y compris les formats de droite à gauche. | | **Contacts** | Activez cette [option](https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options-contacts) pour ajouter une nouvelle adresse ou modifier une adresse ou un numéro de téléphone existant. | ## Démarrer Vous pouvez utiliser l’Address Element avec l’intégration de composants intégrés (Elements with Payment Sessions API) ou l’intégration Advanced (Elements with Payment Intents API). [Comparez les fonctionnalités et la disponibilité](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability) pour voir quelle intégration convient à votre cas d’usage. [Collecter les adresses (Elements avec l'API paiement Sessions)](https://docs.stripe.com/payments/advanced/collect-addresses.md?payment-ui=embedded-components): Utilisez l’intégration des composants intégrés pour collecter les adresses. [Collecter les adresses (intégration Advanced)](https://docs.stripe.com/payments/advanced/collect-addresses.md?payment-ui=elements): Utilisez l’intégration Advanced pour collecter les adresses. [Cloner un exemple d'application (intégration Advanced)](https://github.com/stripe-samples/link) ## Créer un Address Element Lorsque vous créez un Address Element, indiquez s’il faut l’utiliser en mode livraison ou en mode facturation. #### Mode livraison En mode livraison, l’élément réalise deux choses : - Il collecte une adresse de livraison. - Il offre la possibilité à votre client de l’utiliser également comme adresse de facturation. ```javascript const stripe = Stripe('<>'); const appearance = { /* appearance */ }; const options = { mode: 'shipping' }; const elements = stripe.elements({ clientSecret, appearance }); // Dans une intégration fonctionnelle, c'est une valeur que votre back-end transmet avec des détails tels que le montant d'un paiement. Pour plus de détails, consultez l'échantillon complet. const addressElement = elements.create('address', options); addressElement.mount('#address-element'); ``` #### Mode facturation En mode facturation, l’élément collecte uniquement une adresse de facturation. ```javascript const stripe = Stripe('<>'); const appearance = { /* appearance */ }; const options = { mode: 'billing' }; const elements = stripe.elements({ clientSecret, appearance }); // Dans une intégration fonctionnelle, c'est une valeur que votre back-end transmet avec des détails tels que le montant d'un paiement. Pour plus de détails, consultez l'échantillon complet. const addressElement = elements.create('address', options); addressElement.mount('#address-element'); ``` ### Utiliser le composant Address Element avec d’autres éléments Vous pouvez collecter les adresses de livraison et de facturation à l’aide de plusieurs Address Elements, un de chaque mode, sur votre page. Si vous devez collecter à la fois les adresses de livraison et de facturation et que vous ne souhaitez utiliser qu’un seul Address Element, utilisez l’Address Element en mode livraison et le [Payment Element](https://docs.stripe.com/payments/payment-element.md) pour collecter uniquement les informations d’adresse de facturation nécessaires. En combinant l’Address Element à d’autres Elements, vous avez la possibilité d’automatiser certains comportements lors de la confirmation du PaymentIntent ou du SetupIntent. L’exhaustivité de l’Address Element est validée lors de la confirmation du PaymentIntent ou du SetupIntent, avant d’afficher les erreurs de chaque champ, le cas échéant. ## Utiliser une adresse Le composant Element Address fonctionne automatiquement avec les composants Element [Payment](https://docs.stripe.com/payments/payment-element.md) et Express Checkout. Lorsqu’un client fournit une adresse et un moyen de paiement, Stripe les combine en un seul *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) en plaçant l’adresse dans le champ correspondant. ### Comportement automatique Le comportement de l’élément par défaut dépend de son mode. #### Mode livraison En mode livraison, l’adresse est enregistrée dans les champs suivants : - Il apparaît dans le champ [Livraison](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-shipping). - Si le client indique qu’il s’agit également de l’adresse de facturation, elle apparaît aussi dans le champ [billing_details](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-payment_method_data-billing_details). Pour permettre la combinaison des informations, créez tous les éléments à partir du même objet `Elements`, comme dans cet exemple : ```javascript const stripe = Stripe('<>'); const appearance = { /* appearance */ }; const options = { mode: 'shipping' }; const paymentElementOptions = { layout: 'accordion'}; const elements = stripe.elements({ clientSecret }); // Dans une intégration fonctionnelle, c'est une valeur que votre back-end transmet avec des détails tels que le montant d'un paiement. Pour plus de détails, consultez l'échantillon complet. const addressElement = elements.create('address', options); const paymentElement = elements.create('payment', paymentElementOptions); addressElement.mount('#address-element'); paymentElement.mount('#payment-element'); ``` #### Mode facturation En mode facturation, l’adresse est enregistrée dans le champ [billing_details](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-payment_method_data-billing_details). Pour permettre la combinaison des informations, créez tous les éléments à partir du même objet `Elements`, comme dans cet exemple : ```javascript const stripe = Stripe('<>'); const appearance = { /* appearance */ }; const options = { mode: 'billing' }; const paymentElementOptions = { layout: 'accordion'}; const elements = stripe.elements({ clientSecret }); // Dans une intégration fonctionnelle, c'est une valeur que votre back-end transmet avec des détails tels que le montant d'un paiement. Pour plus de détails, consultez l'échantillon complet. const addressElement = elements.create('address', options); const paymentElement = elements.create('payment', paymentElementOptions); addressElement.mount('#address-element'); paymentElement.mount('#payment-element'); ``` ### Comportement personnalisé En règle générale, le comportement par défaut du composant Address Element suffit. Mais dans un parcours de paiement complexe, vous pourriez avoir besoin de créer des réponses personnalisées aux saisies du client. Pour en savoir plus, consultez la section [Ecouter les saisies d’adresses](https://docs.stripe.com/payments/advanced/collect-addresses.md). ## Saisie automatique Si votre client sélectionne un pays pris en charge pour son adresse, les options de saisie semi-automatique s’affichent. L’Element Address peut remplir automatiquement les adresses des pays suivants : - AU - BE - BR - CA - CH - DE - ES - FR - GB - IE - IN - IT - JP - MX - MY - NL - NO - NZ - PH - PL - RU - SE - SG - TR - US - ZA Si vous combinez les composants Address Element et Payment Element, Stripe active le remplissage automatique sans aucune configuration requise. Pour ce faire, nous utilisons une clé API Google Maps fournie par Stripe. > En utilisant le remplissage automatique, vous acceptez de vous conformer à la [Politique d’utilisation acceptable de la plateforme Google Maps](https://cloud.google.com/maps-platform/terms/aup). Si vous enfreignez cette politique, nous pourrons désactiver le remplissage automatique ou prendre toute autre mesure nécessaire. Si vous utilisez uniquement l’Address Element, vous devez utiliser votre propre [clé API Places Library de Google Maps](https://developers.google.com/maps/documentation/javascript/places), gérée séparément de votre compte Stripe. Transmettez la clé via l’option [autocomplete.apiKey](https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options-autocomplete-apiKey). ## Remplir automatiquement avec Link [Link](https://docs.stripe.com/payments/link.md) enregistre et remplit automatiquement les informations de paiement et de livraison pour les options que vous avez activées. Par exemple, si le client Link a un numéro de téléphone enregistré, Stripe remplit automatiquement le numéro de téléphone uniquement si le recouvrement est activé. Lorsqu’un client Link récurrent s’authentifie, Stripe remplit automatiquement ses informations de livraison dans le composant Element Address. ![Créer un formulaire de paiement à l'aide de plusieurs composants Elements](https://b.stripecdn.com/docs-statics-srv/assets/link-with-elements.f60af275f69b6e6e73c766d1f9928457.png) Créer un formulaire de paiement à l’aide de plusieurs composants Elements Pour activer le remplissage automatique, créez tous les éléments à partir du même objet `Elements`, comme dans cet exemple : ```javascript const stripe = Stripe('<>'); const appearance = { /* appearance */ }; const options = { mode: 'shipping' }; const paymentElementOptions = { layout: 'accordion'}; const elements = stripe.elements({ clientSecret }); // Dans une intégration fonctionnelle, c'est une valeur que votre back-end transmet avec des détails tels que le montant d'un paiement. Pour plus de détails, consultez l'échantillon complet. const linkAuthElement = elements.create('linkAuthentication'); const addressElement = elements.create('address', options); const paymentElement = elements.create('payment', paymentElementOptions); linkAuthElement.mount('#link-auth-element'); addressElement.mount('#address-element'); paymentElement.mount('#payment-element'); ``` ## Apparence Vous pouvez utiliser l’API Appearance pour contrôler le style de tous les éléments. Choisissez un thème ou mettez à jour des informations spécifiques. ![Exemples de modes clair et sombre pour l'Address Element.](https://b.stripecdn.com/docs-statics-srv/assets/address_appearance_example.c7884ea763b05e5881d65ed2b2afadbc.png) Par exemple, choisissez le thème « flat » et remplacez la couleur principale du texte. ```javascript const stripe = Stripe('<>'); const appearance = { theme: 'flat', variables: { colorPrimaryText: '#262626' } }; const options = { /* options */ }; const elements = stripe.elements({ clientSecret, appearance }); // Dans une intégration fonctionnelle, c'est une valeur que votre back-end transmet avec des détails tels que le montant d'un paiement. Pour plus de détails, consultez l'échantillon complet. const addressElement = elements.create('address', options); addressElement.mount('#address-element'); ``` Consultez la documentation de l’API Appearance pour l’[intégration de l’API Elements with Paiement Sessions](https://docs.stripe.com/payments/checkout/customization/appearance.md?payment-ui=embedded-components) ou l’[intégration Advanced](https://docs.stripe.com/elements/appearance-api.md) pour obtenir la liste complète des thèmes et des variables.