Address Element

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.

Des exemples pour commencer

Pour voir l’Address Element en action, commencez par l’un de ces exemples :

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.

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = { /* appearance */ };
const options = { mode: 'shipping' };
const elements = stripe.elements({ 
clientSecret, appearance });
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 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 et Express Checkout. Lorsqu’un client fournit une adresse et un moyen de paiement, Stripe les combine en un seul PaymentIntent 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.

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = { /* appearance */ };
const options = { mode: 'shipping' };
const paymentElementOptions = { layout: 'accordion'};
const elements = stripe.elements({ 
clientSecret
 });
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 de l’Address Element est suffisant. Mais dans un flux de paiement complexe, vous devrez peut-être écrire des réponses personnalisées à la saisie du client. Pour plus d’informations, voir Écouter la saisie de l’adresse.

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 :

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.

Si vous utilisez uniquement l’Address Element, vous devez utiliser votre propre clé API Places Library de Google Maps, gérée séparément de votre compte Stripe. Transmettez la clé via l’option autocomplete.apiKey.

Remplir automatiquement avec Link

Link 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 dispose d’un numéro de téléphone enregistré, Stripe ne le remplit automatiquement que si la collecte de numéros de téléphone est activée. Lorsqu’un ancien client Link s’authentifie, Stripe remplit automatiquement ses informations de livraison dans l’élément Adresse.

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 :

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = { /* appearance */ };
const options = { mode: 'shipping' };
const paymentElementOptions = { layout: 'accordion'};
const elements = stripe.elements({ 
clientSecret
 });
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.

Par exemple, choisissez le thème « flat » et remplacez la couleur principale du texte.

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = {
  theme: 'flat',
  variables: { colorPrimaryText: '#262626' }
};

Consultez la documentation relative à l’API Appearance pour obtenir la liste complète des thèmes et des variables.