Accéder directement au contenu
Créez un compte ou connecter-vous
Logo de la documentation Stripe
/
Créez un compteConnectez-vous
AperçuMettre votre intégration à niveau
Paiements en ligne
PrésentationTrouver votre cas d'usageUtiliser Managed Payments
Créer une intégration personnalisée avec Elements
Paiements par TPE
Moyens de paiement
Scénarios de paiement
Au-delà des paiements

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 Element. Il se peut que vous ayez besoin de collecter une adresse de facturation complète pour procéder au calcul des taxes, par exemple. Le Payment Element 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 :

  • Pour collecter les numéros de téléphone des clients
  • Pour activer l’autocomplétion
  • 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.

Thème
Taille
Pays du client

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 :

Command Line
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# Available as a gem
sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# 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.

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.

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

Créez une instance Stripe et initialisez le paiement.

Créez une instance 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'
);

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.initCheckout({
    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.

checkout.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, spécifiez le mode d’adresse, et montez-le sur le nœud DOM du conteneur.

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

checkout.js
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");

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 L’événement change se déclenche chaque fois que l’utilisateur met à jour un champ dans l’Element.

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

Dans un tunnel de paiement d’une seule page avec lePayment Element, 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 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 :

  • Dans un tunnel de paiement d’une seule page où lePayment Element est monté dans le même groupe d’Elements que le composant Address Element.
  • Dans un tunnel de paiement qui utilise le composant Address Element dans une session active Link.

Pré-remplir le formulaire d’adresse

Vous pouvez utiliser les commandes updateBillingAddress ou updateShippingAddress pour pré-remplir une adresse.

actions.updateBillingAddress({
  name: 'Jenny Rosen',
  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 : « Ce champ est incomplet. »

Si vous utilisez le composant Address Element avec un PaymentIntent ou un SetupIntent, utilisez stripe.confirmPayment ou stripe.confirmSetup , 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 à plusieurs pages, vous pouvez valider les adresses en confirmant la session Checkout, qui valide automatiquement l’Address Element et affiche les éventuelles erreurs de validation.

FacultatifPersonnaliser 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

Utiliser l’Address Element avec d’autres Elements

Vous pouvez collecter les adresses de livraison et de facturation en utilisant 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 utilisez lePayment Element pour ne collecter que les informations nécessaires concernant l’adresse de facturation.

En combinant le composant Address Element à d’autres Eléments, vous pouvez automatiser certains comportements lors de la confirmation du PaymentIntent ou du SetupIntent. L’Address Element valide l’exhaustivité lors de la confirmation du PaymentIntent ou du SetupIntent, puis affiche les erreurs de chaque champ en cas de problème de validation.

Voir aussi

Cette page vous a-t-elle été utile ?
OuiNon