Checkout

# 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&nbsp;Element](https://docs.stripe.com/elements/address-element.md). Il se peut que vous ayez besoin de [collecter une adresse de facturation complète pour procéder au calcul des taxes](https://docs.stripe.com/tax/custom.md#collect-address), par exemple. Le [Payment&nbsp;Element](https://docs.stripe.com/payments/payment-element.md) 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&nbsp;:

- Pour collecter les [numéros de téléphone](https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options-fields-phone) des clients
- Pour activer l’[autocomplétion](https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options-autocomplete)
- 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* (API object that represents your intent to collect payment from a customer, tracking charge attempts and payment state changes throughout the process).

# API Checkout Sessions

> This is a API Checkout Sessions for when payment-ui is embedded-components. View the full page at https://docs.stripe.com/payments/advanced/collect-addresses?payment-ui=embedded-components.

## Configurer Stripe [Côté serveur]

Tout d’abord, [créez un compte Stripe](https://dashboard.stripe.com/register) ou [connectez-vous](https://dashboard.stripe.com/login).

Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre application&nbsp;:

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

## Recueillir l'adresse [Côté client]

Vous pouvez à présent recueillir l’adresse du client à l’aide du composant Address Element.

#### HTML + JS

### Configurer Stripe.js

Le composant Address Element est automatiquement disponible en tant que fonctionnalité de Stripe.js. Incluez le script Stripe.js sur votre page de paiement en l’ajoutant dans la balise `head` de votre fichier HTML. Chargez toujours Stripe.js directement depuis js.stripe.com pour rester conforme à la norme PCI. N’incluez pas le script dans un lot, n’en hébergez pas non plus une copie.

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

### Créez une instance Stripe et initialisez le paiement.

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

```javascript
// 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('<<YOUR_PUBLISHABLE_KEY>>');

let checkout;
initialize();
async function initialize() {
  const promise = fetch("/create-checkout-session", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
  })
    .then((r) => r.json())
    .then((r) => r.clientSecret);

  const appearance = {
    theme: 'stripe',
  };
  checkout = stripe.initCheckoutElementsSdk({
    clientSecret: promise,
    elementsOptions: { appearance },
  });
}
```

### Ajouter le composant Address Element à votre page

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

```html
<form id="address-form">
  <h4>Billing Address</h4>
  <div id="billing-address-element">
    <!--Stripe.js injects the Address Element-->
  </div>
  <h4>Shipping Address</h4>
  <div id="shipping-address-element">
    <!--Stripe.js injects the Address Element-->
  </div>
</form>
```

Après le chargement de ce formulaire, créez une instance du composant Address Element pour collecter une adresse de [facturation](https://docs.stripe.com/js/custom_checkout/create_billing_address_element) ou de [livraison](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element), et montez-le sur le nœud DOM du conteneur.

Si vous avez déjà créé une instance [Checkout](https://docs.stripe.com/js/custom_checkout/init), vous pouvez l’utiliser pour créer le composant Address Element. Sinon, créez d’abord une nouvelle instance [Checkout](https://docs.stripe.com/js/custom_checkout/init).

```javascript
const options = {
  // Fully customizable with the Appearance API.
  appearance: { /* ... */ }
};
const billingAddressElement = checkout.createBillingAddressElement();
billingAddressElement.mount("#billing-address-element");
const shippingAddressElement = checkout.createShippingAddressElement();
shippingAddressElement.mount("#shipping-address-element");
```

#### React

### Configurer Stripe.js

Installez [ React-Stripe.js ](https://www.npmjs.com/package/@stripe/react-stripe-js) et le [ Stripe.js loader ](https://www.npmjs.com/package/@stripe/stripe-js) à partir du registre public npm.

```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```

### Ajoutez et configurez le CheckoutElementsProvider sur votre page.

Pour utiliser le composant Address Element, encapsulez votre page de paiement dans un [CheckoutElementsProvider](https://docs.stripe.com/sdks/stripejs-react.md?ui=embedded-components#checkout-provider). Appelez `loadStripe` avec votre clé publiable. Transmettez la `Promise` renvoyée au `CheckoutElementsProvider`.

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {CheckoutElementsProvider} from '@stripe/react-stripe-js/checkout';
import {loadStripe} from '@stripe/stripe-js';

import AddressForm from './AddressForm';

// Make sure to call `loadStripe` outside of a component's render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('<<YOUR_PUBLISHABLE_KEY>>');

function App() {
  const promise = useMemo(() => {
    return fetch('/create-checkout-session', {
      method: 'POST',
    })
      .then((res) => res.json())
      .then((data) => data.clientSecret);
  }, []);

  const appearance = {
    // Fully customizable with appearance API.
  };

  return (
    <CheckoutElementsProvider
      stripe={stripePromise}
      options={{
        fetchClientSecret: () => promise,
        elementsOptions: {appearance},
      }}
    >
      <AddressForm />
    </CheckoutElementsProvider>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
```

### Ajouter les composants Address Element

Utilisez les composants `BillingAddressElement` ou `ShippingAddressElement` pour créer votre formulaire.

#### Billing

```jsx
import React from 'react';
import {BillingAddressElement} from '@stripe/react-stripe-js/checkout';

const AddressForm = () => {
  return (
    <form>
      <h3>Billing</h3><BillingAddressElement />
    </form>
  );
};

export default AddressForm;
```

#### Livraison

```jsx
import React from 'react';
import {ShippingAddressElement} from '@stripe/react-stripe-js/checkout';

const AddressForm = () => {
  return (
    <form>
      <h3>Shipping</h3><ShippingAddressElement />
    </form>
  );
};

export default AddressForm;
```

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

Vous pouvez récupérer les informations de l’adresse en écoutant l’événement [change ](https://docs.stripe.com/js/custom_checkout/events) L’événement `change` se déclenche chaque fois que l’utilisateur met à jour un champ dans le composant Element.

#### HTML + JS

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

#### React

```jsx
<BillingAddressElement onChange={(event) => {
  if (event.complete) {
    // Extract potentially complete address
    const address = event.value.address;
  }
}} />
```

Dans un tunnel de paiement d’une seule page avec le[Payment Element](https://docs.stripe.com/payments/payment-element.md), le composant Address Element transmet automatiquement les informations de livraison ou de facturation lorsque vous %{glossary term=“intent-confirmation-generic”} confirmez(%{/glossary}) la session Checkout.

## Configurer l’Address Element [Côté client]

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](https://developers.google.com/maps/documentation/javascript/places) 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&nbsp;:

- Dans un tunnel de paiement d’une seule page où le[Payment Element](https://docs.stripe.com/payments/payment-element.md) est monté dans le même groupe d’Elements que le composant Address Element.
- Dans un tunnel de paiement qui utilise le composant Element Address dans une session [Link](https://docs.stripe.com/payments/link.md) active.

### Pré-remplir le formulaire d’adresse

Vous pouvez utiliser les commandes [updateBillingAddress](https://docs.stripe.com/js/custom_checkout/update_billing_address) ou [updateShippingAddress](https://docs.stripe.com/js/custom_checkout/update_shipping_address) pour pré-remplir une adresse.

#### HTML + JS

```javascript
actions.updateBillingAddress({
  name: 'Jenny Rosen',
  address: {
    line1: '27 Fredrick Ave',
    city: 'Brothers',
    state: 'OR',
    postal_code: '97712',
    country: 'US',
  }
});
```

#### React

```jsx
const {updateBillingAddress} = useCheckout();
updateBillingAddress({
  address: {
    line1: '27 Fredrick Ave',
    city: 'Brothers',
    state: 'OR',
    postal_code: '97712',
    country: 'US',
  }
});
```

## Valider les informations de l’adresse [Côté client]

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&nbsp;: «&nbsp;Ce champ est incomplet.&nbsp;»

Vous pouvez valider les adresses en confirmant la Checkout Session, qui valide automatiquement l’Address Element et affiche les éventuelles erreurs de validation.

## Optional: Personnaliser l’apparence [Côté client]

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 ](https://docs.stripe.com/elements/appearance-api.md)
![](https://b.stripecdn.com/docs-statics-srv/assets/appearance_example.e076cc750983bf552baf26c305e7fc90.png)

### Utiliser l’Address Element avec d’autres Elements

Vous pouvez collecter les adresses de livraison et de facturation en utilisant plusieurs Address&nbsp;Elements sur votre page.

Si vous devez collecter à la fois l’adresse de livraison et de facturation et que vous ne souhaitez utiliser qu’un seul composant Address Element, utilisez l’Address Element de la livraison et le composant [Payment Element](https://docs.stripe.com/payments/payment-element.md), qui ne collecte que les informations nécessaires concernant l’adresse de facturation.

En combinant le composant Element Address à d’autres Elements, certains comportements sont automatisés lors de la confirmation de la Checkout Session. L’Address Element valide l’exhaustivité lors de la Checkout Session, puis affiche les erreurs de chaque champ en cas de problème lors de la validation.

### Synchroniser les adresses de facturation et de livraison

Lorsque vous utilisez à la fois un composant Element Billing Address et un composant Element Shipping Address, vous pouvez afficher une case à cocher qui permet aux clients de synchroniser leurs adresses de facturation et de livraison.

#### HTML + JS

Transmettez l’option [syncAddressCheckbox](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-syncAddressCheckbox) dans `elementsOptions` lors de l’initialisation du paiement pour configurer le composant Element Address qui affiche la case à cocher.

```javascript
const checkout = stripe.initCheckoutElementsSdk({
  clientSecret,
  elementsOptions: {
    syncAddressCheckbox: 'shipping',
  },
});
```

#### React

Transmettez l’option [syncAddressCheckbox](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-syncAddressCheckbox) dans `elementsOptions` au `CheckoutElementsProvider` afin de configurer quel Address Element affiche la case à cocher.

```jsx
<CheckoutElementsProvider
  stripe={stripePromise}
  options={{
    fetchClientSecret: () => promise,
    elementsOptions: {
      syncAddressCheckbox: 'shipping',
    },
  }}
>
  <CheckoutForm />
</CheckoutElementsProvider>
```

Définissez la valeur sur `’billing’` ou `’shipping’` pour choisir quel élément d’adresse affiche la case à cocher. Définissez-la sur `’none’` pour masquer la case à cocher, ou laissez le champ vide pour utiliser la valeur par défaut (`’billing’`).

## See also

- [Utiliser une adresse](https://docs.stripe.com/elements/address-element.md?platform=web#use-an-address)
- [Configurer le remplissage automatique avec Link](https://docs.stripe.com/elements/address-element.md?platform=web#autofill-with-link-brand-name)
- [Personnaliser l’apparence du formulaire](https://docs.stripe.com/elements/address-element.md?platform=web#appearance)


# API Payment Intents

> This is a API Payment Intents for when payment-ui is elements. View the full page at https://docs.stripe.com/payments/advanced/collect-addresses?payment-ui=elements.

## Configurer Stripe [Côté serveur]

Tout d’abord, [créez un compte Stripe](https://dashboard.stripe.com/register) ou [connectez-vous](https://dashboard.stripe.com/login).

Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre application&nbsp;:

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

## Recueillir l'adresse [Côté client]

Vous pouvez à présent recueillir l’adresse du client à l’aide du composant Address Element.

#### HTML + JS

### Configurer Stripe.js

Le composant Address Element est automatiquement disponible en tant que fonctionnalité de Stripe.js. Incluez le script Stripe.js sur votre page de paiement en l’ajoutant dans la balise `head` de votre fichier HTML. Chargez toujours Stripe.js directement depuis js.stripe.com pour rester conforme à la norme PCI. N’incluez pas le script dans un lot, n’en hébergez pas non plus une copie.

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

### Créer une instance Stripe

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

```javascript
// 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('<<YOUR_PUBLISHABLE_KEY>>');
```

### Ajouter le composant Address Element à votre page

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

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

Après le chargement de ce formulaire, créez une instance du composant Address Element, spécifiez le [mode ](https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options-mode) d’adresse, et montez-le sur le nœud DOM du conteneur.

Si vous avez déjà créé une instance [ Elements ](https://docs.stripe.com/js/elements_object/create), vous pouvez l’utiliser pour créer le composant Address Element. Sinon, créez d’abord une nouvelle instance [ Elements ](https://docs.stripe.com/js/elements_object/create).

#### Livraison

```javascript
const options = {
  // Fully customizable with the 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");
```

#### Billing

```javascript
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 billing mode
const addressElement = elements.create("address", {
  mode: "billing",
});
addressElement.mount("#address-element");
```

#### React

### Configurer Stripe.js

Installez [ React-Stripe.js ](https://www.npmjs.com/package/@stripe/react-stripe-js) et le [ Stripe.js loader ](https://www.npmjs.com/package/@stripe/stripe-js) à partir du registre public npm.

```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```

### Ajouter le fournisseur d’Elements à votre page et le configurer

Pour utiliser le composant Address Element, intégrez votre élément de page dans un [fournisseur d’Elements ](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider)Appelez&nbsp;`loadStripe` avec votre clé publiable. Transmettez la `Promise` au fournisseur de composants `Elements`.

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

import AddressForm from './AddressForm';

// Make sure to call `loadStripe` outside of a component's render to avoid
// recreating the `Stripe` object on every render.
const stripe = loadStripe('<<YOUR_PUBLISHABLE_KEY>>');

function App() {
  const options = {
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

  return (
    <Elements stripe={stripe} options={options}>
      <AddressForm />
    </Elements>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
```

### Ajouter l’Address Element

Utilisez le composant `AddressElement` pour créer votre formulaire.

#### Livraison

```jsx
import React from 'react';
import {AddressElement} from '@stripe/react-stripe-js';

const AddressForm = () => {
  return (
    <form>
      <h3>Shipping</h3><AddressElement options={{mode: 'shipping'}} />
    </form>
  );
};

export default AddressForm;
```

#### Billing

```jsx
import React from 'react';
import {AddressElement} from '@stripe/react-stripe-js';

const AddressForm = () => {
  return (
    <form>
      <h3>Billing</h3><AddressElement options={{mode: 'billing'}} />
    </form>
  );
};

export default AddressForm;
```

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

Vous pouvez récupérer les détails de l’adresse en écoutant l’événement [change ](https://docs.stripe.com/js/element/events/on_change?type=addressElement) L’événement `change` se déclenche chaque fois que votre client met à jour un champ dans l’Element.

#### HTML + JS

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

#### React

```jsx
<AddressElement onChange={(event) => {
  if (event.complete) {
    // Extract potentially complete address
    const address = event.value.address;
  }
}} />
```

Vous pouvez également utiliser [getValue](https://docs.stripe.com/js/elements_object/get_value_address_element).

```javascript
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 seule page avec le[Payment Element](https://docs.stripe.com/payments/payment-element.md), 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 la [PaymentIntent ](https://docs.stripe.com/api/payment_intents/update.md) ou l’[objet Customer ](https://docs.stripe.com/api/customers/update.md) 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.

## Configurer l’Address Element [Côté client]

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](https://developers.google.com/maps/documentation/javascript/places) 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&nbsp;:

- Dans un tunnel de paiement d’une seule page où le[Payment Element](https://docs.stripe.com/payments/payment-element.md) est monté dans le même groupe d’Elements que le composant Address Element.
- Dans un tunnel de paiement qui utilise le composant Element Address dans une session [Link](https://docs.stripe.com/payments/link.md) active.

Pour activer la saisie automatique dans l’Address Element pour les autres scénarios, vous pouvez utiliser l’option [autocomplete ](https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options-autocomplete) avec le `mode` défini sur `google_maps_api`. Définissez la clé `apiKey` comme étant votre propre [Clé Google Maps API](https://developers.google.com/maps/documentation/javascript/get-api-key#create-api-keys) configurée pour autoriser l’utilisation de l’[API Places](https://developers.google.com/maps/documentation/javascript/places#add-places-api-to-the-api-keys-api-restrictions-list) Votre clé API Google Maps n’est utilisée que lorsque la clé API Google Maps fournie par Stripe n’est pas disponible.

> Si vous avez déployé un [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) et que vous souhaitez activer la saisie automatique avec votre propre clé d’API Google Maps, incluez `https://maps.googleapis.com` en tant que directive `connect-src 6` et `script-src 8`. Consultez la [documentation officielle de l’API Google Maps ](https://developers.google.com/maps/documentation/javascript/content-security-policy) pour connaître les exigences les plus récentes en matière de CSP.

#### HTML + JS

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

#### React

```jsx
<AddressElement options={{
  mode: "shipping",autocomplete: {
    mode: "google_maps_api",
    apiKey: "{YOUR_GOOGLE_MAPS_API_KEY}",
  },
}} />
```

### Pré-remplir le formulaire d’adresse

Le composant Address Element accepte [ defaultValues ](https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options-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&nbsp;:

#### HTML + JS

```javascript
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',
    },
  }
});
```

#### React

```jsx
<AddressElement options={{
  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 ](https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options) pour obtenir la liste complète des options en détail.

#### HTML + JS

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

#### React

```jsx
// Sample of a options object
<AddressElement options={{
  mode: 'shipping',
  allowedCountries: ['US'],
  blockPoBox: true,
  fields: {
    phone: 'always',
  },
  validation: {
    phone: {
      required: 'never',
    },
  },
}} />
```

## Valider les informations de l’adresse [Côté client]

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&nbsp;: «&nbsp;Ce champ est incomplet.&nbsp;»

Si vous utilisez le composant Address Element avec un PaymentIntent ou un SetupIntent, utilisez [ stripe.confirmPayment ](https://docs.stripe.com/js/payment_intents/confirm_payment) ou [ stripe.confirmSetup ](https://docs.stripe.com/js/setup_intents/confirm_setup), 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 ](https://docs.stripe.com/js/elements_object/get_value_address_element) pour déclencher des erreurs de validation qui s’afficheront dans le composant Address Element.

## Optional: Personnaliser l’apparence [Côté client]

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 ](https://docs.stripe.com/elements/appearance-api.md)
![](https://b.stripecdn.com/docs-statics-srv/assets/appearance_example.e076cc750983bf552baf26c305e7fc90.png)

## See also

- [Utiliser une adresse](https://docs.stripe.com/elements/address-element.md?platform=web#use-an-address)
- [Configurer le remplissage automatique avec Link](https://docs.stripe.com/elements/address-element.md?platform=web#autofill-with-link-brand-name)
- [Personnaliser l’apparence du formulaire](https://docs.stripe.com/elements/address-element.md?platform=web#appearance)