# Créer une page de paiement personnalisée incluant Link
Intégrer Link à l'aide du Payment Element ou du Link Authentication Element.
Ce guide vous explique comment accepter des paiements avec [Link](https://docs.stripe.com/payments/link.md) à l’aide de l’[API Payment Intents](https://docs.stripe.com/api/payment_intents.md) et soit du [composant Element Payment](https://docs.stripe.com/payments/payment-element.md), soit du composant Element[Link Authentication](https://docs.stripe.com/payments/elements/link-authentication-element.md).
Il existe trois manières d’obtenir l’adresse e-mail d’un client pour l’authentification ou l’inscription Link :
- **Transmettre une adresse e-mail :** vous pouvez transmettre une adresse e-mail au composant Payment Element à l’aide de [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues). Cette méthode est recommandée si vous recueillez déjà l’adresse e-mail ou le numéro de téléphone du client dans le tunnel de paiement.
- **Collecter une adresse e-mail :** vous pouvez collecter une adresse e-mail directement dans le composant Payment Element. Cette méthode est recommandée si vous ne recueillez d’adresse e-mail à aucune étape du tunnel de paiement.
- **Composant Element Link Authentication :** vous pouvez utiliser le composant Element Link Authentication pour créer un champ de saisie d’adresse e-mail unique pour la collecte de l’adresse e-mail et pour l’authentification Link. Nous recommandons cette méthode si vous utilisez le [composant Element Address](https://docs.stripe.com/elements/address-element.md).
Collecter l’adresse e-mail du client pour l’authentification ou l’inscription Link
## 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 :
#### 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'
```
## Créer un PaymentIntent [Côté serveur]
Pour représenter votre intention d’encaisser le paiement d’un client, Stripe utilise un objet [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) qui suit vos tentatives de débit et les changements d’état du paiement tout au long du processus.
Si vous collectez des informations de carte en vue d’une [utilisation ultérieure avec Setup Intents](https://docs.stripe.com/payments/save-and-reuse.md), répertoriez les moyens de paiement manuellement au lieu d’utiliser des moyens de paiement dynamiques. Pour utiliser Link sans moyens de paiement dynamiques, mettez à jour votre intégration pour transmettre le`lien` au `payment_method_types`.
Lorsque vous créez un PaymentIntent, [proposez dynamiquement à vos clients les moyens de paiement les plus pertinents](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md), y compris Link, en utilisant des moyens de paiement dynamiques. Pour utiliser des moyens de paiement dynamiques, n’incluez pas le paramètre `payment_method_types`. Vous pouvez également activer `automatic_payment_methods`.
> Lorsque votre intégration ne définit pas le paramètre `payment_method_types`, certains moyens de paiement sont activés automatiquement, notamment les cartes et les portefeuilles.
Pour ajouter Link à votre intégration d’éléments en utilisant des moyens de paiement dynamiques :
1. Dans les [paramètres moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) de votre Dashboard, activez Link.
1. Si vous disposez d’une intégration existante qui répertorie manuellement les moyens de paiement, supprimez le paramètre [payment_method_types](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_types) de votre intégration.
### Récupérer la clé secrète du client
Le PaymentIntent contient une *clé secrète* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) à utiliser côté client pour finaliser le processus de paiement en toute sécurité. Vous pouvez adopter différentes approches pour transmettre cette clé secrète côté client.
#### Application monopage
Récupérez la clé secrète du client à partir d’un endpoint sur votre serveur, à l’aide de la fonction `fetch` du navigateur. Cette approche est recommandée si votre côté client est une application d’une seule page, en particulier si elle repose sur un framework front-end moderne tel que React. Créez l’endpoint de serveur qui gère la clé secrète du client :
#### Ruby
```ruby
get '/secret' do
intent = # ... Create or retrieve the PaymentIntent
{client_secret: intent.client_secret}.to_json
end
```
Récupérez ensuite la clé secrète du client à l’aide JavaScript côté client :
```javascript
(async () => {
const response = await fetch('/secret');
const {client_secret: clientSecret} = await response.json();
// Render the form using the clientSecret
})();
```
#### Rendu côté serveur
Transmettez la clé secrète à votre client depuis votre serveur. Cette approche fonctionne mieux si votre application génère du contenu statique sur le serveur avant de l’envoyer sur le navigateur.
Ajoutez le [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) à votre formulaire de paiement. Dans votre code côté serveur, récupérez la clé secrète du client à partir du PaymentIntent :
#### Ruby
```erb
```
```ruby
get '/checkout' do
@intent = # ... Fetch or create the PaymentIntent
erb :checkout
end
```
## Collecter les e-mails des clients
Link authentifie un client à l’aide de son adresse e-mail. En fonction de votre tunnel de paiement, vous disposez des options suivantes : transmettre une adresse e-mail au composant Element Payment, la collecter directement dans le composant Element Payment ou utiliser le composant Element Link Authentication. Stripe vous recommande, si possible, de transmettre l’adresse e-mail du client au composant Element Payment.
#### Transmettre une adresse e-mail
Si *l’un* de ces cas s’applique à votre situation :
- Vous connaissez l’adresse e-mail de votre client avant qu’il n’arrive sur votre page de paiement (grâce à son profil client par exemple).
- Vous n’avez pas besoin de collecter l’adresse de livraison de votre client.
- Vous préférez utiliser votre propre champ de saisie d’adresse e-mail, que vous placez avant le formulaire de paiement.
Ensuite, intégrez Link en transmettant l’adresse e-mail du client au composant Element Payment, ce qui accélère le paiement en déclenchant le flux d’authentification Link dès que votre client atteint l’étape de paiement. Cette option intègre un élément, le composant Element Payment.
Link saisit automatiquement l’adresse e-mail collectée dans le formulaire de paiement pour accélérer le processus de paiement.
Pour un client déjà inscrit, Link envoie une invite d’authentification.
Dans ce flux, vous continuez à collecter l’adresse e-mail dans votre propre champ de formulaire *avant* que le client n’arrive à l’étape de paiement, puis vous transmettez l’adresse e-mail au composant Element Payment. Le composant Element Payment authentifie le client à l’étape du paiement et affiche soit les informations de paiement du client enregistrées dans son compte Link, soit le formulaire de création du compte Link après la saisie des informations de la carte. Voici à quoi cela ressemble :
Integrate Link using the Link Authentication Element (See full diagram at https://docs.stripe.com/payments/link/add-link-elements-integration)
Ce type d’intégration ne collecte pas l’adresse de livraison du client. Si vous devez collecter cette adresse, procédez à l’intégration de Link à l’aide des composants Element Link Authentication, Shipping et Payment.
#### Collecter une adresse e-mail
L’authentification Link dans le composant Element Payment permet à vos clients de saisir une adresse e-mail directement dans le composant Element Payment sans procéder à une intégration supplémentaire.
Dans ce flux, votre client saisit son adresse e-mail pour s’identifier ou s’inscrit directement à Link lors du paiement à l’aide du composant Element Payment. Si un client ne s’est pas inscrit à Link et qu’il choisit un moyen de paiement pris en charge dans le composant Element Payment, il est invité à enregistrer ses informations à l’aide de Link. Link saisit automatiquement les informations de paiement des clients déjà inscrits.
#### Utiliser le composant Link Authentication Element
Si *l’un* de ces cas s’applique à votre situation :
- Vous voulez un composant unique et optimisé pour la collecte des adresses e-mail et l’authentification Link.
- Vous devez collecter l’adresse de livraison de votre client.
Utilisez le flux d’intégration qui implémente les composants Element Link Authentication, Payment et Address (facultatif).
Une page de paiement sur laquelle Link est activé comprend le composant Element Link Authentication, suivi du composant Element Address et enfin Payment. Vous pouvez également afficher le composant Element Link Authentication sur des pages distinctes, dans le même ordre, pour les tunnels de paiement multipages.
Créer un formulaire de paiement à l’aide de plusieurs composants Elements
L’intégration fonctionne comme suit :
A diagram describing how to integrate Link using the Link Authentication Element (See full diagram at https://docs.stripe.com/payments/link/add-link-elements-integration)
## Configurer votre formulaire de paiement [Côté client]
Vous pouvez désormais personnaliser votre formulaire de paiement grâce aux composants d’interface utilisateur préconfigurés d’Elements. Pour que votre intégration fonctionne, l’adresse de votre page de paiement doit commencer par `https://` et non par `http://`. Vous pouvez tester votre intégration sans utiliser le protocole HTTPS. [Activez HTTPS](https://docs.stripe.com/security/guide.md#tls) lorsque vous êtes prêt à accepter des paiements en mode production.
#### Transmettre une adresse e-mail
Le composant Payment Element affiche un formulaire de contact client prérempli comprenant le numéro de téléphone et l’adresse e-mail, ainsi qu’un formulaire dynamique dans lequel votre client choisit un moyen de paiement. Le formulaire collecte automatiquement toutes les informations de paiement nécessaires en fonction du moyen de paiement sélectionné par le client.
En outre, le composant Element Payment gère l’affichage des moyens de paiement enregistrés avec Link pour les clients authentifiés.
#### React
### Configurer Stripe Elements
Installez [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) et le [chargeur Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) à partir du registre public npm :
```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```
### Créer le formulaire de paiement
Sur votre page de paiement, wrappez votre formulaire de paiement avec le composant `Elements`, et transmettez la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret).
Si vous disposez d’autres informations sur le client, transmettez-les à l’objet `defaultValues.billingDetails` de `PaymentElement`. Le pré-remplissage du plus d’informations possible, simplifie Link la création et la réutilisation des comptes de vos clients. Vous pouvez également transmettre l’[objet Appearance](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance), qui permet d’adapter les Elements au design de votre site.
Affichez ensuite le `PaymentElement` dans votre formulaire de paiement. Nous vous recommandons de transmettre au moins l’adresse e-mail du client dans [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) afin de préremplir leurs données pour Link.
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};
const CheckoutPage = ({clientSecret}) => (
);
export default function CheckoutForm() {
return (
);
}
```
#### HTML + JS
### Configurer Stripe Elements
Incluez le script Stripe.js sur votre page de paiement en l’ajoutant au `head` de votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour rester conforme à la norme PCI. Vous ne devez pas inclure le script dans un lot ni en héberger de copie.
```html
Checkout
```
Créez une instance de l’[objet Stripe](https://docs.stripe.com/js.md#stripe-function) en indiquant comme premier paramètre votre [clé API](https://docs.stripe.com/keys.md) publiable :
```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('<>');
```
### Ajoutez Link Elements à votre page de paiement
Dans votre page de paiement, créez des nœuds DOM vides avec des ID uniques pour y afficher les Elements :
```html
```
Lors du chargement du formulaire que vous venez de configurer, créez un nouveau groupe Elements et transmettez la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret). Vous pouvez également transmettre l’[objet Appearance](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance), qui permet d’adapter les Elements au design de votre site.
Si vous avez d’autres informations clients, transmettez-les à l’objet `defaultValues.billingDetails` pour le `PaymentElement`. Préremplir autant d’informations que possible simplifie la création et la réutilisation du compte { % $lien.brand_name %} pour vos clients.
Enfin, créez une instance de chaque composant Element et montez-la sur le nœud DOM correspondant :
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Create an elements group from the Stripe instance passing in the clientSecret and, optionally, appearance.
const elements = stripe.elements({clientSecret, appearance});
// Prefill customer data using the defaultValues option. Passing in the email
// is required for this integration. The other fields are optional.
const paymentElement = elements.create('payment', {
defaultValues: {
billingDetails: {
email: 'foo@bar.com',
name: 'John Doe',
phone: '888-888-8888',
},
},
});
// Mount the Elements to their corresponding DOM node
paymentElement.mount("#payment-element");
```
#### Collecter une adresse e-mail
Le composant Payment Element affiche un formulaire de contact client prérempli comprenant le numéro de téléphone et l’adresse e-mail, ainsi qu’un formulaire dynamique dans lequel votre client choisit un moyen de paiement. Le formulaire collecte automatiquement toutes les informations de paiement nécessaires en fonction du moyen de paiement sélectionné par le client.
De plus, le composant Element Payment gère l’affichage des moyens de paiement enregistrés avec Link pour les clients authentifiés. Pour cette intégration, vous devez garder Link activé dans vos [paramètres de moyens de paiement](https://dashboard.stripe.com/settings/payment_methods).
#### React
### Configurer Stripe Elements
Installez [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) et le [chargeur Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) à partir du registre public npm :
```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```
### Créer le formulaire de paiement
Sur votre page de paiement, wrappez votre formulaire de paiement avec le composant `Elements`, et transmettez la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret).
Si vous disposez d’autres informations sur le client, transmettez-les à l’objet `defaultValues.billingDetails` de `PaymentElement`. Le pré-remplissage du plus d’informations possible, simplifie Link la création et la réutilisation des comptes de vos clients. Vous pouvez également transmettre l’[objet Appearance](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance), qui permet d’adapter les Elements au design de votre site.
Affichez ensuite le `PaymentElement` dans votre formulaire de paiement. Nous vous recommandons de transmettre au moins l’adresse e-mail du client dans [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) afin de préremplir leurs données pour Link.
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};
const CheckoutPage = ({clientSecret}) => (
);
export default function CheckoutForm() {
return (
);
}
```
#### HTML + JS
### Configurer Stripe Elements
Incluez le script Stripe.js sur votre page de paiement en l’ajoutant au `head` de votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour rester conforme à la norme PCI. Vous ne devez pas inclure le script dans un lot ni en héberger de copie.
```html
Checkout
```
Créez une instance de l’[objet Stripe](https://docs.stripe.com/js.md#stripe-function) en indiquant comme premier paramètre votre [clé API](https://docs.stripe.com/keys.md) publiable :
```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('<>');
```
### Ajoutez Link Elements à votre page de paiement
Dans votre page de paiement, créez des nœuds DOM vides avec des ID uniques pour y afficher les Elements :
```html
```
Lors du chargement du formulaire que vous venez de configurer, créez un nouveau groupe Elements et transmettez la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret). Vous pouvez également transmettre l’[objet Appearance](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance), qui permet d’adapter les Elements au design de votre site.
Si vous avez d’autres informations clients, transmettez-les à l’objet `defaultValues.billingDetails` pour le `PaymentElement`. Préremplir autant d’informations que possible simplifie la création et la réutilisation du compte { % $lien.brand_name %} pour vos clients.
Enfin, créez une instance de chaque composant Element et montez-la sur le nœud DOM correspondant :
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Create an elements group from the Stripe instance passing in the clientSecret and, optionally, appearance.
const elements = stripe.elements({clientSecret, appearance});
// Create the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
// Mount the Elements to their corresponding DOM node
paymentElement.mount("#payment-element");
```
#### Utiliser le Link Authentication Element
Le composant Element Link Authentication affiche un champ de saisie dédié à l’adresse e-mail. Lorsque Link associe l’adresse e-mail d’un client à un compte Link existant, il envoie au client un code unique sécurisé sur son téléphone pour l’authentification. Si l’authentification du client aboutit, Stripe affiche automatiquement les adresses et les moyens de paiement enregistrés avec Link pour qu’il puisse les utiliser.
Cette intégration crée également le composant Element Payment, qui affiche un formulaire dynamique permettant à votre client de choisir un type de moyen de paiement. Ce formulaire collecte automatiquement toutes les informations de paiement nécessaires en fonction du type de moyen de paiement sélectionné par le client. Le composant Element Payment gère également l’affichage des moyens de paiement enregistrés avec Link pour les clients authentifiés.
#### React
### Configurer Stripe Elements
Installez [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) et le [chargeur Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) à partir du registre public npm.
```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```
Sur votre page de paiement, wrappez votre formulaire de paiement avec le composant `Elements` et transmettez la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) définie à [l’étape précédente](https://docs.stripe.com/payments/link/add-link-elements-integration.md#web-create-intent). Si vous avez déjà collecté l’adresse e-mail du client à un autre endroit du formulaire, remplacez le champ de saisie existant par le composant `linkAuthenticationElement`.
Si vous ne collectez pas l’adresse e-mail, ajoutez le`linkAuthenticationElement` à votre tunnel de paiement. Vous devez placer le`linkAuthenticationElement` avant le`ShippingAddressElement` (facultatif si vous collectez des adresses de livraison) et le`PaymentElement` pour { % $lien.brand_name %} pour remplir automatiquement les données sauvegardées avec { % $lien.brand_name %} pour votre client dans le`ShippingAddressElement` et le `PaymentElement`. Vous pouvez également définir l’[option d’apparence](https://docs.stripe.com/elements/appearance-api.md), en personnalisant les composants Element pour qu’ils correspondent au design de votre site.
Si vous avez l’adresse e-mail du client, transmettez-la à l’option `defaultValues` du `linkAuthenticationElement`. Cela préremplit leur adresse e-mail et lance le processus d’authentification { % $lien.brand_name %}.
Si vous avez d’autres informations clients, transmettez-les à l’objet `defaultValues.billingDetails` pour le `PaymentElement`. Préremplir autant d’informations que possible simplifie la création et la réutilisation du compte { % $lien.brand_name %} pour vos clients.
Ensuite, affichez les composants `linkAuthenticationElement` et `PaymentElement` dans votre formulaire de paiement :
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
LinkAuthenticationElement,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const CheckoutPage = ({clientSecret}) => (
);
export default function CheckoutForm() {
return (
);
}
```
Les `linkAuthenticationElement`, `PaymentElement` et `ShippingAddressElement` ne doivent pas nécessairement figurer sur la même page. Si votre processus prévoit que les coordonnées du client, les informations de livraison et les informations de paiement s’affichent au client à des étapes distinctes, vous pouvez afficher chaque composant Element à l’étape ou sur la page appropriée. Intégrez le `linkAuthenticationElement` en tant que formulaire de saisie de l’adresse e-mail à l’étape de collecte des coordonnées pour vous assurer que le client tire pleinement parti des fonctionnalités de remplissage automatique de la livraison et du paiement offertes par Link.
Si vous collectez l’adresse e-mail de votre client avec le composant Element Authentication { % $lien.brand_name %} au début du tunnel de paiement, vous n’avez pas besoin de l’afficher de nouveau sur les pages de livraison ou de paiement.
### Récupérer une adresse e-mail
Vous pouvez récupérer l’adresse e-mail à 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 remplie automatiquement.
```jsx
{
setEmail(event.value.email);
}} />
```
### Saisir automatiquement l’adresse e-mail d’un client
Le composant Element Authentication { % $lien.brand_name %} accepte une adresse e-mail. Fournir l’adresse e-mail d’un client déclenche le flux d’authentification { % $lien.brand_name %} dès que le client accède à la page de paiement à l’aide de l’option`defaultValues`.
```jsx
```
#### HTML + JS
### Configurer Stripe Elements
Incluez le script Stripe.js sur votre page de paiement en l’ajoutant au `head` de votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour rester conforme à la norme PCI. Vous ne devez pas inclure le script dans un lot ni en héberger de copie.
```html
Checkout
```
Créez une instance de l’[objet Stripe](https://docs.stripe.com/js.md#stripe-function) en indiquant comme premier paramètre votre [clé API](https://docs.stripe.com/keys.md) publiable :
```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('<>');
```
### Ajouter Link Elements à votre page de paiement
Dans votre page de paiement, créez des nœuds DOM vides avec des ID uniques pour y afficher les Elements :
```html
```
Lors du chargement du formulaire que vous venez de configurer, créez un nouveau groupe d’ Elements et transmettez la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret). Si vous avez déjà collecté l’adresse e-mail du client dans votre formulaire de paiement, remplacez le champ de saisie existant par `linkAuthenticationElement`.
Si vous ne collectez pas l’adresse e-mail, ajoutez `linkAuthenticationElement` à votre tunnel de paiement avant `shippingAddress` (facultatif si vous collectez les adresses de livraison). Ajoutez `PaymentElement` pour que Link remplisse automatiquement les informations enregistrées avec Link pour votre client dans les champs `shippingAddress` et `PaymentElement`. Vous pouvez également transmettre l’[objet apparence](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance), qui permet d’adapter les Elements au design de votre site.
Si vous disposez de l’adresse e-mail du client, transmettez-la à l’option `defaultValues` de `linkAuthenticationElement` pour la saisir automatiquement et lancer le traitement d’authentification Link. Si vous disposez d’autres informations sur le client, transmettez-les à l’objet `defaultValues.billingDetails` de `PaymentElement`. En préremplissant autant d’informations que possible, vous simplifiez la création et la réutilisation du compte Link pour vos clients.
Enfin, créez une instance de chaque composant Element et montez-la sur le nœud DOM correspondant :
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
// Create an elements group from the Stripe instance, passing the clientSecret (obtained in step 2), loader, and appearance (optional).
const elements = stripe.elements({clientSecret, appearance, loader});
// Create Element instances
const linkAuthenticationElement = elements.create("linkAuthentication");
// Passing in defaultValues is optional, but useful if you want to prefill consumer information to
// ease consumer experience.
const paymentElement = elements.create('payment', {
defaultValues: {
billingDetails: {
name: 'John Doe',
phone: '888-888-8888',
},
},
});
// Mount the Elements to their corresponding DOM node
linkAuthenticationElement.mount("#link-authentication-element");
paymentElement.mount("#payment-element");
```
`linkAuthenticationElement` affiche un champ destiné à la saisie de l’adresse e-mail. Lorsque Link associe l’adresse e-mail d’un client à un compte Link existant, le client reçoit un code à usage unique sécurisé sur son téléphone pour s’identifier. Si l’identification du client aboutit, Stripe affiche automatiquement ses adresses et moyens de paiement préalablement enregistrés sur Link afin qu’il puisse les utiliser.
Le `PaymentElement` affiche un formulaire dynamique qui permet à votre client de choisir un type de moyen de paiement. Ce formulaire collecte automatiquement toutes les informations de paiement nécessaires pour le type de moyen de paiement sélectionné par le client. Le `PaymentElement` gère également l’affichage des moyens de paiement enregistrés avec Link pour les clients identifiés.
Les Elements Link Authentication, Payment et Shipping Address ne doivent pas nécessairement figurer sur la même page. Si votre processus prévoit que les coordonnées du client, les informations de livraison et les informations de paiement s’affichent au client à des étapes distinctes lors du paiement, vous pouvez afficher chaque composant Element à l’étape ou sur la page appropriée. Intégrez le composant Element Link Authentication en tant que formulaire de saisie de l’adresse e-mail à l’étape de collecte des coordonnées pour permettre au client de tirer pleinement parti des fonctionnalités de remplissage automatique offertes par Link.
Si vous collectez l’adresse e-mail de votre client à l’aide du composant Element Link Authentication au début du tunnel de paiement, vous n’avez pas besoin de l’afficher de nouveau sur les pages de livraison ou de paiement.
### Récupérer l’adresse e-mail
Vous pouvez récupérer l’adresse e-mail à 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 remplie automatiquement.
```javascript
linkAuthenticationElement.on('change', (event) => {
const email = event.value.email;
});
```
### Remplir automatiquement l’adresse e-mail d’un client
Le composant Element Link Authentication 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`.
```javascript
// Create linkAuthentication element with the defaultValues option
const linkAuthenticationElement = elements.create("linkAuthentication", {defaultValues: {email: "foo@bar.com"}});
// Mount the Element to its corresponding DOM node
linkAuthenticationElement.mount("#link-authentication-element");
```
## Optional: Préremplir les données client supplémentaires [Côté client]
Le cas échéant, le remplissage automatique des informations client simplifie le processus de paiement et réduit la saisie manuelle des données.
#### Transmettre une adresse e-mail
Le composant Payment Element accepte un objet `defaultValues.billingDetails` qui vous permet de remplir automatiquement le nom et le numéro de téléphone d’un client ainsi que son adresse e-mail et son adresse de livraison. En préremplissant automatiquement autant d’informations que possible sur votre client, vous simplifiezLink la création et la réutilisation de ses comptes.
Remplir automatiquement l’adresse e-mail, le numéro de téléphone et le nom de votre client pour simplifier le processus d’inscription à Link
Vous pouvez fournir les valeurs suivantes à l’objet `defaultValues.billingDetails` :
| Valeur | Obligatoire | Format |
| --------- | ----------- | ---------------------------------------------------------------------------------------- |
| `email` | Obligatoire | chaîne |
| `name` | Facultatif | chaîne |
| `phone` | Facultatif | chaîne |
| `address` | Facultatif | Objet JSON avec les champs `postal_code` et `country`. Tous les champs sont des chaînes. |
La transmission du paramètre `defaultValues.billingDetails` au composant Payment Element varie selon que vous collectez les informations sur une page distincte avant le composant Payment Element ou sur la même page.
#### Avant le composant Element Payment
Si vous collectez les informations sur une page distincte avant le Payment Element, vous pouvez remplir automatiquement les valeurs en transmettant `defaultValues.billingDetails` lorsque vous créez le Payment Element :
#### React
```jsx
;
```
#### HTML + JS
```javascript
const paymentElement = elements.create('payment', {
defaultValues: {
billingDetails: {
email: 'johnd@domain.com',
name: 'John Doe',
phone: '888-888-8888',
address: {
postal_code: '10001',
country: 'US',
},
},
},
});
// Mount the Element to its corresponding DOM node
paymentElement.mount("#payment-element");
```
#### Même page que le composant Payment Element
Si vous collectez les informations sur la même page que le Payment Element, vous pouvez remplir automatiquement les valeurs en mettant à jour le Payment Element à l’aide de `defaultValues.billingDetails`.
```javascript
const paymentElement = elements.create('payment')
// Mount the Element to its corresponding DOM node
paymentElement.mount("#payment-element");
function updateValues() {
paymentElement.update({
defaultValues: {
billingDetails: {
email: document.getElementById('email').value, // Or whichever ID used for your fields
name: document.getElementById('name').value,
phone: document.getElementById('phone').value,
address: {
postal_code: document.getElementById('postal_code').value,
country: document.getElementById('country').value,
},
},
},
});
}
const yourCollectionFieldIds = [
'name',
'email',
'phone',
'country',
'postal_code',
];
// We recommend updating defaultValues only onBlur
yourCollectionFields.forEach((key) => {
document.getElementById(key).onblur = function() {updateValues()};
});
```
#### Transmettre une adresse e-mail au composant Link Authentication Element
Si vous utilisez le composant Element Link Authentication, 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.
Remplir automatiquement l’adresse e-mail, le numéro de téléphone et le nom de votre client pour simplifier le processus d’inscription à Link
Vous pouvez fournir les valeurs suivantes à l’objet `defaultValues.billingDetails` :
| Valeur | Obligatoire | Format |
| --------- | ----------- | ---------------------------------------------------------------------------------------- |
| `name` | Facultatif | chaîne |
| `phone` | Facultatif | chaîne |
| `address` | Facultatif | Objet JSON avec les champs `postal_code` et `country`. Tous les champs sont des chaînes. |
Vous trouverez ci-après des exemples de Payment Element dont l’ensemble des valeurs ont été renseignées automatiquement :
#### React
```jsx
;
```
#### HTML + JS
```javascript
const paymentElement = elements.create('payment', {
defaultValues: {
billingDetails: {
name: 'John Doe',
phone: '888-888-8888',
address: {
postal_code: '10001',
country: 'US',
},
},
},
});
// Mount the Element to its corresponding DOM node
paymentElement.mount("#payment-element");
```
## Optional: Collecter les adresses de livraison [Côté client]
#### Transmettre une adresse e-mail
Cette option d’intégration ne collecte pas l’adresse de livraison du client. Si vous devez collecter cette information, intégrez Link en utilisant les composants Link Authentication Element, Address Element et Payment Element, comme indiqué dans les étapes [Utiliser le composant Link Authentication Element](https://docs.stripe.com/payments/link/add-link-elements-integration.md#collect-shipping).
#### Utiliser le Link Authentication Element
#### React
Pour collecter des adresses, créez un nœud DOM vide pour l’affichage du [composant Element Address](https://docs.stripe.com/elements/address-element.md). Ce dernier doit être affiché après le composant Element Link Authentication afin que Link puisse remplir automatiquement l’adresse enregistrée d’un client :
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
LinkAuthenticationElement,AddressElement,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const CheckoutPage = ({clientSecret}) => (
);
export default function CheckoutForm() {
return (
);
}
```
Affichez l’`AddressElement` avant le `PaymentElement`. En effet, celui-ci détecte de manière dynamique l’adresse collectée par l’`AddressElement`, en masquant les champs inutiles et en collectant des données d’adresse de facturation supplémentaires si nécessaire.
### Récupérer les adresses
L’`AddressElement` transmet automatiquement l’adresse de livraison lorsque le client effectue le paiement, mais vous pouvez également récupérer l’adresse sur le front-end à l’aide de la propriété `onChange`. Le gestionnaire `onChange` envoie un événement dès que l’utilisateur modifie l’un des champs de l’Address Element ou qu’il sélectionne une adresses enregistrée :
```jsx
{
setAddressState(event.value);
}} />
```
### Pré-remplir une adresse de livraison
Utilisez [defaultValues](https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options-defaultValues) pour préremplir les informations d’adresse et permettre à vos clients de payer plus rapidement.
```jsx
```
#### HTML + JS
Le [composant Element Address](https://docs.stripe.com/elements/address-element.md) vous permet de collecter des adresses de livraison ou de facturation. Créez un nœud DOM vide pour le composant Element Address. Affichez-le après le composant Element Link Authentication :
```html
```
Créez ensuite une instance du composant Element Address et intégrez-la au nœud DOM :
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const stripe = Stripe('<>');
// Create an elements group from the Stripe instance passing in the clientSecret and, optionally, appearance.
const elements = stripe.elements({clientSecret, appearance, loader});
// Create Element instances
const linkAuthenticationElement = elements.create("linkAuthentication");const addressElement = elements.create("address", {
mode: 'shipping',
allowedCountries: ['US']
});
const paymentElement = elements.create("payment");
// Mount the Elements to their corresponding DOM node
linkAuthenticationElement.mount("#link-authentication-element");addressElement.mount("#address-element");
paymentElement.mount("#payment-element");
```
Affichez l’Address Element avant le Payment Element. En effet, celui-ci détecte de manière dynamique l’adresse collectée par l’Address Element, en masquant les champs inutiles et en collectant des données d’adresse de facturation supplémentaires si nécessaire.
### Récupérer les adresses
Le composant Element Address transmet automatiquement l’adresse de livraison lorsque le client effectue un paiement, mais vous pouvez également récupérer l’adresse sur le front-end à l’aide de l’événement `change`. L’événement `change` est envoyé quand l’utilisateur modifie l’un des champs du composant Element Address ou sélectionne des adresses enregistrées :
```javascript
addressElement.on('change', (event: AddressChangeEvent) => {
const address = event.value;
})
```
### Pré-remplir une adresse de livraison
Utilisez [defaultValues](https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options-defaultValues) pour préremplir les informations d’adresse et permettre à vos clients de payer plus rapidement.
```javascript
// Create addressElement with the defaultValues option
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',
}
}
});
// Mount the Element to its corresponding DOM node
addressElement.mount("#address-element");
```
## Optional: Personnaliser l'apparence [Côté client]
Après avoir ajouté ces Elements à votre page, vous pouvez personnaliser leur [apparence](https://docs.stripe.com/elements/appearance-api.md#theme) pour qu’ils s’intègrent harmonieusement au reste du design :
Personnalisez l’apparence de vos Elements
## Envoyer le paiement à Stripe [Côté client]
Utilisez [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) pour mener à bien le paiement à l’aide des informations collectées auprès de votre client grâce aux différents formulaires Elements. Fournissez une [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) à cette fonction pour indiquer à Stripe vers quelle page rediriger l’utilisateur une fois le paiement effectué.
Votre utilisateur peut être d’abord redirigé vers un site intermédiaire, comme la page d’autorisation de sa banque, avant d’être redirigé vers votre page `return_url`.
Par défaut, les paiements bancaires et les paiements par carte redirigent immédiatement le client vers la `return_url` une fois le paiement abouti. Si vous ne voulez pas le rediriger vers la `return_url`, vous pouvez modifier le comportement par défaut en utilisant [if_required](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect).
#### React
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {useStripe,
useElements,
Elements,
LinkAuthenticationElement,
PaymentElement,
// If collecting shipping
AddressElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
const appearance = {/* ... */};
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const CheckoutPage =({clientSecret}) => (
);
export default function CheckoutForm() {const stripe = useStripe();
const elements = useElements();
const handleSubmit = async (event) => {
event.preventDefault();
const {error} = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: "https://example.com/order/123/complete",
},
});
if (error) {
// handle error
}
};
return (
);
}
```
#### HTML + JS
```javascript
const stripe = Stripe('<>');
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const {error} = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: "https://example.com/order/123/complete",
}
});
if (error) {
// Show error to your customer (for example, payment details incomplete)
console.log(error.message);
} else {
// Your customer will be redirected to your `return_url`. For some payment
// methods like iDEAL, your customer will be redirected to an intermediate
// site first to authorize the payment, then redirected to the `return_url`.
}
});
```
La `return_url` correspond à une page de votre site Web qui indique [l’état du paiement](https://docs.stripe.com/payments/payment-intents/verifying-status.md) du `PaymentIntent` au moment d’afficher la page de redirection. Lorsque Stripe redirige le client vers cette `return_url`, vous pouvez utiliser les paramètres de requête d’URL suivants afin de vérifier l’état du paiement. Vous pouvez également ajouter vos propres paramètres de requête lorsque vous fournissez votre `return_url`. Ils seront conservés tout au long du processus de redirection.
| Paramètre | Description |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent` | Identifiant unique du `PaymentIntent` |
| `payment_intent_client_secret` | La [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) de l’objet `PaymentIntent`. |
## Optional: Autorisation et capture distinctes [Côté serveur]
Link prend en charge [autorisation et capture distinctes](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md). Vous devez capturer un paiement Link autorisé dans les 7 jours suivant l’autorisation. Dans le cas contraire, l’autorisation est annulée automatiquement et vous ne pouvez pas capturer ce paiement.
### Indiquer à Stripe d’autoriser uniquement
Pour indiquer que vous voulez séparer l’autorisation de la capture, définissez la valeur de l’option [capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) sur `manual` lorsque vous créez le PaymentIntent. Ce paramètre indique à Stripe d’autoriser uniquement le montant sur le moyen de paiement du client.
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d "payment_method_types[]=link" \
-d "payment_method_types[]=card" \
-d amount=1099 \
-d currency=usd \
-d capture_method=manual
```
### Capturer les fonds
Une fois l’autorisation réussie, l’[état](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) du PaymentIntent passe à `requires_capture`. Pour capturer les fonds autorisés, faites une requête de [capture](https://docs.stripe.com/api/payment_intents/capture.md) PaymentIntent. Le montant total autorisé est capturé par défaut ; vous ne pouvez pas capturer un montant supérieur à cette valeur, mais vous pouvez capturer un montant inférieur.
```curl
curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/capture \
-u "<>:" \
-d amount_to_capture=750
```
### (Facultatif) Annuler l’autorisation
Si vous devez annuler une autorisation, vous pouvez [annuler le PaymentIntent](https://docs.stripe.com/refunds.md#cancel-payment) correspondant.
## Gérer les événements post-paiement [Côté serveur]
Stripe envoie un événement [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) à l’issue du paiement. [Utilisez un webhook pour recevoir ces événements](https://docs.stripe.com/webhooks/quickstart.md) et exécuter des actions en conséquence, telles que l’envoi d’une confirmation de commande par e-mail à votre client, l’enregistrement de la vente dans une base de données ou encore le lancement d’un flux de livraison.
Configurez votre intégration de manière à écouter ces événements plutôt que d’attendre un rappel de votre client. Lorsque vous attendez, il arrive en effet que l’utilisateur ferme la fenêtre de son navigateur ou quitte l’application avant même l’exécution du rappel. En configurant votre intégration de manière à ce qu’elle écoute les événements asynchrones, vous pourrez accepter [plusieurs types de moyens de paiement](https://stripe.com/payments/payment-methods-guide) avec une seule intégration.
En plus de l’événement `payment_intent.succeeded`, vous pouvez également gérer deux autres événements lorsque vous encaissez des paiements à l’aide du composant Element Payment :
| Événement | Description | Action |
| ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded) | Envoyé depuis Stripe lorsqu’un client a effectué un paiement avec succès. | Envoyez au client une confirmation de commande et *traitez* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) sa commande. |
| [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Envoyé depuis Stripe lorsqu’un client a fait une tentative de paiement qui s’est soldée par un échec. | Si un paiement passe de l’état `processing` à `payment_failed`, proposez au client de retenter le paiement. |
## Tester l'intégration
> Ne stockez pas de données d’utilisateur réelles sur des comptes *environnement de test* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes) Link. En effet, ces données sont à considérer comme publiques étant donné que vos comptes test sont associés à votre clé publiable.
À l’heure actuelle, Link fonctionne uniquement pour les cartes de crédit, les cartes de débit et les achats effectués à partir d’un compte bancaire américain éligible. Link requiert un [enregistrement de domaine](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).
Vous pouvez créer des comptes environnement de test pour Link à l’aide d’une adresse e-mail valide. Le tableau suivant répertorie les codes à usage unique acceptés par Stripe pour l’authentification des comptes environnement de test :
| Valeur | Résultat |
| ----------------------------------------------------------- | -------------------------------------------- |
| Tout autre ensemble de 6 chiffres non listé ci-dessous | Opération réussie |
| 000001 | Erreur, code non valide |
| 000002 | Erreur, code expiré |
| 000003 | Erreur, nombre maximal de tentatives dépassé |
Pour tester des moyens de paiement spécifiques, consultez les [exemples de tests du composant Payment Element](https://docs.stripe.com/payments/accept-a-payment.md?platform=web#additional-testing-resources).
### Sources de financement multiples
Dans la mesure où Stripe prend en charge des sources de financement supplémentaires, vous n’avez pas besoin de mettre à jour votre intégration. Stripe les prend en charge automatiquement avec les mêmes délais de virement de fonds et les mêmes garanties que pour les paiements par carte ou par compte bancaire.
### Authentification de carte bancaire et 3D Secure
Link prend en charge l’authentification *3D Secure 2 (3DS2)* (3D Secure 2 (3DS2) removes friction from the authentication process and improves the purchase experience compared to 3D Secure 1. It's the main card authentication method used to meet Strong Customer Authentication (SCA) requirements in Europe and is a key mechanism for businesses to request exemptions to SCA) pour les paiements par carte bancaire. 3DS2 impose aux clients une étape de vérification supplémentaire auprès de l’émetteur de la carte au moment du paiement. Les paiements ayant été authentifiés avec 3D Secure sont couverts par un *transfert de responsabilité* (With some 3D Secure transactions, the liability for fraudulent chargebacks (stolen or counterfeit cards) shifts from you to the card issuer).
Pour déclencher les flux de demande d’authentification complexes 3DS2 dan sun environnement de test avec Link, utilisez la carte de test suivante avec n’importe quel CVC, code postal et date d’expiration ultérieure : 4000000000003220.
Dans un environnement de test, une page d’authentification factice s’affiche pour le processus d’authentification. Sur cette page, vous pouvez autoriser ou annuler le paiement. L’autorisation du paiement simule une authentification réussie et vous redirige vers l’URL de retour spécifiée. Un clic sur le bouton **Échec** simule une tentative d’authentification infructueuse.
Pour obtenir plus d’informations, veuillez consulter la [page dédiée à l’authentification 3D Secure](https://docs.stripe.com/payments/3d-secure.md).
> Lorsque vous testez les flux 3DS, seules les cartes de test pour 3DS2 déclencheront une authentification sur Link.
## Optional: Afficher les données enregistrées par le client [Côté serveur] [Côté client]
En plus d’afficher vos propres adresses et moyens de paiement enregistrés pour un client, vous pouvez afficher leurs Link données enregistrées.
> #### Utiliser l’API Accounts v2 pour représenter les clients
>
> L’API Accounts v2 est généralement disponible pour les utilisateurs de Connect et en aperçu public pour les autres utilisateurs de Stripe. Si vous avez accès à l’aperçu Accounts v2, vous devez [spécifier une version d’aperçu](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) dans votre code.
>
> Pour demander l’accès à l’aperçu Accounts v2,
>
> Dans la plupart des cas d’usage, nous vous recommandons de [modéliser vos clients en tant qu’objets Account configurés par le client](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md), plutôt que d’utiliser des objets [Customer](https://docs.stripe.com/api/customers.md).
Si un client a enregistré plusieurs moyens de paiement, Stripe affiche les trois cartes bancaires enregistrées les plus récemment utilisées, ainsi que tous les moyens de paiement enregistrés avec Link.
Pour cela, créez une clé éphémère et transmettez-la à votre front-end avec l’ID `Account` (pour les clients représentés par des objets `Account` configurés côté client) ou l’ID `Customer` (pour les clients représentés par des objets `Customer`). Les informations relatives au client étant sensibles, vous ne pouvez pas y accéder directement via Stripe.js, mais une clé éphémère vous donne un accès temporaire à ces données.
#### Accounts v2
#### curl
```bash
curl https://api.stripe.com/v1/ephemeral_keys \
-u<>: \
-H "Stripe-Version:2026-04-22.dahlia" \
-d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \
curl https://api.stripe.com/v1/payment_intents \
-u <>: \
-d "amount"=1099 \
-d "currency"="usd" \-d "customer_account"="{{CUSTOMER_ACCOUNT_ID}}" \
-d "payment_method_types[]"="link" \
-d "payment_method_types[]"="card"
```
#### Customers v1
#### curl
```bash
curl https://api.stripe.com/v1/ephemeral_keys \
-u<>: \
-H "Stripe-Version:2026-04-22.dahlia" \
-d "customer"="{{CUSTOMER_ID}}" \
curl https://api.stripe.com/v1/payment_intents \
-u <>: \
-d "amount"=1099 \
-d "currency"="usd" \-d "customer"="{{CUSTOMER_ID}}" \
-d "payment_method_types[]"="link" \
-d "payment_method_types[]"="card"
```
Récupérez le `customerOptions` côté client avec le `clientSecret`.
```jsx
(async () => {
const response = await fetch('/secret');const {clientSecret, customerOptions} = await response.json();
})
```
Transmettez ensuite les valeurs `customerOptions.ephemeralKey` et `customerOptions.customer` de l’option `customerOptions` dans le [groupe Elements](https://docs.stripe.com/js/elements_object/create). Vous devez également transmettre l’indicateur bêta `elements_customers_beta_1` lors du chargement de l’instance Stripe.
#### React
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
useStripe,
useElements,
Elements,
LinkAuthenticationElement,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>', {apiVersion: '2026-04-22.dahlia',
betas: ['elements_customers_beta_1'],
});
const appearance = {/* ... */};
const loader = 'auto';
const CheckoutPage =({
clientSecret,customerOptions,
}) => (
);
```
#### HTML + JS
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const stripe = Stripe('<>', {betas: ['elements_customers_beta_1'],
});
// Create an elements group from the Stripe instance, passing the clientSecret (obtained in step 2) and appearance (optional).
const elements = stripe.elements({
clientSecret,
appearance,
loader,customerOptions,
});
```
## Optional: Save Link payment methods [Côté serveur] [Côté client]
Vous pouvez enregistrer des moyens de paiement Link pour de futurs *paiements hors session* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information) ou *abonnements* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis), mais pas pour de futurs *paiements en session* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method). Pour cela, vous devez les associer à un client représenté soit par un objet `Account` configuré côté client, soit par un objet `Customer`.
> #### Utiliser l’API Accounts v2 pour représenter les clients
>
> L’API Accounts v2 est généralement disponible pour les utilisateurs de Connect et en aperçu public pour les autres utilisateurs de Stripe. Si vous avez accès à l’aperçu Accounts v2, vous devez [spécifier une version d’aperçu](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) dans votre code.
>
> Pour demander l’accès à l’aperçu Accounts v2,
>
> Dans la plupart des cas d’usage, nous vous recommandons de [modéliser vos clients en tant qu’objets Account configurés par le client](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md), plutôt que d’utiliser des objets [Customer](https://docs.stripe.com/api/customers.md).
#### Accounts v2
Lorsque votre client crée un compte ou effectue sa première transaction avec votre entreprise, créez un objet `Account` configuré côté client pour stocker ses données en vue d’une utilisation ultérieure. Ensuite, spécifiez `customer_account` lors de la création de votre `PaymentIntent`.
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d "automatic_payment_methods[enabled]=true" \
-d "customer_account={{CUSTOMERACCOUNT_ID}}" \
-d setup_future_usage=off_session
```
Lorsque vous êtes prêt à débiter à nouveau votre client, utilisez l’ID `customer_account` ainsi que l’ID de *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) associé pour créer un nouveau `PaymentIntent`.
#### Customers v1
Lorsque votre client crée un compte ou effectue sa première transaction avec votre entreprise, créez un objet `Customer` pour stocker ses données en vue d’une utilisation ultérieure. Ensuite, spécifiez `customer` lors de la création de votre `PaymentIntent`.
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d "automatic_payment_methods[enabled]=true" \
-d "customer={{CUSTOMER_ID}}" \
-d setup_future_usage=off_session
```
Lorsque vous êtes prêt à débiter à nouveau votre client, utilisez l’ID `customer` ainsi que l’ID de *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) associé pour créer un nouveau `PaymentIntent`.
Définissez [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) sur `true`. Cela entraîne l’envoi d’une erreur par `PaymentIntent` si une authentification est requise alors que votre client n’utilise pas activement votre site ou votre application.
#### Accounts v2
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d "automatic_payment_methods[enabled]=true" \
-d "customer_account={{CUSTOMERACCOUNT_ID}}" \
-d payment_method={{PAYMENT_METHOD_ID}} \
--data-urlencode "return_url=https://example.com/order/123/complete" \
-d off_session=true \
-d confirm=true
```
#### Customers v1
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d "automatic_payment_methods[enabled]=true" \
-d "customer={{CUSTOMER_ID}}" \
-d payment_method={{PAYMENT_METHOD_ID}} \
--data-urlencode "return_url=https://example.com/order/123/complete" \
-d off_session=true \
-d confirm=true
```
## Divulguer Stripe à vos clients
Stripe recueille des informations sur les interactions des clients avec Elements afin de vous fournir des services, de prévenir la fraude et d’améliorer ses services. Cela inclut l’utilisation de cookies et d’adresses IP pour identifier les Elements qu’un client a vus au cours d’une même session Checkout. Vous êtes responsable de la divulgation et de l’obtention de tous les droits et consentements nécessaires pour que Stripe puisse utiliser les données à cette fin. Pour en savoir plus, visitez notre [Centre de confidentialité](https://stripe.com/legal/privacy-center#as-a-business-user-what-notice-do-i-provide-to-my-end-customers-about-stripe).
## See also
- [Quel est Link](https://docs.stripe.com/payments/link.md)
- [Link avec Elements](https://docs.stripe.com/payments/link/elements-link.md)
- [Link dans le composant Payment Element](https://docs.stripe.com/payments/link/payment-element-link.md)
- [Découvrir le composant Link Authentication Element](https://docs.stripe.com/payments/link/link-authentication-element.md)
- [Link dans différentes intégrations de paiement](https://docs.stripe.com/payments/link/link-payment-integrations.md)