# 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 [Link Authentication Element](https://docs.stripe.com/payments/elements/link-authentication-element.md).
Il existe trois façons de sécuriser une adresse de courriel client pour l’authentification et l’inscription Link :
- \**Transmettre une adresse courriel : ** vous pouvez transmettre une adresse courriel à Payment Element à l’aide de [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues). Cette approche est recommandée si vous collectez déjà l’adresse courriel et/ou le numéro de téléphone du client dans le flux de paiement.
- \**Collecter une adresse courriel : ** vous pouvez collecter une adresse courriel directement dans Payment Element. Si vous ne collectez pas l’adresse courriel au cours du flux de paiement, nous vous recommandons cette approche.
- **Composant Element Authentication :** vous pouvez utiliser le composant Element Authentication pour créer un champ de saisie d’adresse de courriel unique à la fois pour le recouvrement et l’authentification par . Nous vous recommandons d’utiliser le composant [Element Address](https://docs.stripe.com/elements/address-element.md).
Recueillir l’adresse de courriel d’un 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 à votre compte](https://dashboard.stripe.com/login).
Utilisez nos bibliothèques officielles pour accéder à l’API de 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]
Stripe utilise un objet [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) pour représenter votre intention de percevoir le paiement d’un client, qui suit les tentatives de paiement et les changements d’état de 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 modes de paiement manuellement au lieu d’utiliser des modes de paiement dynamiques. Pour utiliser sans modes de paiement dynamiques, mettez à jour votre intégration pour transmettre `link` aux `payment_method_types`.
Lorsque vous créez un PaymentIntent, proposez [de manière dynamique à vos clients les modes de paiement les plus pertinents](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md), notamment Link, en utilisant des modes de paiement dynamiques. Pour utiliser des modes de paiement dynamiques, n’incluez pas le paramètre `payment_method_types`. Vous pouvez également, si vous le souhaitez, activer `automatic_payment_methods`.
> Lorsque votre intégration ne définit pas le paramètre `payment_method_types`, certains modes de paiement sont activés automatiquement, notamment les cartes et les portefeuilles numériques.
Pour ajouter Link à votre intégration Elements à l’aide de modes de paiement dynamiques, procédez comme suit :
1. Dans les [paramètres des modes 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 modes de paiement, retirez 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
L’objet PaymentIntent comprend une *clé secrète du client* (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)) utilisée côté client pour effectuer le processus de paiement en toute sécurité. Vous pouvez utiliser différentes approches pour transmettre cette clé au côté client.
#### Application monopage
Récupérez la clé secrète du client à partir d’un point de terminaison sur votre serveur, en utilisant la fonction `fetch` du navigateur. Cette approche est préférable si votre côté client est une application d’une page, en particulier si celle-ci a été créée avec un cadre d’application frontal récent comme React. Créez le point de terminaison du serveur pour récupérer 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
```
Ensuite, récupérez la clé secrète du client avec 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 du client depuis votre serveur. Cette approche fonctionne mieux si votre application génère du contenu statique sur le serveur avant de l’envoyer au navigateur.
Ajoutez le champ [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) dans votre formulaire de paiement. Dans le 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 l’adresse courriel du client
Link authentifie un client à l’aide de son adresse courriel. En fonction de votre flux de paiement, vous disposez des options suivantes : transmettre l’adresse courriel au composant Payment Element, la collecter directement au sein de ce composant, ou utiliser le composant Authentication Element Link. Parmi ces options, Stripe recommande de transmettre l’adresse courriel du client au composant Payment Element, si celle-ci est disponible.
#### Transmettre dans un courriel
If *l’un* des critères suivants s’applique à vous :
- Vous connaissez l’adresse courriel de votre client avant qu’il n’arrive dans la page de paiement (à partir d’un profil client, par exemple).
- Vous n’avez pas besoin de collecter une adresse de livraison auprès de votre client.
- Vous préférez utiliser votre propre champ de saisie de courriel que vous placez avant le formulaire de paiement.
Intégrez ensuite Link en transmettant l’adresse courriel du client au composant Payment Element, ce qui accélère le paiement en déclenchant la procédure d’authentification de Link dès que votre client arrive à l’étape du paiement. Cette option intègre un seul composant : le composant Payment Element.
Link remplit automatiquement l’adresse courriel collectée dans le formulaire de paiement pour procurer un paiement plus rapide
Link fournit une invite d’authentification pour un client existant
Dans ce flux, vous collectez l’adresse courriel dans votre propre champ de formulaire *avant* que le client n’atteigne l’étape de paiement, puis vous transmettez cette adresse au composant Payment Element. Ce dernier authentifie le client à l’étape de paiement et affiche soit les informations de paiement du client enregistrées dans son compte Link, soit le formulaire de création de compte Link après la saisie des informations de 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)
Cette option d’intégration ne recueille pas l’adresse de livraison du client. Si vous avez besoin de recueillir une adresse de livraison, intégrez Link à l’aide des composants Authentication Element, Address Element et Payment Element de Link.
#### Collecter une adresse courriel
L’authentification Link dans le composant Payment Element permet à vos clients de saisir une adresse courriel directement dans ce composant, sans qu’aucune intégration supplémentaire ne soit nécessaire.
Dans ce flux, votre client saisit son adresse courriel et s’authentifie ou s’inscrit auprès de Link directement dans le composant Payment Element lors du paiement. Si un client n’est pas encore inscrit auprès de Link et qu’il choisit un mode de paiement pris en charge dans le composant Payment Element, il est invité à enregistrer ses informations par le biais de Link. Pour ceux qui sont déjà inscrits, Link renseigne automatiquement leurs informations de paiement.
#### Utiliser le Link Authentication Element
If *l’un* des critères suivants s’applique à vous :
- Vous souhaitez disposer d’un composant unique et optimisé pour la collecte d’adresses courriel et l’authentification Link.
- Vous devez collecter une adresse de livraison auprès de votre client.
Utilisez ensuite le flux d’intégration qui intègre ces composants : les composants Authentication Element et Payment Element, et le composant facultatif Address Element de Link.
Une page de paiement compatible avec Link comporte le composant Authentication Element Link au début, suivi du composant Address Element, puis du composant Payment Element à la fin. Vous pouvez également afficher le composant Authentification Element Link sur des pages distinctes, dans ce même ordre, pour les procédures de paiement en plusieurs étapes.
Créez un formulaire de paiement à l’aide de plusieurs 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 configurer votre formulaire de paiement personnalisé à l’aide des composants Elements d’interface utilisateur préconfigurés. 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. [Activer le protocole HTTPS](https://docs.stripe.com/security/guide.md#tls) au moment d’accepter des paiements réels.
#### Transmettre dans un courriel
Le Payment Element affiche un formulaire de contact client rempli automatiquement qui comprend le numéro de téléphone et l’adresse courriel. Il affiche également un formulaire dynamique qui permet à votre client de choisir un type de mode de paiement. Le formulaire collecte automatiquement toutes les informations de paiement nécessaires pour le type de mode de paiement choisi par le client.
De plus, le composant Payment Element gère l’affichage des modes de paiement enregistrés par 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
Dans votre page de paiement, enveloppez 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` pour le `PaymentElement`. En préremplissant autant d’informations que possible, vous simplifiez la création et la réutilisation de comptes Link pour vos clients. Vous pouvez également transmettre l’[objet apparence](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance), en personnalisant les éléments pour qu’ils correspondent au design de votre site.
Affichez ensuite le `PaymentElement` dans votre formulaire de paiement. Nous vous recommandons de transmettre au moins l’adresse de courriel du client dans [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) pour préremplir ses 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
Intégrez le script Stripe.js à votre page de paiement en l’ajoutant à `head` de votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour rester en conforme à la norme PCI. Vous ne devez pas inclure le script dans un lot ni en héberger de copie vous-même.
```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
Sur votre page de paiement, créez des nœuds DOM vides ayant des ID uniques dans lesquels seront affichés 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 à la conception de votre site.
Si vous disposez d’autres informations sur le client, passez-les à l’objet `defaultValues.billingDetails` de `PaymentElement`. Le pré-remplissage d’autant d’informations que possible simplifie la création de compte Link et l’expérience de réutilisation du compte pour vos clients.
Créez finalement une instance de chaque composant Element et montez-la sur le nœud DOM.
```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 courriel
Le Payment Element affiche un formulaire de contact client rempli automatiquement qui comprend le numéro de téléphone et l’adresse courriel. Il affiche également un formulaire dynamique qui permet à votre client de choisir un type de mode de paiement. Le formulaire collecte automatiquement toutes les informations de paiement nécessaires pour le type de mode de paiement choisi par le client.
Qui plus est, le composant Element Payment gère l’affichage des modes de paiement enregistrés par pour les clients authentifiés. Pour cette intégration, vous devez laisser activé dans vos [paramètres Modes 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
Dans votre page de paiement, enveloppez 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` pour le `PaymentElement`. En préremplissant autant d’informations que possible, vous simplifiez la création et la réutilisation de comptes Link pour vos clients. Vous pouvez également transmettre l’[objet apparence](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance), en personnalisant les éléments pour qu’ils correspondent au design de votre site.
Affichez ensuite le `PaymentElement` dans votre formulaire de paiement. Nous vous recommandons de transmettre au moins l’adresse de courriel du client dans [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) pour préremplir ses 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
Intégrez le script Stripe.js à votre page de paiement en l’ajoutant à `head` de votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour rester en conforme à la norme PCI. Vous ne devez pas inclure le script dans un lot ni en héberger de copie vous-même.
```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
Sur votre page de paiement, créez des nœuds DOM vides ayant des ID uniques dans lesquels seront affichés 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 à la conception de votre site.
Si vous disposez d’autres informations sur le client, passez-les à l’objet `defaultValues.billingDetails` de `PaymentElement`. Le pré-remplissage d’autant d’informations que possible simplifie la création de compte Link et l’expérience de réutilisation du compte pour vos clients.
Créez finalement une instance de chaque composant Element et montez-la sur le nœud DOM.
```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 Authentication Element Link affiche une saisie d’adresse de courriel. Lorsque Link fait correspondre le courriel d’un client à un compte Link existant, il envoie au client un code sécurisé à usage unique sur son téléphone pour s’identifier. Si le client réussit à s’authentifier, Stripe affiche automatiquement ses adresses et ses modes de paiement enregistrés par Link afin qu’ils puissent les utiliser.
Cette intégration crée également le composant Payment Element, qui affiche un formulaire dynamique qui permet à votre client de choisir un type de modes de paiement. Ce formulaire collecte automatiquement toutes les informations de paiement nécessaires pour le type de modes de paiement sélectionné par le client. Le composant Payment Element gère également l’affichage des modes de paiement enregistrés à un compte Link par 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
```
Dans votre page de paiement, enveloppez votre formulaire de paiement avec le composant `Elements`, en transmettant la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) de [l’étape précédente](https://docs.stripe.com/payments/link/add-link-elements-integration.md#web-create-intent). Si vous collectez déjà l’adresse courriel du client dans une autre partie de votre formulaire, remplacez votre saisie existante par le `linkAuthenticationElement`.
Si vous ne collectez pas de courriel, ajoutez-le `linkAuthenticationElement` à votre processus de paiement. Vous devez placer le `linkAuthenticationElement` avant le `ShippingAddressElement` (facultatif si vous collectez des adresses de livraison) et le `PaymentElement` pour Link pour remplir automatiquement les détails enregistrés par le lien Link pour votre client dans les `ShippingAddressElement` et `PaymentElement`. Vous pouvez également transmettre l’[option Apparence](https://docs.stripe.com/elements/appearance-api.md), en personnalisant les Elements pour qu’ils correspondent à la conception de votre site.
Si vous avez l’adresse de courriel du client, transmettez-la à l’option `defaultValues` de `linkAuthenticationElement`. Cela pré-remplit son adresse de courriel et lance le processus d’authentification de Link.
Si vous disposez d’autres informations sur le client, passez-les à l’objet `defaultValues.billingDetails` pour le `PaymentElement`. Le pré-remplissage d’autant d’informations que possible simplifie la création de compte Link et l’expérience de réutilisation du compte pour vos clients.
Affichez ensuite 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 composants `linkAuthenticationElement`, `PaymentElement` et `ShippingAddressElement` n’ont pas besoin d’être sur la même page. Si vous avez un processus où les informations de contact du client, les informations d’expédition et les détails de paiement s’affichent pour le client dans des étapes distinctes lors du paiement, vous pouvez afficher chaque composant Element dans l’étape ou la page appropriée. Incluez le composant`linkAuthenticationElement` comme formulaire de saisie de courriel dans l’étape de collecte des informations de contact pour vous assurer que le client puisse tirer pleinement parti du remplissage automatique d’expédition et de paiement fourni par Link.
Si vous collectez le courriel de votre client avec le composant Link Authentication Element au début du processus de paiement, vous n’avez pas besoin de l’afficher encore une fois sur les pages d’expédition ou de paiement.
### Récupérer une adresse courriel
Vous pouvez récupérer les renseignements de l’adresse courriel à l’aide de la propriété `onChange` sur le composant `linkAuthenticationElement`. Le gestionnaire `onChange` se déclenche chaque fois que l’utilisateur met à jour le champ d’adresse courriel ou lorsqu’une adresse courriel de client enregistrée est remplie automatiquement.
```jsx
{
setEmail(event.value.email);
}} />
```
### Remplir automatiquement l’adresse courriel d’un client
Le composant Link Authentication Element accepte une adresse de courriel. Si vous fournissez l’adresse de courriel d’un client, le processus d’authentification de Link démarre dès que le client accède à la page de paiement à l’aide de l’option `defaultValues`.
```jsx
```
#### HTML + JS
### Configurer Stripe Elements
Intégrez le script Stripe.js à votre page de paiement en l’ajoutant à `head` de votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour rester en conforme à la norme PCI. Vous ne devez pas inclure le script dans un lot ni en héberger de copie vous-même.
```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 ayant des ID uniques dans lesquels seront affichés les Elements.
```html
```
Lorsque le formulaire que vous venez de configurer se charge, créez un nouveau groupe Elements en transmettant la [clé secrète du client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret). Si vous collectez déjà l’adresse courriel du client dans votre formulaire de paiement, remplacez votre entrée existante par `linkAuthenticationElement`.
Si vous ne collectez pas les courriels, ajoutez `linkAuthenticationElement` à votre processus de paiement avant l’`adresse de livraison` (facultatif si vous collectez les adresses de livraison). Ajoutez `PaymentElement` pour Link pour remplir automatiquement les informations enregistrées Link pour votre client dans l’`adresse de livraison` et le `PaymentElement`. Vous pouvez également transmettre l’[objet Apparence](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance), en personnalisant les Elements pour qu’ils correspondent au design de votre site.
Si vous avez l’adresse de courriel du client, transmettez-la à l’option `defaultValues` de `linkAuthenticationElement`. Cela préremplit son adresse de courriel et lance le processus d’authentification Link. Si vous avez d’autres informations client, transmettez-les à l’objet `defaultValues.billingDetails` de `PaymentElement`. Le pré-remplissement d’autant d’informations que possible simplifie la création et la réutilisation de comptes Link pour vos clients.
Créez finalement une instance de chaque composant Element et montez-la sur le 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';
// 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 une saisie d’adresse de courriel. Lorsque Link fait correspondre le courriel d’un client à un compte Link existant, il envoie au client un code sécurisé à usage unique sur son téléphone pour l’authentification. Si le client réussit à s’authentifier, Stripe affiche automatiquement ses adresses et ses modes de paiement enregistrés Link afin qu’il puisse les utiliser.
`PaymentElement` affiche un formulaire dynamique qui permet à votre client de choisir un type de mode de paiement. Ce formulaire collecte automatiquement toutes les informations de paiement nécessaires pour le type de mode de paiement sélectionné par le client. Le composant `PaymentElement` gère également l’affichage des modes de paiement enregistrés à Link par les clients authentifiés.
Les composants Link Authentication, Payment et Shipping Address Elements n’ont pas besoin d’être sur la même page. Si vous avez un processus où les informations de contact du client, les informations d’expédition et les détails de paiement s’affichent pour le client dans des étapes distinctes lors du paiement, vous pouvez afficher chaque élément dans l’étape ou la page appropriée. Incluez le composant Link Authentication Element comme formulaire de saisie de courriel dans l’étape de collecte des informations de contact pour vous assurer que le client peut tirer pleinement parti du remplissage automatique d’expédition et de paiement fourni par Link.
Si vous collectez le courriel de votre client avec le composant Link Authentication Element au début du processus de paiement, vous n’avez pas besoin de l’afficher encore une fois sur les pages d’expédition ou de paiement.
### Récupérer l’adresse courriel
Vous pouvez récupérer les renseignements de l’adresse courriel à l’aide de la propriété `onChange` sur le composant `linkAuthenticationElement`. Le gestionnaire `onChange` se déclenche chaque fois que l’utilisateur met à jour le champ d’adresse courriel ou lorsqu’une adresse courriel de client enregistrée est remplie automatiquement.
```javascript
linkAuthenticationElement.on('change', (event) => {
const email = event.value.email;
});
```
### Remplir automatiquement l’adresse courriel d’un client
Le composant Link Authentication Element accepte une adresse de courriel. Si vous fournissez l’adresse de courriel d’un client, le flux d’authentification de Link démarre dès que le client 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: Remplir automatiquement les données supplémentaires du client [Côté client]
Si c’est le cas, le remplissage automatique des informations du client simplifie le processus de paiement et réduit la saisie manuelle des données.
#### Transmettre dans un courriel
Le composant Payment Element accepte un objet `defaultValues.billingDetails` qui vous permet de préremplir le nom et le numéro de téléphone d’un client ainsi que son adresse de courriel et son adresse de livraison. En préremplissant autant d’informations que possible sur votre client, vous simplifiez la création et la réutilisation de comptes Link.
Remplissez automatiquement l’adresse courriel, 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 de `defaultValues.billingDetails` au Payment Element varie selon que vous collectez les informations dans une page distincte avant le Payment Element ou dans la même page.
#### Avant le Payment Element
Si vous collectez les informations dans une page distincte avant le Payment Element, vous pourrez remplir automatiquement les valeurs en transmettant l’objet `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 Payment Element
Si vous collectez les informations dans la même page que le Payment Element, vous pourrez remplir automatiquement les valeurs en mettant à jour le Payment Element avec l’objet `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 dans un courriel à Link Authentication Element
Si vous utilisez le composant Authentication Element Link, ajoutez l’objet `defaultValues.billingDetails` au composant Payment Element pour préremplir le nom et le numéro de téléphone du client, ainsi que ses adresses de livraison. En préremplissant autant d’informations que possible sur votre client, vous simplifiez la création et la réutilisation du compte Link.
Remplissez automatiquement l’adresse courriel, 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. |
Un Payment Element dont les valeurs sont toutes remplies automatiquement est similaire aux exemples suivants :
#### 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 dans un courriel
Cette option d’intégration ne recueille pas l’adresse de livraison du client. Si vous avez besoin de recueillir une adresse de livraison, intégrez Link à l’aide des composants Authentication Element, Address Element et Payment Element de Link dans les étapes [Utiliser le composant Authentication Element de Link](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 le rendu de [Address Element](https://docs.stripe.com/elements/address-element.md). Le composant Address Element doit être affiché après le composant Element Link pour que Link remplisse automatiquement les informations de 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 `AddressElement` avant `PaymentElement`. Le composant `PaymentElement` détecte dynamiquement les données d’adresse collectées par le composant `AddressElement`, en masquant les champs inutiles et en recueillant des informations supplémentaires sur l’adresse de facturation.
### Récupérer les informations d’adresse
Le composant `AddressElement` transmet automatiquement l’adresse de livraison lorsqu’un client effectue le paiement, mais vous pouvez également récupérer les détails de l’adresse sur l’application frontale en utilisant la propriété `onChange`. Le gestionnaire `onChange` envoie un événement chaque fois que l’utilisateur met à jour un champ de l’Address Element ou sélectionne une adresse enregistrée :
```jsx
{
setAddressState(event.value);
}} />
```
### Remplir automatiquement une adresse de livraison
Utilisez [defaultValues](https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options-defaultValues) pour remplir automatiquement les informations d’adresse, ce qui accélère le paiement de vos clients.
```jsx
```
#### HTML + JS
Le composant [Address Element](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 Address Element. Affichez-le après le composant Authentication Element Link :
```html
```
Créez ensuite une instance du composant Address Element et montez-la sur le 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. Le Payment Element détecte dynamiquement les données d’adresse collectées par l’Address Element, en masquant les champs inutiles et en recueillant des informations supplémentaires sur l’adresse de facturation, le cas échéant.
### Récupérer les informations d’adresse
L’Element Address transmet automatiquement l’adresse de livraison lorsqu’un client envoie un paiement, mais vous pouvez également récupérer les détails de l’adresse sur l’application frontale en utilisant l’événement `change`. L’événement `change` est envoyé chaque fois que l’utilisateur met à jour un champ de l’élément Address Element, ou après avoir sélectionné des adresses sauvegardées :
```javascript
addressElement.on('change', (event: AddressChangeEvent) => {
const address = event.value;
})
```
### Remplir automatiquement une adresse de livraison
Utilisez [defaultValues](https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options-defaultValues) pour remplir automatiquement les informations d’adresse, ce qui accélère le paiement de vos clients.
```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 de votre conception :
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 finaliser le paiement à l’aide des informations collectées auprès de votre client grâce aux différents formulaires Elements. Ajoutez une [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) à cette fonction pour indiquer où Stripe redirige l’utilisateur une fois le paiement effectué.
Votre utilisateur peut être d’abord redirigé vers un site intermédiaire, comme une page d’autorisation bancaire, avant que Stripe le redirige vers la 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 que le paiement a abouti. Si vous ne souhaitez pas le rediriger vers la `return_url`, vous pouvez utiliser [if_required](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) pour modifier le comportement.
#### 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`.
}
});
```
Le `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` lorsque vous affichez la page de retour. Lorsque Stripe redirige le client vers la page `return_url`, vous pouvez utiliser les paramètres de requête d’URL suivants pour vérifier l’état du paiement. Vous pouvez également ajouter vos propres paramètres de requête lorsque vous fournissez le paramètre `return_url`. Ces paramètres de requête sont conservés tout au long du processus de redirection.
| Paramètre | Description |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent` | L’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: Séparer l’autorisation et la capture [Côté serveur]
Link prend en charge l’[autorisation et la capture distinctes](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md). Vous devez capturer un paiement autorisé dans les 7 jours suivant son autorisation. Sinon, celle-ci est automatiquement annulée et vous ne pourrez plus capturer ce paiement.
### Indiquer à Stripe d’autoriser uniquement
Pour indiquer que vous souhaitez séparer l’autorisation de la capture, vous devez définir [capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) à `manual` lors de la création du PaymentIntent. Ce paramètre indique à Stripe d’autoriser uniquement le montant sur le mode 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 du PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) passe à `requires_capture`. Pour capturer les fonds autorisés, faites une demande de [capture](https://docs.stripe.com/api/payment_intents/capture.md) du PaymentIntent. Par défaut, le montant capturé est le montant total autorisé. Vous ne pourrez capturer un montant plus élevé, mais vous pourrez 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 pourrez [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. [Utiliser un webhook pour recevoir ces événements](https://docs.stripe.com/webhooks/quickstart.md) et exécutez des actions, comme envoyer une confirmation de commande par courriel à votre client, enregistrer la vente dans une base de données ou lancer un flux de livraison.
Configurez votre intégration pour écouter ces événements plutôt que d’attendre un rappel de votre client. Lorsque vous attendez un rappel de votre client, ce dernier peut fermer la fenêtre de son navigateur ou quitter 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 modes de paiement](https://stripe.com/payments/payment-methods-guide) avec une seule intégration.
En plus de gérer l’événement `payment_intent.succeeded`, vous pouvez également gérer deux autres événements lorsque vous encaissez des paiements à l’aide du Payment Element :
| Événement | Description | Action |
| ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded) | Envoyé par Stripe lorsqu’un client a effectué un paiement. | 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é par 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 d’effectuer une autre tentative de paiement. |
## Testez l’intégration
> Ne stockez pas de données d’utilisateur réelles sur des comptes *sandbox* (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 doivent être considérées comme des données publiques étant donné que vos comptes test sont associés à votre clé publique.
À l’heure actuelle, ne fonctionne qu’avec les cartes de crédit, les cartes de débit et les achats admissibles effectués sur un compte bancaire aux États-Unis. L’[inscription](https://docs.stripe.com/payments/payment-methods/pmd-registration.md) au est obligatoire.
Vous pouvez créer des comptes bac à sable pour Link à l’aide d’une adresse courriel valide. Le tableau suivant répertorie les codes à usage unique acceptés par Stripe pour l’authentification des comptes bac à sable :
| 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 modes de paiement spécifiques, consultez les [exemples de tests du Payment Element](https://docs.stripe.com/payments/accept-a-payment.md?platform=web#additional-testing-resources).
### Sources de financement multiples
Au fur et à mesure que Stripe ajoute des sources de financement supplémentaires, vous n’avez pas besoin de mettre à jour votre intégration. Stripe les prend en charge automatiquement avec le même délai de règlement des transactions et les mêmes garanties que les paiements par carte et par compte bancaire.
### Authentification des cartes 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. 3DS2 oblige les clients à effectuer une étape de vérification supplémentaire auprès de l’émetteur de la carte lorsqu’ils effectuent un paiement. Les paiements qui ont correctement été authentifiés à l’aide de 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 procédures d’authentification 3DS2 avec Link dans un bac à sable, utilisez la carte de test suivante en indiquant un code CVC, un code postal et une date d’expiration au choix : 4000000000003220.
Dans un bac à sable, 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, consultez la [page sur l’authentification 3D Secure](https://docs.stripe.com/payments/3d-secure.md).
> Lors des tests des procédures 3DS, seules les cartes de test pour 3DS2 déclencheront l’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 les modes de paiement enregistrés pour un client, vous pouvez afficher ses données enregistrées dans Link.
> #### Utilisez l’API Accounts v2 pour représenter les clients
>
> L’API Accounts v2 est désormais accessible à tous les utilisateurs de Connect et disponible en version bêta publique pour les autres utilisateurs de Stripe. Si vous participez à la version bêta d’Accounts v2, vous devez [indiquer une version bêta](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) dans votre code.
>
> Pour demander l’accès à la version bêta d’Accounts v2,
>
> Dans la plupart des cas d’usage, nous vous recommandons de [modéliser vos clients en tant qu’objets Account](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) configurés par le client plutôt que d’utiliser des objets [Customer](https://docs.stripe.com/api/customers.md).
Si un client a plusieurs modes de paiement enregistrés, Stripe affiche ses trois cartes enregistrées les plus récentes utilisées, en plus de tous les modes de paiement qu’il a enregistrés avec Link.
Pour ce faire, créez une clé éphémère et envoyez-la à votre interface utilisateur avec l’ID du `account` (pour les clients représentés comme des objets `Account` configurés par le client) ou l’ID `Customer` (pour les clients représentés comme des objets `Customer`). Étant donné que les informations sur le client sont sensibles, vous ne pouvez pas les récupérer directement dans Stripe.js; une clé éphémère accorde un accès temporaire à ces données.
#### Comptes 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"
```
#### Clients 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 `customerOptions` avec `clientSecret` du côté client.
```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 les modes de paiement Link pour les 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 *subscriptions* (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 les futurs *paiements pendant une 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 ce faire, vous devez le rattacher à un client représenté soit comme un `Account` configuré par le client, soit comme un objet `Customer`.
> #### Utilisez l’API Accounts v2 pour représenter les clients
>
> L’API Accounts v2 est désormais accessible à tous les utilisateurs de Connect et disponible en version bêta publique pour les autres utilisateurs de Stripe. Si vous participez à la version bêta d’Accounts v2, vous devez [indiquer une version bêta](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) dans votre code.
>
> Pour demander l’accès à la version bêta d’Accounts v2,
>
> Dans la plupart des cas d’usage, nous vous recommandons de [modéliser vos clients en tant qu’objets Account](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) configurés par le client 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é par le client afin de stocker ses données pour une utilisation ultérieure. Spécifiez ensuite le `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 `client_account` et l’ID *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) qui en résulte 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. Spécifiez ensuite le `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` et l’ID *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) qui en résulte 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`. Le `PaymentIntent` enverra alors un message d’erreur si une authentification est requise lorsque votre client n’utilise pas activement votre site ou votre application.
#### Comptes 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
```
#### Clients 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
```
## Présenter les informations de Stripe à vos clients
Stripe recueille des informations sur les interactions des clients avec Elements pour vous fournir des services, prévenir la fraude et améliorer ses services. Cela inclut l’utilisation de témoins et d’adresses IP pour identifier les Elements qu’un client a vus au cours d’une seule session de paiement. Vous êtes responsable de la divulgation et de l’obtention de tous les droits et consentements nécessaires pour permettre à Stripe d’utiliser les données de cette manière. Pour en savoir plus, rendez-vous sur 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
- [Présentation de 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écouvrez le composant Element Authentication de Link](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)