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

You can collect both shipping and billing addresses by using multiple Address Elements, one of each mode, on your page.

If you need to collect both shipping and billing addresses and only want to use one Address Element, use the Address Element in Shipping mode and use the Payment Element to collect only the necessary billing address details.

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

L’Address Element permet de renseigner automatiquement des adresses pour 25 pays. Si votre client sélectionne un pays pris en charge pour son adresse, les options de saisie automatique s’affichent. Voici les pays pour lesquels la saisie automatique est prise en charge :

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.