Composant Element Contact Details

Link enregistre et renseigne automatiquement les informations de paiement et de livraison des clients. Les clients peuvent utiliser différentes sources de financement pour payer avec Link, notamment des cartes bancaires de crédit, des cartes bancaires de débit et des comptes bancaires américains. En savoir plus sur link.com.

Utilisez le composant Element Contact Details (précédemment connu sous le nom de composant Element Link Authentication) pour créer un champ unique de saisie d’e-mail permettant à la fois la collecte de l’e-mail et l’authentification Link.

Des exemples pour commencer

Pour voir le composant Element Contact Details en action, commencez par l’un de ces exemples :

Avant de commencer

Avant de commencer, vous devez enregistrer votre domaine.

Créez le composant Element Contact Details

Le code suivant crée une instance du composant Element Contact Details et l’insère dans le DOM :

// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

// Create an elements group from the Stripe instance passing in the clientSecret and enabling the loader UI.
const elements = stripe.elements({clientSecret, loader});

// Create an instance of the Contact Details Element.
const contactDetailsElement = elements.create("contactDetails");

// Mount the Elements to their corresponding DOM node
contactDetailsElement.mount("#contact-details-element");
paymentElement.mount("#payment-element");

Récupération de l’adresse e-mail

Vous pouvez récupérer l’adresse e-mail à l’aide de la propriété onChange dans le composant contactDetailsElement. Le gestionnaire onChange se déclenche dès que l’utilisateur met à jour le champ de l’adresse e-mail, ou lorsque l’adresse e-mail enregistrée d’un client est remplie automatiquement.

contactDetailsElement.on('change', (event) => {
  const email = event.value.email;
});

Renseigner automatiquement les données client

Le composant Element Contact Details accepte une adresse e-mail. Fournir l’adresse e-mail d’un client lance le flux d’authentification Link dès qu’il accède à la page de paiement à l’aide de l’option defaultValues :

// Create the Contact Details Element with the defaultValues option
const contactDetailsElement = elements.create("contactDetails", {defaultValues: {email: "foo@bar.com"}});

// Mount the Contact Details Element to its corresponding DOM node
contactDetailsElement.mount("#contact-details-element");

Si vous souhaitez préremplir des données client supplémentaires, ajoutez l’objet defaultValues.billingDetails au composant Element Payment pour préremplir le nom du client et son numéro de téléphone, ainsi que ses adresses de livraison. En préremplissant autant d’informations relatives à votre client que possible, vous simplifiez le processus de création et de réutilisation de son compte Link.

Le code ci-après montre un exemple de Payment Element dont l’ensemble des valeurs ont été renseignées automatiquement :

<PaymentElement
  options={{
    defaultValues: {
      billingDetails: {
        name: 'John Doe',
        phone: '888-888-8888',
        address: {
          postal_code: '10001',
          country: 'US',
        }
      },
    },
  }}
/>;

Combiner des composants Element

Le composant Element Contact Details interagit uniquement avec le composant Element Payment en pré-remplissant les informations de paiement pour les utilisateurs récurrents de Link. Il peut toutefois être affiché avec d’autres éléments, comme dans cet exemple qui montre l’utilisation du composant Element Contact Details avec les composants Element Contact Details, Address et Payment :

Utiliser le composant Element Contact Details avec d’autres composants Element pour composer votre page de paiement

Apparence

Vous pouvez utiliser l’API Appearance pour contrôler le style de tous les composants Elements. Choisissez un thème ou modifiez des éléments spécifiques.

Utilisez l’API Appearance pour changer l’apparence et le style de vos Elements

Dans l’exemple suivant, le thème « flat » écrase la couleur du texte appliquée par défaut aux Elements :

const stripe = Stripe(
'pk_test_oKhSR5nslBRnBZpjO6KuzZeX');

const appearance = {
  theme: 'flat'
  variables: { colorPrimaryText: '#262626' }
};