Écouter la saisie d'adresse

Collectez les adresses à utiliser de manière personnalisée à l'aide d'un écouteur d'événements.

Thème

Taille

Pays du client

Numéro de téléphone

Saisie automatique

Contacts

L’Address Element vous permet de recueillir les adresses de livraison ou de facturation locales et internationales de vos clients.

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 de l’Address Element.

Configurer Stripe.js

L’Address Element est automatiquement disponible en tant que fonctionnalité de Stripe.js. Incluez le script Stripe.js en l’ajoutant entre les balises head de votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour maintenir votre conformité PCI. Vous ne devez pas inclure le script dans un lot, ni en héberger de copie.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/v3/"></script>
</head>

Créer une instance Stripe

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

checkout.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

Ajouter l’Address Element à votre page

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

checkout.html
<form id="address-form">
  <h3>Address</h3>
  <div id="address-element">
    <!-- Elements will create form elements here -->
  </div>
</form>

Une fois ce formulaire chargé, créez une instance de l’Address Element, spécifiez le mode de l’adresse et intégrez-la au nœud DOM du conteneur.

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

checkout.js
const options = {
  // Fully customizable with appearance API.
  appearance: { /* ... */ }
};

// Only need to create this if no elements group exist yet.
// Create a new Elements instance if needed, passing the
// optional appearance object.
const elements = stripe.elements(options);

// Create and mount the Address Element in shipping mode
const addressElement = elements.create("address", {
  mode: "shipping",
});
addressElement.mount("#address-element");

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

Vous pouvez récupérer les informations d’adresse en écoutant l’événement change. L’événement change se déclenche dès que l’utilisateur modifie les champs du composant Element.

addressElement.on('change', (event) => {
  if (event.complete){
    // Extract potentially complete address
    const address = event.value.address;
  }
})

Vous pouvez également utiliser getValue.

checkout.js
const handleNextStep = async () => {
  const addressElement = elements.getElement('address');

  const {complete, value} = await addressElement.getValue();

  if (complete) {
    // Allow user to proceed to the next step
    // Optionally, use value to store the address details
  }
};

Dans un tunnel de paiement d’une page avec le Payment Element, l’Address Element transmet automatiquement les informations de livraison ou de facturation lorsque vous confirmez le PaymentIntent ou le SetupIntent.

Dans un tunnel de paiement multipages, vous pouvez mettre à jour manuellement le PaymentIntent ou mettre à jour l’objet Customer avec les informations d’adresse provenant 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 l’Address Element en fonction de vos besoins.

Saisie automatique

L’Address Element intègre une fonctionnalité de remplissage automatique qui utilise la bibliothèque Places de l’API Google Maps. Par défaut, le remplissage automatique est activé avec une clé API Google Maps fournie par Stripe si l’une des conditions suivantes est remplie :

Dans un flux de paiement d’une page où le Payment Element est intégré dans le même groupe d’éléments que l’Address Element.
Dans un tunnel de paiement qui utilise l’Address Element dans une session Link active.

Pour activer le remplissage automatique dans l’Address Element pour tous les autres scénarios, vous pouvez utiliser l’option autocomplete avec le paramètre mode défini sur google_maps_api. Définissez le paramètre apiKey sur votre propre clé API Google Maps, configurée pour autoriser l’utilisation de l’API Places. Votre clé API Google Maps est uniquement utilisée 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 le remplissage automatique avec votre propre clé API Google Maps, incluez https://maps.googleapis.com en tant que directive connect-src et script-src. Reportez-vous au guide officiel de l’API Google Maps pour connaître les dernières exigences en matière de CSP.

const addressElement = elements.create("address", {
  mode: "shipping",
  autocomplete: {
    mode: "google_maps_api",
    apiKey: "{YOUR_GOOGLE_MAPS_API_KEY}",
  },
});

Remplissage automatique du formulaire d’adresse

Le composant Address Element accepte un attribut defaultValues qui vous permet de remplir automatiquement le formulaire d’adresse lors du chargement de la page. Un composant Address Element dont toutes les valeurs ont été automatiquement remplies ressemblera à ceci :

const addressElement = elements.create("address", {
  mode: "shipping",
  defaultValues: {
    name: 'Jane Doe',
    address: {
      line1: '354 Oyster Point Blvd',
      line2: '',
      city: 'South San Francisco',
      state: 'CA',
      postal_code: '94080',
      country: 'US',
    },
  },
});

Autres options

Reportez-vous à Stripe.js pour consulter la liste complète des options dans le détail.

// Sample of a options object
const addressElement = elements.create("address", {
  mode: 'shipping',
  allowedCountries: ['US'],
  blockPoBox: true,
  fields: {
    phone: 'always',
  },
  validation: {
    phone: {
      required: 'never',
    },
  },
});

Valider l'adresse
Côté client

Stripe propose différentes méthodes pour valider l’exhaustivité d’une adresse et déclencher des erreurs telles que « Ce champ est incomplet.°» à afficher dans tous les champs d’adresse individuels incomplets.

Si vous utilisez le composant Address Element avec un Payment Intent ou un Setup Intent, utilisez stripe.confirmPayment ou stripe.confirmSetup respectivement pour finaliser l’intention. Les erreurs de validation apparaîtront alors dans le composant Address Element, le cas échéant.

Pour les autres cas d’usage tels que les tunnels de paiement multipages, utilisez getValue pour déclencher les erreurs de validation à afficher dans le composant Address Element.

Écouter la saisie d'adresse

Collectez les adresses à utiliser de manière personnalisée à l'aide d'un écouteur d'événements.

Configurer StripeCôté serveur

Recueillir l'adresseCôté client

Configurer Stripe.js

Créer une instance Stripe

Ajouter l’Address Element à votre page

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

Configurer l'Address ElementCôté client

Saisie automatique

Remarque

Remplissage automatique du formulaire d’adresse

Autres options

Valider l'adresseCôté client

FacultatifPersonnalisez l'apparenceCôté client

Configurer Stripe
Côté serveur

Recueillir l'adresse
Côté client

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

Configurer l'Address Element
Côté client

Valider l'adresse
Côté client

FacultatifPersonnalisez l'apparence
Côté client