Element Link Authentication

Link enregistre et préremplit automatiquement les informations de paiement et de livraison des clients. Ils peuvent utiliser différentes sources de financement pour payer avec Link, notamment des cartes de crédit, des cartes de débit et des comptes bancaires étasuniens. Pour en savoir plus, rendez-vous sur link.com.

Utilisez le Link Authentication Element pour créer un seul champ de saisie de l’adresse e-mail pour la collecte de l’adresse e-mail et pour l’authentification Link.

Des exemples pour commencer

Pour voir le Link Authentication Element en action, commencez par l’un de ces exemples :

Avant de commencer

Avant de commencer, vous devez enregistrer votre domaine.

Créer le Link Authentication Element

Le code suivant crée une instance de Link Authentication Element et le monte sur 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 Link Authentication Element.
const linkAuthenticationElement = elements.create("linkAuthentication");

// Mount the Elements to their corresponding DOM node
linkAuthenticationElement.mount("#link-authentication-element");
paymentElement.mount("#payment-element");

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

Vous pouvez récupérer l’adresse e-mail de votre client à l’aide de la propriété onChange dans le composant linkAuthenticationElement. 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 préremplie.

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

Renseigner automatiquement les données client

Le Link Authentication Element accepte une adresse e-mail. Le fait de fournir l’adresse e-mail d’un client déclenche le flux d’authentification Link dès que le client accède à la page de paiement à l’aide de l’option defaultValues :

// Create the Link Authentication Element with the defaultValues option
const linkAuthenticationElement = elements.create("linkAuthentication", {defaultValues: {email: "foo@bar.com"}});

// Mount the Link Authentication Element to its corresponding DOM node
linkAuthenticationElement.mount("#link-authentication-element");

Si vous souhaitez préremplir plus de données relatives à votre client, ajoutez l’objet defaultValues.billingDetails au Payment Element. Ainsi, le nom du client, son numéro de téléphone et ses adresses de livraison seront renseignés automatiquement. Pour simplifier le processus de création et de réutilisation de son compte Link, préremplissez autant d’informations relatives à votre client que possible.

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 Elements

Le Link Authentication Element interagit uniquement avec le Payment Element 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 Link Authentication Element avec l’Address Element et le Payment Element :

Utiliser le composant Element Link Authentication 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 éléments. Choisissez un thème ou modifiez certains détails 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_TYooMQauvdEDq54NiTphI7jx');

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