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 :
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
L’Element Link Authentication 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 :
Combiner des Elements
Le Link Authentication Element interagit avec d’autres éléments. Par exemple, l’exemple suivant 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(
); const appearance = { theme: 'flat' variables: { colorPrimaryText: '#262626' } };'pk_test_TYooMQauvdEDq54NiTphI7jx'