Accéder directement au contenu
Créez un compte
ou
connecter-vous
Logo de la documentation Stripe
/
Demander à l'assistant IA
Créez un compte
Connectez-vous
Démarrer
Paiements
Revenus
Plateformes et places de marché
Gestion de fonds
Ressources pour les développeurs
API et SDKAide
Aperçu
À propos des paiements Stripe
Mettre votre intégration à niveau
Analyses des paiements
Paiements en ligne
PrésentationTrouver votre cas d'usageUtiliser Managed Payments
Utiliser Payment Links
Utiliser une page de paiement préconfiguré
Créer une intégration personnalisée avec Elements
    Présentation
    Comparer Checkout Sessions et PaymentIntents
    Guides QuickStart
    Concevoir une intégration avancée
    Personnaliser l'apparence
    Gérer les moyens de paiement
    Collecter des informations supplémentaires
      Collecter les adresses physiques et les numéros de téléphone
      Personnaliser la collecte des données de facturation
      Facturer la livraison
    Créer une intégration pour les abonnements
    Mises à jour dynamiques
    Ajouter des réductions
    Percevoir les taxes sur vos paiements
    Utiliser des crédits
    Offrir aux clients la possibilité de payer dans leur devise locale
    Enregistrer et récupérer les moyens de paiement des clients
    Envoyer des reçus ou factures après paiement
    Approuver manuellement les paiements sur votre serveur
    Autoriser et capturer un paiement séparément
    Liste des modifications de la version bêta d'Elements avec l'API Checkout Sessions
Développer une intégration dans l'application
Moyens de paiement
Ajouter des moyens de paiement
Gérer les moyens de paiement
Paiement accéléré avec Link
Interfaces de paiement
Payment Links
Checkout
Elements pour le web
Paiements dans l'application
Scénarios de paiement
Gérer plusieurs devises
Tunnels de paiement personnalisés
Acquisition flexible
Orchestration
Paiements par TPE
Terminal
Au-delà des paiements
Constituez votre entreprise
Cryptomonnaies
Commerce agentique
Financial Connections
Climate
Comprendre la fraude
Radar pour la protection contre la fraude
Gestion des litiges
Vérifier l'identité
États-Unis
Français (France)
AccueilPaiementsBuild a custom integration with ElementsCollect additional information

Collecter les adresses physiques et les numéros de téléphone

Comment collecter des adresses et des numéros de téléphone dans le cadre de tunnels de paiement ponctuels

Pour collecter des adresses de facturation ou de livraison complètes, utilisez l’Address Element. Il se peut que vous ayez besoin de collecter une adresse de facturation complète pour procéder au calcul des taxes, par exemple. Le Payment Element recueille uniquement les informations de l’adresse de facturation requises pour finaliser le paiement, mais vous pouvez le configurer pour collecter d’autres informations de facturation.

Autres raisons d’utiliser l’Address Element :

  • Pour collecter les numéros de téléphone des clients
  • Pour activer l’autocomplétion
  • Pour préremplir les informations de facturation dans le Payment Element en transmettant une adresse de livraison

Stripe combine les informations collectées sur l’adresse et le moyen de paiement pour créer un PaymentIntent.

Thème
Taille
Pays du client

Configurer Stripe
Côté serveur

Tout d’abord, créez un compte Stripe ou connectez-vous.

Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre application :

Recueillir l'adresse
Côté client

Vous pouvez à présent recueillir l’adresse du client à l’aide du composant Address Element.

Configurer Stripe.js

Le composant Address Element est automatiquement disponible en tant que fonctionnalité de Stripe.js. Incluez le script Stripe.js sur votre page de paiement en l’ajoutant dans la balise head de votre fichier HTML. Chargez toujours Stripe.js directement depuis js.stripe.com pour rester conforme à la norme PCI. N’incluez pas le script dans un lot, n’en hébergez pas non plus une copie.

Créer une instance Stripe

Créez une instance de Stripe sur votre page de paiement :

Ajouter le composant Address Element à votre page

Le composant Address Element doit avoir un emplacement dédié sur votre page. Créez un nœud DOM (conteneur) vide avec un identifiant unique dans votre formulaire.

Après le chargement de ce formulaire, créez une instance du composant Address Element, spécifiez le mode d’adresse, et montez-le sur le nœud DOM du conteneur.

Si vous avez déjà créé une instance Elements , vous pouvez l’utiliser pour créer le composant Address Element. Sinon, créez d’abord une nouvelle instance Elements .

Récupérer les informations de l'adresse
Côté client

Vous pouvez récupérer les détails de l’adresse en écoutant l’événement change L’événement change se déclenche chaque fois que votre client met à jour un champ dans l’Element.

Vous pouvez également utiliser getValue.

Dans un tunnel de paiement d’une seule page avec lePayment Element, le composant Payment Element transmet automatiquement les informations de livraison ou de facturation lorsque vous %{glossary term=“intent-confirmation-generic”} confirmez(%{/glossary}) le PaymentIntent ou le SetupIntent.

Dans un tunnel de paiement multipage, vous pouvez mettre à jour manuellement le PaymentIntent ou l’objet Customer avec les détails d’adresse reçus de l’événement change ou de la méthode getValue, avant de passer à l’étape suivante.

Configurer l’Address Element
Côté client

Vous pouvez configurer le composant Address Element en fonction de vos besoins.

Saisie automatique

Le composant Address Element dispose d’une fonctionnalité intégrée de saisie automatique d’adresse qui utilise la Bibliothèque Places de l’API Google Maps Par défaut, la saisie automatique est activée avec une clé API Google Maps fournie par Stripe, si l’une des conditions suivantes est remplie :

  • Dans un tunnel de paiement d’une seule page où lePayment Element est monté dans le même groupe d’Elements que le composant Address Element.
  • Dans un tunnel de paiement qui utilise le composant Address Element dans une session active Link.

Pour activer la saisie automatique dans l’Address Element pour les autres scénarios, vous pouvez utiliser l’option autocomplete avec le mode défini sur google_maps_api. Définissez la clé apiKey comme étant votre propre clé API Google Maps configurée pour autoriser l’utilisation de l’API Places Votre clé API Google Maps n’est utilisée que lorsque la clé API Google Maps fournie par Stripe n’est pas disponible.

Remarque

Si vous avez déployé un CSP et que vous souhaitez activer la saisie automatique avec votre propre clé d’API Google Maps, incluez https://maps.googleapis.comcomme directive connect-src 6 et script-src 8. Consultez la documentation officielle de l’API Google Maps pour connaître les exigences les plus récentes en matière de CSP.

Pré-remplir le formulaire d’adresse

Le composant Address Element accepte defaultValues , ce qui vous permet de pré-remplir le formulaire d’adresse au chargement de la page. Un Address Element dont toutes les valeurs sont pré-remplies ressemble à ceci :

Autres options

Reportez-vous à Stripe.js pour obtenir la liste complète des options en détail.

Valider les informations de l’adresse
Côté client

Stripe propose plusieurs moyens de valider l’exhaustivité d’une adresse et de déclencher l’affichage d’erreurs sur tout champ d’adresse individuel incomplet. Par exemple : « Ce champ est incomplet. »

Si vous utilisez le composant Address Element avec un PaymentIntent ou un SetupIntent, utilisez stripe.confirmPayment ou stripe.confirmSetup , respectivement pour compléter l’Intent. Les éventuelles erreurs de validation apparaissent dans l’Address Element.

Pour d’autres cas d’usage, comme un tunnel de paiement multipage, utilisez getValue pour déclencher des erreurs de validation qui s’afficheront dans le composant Address Element.

FacultatifPersonnaliser l’apparence
Côté client

Après avoir ajouté l’Address Element à votre page, vous pouvez en personnaliser l’apparence pour l’adapter au reste de votre page. Pour plus d’informations, consultez la page API Appearance

Voir aussi

  • Utiliser une adresse
  • Configurer le remplissage automatique avec Link
  • Personnaliser l’apparence du formulaire
Cette page vous a-t-elle été utile ?
OuiNon
  • Besoin d'aide ? Contactez le service Support.
  • Consultez notre log des modifications.
  • Des questions ? Contactez l'équipe commerciale.
  • LLM ? Lire llms.txt.
  • Propulsé par Markdoc