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.
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.
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);
const appearance = { };
const options = { mode: 'shipping' };
const elements = stripe.elements({ , appearance });
const addressElement = elements.create('address', options);
addressElement.mount('#address-element');
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.
En mode livraison, l’adresse est enregistrée dans les champs suivants :
- Il apparaît dans le champ Livraison.
- Si le client indique qu’il s’agit également de l’adresse de facturation, celle-ci apparaît également dans le champ billing_details.
Pour permettre la combinaison des informations, créez tous les éléments à partir du même objet Elements
, comme dans cet exemple :
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);
const appearance = { };
const options = { mode: 'shipping' };
const elements = stripe.elements({ });
const addressElement = elements.create('address', options);
const paymentElement = elements.create('payment');
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 utilisez l’Address Element et le Payment Element ensemble, Stripe active la saisie automatique sans aucune configuration requise.
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 renseigne automatiquement les données de paiement et les informations de livraison. Lorsqu’un client Link s’authentifie, Stripe renseigne automatiquement ses informations de livraison dans l’Address Element.
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 = { };
const options = { mode: 'shipping' };
const elements = stripe.elements({ });
const linkAuthElement = elements.create('linkAuthentication');
const addressElement = elements.create('address', options);
const paymentElement = elements.create('payment');
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.
Consultez la documentation de l’API Appearance pour obtenir la liste complète des thèmes et des variables.