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.
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 :
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.
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_
. 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.
comme 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.
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.
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
