# Collecter les informations de paiement avant de créer un Intent
Développez une intégration dans laquelle vous pouvez afficher l'Element Payment avant de créer un objet PaymentIntent ou SetupIntent.
# Accepter un paiement
> This is a Accepter un paiement for when platform is web and type is payment. View the full page at https://docs.stripe.com/payments/accept-a-payment-deferred?platform=web&type=payment.
Le Payment Element vous permet d’accepter plusieurs moyens de paiement à l’aide d’une seule intégration. Vous allez créer un tunnel de paiement personnalisé dans lequel vous afficherez le Payment Element, créerez le *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) et confirmerez le paiement depuis le navigateur du client. Si vous préférez confirmer le paiement depuis le serveur, consultez la page [Finaliser les paiements sur le serveur](https://docs.stripe.com/payments/finalize-payments-on-the-server.md).
## 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'
```
## Activer des moyens de paiement
> Ce chemin d’intégration ne prend pas en charge BLIK ou les prélèvements automatiques qui utilisent le Système automatisé de compensation et de règlement (ACSS). De plus, si vous créez l’intention différée côté client, vous ne pouvez pas utiliser `customer_balance` avec des moyens de paiement dynamiques, car le PaymentIntent nécessite un objet [Account](https://docs.stripe.com/api/v2/core/accounts/object.md#v2_account_object-configuration-customer) ou [Customer](https://docs.stripe.com/api/customers/object.md) configuré par le client, ce que le flux côté client ne prend pas en charge. Pour utiliser `customer_balance`, créez le `PaymentIntent` côté serveur avec un `Account` ou un `Customer` renvoyez sa `client_secret` au client.
Affichez vos [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) et activez les moyens de paiement que vous souhaitez prendre en charge. Vous devez activer au moins un moyen de paiement pour créer un *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods).
Par défaut, Stripe active les cartes bancaires et les autres moyens de paiement courants qui peuvent vous permettre d’atteindre davantage de clients. Nous vous recommandons toutefois d’activer d’autres moyens de paiement pertinents pour votre entreprise et vos clients. Consultez la page [Prise en charge des moyens de paiement](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) pour en savoir plus sur la prise en charge des produits et des moyens de paiement, et notre [page des tarifs](https://stripe.com/pricing/local-payment-methods) pour prendre connaissance des frais que nous appliquons.
## Recueillir les informations de paiement [Côté client]
Utilisez le [Payment Element](https://docs.stripe.com/payments/payment-element.md) pour envoyer en toute sécurité les informations de paiement collectées dans un iFrame à Stripe via une connexion HTTPS.
> #### Conflits entre les iFrames
>
> Évitez de placer le Payment Element dans un autre iframe, car il entre en conflit avec les moyens de paiement qui nécessitent une redirection vers une autre page pour confirmer le paiement.
Your checkout page URL must start with `https://` rather than `http://` for your integration to work. You can test your integration without using HTTPS, but remember to [enable it](https://docs.stripe.com/security/guide.md#tls) when you’re ready to accept live payments.
#### HTML + JS
### Configurer Stripe.js
Le composant Element Payment est automatiquement disponible en tant que fonctionnalité de Stripe.js. Intégrez le script Stripe.js à votre page de paiement en l’ajoutant entre les balises `head` de votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour maintenir votre conformité PCI. Vous ne devez pas inclure le script dans un lot ni en héberger de copie.
```html
Checkout
```
Créez une instance de Stripe avec le code JavaScript suivant sur votre page de paiement :
```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 le composant Payment Element à votre page de paiement
Le composant Payment Element doit avoir un emplacement dédié dans votre page de paiement. Créez un nœud DOM (conteneur) vide doté d’un ID unique dans votre formulaire de paiement :
```html
```
Après le chargement de votre formulaire, créez une instance Elements avec le mode, le montant et la devise. Ces valeurs déterminent les moyens de paiement que l’Element présente à votre client.
Ensuite, créez une instance de l’Element Payment et montez-la sur le nœud DOM conteneur.
```javascript
const options = {mode:'payment',
amount: 1099,
currency: 'usd',
// Fully customizable with appearance API.
appearance: {/*...*/},
};
// Set up Stripe.js and Elements to use in checkout formconst elements = stripe.elements(options);
// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');
```
#### React
### Configurer Stripe.js
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
```
### Ajouter et configurer le fournisseur Elements sur votre page de paiement
Pour utiliser le composant Payment Element, incluez votre composant de page de paiement dans un [fournisseur Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Appelez `loadStripe` avec votre clé publique et transmettez le paramètre `Promise` renvoyé au fournisseur `Elements`.
Le fournisseur `Elements` accepte également un mode, un montant et une devise. Ces valeurs déterminent les moyens de paiement qui seront présentés à votre client.
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';
import CheckoutForm from './CheckoutForm';
// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('<>');
function App() {
const options = {mode:'payment',
amount: 1099,
currency: 'usd',
// Fully customizable with appearance API.
appearance: {/*...*/},
};
return (
);
};
ReactDOM.render(, document.getElementById('root'));
```
### Ajouter le composant Payment Element
Utilisez le composant `PaymentElement` pour créer votre formulaire.
```jsx
import React from 'react';
import {PaymentElement} from '@stripe/react-stripe-js';
const CheckoutForm = () => {
return (
);
};
export default CheckoutForm;
```
Le composant Element Payment affiche un formulaire dynamique qui permet à votre client de choisir un moyen de paiement. Le formulaire collecte automatiquement toutes les informations de paiement nécessaires pour le moyen de paiement sélectionné par le client.
Vous pouvez personnaliser le Payment Element pour l’adapter au design de votre site en transmettant l’[objet Appearance](https://docs.stripe.com/elements/appearance-api.md) dans les `options` lors de la création du fournisseur `Elements`.
### Collecter les adresses
Par défaut, le Payment Element ne collecte que les informations nécessaires à la facturation. Certaines opérations, telles que le [calcul des taxes](https://docs.stripe.com/api/tax/calculations/create.md) ou la saisie des informations de livraison, nécessitent l’adresse complète de votre client. Vous pouvez :
- Utilisez l’[Address Element](https://docs.stripe.com/elements/address-element.md) pour tirer parti des fonctionnalités de saisie automatique et de localisation et recueillir l’adresse complète de votre client. Cela permet de garantir un calcul des taxes le plus précis possible.
- Recueillez l’adresse à l’aide de votre propre formulaire personnalisé.
## Optional: Personnaliser la mise en page [Côté client]
Vous pouvez adapter la mise en page du composant Payment Element (en accordéon ou en onglets) à votre interface de paiement. Pour plus d’informations sur chacune des propriétés, consultez la section [elements.create](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options).
#### Accordéon
Vous pouvez commencer à utiliser les fonctionnalités de mise en page en transmettant un `type` de mise en page et d’autres propriétés facultatives lors de la création du Payment Element :
```javascript
const paymentElement = elements.create('payment', {
layout: {
type: 'accordion',
defaultCollapsed: false,
radios: 'always',
spacedAccordionItems: false
}
});
```
#### Onglets
### Spécifier la mise en page
Définissez la valeur de mise en page sur `tabs` (onglets). Vous avez également la possibilité de spécifier d’autres propriétés, notamment celles figurant dans l’exemple suivant :
```javascript
const paymentElement = elements.create('payment', {
layout: {
type: 'tabs',
defaultCollapsed: false,
}
});
```
L’image suivante illustre différents affichages du même composant Element Payment correspondant à différentes configurations de mise en page :
Mise en page du composant Element Payment
## Optional: Personnaliser l'apparence [Côté client]
Maintenant que vous avez ajouté le composant Payment Element à votre page, vous pouvez personnaliser son apparence pour l’adapter à votre design. Pour en savoir plus sur la personnalisation de ce composant, consultez la page dédiée à l’[API Elements Appearance](https://docs.stripe.com/elements/appearance-api.md).
Personnaliser le Payment Element
## Optional: Enregistrer et récupérer les moyens de paiement des clients
Vous pouvez configurer le composant Payment Element de façon à enregistrer les moyens de paiement de vos clients en vue d’une utilisation ultérieure. Cette section vous montre comment intégrer la [fonctionnalité d’enregistrement des moyens de paiement](https://docs.stripe.com/payments/save-customer-payment-methods.md), qui permet à Payment Element de :
- De demander aux acheteurs s’ils consentent à ce que leur moyen de paiement soit enregistré
- Enregistrer les moyens de paiement lorsque les clients y consentent
- Afficher les moyens de paiement enregistrés des acheteurs lors de leurs futurs achats
- [Mise à jour automatique des cartes perdues ou expirées](https://docs.stripe.com/payments/cards/overview.md#automatic-card-updates) lorsque les clients les remplacent
Enregistrez les moyens de paiement.
Réutilisez un moyen de paiement précédemment enregistré.
### Activer l’enregistrement du moyen de paiement dans le composant Payment Element
Créez une [CustomerSession](https://docs.stripe.com/api/customer_sessions/.md) sur votre serveur en fournissant l’ID du client (en utilisant soit `customer` pour un objet `Customer`, soit `customer_account` pour un objet `Account` configuré pour le client) et en activant le composant [payment_element](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-components-payment_element) pour votre session. Configurez les [fonctionnalités](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features) des moyens de paiement enregistrés que vous souhaitez activer. Par exemple, l’activation de [payment_method_save](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features-payment_method_save) affiche une case à cocher qui permet aux clients d’enregistrer leurs informations de paiement pour une utilisation ultérieure.
Vous pouvez définir `setup_future_usage` sur un PaymentIntent ou une Checkout Session pour déroger au comportement par défaut d’enregistrement des moyens de paiement. Cela permet d’enregistrer automatiquement le moyen de paiement pour une utilisation ultérieure, même si le client ne choisit pas explicitement de l’enregistrer. Si vous prévoyez de définir `setup_future_usage`, ne définissez pas `payment_method_save_usage` dans la même transaction de paiement, car cela provoque une erreur d’intégration.
> #### 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
#### Ruby
```ruby
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
client = Stripe::StripeClient.new('<>')
post '/create-customer-session' do
customer_session = client.v1.customer_sessions.create({
customer_account: {{CUSTOMER_ACCOUNT_ID}},
components: {
payment_element: {
enabled: true,
features: {
payment_method_redisplay: 'enabled',
payment_method_save: 'enabled',
payment_method_save_usage: 'off_session',
payment_method_remove: 'enabled',
},
},
},
})
{
customer_session_client_secret: customer_session.client_secret
}.to_json
end
```
#### Customers v1
#### Ruby
```ruby
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
client = Stripe::StripeClient.new('<>')
post '/create-customer-session' do
customer_session = client.v1.customer_sessions.create({
customer: {{CUSTOMER_ID}},
components: {
payment_element: {
enabled: true,
features: {
payment_method_redisplay: 'enabled',
payment_method_save: 'enabled',
payment_method_save_usage: 'off_session',
payment_method_remove: 'enabled',
},
},
},
})
{
customer_session_client_secret: customer_session.client_secret
}.to_json
end
```
Votre instance Elements utilise la *clé secrète du client* (A client secret is used with your publishable key to authenticate a request for a single object. Each client secret is unique to the object it's associated with) de la session Client pour accéder aux moyens de paiement enregistrés de ce client. [Gérez les erreurs](https://docs.stripe.com/error-handling.md) correctement lorsque vous créez la session Client. Si une erreur se produit, vous n’avez pas besoin de fournir la clé secrète du client de la session Client à l’instance Elements, car elle est facultative.
Créez l’instance Elements à l’aide de la clé secrète du client de la session Client. Ensuite, utilisez l’instance Elements pour créer un Payment Element.
```javascript
// Create the CustomerSession and obtain its clientSecret
const res = await fetch("/create-customer-session", {
method: "POST"
});
const {
customer_session_client_secret: customerSessionClientSecret
} = await res.json();
const elementsOptions = {
mode: 'payment',
amount: 1099,
currency: 'usd',customerSessionClientSecret,
// Fully customizable with appearance API.
appearance: {/*...*/},
};
// Set up Stripe.js and Elements to use in checkout form, passing the client secret
// and CustomerSession's client secret obtained in a previous step
const elements = stripe.elements(elementsOptions);
// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');
```
Lors de la confirmation du PaymentIntent, Stripe.js contrôle automatiquement le paramètre [setup_future_usage](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-setup_future_usage) sur le PaymentIntent et le paramètre [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) sur le PaymentMethod, selon que le client a coché ou non la case permettant d’enregistrer ses informations de paiement.
### Exiger la collecte du CVC
Vous pouvez également spécifier `require_cvc_recollection` à la fois [lors de la création du PaymentIntent](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-card-require_cvc_recollection) et [lors de la création d’Elements](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-paymentMethodOptions-card-require_cvc_recollection) pour appliquer la collecte du CVC lorsqu’un client paie par carte.
### Détecter la sélection d’un moyen de paiement enregistré
Pour contrôler le contenu dynamique qui s’affiche lors de la sélection d’un moyen de paiement enregistré, écoutez l’événement `change` du composant Element Payment, qui contient le moyen de paiement sélectionné.
```javascript
paymentElement.on('change', function(event) {
if (event.value.payment_method) {
// Control dynamic content if a saved payment method is selected
}
})
```
## Optional: Mettre à jour les informations de paiement de manière dynamique [Côté client]
Lorsque le client effectue des actions qui modifient les informations du paiement (par exemple s’il applique un code de réduction), mettez à jour l’instance d’Elements afin de prendre en compte les nouvelles valeurs. Certains moyens de paiement, comme Apple Pay et Google Pay, affichent le montant dans l’interface utilisateur, vous devez donc veiller à ce que celui-ci soit toujours exact et à jour.
#### HTML + JS
```js
async function handleDiscountCode(code) {
// On the server, validate that the discount code is valid and return the new amount
const {newAmount} = await fetch("/apply-discount", {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({code}),
});
await elements.update({amount: newAmount});
}
```
#### React
```jsx
function App() {
const [amount, setAmount] = React.useState(1099);
const handleDiscountCode = useCallback(async (code) => {
// On the server, validate that the discount code is valid and return the new amount
const {newAmount} = await fetch("/apply-discount", {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({code}),
});
// Trigger a state change that re-renders the Elements provider with the new amount
setAmount(newAmount);
}, []);
const options = {
mode: 'payment',
amount,
currency: 'usd',
appearance: {/*...*/},
};
return (
);
};
```
## Optional: Options d'éléments supplémentaires [Côté client]
L’[objet Elements](https://docs.stripe.com/js/elements_object/create_without_intent) accepte des options supplémentaires qui ont une incidence sur l’encaissement des paiements. En fonction des options proposées, le Payment Element affiche les moyens de paiement disponibles parmi ceux que vous avez activés. En savoir plus sur la [prise en charge des moyens de paiement](https://docs.stripe.com/payments/payment-methods/payment-method-support.md).
Assurez-vous que les options Elements que vous fournissez (telles que `captureMethod`, `setupFutureUsage` et `paymentMethodOptions`) correspondent aux paramètres équivalents que vous transmettez lors de la création et de la confirmation de l’Intent. Des paramètres incohérents peuvent entraîner un comportement inattendu ou des erreurs.
| Propriété | Type | Description | Obligatoire |
| ---------------------------- | -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `mode` | - `payment`
- `setup`
- `subscription` | Indique si l’Payment Element est utilisé avec un *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods), un *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method) ou un *abonnement* (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). | Oui |
| `currency` | `string` | La devise du montant à facturer au client. | Oui |
| `amount` | `number` | Le montant à débiter au client, indiqué dans les interfaces utilisateur Apple Pay, Google Pay ou BNPL. | Pour les modes `payment` et `subscription` |
| `setupFutureUsage` | - `off_session`
- `on_session` | Indique que vous avez l’intention d’effectuer des paiements ultérieurs avec les informations de paiement collectées par l’Payment Element. | Non |
| `captureMethod` | - `automatic`
- `automatic_async`
- `manual` | Détermine à quel moment capturer les fonds sur le compte du client. | Non |
| `onBehalfOf` | `string` | Connect uniquement. L’ID de compte Stripe qui correspond à l’entreprise de référence. Consultez les [cas d’usage](https://docs.stripe.com/connect/charges.md) pour déterminer si cette option est pertinente pour votre intégration. | Non |
| `paymentMethodTypes` | `string[]` | Liste des types de moyens de paiement à afficher. Vous pouvez omettre cet attribut pour gérer vos moyens de paiement dans le [Dashboard Stripe](https://dashboard.stripe.com/settings/payment_methods). | Non |
| `paymentMethodConfiguration` | `string` | La [configuration des moyens de paiement](https://docs.stripe.com/api/payment_method_configurations.md) à utiliser lors de la gestion de vos moyens de paiement dans le [Dashboard Stripe](https://dashboard.stripe.com/settings/payment_methods). Si aucune configuration n’est spécifiée, votre configuration par défaut sera utilisée. | Non |
| `paymentMethodCreation` | `manual` | Autorise la création d’objets PaymentMethod à partir de l’instance Elements à l’aide de [stripe.createPaymentMethod](https://docs.stripe.com/js/payment_methods/create_payment_method_elements). | Non |
| `paymentMethodOptions` | `{us_bank_account: {verification_method: string}}` | Options de vérification pour le moyen de paiement `us_bank_account`. Accepte les mêmes méthodes de vérification que les [Payment Intents](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-us_bank_account-verification_method). | Non |
| `paymentMethodOptions` | `{card: {installments: {enabled: boolean}}}` | Permet d’activer manuellement l’interface utilisateur de sélection du calendrier de versements échelonnés par carte, le cas échéant, lorsque vous ne gérez pas vos moyens de paiement dans le [Dashboard Stripe](https://dashboard.stripe.com/settings/payment_methods). Vous devez définir `mode='payment'` *et* spécifier explicitement des `paymentMethodTypes`. Dans le cas contraire, une erreur est générée. Non compatible avec `paymentMethodCreation='manual'`. | Non |
| `paymentMethodOptions` | `{[paymentMethod]: {setup_future_usage: string}}` | Vous permet de spécifier `setup_future_usage` pour les seuls moyens de paiement prenant en charge la réutilisation. Uniquement applicable lorsque `le mode` est `paiement`. La valeur de chaque moyen de paiement doit correspondre au `payment_method_options[paymentMethod][setup_future_usage]` correspondant sur le PaymentIntent lors de la confirmation. Consultez la [documentation Stripe.js](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-paymentMethodOptions) pour connaître les moyens de paiement et valeurs pris en charge. | Non |
## Optional: Créer un ConfirmationToken
Si vous souhaitez créer un tunnel de paiement sur plusieurs pages ou collecter des informations de moyen de paiement avant d’effectuer des validations supplémentaires, consultez la section [Créer un tunnel de paiement en deux étapes](https://docs.stripe.com/payments/build-a-two-step-confirmation.md). Grâce à ce tunnel, vous pouvez créer un [ConfirmationToken](https://docs.stripe.com/api/confirmation_tokens.md) côté client afin de recueillir les informations de paiement, puis utiliser celui-ci pour créer un PaymentIntent côté serveur.
## Créer un PaymentIntent [Côté serveur]
> #### Exécuter une logique métier personnalisée immédiatement avant la confirmation du paiement
>
> Accédez à l’[étape 5](https://docs.stripe.com/payments/finalize-payments-on-the-server.md?platform=web&type=payment#submit-payment) du guide « Finaliser » les paiements pour exécuter votre logique métier personnalisée immédiatement avant la confirmation du paiement. Sinon, suivez la procédure ci-dessous pour une intégration plus simple, qui utilise `stripe.confirmPayment` au niveau du client afin de confirmer le paiement et gérer les actions qui pourraient suivre.
Lorsque le client envoie votre formulaire de paiement, créez un *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) sur votre serveur avec un `amount` et une `currency` activés.
Renvoyez la valeur *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)) à votre client pour que Stripe.js l’utilise afin de finaliser le processus de paiement.
L’exemple suivant comprend du code commenté pour illustrer le [Calcul facultatif des taxes](https://docs.stripe.com/payments/accept-a-payment-deferred.md#calculate-tax).
#### Accounts v2
#### Ruby
```ruby
require 'stripe'
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
Stripe.api_key = '<>'
post '/create-intent' do
# If you used a Tax Calculation, optionally recalculate taxes
# confirmation_token = Stripe::ConfirmationToken.retrieve(params[:confirmation_token_id])
# summarized_payment_details = summarize_payment_details(confirmation_token)
intent = Stripe::PaymentIntent.create({
# To allow saving and retrieving payment methods, provide the Account ID.
customer_account: customer_account.id,
# If you used a Tax Calculation, use its `amount_total`.
# amount: summarized_payment_details.amount_total,
amount: 1099,
currency: 'usd',
# Specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
automatic_payment_methods: {enabled: true},
# If you used a Tax Calculation, link it to the PaymentIntent to make sure any transitions accurately reflect the tax.
# hooks: {
# inputs: {
# tax: {
# calculation: tax_calculation.id
# }
# }
#}
},
#{
# stripe_version: '2025-09-30.preview' }
)
{client_secret: intent.client_secret}.to_json
end
```
#### Customers v1
#### Ruby
```ruby
require 'stripe'
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
client = Stripe::StripeClient.new('<>')
post '/create-intent' do
# If you used a Tax Calculation, optionally recalculate taxes
# confirmation_token = client.v1.confirmation_tokens.retrieve(params[:confirmation_token_id])
# summarized_payment_details = summarize_payment_details(confirmation_token)
intent = client.v1.payment_intents.create({
# To allow saving and retrieving payment methods, provide the Customer ID.
customer: customer.id,
# If you used a Tax Calculation, use its `amount_total`.
# amount: summarized_payment_details.amount_total,
amount: 1099,
currency: 'usd',
# Specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
automatic_payment_methods: {enabled: true},
# If you used a Tax Calculation, link it to the PaymentIntent to make sure any transitions accurately reflect the tax.
# hooks: {
# inputs: {
# tax: {
# calculation: tax_calculation.id
# }
# }
#}
},
#{
# stripe_version: '2025-09-30.preview' }
)
{client_secret: intent.client_secret}.to_json
end
```
> #### Définir `payment_method_options` pour les paiements `us_bank_account`
>
> Le fait de définir `payment_method_options` à cette étape n’affectera pas les moyens de paiement collectés. Configurez plutôt les moyens de paiement dans le [Dashboard](https://dashboard.stripe.com/settings/payment_methods).
## 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 du composant Payment Element.
Ajoutez un paramètre [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) à cette fonction pour indiquer à Stripe où rediriger l’utilisateur une fois le paiement effectué. Dans un premier temps, votre utilisateur sera peut-être redirigé vers un site intermédiaire, comme une page d’autorisation bancaire, avant d’être redirigé vers l’URL `return_url`. Les utilisateurs qui effectuent des paiements par carte sont immédiatement redirigés vers l’URL `return_url` à la réussite du paiement.
Si vous ne souhaitez pas effectuer de redirection à la fin des paiements par carte, vous pouvez assigner au paramètre [redirect](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) la valeur `if_required`. De cette manière, seuls les clients qui choisissent un moyen de paiement avec redirection seront redirigés.
#### HTML + JS
```javascript
const form = document.getElementById('payment-form');
const submitBtn = document.getElementById('submit');
const handleError = (error) => {
const messageContainer = document.querySelector('#error-message');
messageContainer.textContent = error.message;
submitBtn.disabled = false;
}
form.addEventListener('submit', async (event) => {
// We don't want to let default form submission happen here,
// which would refresh the page.
event.preventDefault();
// Prevent multiple form submissions
if (submitBtn.disabled) {
return;
}
// Disable form submission while loading
submitBtn.disabled = true;
// Trigger form validation and wallet collection
const {error: submitError} = await elements.submit();
if (submitError) {
handleError(submitError);
return;
}
// Create the PaymentIntent and obtain clientSecret
const res = await fetch("/create-intent", {
method: "POST",
});
const {client_secret: clientSecret} = await res.json();
// Confirm the PaymentIntent using the details collected by the Payment Element
const {error} = await stripe.confirmPayment({
elements,
clientSecret,
confirmParams: {
return_url: 'https://example.com/order/123/complete',
},
});
if (error) {
// This point is only reached if there's an immediate error when
// confirming the payment. Show the error to your customer (for example, payment details incomplete)
handleError(error);
} else {
// Your customer is redirected to your `return_url`. For some payment
// methods like iDEAL, your customer is redirected to an intermediate
// site first to authorize the payment, then redirected to the `return_url`.
}
});
```
#### React
```jsx
import React, {useState} from 'react';
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';
export default function CheckoutForm() {
const stripe = useStripe();
const elements = useElements();
const [errorMessage, setErrorMessage] = useState();
const [loading, setLoading] = useState(false);
const handleError = (error) => {
setLoading(false);
setErrorMessage(error.message);
}
const handleSubmit = async (event) => {
// We don't want to let default form submission happen here,
// which would refresh the page.
event.preventDefault();
if (!stripe) {
// Stripe.js hasn't yet loaded.
// Make sure to disable form submission until Stripe.js has loaded.
return;
}
setLoading(true);
// Trigger form validation and wallet collection
const {error: submitError} = await elements.submit();
if (submitError) {
handleError(submitError);
return;
}
// Create the PaymentIntent and obtain clientSecret
const res = await fetch("/create-intent", {
method: "POST",
});
const {client_secret: clientSecret} = await res.json();
// Confirm the PaymentIntent using the details collected by the Payment Element
const {error} = await stripe.confirmPayment({
elements,
clientSecret,
confirmParams: {
return_url: 'https://example.com/order/123/complete',
},
});
if (error) {
// This point is only reached if there's an immediate error when
// confirming the payment. Show the error to your customer (for example, payment details incomplete)
handleError(error);
} else {
// Your customer is redirected to your `return_url`. For some payment
// methods like iDEAL, your customer is redirected to an intermediate
// site first to authorize the payment, then redirected to the `return_url`.
}
};
return (
);
}
```
## Optional: Gérer les événements post-paiement
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 le Dashboard, un *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) personnalisé ou une solution partenaire pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par e-mail à votre client, enregistrer la vente dans une base de données ou lancer un workflow de livraison.
Plutôt que d’attendre un rappel de votre client, écoutez ces événements. En effet, côté client, l’acheteur pourrait fermer la fenêtre de son navigateur ou quitter l’application avant l’exécution du rappel. Des personnes malveillantes peuvent en profiter pour manipuler la réponse. Si vous configurez votre intégration de manière à écouter les événements asynchrones, cela vous permettra également d’accepter de nouveaux moyens de paiement plus facilement à l’avenir. Apprenez-en davantage sur les [différences entre les différents moyens de paiement pris en charge](https://stripe.com/payments/payment-methods-guide).
- **Gérer les événements manuellement dans le Dashboard**
Utilisez le Dashboard pour [afficher vos paiements de test dans le Dashboard](https://dashboard.stripe.com/test/payments), envoyer des reçus par e-mail, gérer les virements ou réessayer les paiements échoués.
- **Créer un webhook personnalisé**
[Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI.
- **Intégrer une application prédéfinie**
Gérez les événements commerciaux courants, tels que l’[automatisation](https://stripe.partners/?f_category=automation) ou le [marketing et les ventes](https://stripe.partners/?f_category=marketing-and-sales), en intégrant une application partenaire.
# Configurer un moyen de paiement
> This is a Configurer un moyen de paiement for when platform is web and type is setup. View the full page at https://docs.stripe.com/payments/accept-a-payment-deferred?platform=web&type=setup.
Un flux de configuration vous permet de configurer un moyen de paiement pour les paiements ultérieurs sans débiter votre client immédiatement. Dans cette intégration, vous allez créer un tunnel de paiement personnalisé dans lequel vous afficherez le Payment Element, créerez le *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method) et confirmerez la configuration depuis le navigateur du client.
## 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'
```
## Activer des moyens de paiement
> Ce chemin d’intégration ne prend pas en charge BLIK ou les prélèvements automatiques qui utilisent le Système automatisé de compensation et de règlement (ACSS). De plus, si vous créez l’intention différée côté client, vous ne pouvez pas utiliser `customer_balance` avec des moyens de paiement dynamiques, car le PaymentIntent nécessite un objet [Account](https://docs.stripe.com/api/v2/core/accounts/object.md#v2_account_object-configuration-customer) ou [Customer](https://docs.stripe.com/api/customers/object.md) configuré par le client, ce que le flux côté client ne prend pas en charge. Pour utiliser `customer_balance`, créez le `PaymentIntent` côté serveur avec un `Account` ou un `Customer` renvoyez sa `client_secret` au client.
Affichez vos [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) et activez les moyens de paiement que vous souhaitez prendre en charge. Vous devez activer au moins un moyen de paiement pour créer un *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method).
Par défaut, Stripe active les cartes bancaires et les autres moyens de paiement courants qui peuvent vous permettre d’atteindre davantage de clients. Nous vous recommandons toutefois d’activer d’autres moyens de paiement pertinents pour votre entreprise et vos clients. Consultez la page [Prise en charge des moyens de paiement](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) pour en savoir plus sur la prise en charge des produits et des moyens de paiement, et notre [page des tarifs](https://stripe.com/pricing/local-payment-methods) pour prendre connaissance des frais que nous appliquons.
## Recueillir les informations de paiement [Côté client]
Utilisez le [Payment Element](https://docs.stripe.com/payments/payment-element.md) pour envoyer en toute sécurité les informations de paiement collectées dans un iFrame à Stripe via une connexion HTTPS.
> #### Conflits entre les iFrames
>
> Évitez de placer le Payment Element dans un autre iframe, car il entre en conflit avec les moyens de paiement qui nécessitent une redirection vers une autre page pour confirmer le paiement.
Your checkout page URL must start with `https://` rather than `http://` for your integration to work. You can test your integration without using HTTPS, but remember to [enable it](https://docs.stripe.com/security/guide.md#tls) when you’re ready to accept live payments.
#### HTML + JS
### Configurer Stripe.js
Le composant Element Payment est automatiquement disponible en tant que fonctionnalité de Stripe.js. Intégrez le script Stripe.js à votre page de paiement en l’ajoutant entre les balises `head` de votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour maintenir votre conformité PCI. Vous ne devez pas inclure le script dans un lot ni en héberger de copie.
```html
Checkout
```
Créez une instance de Stripe avec le code JavaScript suivant sur votre page de paiement :
```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 le composant Payment Element à votre page de paiement
Le composant Payment Element doit avoir un emplacement dédié dans votre page de paiement. Créez un nœud DOM (conteneur) vide doté d’un ID unique dans votre formulaire de paiement :
```html
```
Après le chargement de votre formulaire, créez une instance Elements avec le mode « setup ». Ensuite, créez une instance du Payment Element et montez-la sur le nœud DOM du conteneur.
```javascript
const options = {mode: 'setup',
currency: 'usd',
// Fully customizable with appearance API.
appearance: {/*...*/},
};
// Set up Stripe.js and Elements to use in checkout formconst elements = stripe.elements(options);
// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');
```
#### React
### Configurer Stripe.js
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
```
### Ajouter et configurer le fournisseur Elements sur votre page de paiement
Pour utiliser le composant Payment Element, enveloppez votre composant de page de paiement dans un [fournisseur Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Appelez `loadStripe` avec votre clé publiable, puis transmettez l’élément `Promise` renvoyé au fournisseur `Elements`, ainsi que `mode: 'setup'`.
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';
import SetupForm from './SetupForm';
// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('<>');
function App() {
const options = {mode: 'setup',
currency: 'usd',
// Fully customizable with appearance API.
appearance: {/*...*/},
};
return (
);
};
ReactDOM.render(, document.getElementById('root'));
```
### Ajouter le composant Payment Element
Utilisez le composant `PaymentElement` pour créer votre formulaire.
```jsx
import React from 'react';
import {PaymentElement} from '@stripe/react-stripe-js';
const SetupForm = () => {
return (
);
};
export default SetupForm;
```
Le composant Element Payment affiche un formulaire dynamique qui permet à votre client de choisir un moyen de paiement. Le formulaire collecte automatiquement toutes les informations de paiement nécessaires pour le moyen de paiement sélectionné par le client.
Vous pouvez personnaliser le Payment Element pour l’adapter au design de votre site en transmettant l’[objet Appearance](https://docs.stripe.com/elements/appearance-api.md) dans les `options` lors de la création du fournisseur `Elements`.
### Collecter les adresses
Par défaut, le Payment Element ne collecte que les informations nécessaires à la facturation. Certaines opérations, telles que le [calcul des taxes](https://docs.stripe.com/api/tax/calculations/create.md) ou la saisie des informations de livraison, nécessitent l’adresse complète de votre client. Vous pouvez :
- Utilisez l’[Address Element](https://docs.stripe.com/elements/address-element.md) pour tirer parti des fonctionnalités de saisie automatique et de localisation et recueillir l’adresse complète de votre client. Cela permet de garantir un calcul des taxes le plus précis possible.
- Recueillez l’adresse à l’aide de votre propre formulaire personnalisé.
## Optional: Personnaliser la mise en page [Côté client]
Vous pouvez adapter la mise en page du composant Payment Element (en accordéon ou en onglets) à votre interface de paiement. Pour plus d’informations sur chacune des propriétés, consultez la section [elements.create](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options).
#### Accordéon
Vous pouvez commencer à utiliser les fonctionnalités de mise en page en transmettant un `type` de mise en page et d’autres propriétés facultatives lors de la création du Payment Element :
```javascript
const paymentElement = elements.create('payment', {
layout: {
type: 'accordion',
defaultCollapsed: false,
radios: 'always',
spacedAccordionItems: false
}
});
```
#### Onglets
### Spécifier la mise en page
Définissez la valeur de mise en page sur `tabs` (onglets). Vous avez également la possibilité de spécifier d’autres propriétés, notamment celles figurant dans l’exemple suivant :
```javascript
const paymentElement = elements.create('payment', {
layout: {
type: 'tabs',
defaultCollapsed: false,
}
});
```
L’image suivante illustre différents affichages du même composant Element Payment correspondant à différentes configurations de mise en page :
Mise en page du composant Element Payment
## Optional: Personnaliser l'apparence [Côté client]
Maintenant que vous avez ajouté le composant Payment Element à votre page, vous pouvez personnaliser son apparence pour l’adapter à votre design. Pour en savoir plus sur la personnalisation de ce composant, consultez la page dédiée à l’[API Elements Appearance](https://docs.stripe.com/elements/appearance-api.md).
Personnaliser le Payment Element
## Optional: Enregistrer et récupérer les moyens de paiement des clients
Vous pouvez configurer le composant Payment Element de façon à enregistrer les moyens de paiement de vos clients en vue d’une utilisation ultérieure. Cette section vous montre comment intégrer la [fonctionnalité d’enregistrement des moyens de paiement](https://docs.stripe.com/payments/save-customer-payment-methods.md), qui permet à Payment Element de :
- De demander aux acheteurs s’ils consentent à ce que leur moyen de paiement soit enregistré
- Enregistrer les moyens de paiement lorsque les clients y consentent
- Afficher les moyens de paiement enregistrés des acheteurs lors de leurs futurs achats
- [Mise à jour automatique des cartes perdues ou expirées](https://docs.stripe.com/payments/cards/overview.md#automatic-card-updates) lorsque les clients les remplacent
Enregistrez les moyens de paiement.
Réutilisez un moyen de paiement précédemment enregistré.
### Activer l’enregistrement du moyen de paiement dans le composant Payment Element
Créez une [CustomerSession](https://docs.stripe.com/api/customer_sessions/.md) sur votre serveur en fournissant l’ID du client (en utilisant soit `customer` pour un objet `Customer`, soit `customer_account` pour un objet `Account` configuré pour le client) et en activant le composant [payment_element](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-components-payment_element) pour votre session. Configurez les [fonctionnalités](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features) des moyens de paiement enregistrés que vous souhaitez activer. Par exemple, l’activation de [payment_method_save](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features-payment_method_save) affiche une case à cocher qui permet aux clients d’enregistrer leurs informations de paiement pour une utilisation ultérieure.
Vous pouvez définir `setup_future_usage` sur un PaymentIntent ou une Checkout Session pour déroger au comportement par défaut d’enregistrement des moyens de paiement. Cela permet d’enregistrer automatiquement le moyen de paiement pour une utilisation ultérieure, même si le client ne choisit pas explicitement de l’enregistrer. Si vous prévoyez de définir `setup_future_usage`, ne définissez pas `payment_method_save_usage` dans la même transaction de paiement, car cela provoque une erreur d’intégration.
> #### 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
#### Ruby
```ruby
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
client = Stripe::StripeClient.new('<>')
post '/create-customer-session' do
customer_session = client.v1.customer_sessions.create({
customer_account: {{CUSTOMER_ACCOUNT_ID}},
components: {
payment_element: {
enabled: true,
features: {
payment_method_redisplay: 'enabled',
payment_method_save: 'enabled',
payment_method_save_usage: 'off_session',
payment_method_remove: 'enabled',
},
},
},
})
{
customer_session_client_secret: customer_session.client_secret
}.to_json
end
```
#### Customers v1
#### Ruby
```ruby
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
client = Stripe::StripeClient.new('<>')
post '/create-customer-session' do
customer_session = client.v1.customer_sessions.create({
customer: {{CUSTOMER_ID}},
components: {
payment_element: {
enabled: true,
features: {
payment_method_redisplay: 'enabled',
payment_method_save: 'enabled',
payment_method_save_usage: 'off_session',
payment_method_remove: 'enabled',
},
},
},
})
{
customer_session_client_secret: customer_session.client_secret
}.to_json
end
```
Votre instance Elements utilise la *clé secrète du client* (A client secret is used with your publishable key to authenticate a request for a single object. Each client secret is unique to the object it's associated with) de la session Client pour accéder aux moyens de paiement enregistrés de ce client. [Gérez les erreurs](https://docs.stripe.com/error-handling.md) correctement lorsque vous créez la session Client. Si une erreur se produit, vous n’avez pas besoin de fournir la clé secrète du client de la session Client à l’instance Elements, car elle est facultative.
Créez l’instance Elements à l’aide de la clé secrète du client de la session Client. Ensuite, utilisez l’instance Elements pour créer un Payment Element.
```javascript
// Create the CustomerSession and obtain its clientSecret
const res = await fetch("/create-customer-session", {
method: "POST"
});
const {
customer_session_client_secret: customerSessionClientSecret
} = await res.json();
const elementsOptions = {
mode: 'setup',
currency: 'usd',customerSessionClientSecret,
// Fully customizable with appearance API.
appearance: {/*...*/},
};
// Set up Stripe.js and Elements to use in checkout form, passing the client secret
// and CustomerSession's client secret obtained in a previous step
const elements = stripe.elements(elementsOptions);
// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');
```
Lors de la confirmation du SetupIntent, Stripe.js contrôle automatiquement le paramètre [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) sur le PaymentMethod, selon que le client a coché ou non la case permettant d’enregistrer ses informations de paiement.
### Détecter la sélection d’un moyen de paiement enregistré
Pour contrôler le contenu dynamique qui s’affiche lors de la sélection d’un moyen de paiement enregistré, écoutez l’événement `change` du composant Element Payment, qui contient le moyen de paiement sélectionné.
```javascript
paymentElement.on('change', function(event) {
if (event.value.payment_method) {
// Control dynamic content if a saved payment method is selected
}
})
```
## Optional: Options d'éléments supplémentaires [Côté client]
L’[objet Elements](https://docs.stripe.com/js/elements_object/create_without_intent) accepte des options supplémentaires qui ont une incidence sur l’encaissement des paiements. En fonction des options proposées, le Payment Element affiche les moyens de paiement disponibles parmi ceux que vous avez activés. En savoir plus sur la [prise en charge des moyens de paiement](https://docs.stripe.com/payments/payment-methods/payment-method-support.md).
Assurez-vous que les options Elements que vous fournissez (telles que `captureMethod`, `setupFutureUsage` et `paymentMethodOptions`) correspondent aux paramètres équivalents que vous transmettez lors de la création et de la confirmation de l’Intent. Des paramètres incohérents peuvent entraîner un comportement inattendu ou des erreurs.
| Propriété | Type | Description | Obligatoire |
| ---------------------------- | -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `mode` | - `payment`
- `setup`
- `subscription` | Indique si l’Payment Element est utilisé avec un *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods), un *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method) ou un *abonnement* (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). | Oui |
| `currency` | `string` | La devise du montant à facturer au client. | Oui |
| `amount` | `number` | Le montant à débiter au client, indiqué dans les interfaces utilisateur Apple Pay, Google Pay ou BNPL. | Pour les modes `payment` et `subscription` |
| `setupFutureUsage` | - `off_session`
- `on_session` | Indique que vous avez l’intention d’effectuer des paiements ultérieurs avec les informations de paiement collectées par l’Payment Element. | Non |
| `captureMethod` | - `automatic`
- `automatic_async`
- `manual` | Détermine à quel moment capturer les fonds sur le compte du client. | Non |
| `onBehalfOf` | `string` | Connect uniquement. L’ID de compte Stripe qui correspond à l’entreprise de référence. Consultez les [cas d’usage](https://docs.stripe.com/connect/charges.md) pour déterminer si cette option est pertinente pour votre intégration. | Non |
| `paymentMethodTypes` | `string[]` | Liste des types de moyens de paiement à afficher. Vous pouvez omettre cet attribut pour gérer vos moyens de paiement dans le [Dashboard Stripe](https://dashboard.stripe.com/settings/payment_methods). | Non |
| `paymentMethodConfiguration` | `string` | La [configuration des moyens de paiement](https://docs.stripe.com/api/payment_method_configurations.md) à utiliser lors de la gestion de vos moyens de paiement dans le [Dashboard Stripe](https://dashboard.stripe.com/settings/payment_methods). Si aucune configuration n’est spécifiée, votre configuration par défaut sera utilisée. | Non |
| `paymentMethodCreation` | `manual` | Autorise la création d’objets PaymentMethod à partir de l’instance Elements à l’aide de [stripe.createPaymentMethod](https://docs.stripe.com/js/payment_methods/create_payment_method_elements). | Non |
| `paymentMethodOptions` | `{us_bank_account: {verification_method: string}}` | Options de vérification pour le moyen de paiement `us_bank_account`. Accepte les mêmes méthodes de vérification que les [Payment Intents](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-us_bank_account-verification_method). | Non |
| `paymentMethodOptions` | `{card: {installments: {enabled: boolean}}}` | Permet d’activer manuellement l’interface utilisateur de sélection du calendrier de versements échelonnés par carte, le cas échéant, lorsque vous ne gérez pas vos moyens de paiement dans le [Dashboard Stripe](https://dashboard.stripe.com/settings/payment_methods). Vous devez définir `mode='payment'` *et* spécifier explicitement des `paymentMethodTypes`. Dans le cas contraire, une erreur est générée. Non compatible avec `paymentMethodCreation='manual'`. | Non |
| `paymentMethodOptions` | `{[paymentMethod]: {setup_future_usage: string}}` | Vous permet de spécifier `setup_future_usage` pour les seuls moyens de paiement prenant en charge la réutilisation. Uniquement applicable lorsque `le mode` est `paiement`. La valeur de chaque moyen de paiement doit correspondre au `payment_method_options[paymentMethod][setup_future_usage]` correspondant sur le PaymentIntent lors de la confirmation. Consultez la [documentation Stripe.js](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-paymentMethodOptions) pour connaître les moyens de paiement et valeurs pris en charge. | Non |
## Optional: Créer un ConfirmationToken
Si vous souhaitez créer un tunnel de paiement sur plusieurs pages ou collecter des informations de moyen de paiement avant d’effectuer des validations supplémentaires, consultez la section [Créer un tunnel de paiement en deux étapes](https://docs.stripe.com/payments/build-a-two-step-confirmation.md). Grâce à ce flux, vous pouvez créer un [ConfirmationToken](https://docs.stripe.com/api/confirmation_tokens.md) côté client afin de recueillir les informations de paiement, puis utiliser celui-ci pour créer un SetupIntent côté serveur.
## Créer un client [Côté serveur]
Pour configurer un moyen de paiement pour des paiements futurs, vous devez l’associer à un objet représentant votre client. Lorsque votre client crée un compte ou effectue sa première transaction avec votre entreprise, créez soit un objet [Account](https://docs.stripe.com/api/v2/core/accounts/create.md) configuré pour le client avec l’API Accounts v2, soit un objet [Customer](https://docs.stripe.com/api/customers/create.md) avec l’API Customers.
> #### 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
```curl
curl -X POST https://api.stripe.com/v2/core/accounts \
-H "Authorization: Bearer <>" \
-H "Stripe-Version: 2026-04-22.preview" \
--json '{
"contact_email": "jenny.rosen@example.com",
"display_name": "Jenny Rosen",
"identity": {
"individual": {
"given_name": "Jenny Rosen",
"address": {
"city": "San Francisco",
"country": "US",
"line1": "123 Main Street",
"postal_code": "94605",
"state": "CA"
}
}
},
"configuration": {
"customer": {
"capabilities": {
"automatic_indirect_tax": {
"requested": true
}
},
"shipping": {
"address": {
"city": "San Francisco",
"country": "US",
"line1": "123 Main Street",
"postal_code": "94605",
"state": "CA"
}
}
}
},
"include": [
"configuration.customer",
"identity"
]
}'
```
#### Customers v1
```curl
curl https://api.stripe.com/v1/customers \
-u "<>:" \
--data-urlencode "email=jenny.rosen@example.com" \
-d "name=Jenny Rosen" \
-d "shipping[address][city]=San Francisco" \
-d "shipping[address][country]=US" \
-d "shipping[address][line1]=123 Main Street" \
-d "shipping[address][postal_code]=9460" \
-d "shipping[address][state]=CA" \
-d "shipping[name]=Jenny Rosen" \
-d "address[city]=San Francisco" \
-d "address[country]=US" \
-d "address[line1]=123 Main Street" \
-d "address[postal_code]=9460" \
-d "address[state]=CA"
```
## Créer un SetupIntent [Côté serveur]
Lorsque le client envoie votre formulaire de paiement, créez un *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method) sur votre serveur. Lorsque `automatic_payment_methods` est activé, le SetupIntent est créé à l’aide des moyens de paiement configurés dans le Dashboard.
L’objet SetupIntent contient une clé secrète du client. Renvoyez cette valeur à votre client afin que Stripe.js l’utilise pour terminer le processus de configuration en toute sécurité.
#### Accounts v2
#### Ruby
```ruby
require 'stripe'
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
Stripe.api_key = '<>'
post '/create-intent' do
# If you used a Tax Calculation, optionally recalculate taxes
# confirmation_token = Stripe::ConfirmationToken.retrieve(params[:confirmation_token_id])
# summarized_payment_details = summarize_payment_details(confirmation_token)
intent = Stripe::SetupIntent.create({
# To allow saving and retrieving payment methods, provide the Account ID.
customer_account: customer_account.id,
# Specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
automatic_payment_methods: {enabled: true},
# If you used a Tax Calculation, link it to the PaymentIntent to make sure any transitions accurately reflect the tax.
# hooks: {
# inputs: {
# tax: {
# calculation: tax_calculation.id
# }
# }
#}
},
#{
# stripe_version: '2025-09-30.preview' }
)
{client_secret: intent.client_secret}.to_json
end
```
#### Customers v1
#### Ruby
```ruby
require 'stripe'
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
client = Stripe::StripeClient.new('<>')
post '/create-intent' do
# If you used a Tax Calculation, optionally recalculate taxes
# confirmation_token = client.v1.confirmation_tokens.retrieve(params[:confirmation_token_id])
# summarized_payment_details = summarize_payment_details(confirmation_token)
intent = client.v1.setup_intents.create({
# To allow saving and retrieving payment methods, provide the Customer ID.
customer: customer.id,
# Specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
automatic_payment_methods: {enabled: true},
# If you used a Tax Calculation, link it to the PaymentIntent to make sure any transitions accurately reflect the tax.
# hooks: {
# inputs: {
# tax: {
# calculation: tax_calculation.id
# }
# }
#}
},
#{
# stripe_version: '2025-09-30.preview' }
)
{client_secret: intent.client_secret}.to_json
end
```
> #### Définir `payment_method_options` pour les paiements `us_bank_account`
>
> Le fait de définir `payment_method_options` à cette étape n’affectera pas les moyens de paiement collectés. Configurez plutôt les moyens de paiement dans le [Dashboard](https://dashboard.stripe.com/settings/payment_methods).
## Envoyer la configuration à Stripe [Côté client]
Utilisez [stripe.confirmSetup](https://docs.stripe.com/js/setup_intents/confirm_setup) pour finaliser la configuration à l’aide des informations du Payment Element.
Ajoutez un paramètre [return_url](https://docs.stripe.com/api/setup_intents/create.md#create_setup_intent-return_url) à cette fonction pour indiquer à Stripe où rediriger l’utilisateur une fois la configuration effectuée. Dans un premier temps, votre utilisateur sera peut-être redirigé vers un site intermédiaire, comme une page d’autorisation bancaire, avant d’être redirigé vers l’URL `return_url`. Les configurations de carte sont immédiatement redirigées vers l’URL `return_url` à la réussite de la configuration.
Si vous ne souhaitez pas effectuer de redirection à la fin des configurations de cartes, vous pouvez assigner au paramètre de [redirection](https://docs.stripe.com/js/setup_intents/confirm_setup#confirm_setup_intent-options-redirect) la valeur `if_required`. De cette manière, seuls les clients qui choisissent un moyen de paiement avec redirection seront redirigés.
#### HTML + JS
```javascript
const form = document.getElementById('payment-form');
const submitBtn = document.getElementById('submit');
const handleError = (error) => {
const messageContainer = document.querySelector('#error-message');
messageContainer.textContent = error.message;
submitBtn.disabled = false;
}
form.addEventListener('submit', async (event) => {
// We don't want to let default form submission happen here,
// which would refresh the page.
event.preventDefault();
// Prevent multiple form submissions
if (submitBtn.disabled) {
return;
}
// Disable form submission while loading
submitBtn.disabled = true;
// Trigger form validation and wallet collection
const {error: submitError} = await elements.submit();
if (submitError) {
handleError(submitError);
return;
}
// Create the SetupIntent and obtain clientSecret
const res = await fetch("/create-intent", {
method: "POST",
});
const {client_secret: clientSecret} = await res.json();
// Confirm the SetupIntent using the details collected by the Payment Element
const {error} = await stripe.confirmSetup({
elements,
clientSecret,
confirmParams: {
return_url: 'https://example.com/order/123/complete',
},
});
if (error) {
// This point is only reached if there's an immediate error when
// confirming the setup. Show the error to your customer (for example, payment details incomplete)
handleError(error);
} else {
// Your customer is redirected to your `return_url`. For some payment
// methods like iDEAL, your customer is redirected to an intermediate
// site first to authorize the payment, then redirected to the `return_url`.
}
});
```
#### React
```jsx
import React, {useState} from 'react';
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';
export default function SetupForm() {
const stripe = useStripe();
const elements = useElements();
const [errorMessage, setErrorMessage] = useState();
const [loading, setLoading] = useState(false);
const handleError = (error) => {
setLoading(false);
setErrorMessage(error.message);
}
const handleSubmit = async (event) => {
// We don't want to let default form submission happen here,
// which would refresh the page.
event.preventDefault();
if (!stripe) {
// Stripe.js hasn't yet loaded.
// Make sure to disable form submission until Stripe.js has loaded.
return;
}
setLoading(true);
// Trigger form validation and wallet collection
const {error: submitError} = await elements.submit();
if (submitError) {
handleError(submitError);
return;
}
// Create the SetupIntent and obtain clientSecret
const res = await fetch("/create-intent", {
method: "POST",
});
const {client_secret: clientSecret} = await res.json();
// Confirm the SetupIntent using the details collected by the Payment Element
const {error} = await stripe.confirmSetup({
elements,
clientSecret,
confirmParams: {
return_url: 'https://example.com/complete',
},
});
if (error) {
// This point is only reached if there's an immediate error when
// confirming the setup. Show the error to your customer (for example, payment details incomplete)
handleError(error);
} else {
// Your customer is redirected to your `return_url`. For some payment
// methods like iDEAL, your customer is redirected to an intermediate
// site first to authorize the payment, then redirected to the `return_url`.
}
};
return (
);
}
```
## Débiter ultérieurement le moyen de paiement enregistré [Côté serveur]
> `bancontact` et `ideal` sont les moyens de paiement ponctuel par défaut. Lorsque vous les configurez pour une utilisation future, ils génèrent un type de moyen de paiement réutilisable `sepa_debit`. Vous devez donc utiliser la requête `sepa_debit` pour les moyens de paiement enregistrés.
> #### Conformité
>
> Lorsque vous enregistrez les informations de paiement d’un client, vous êtes responsable du respect de l’ensemble des lois, réglementations et règles du réseau en vigueur. Lorsque vous présentez au client final des moyens de paiement précédemment utilisés en vue d’effectuer ses prochains achats, assurez-vous de lister les moyens de paiement pour lesquels vous avez obtenu le consentement du client à l’enregistrement des informations de paiement aux fins des futurs achats. Le paramètre [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) vous permet de différencier les moyens de paiement associés au client qui peuvent ou non être présentés pour les achats futurs.
Pour trouver un moyen de paiement à débiter, listez les moyens de paiement associés à votre client. Cet exemple liste des cartes bancaires, mais vous pouvez lister tout [type](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-type) pris en charge.
> #### 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
```curl
curl -G https://api.stripe.com/v1/payment_methods \
-u "<>:" \
-d "customer_account={{CUSTOMERACCOUNT_ID}}" \
-d type=card
```
#### Customers v1
```curl
curl -G https://api.stripe.com/v1/payment_methods \
-u "<>:" \
-d "customer={{CUSTOMER_ID}}" \
-d type=card
```
Lorsque vous êtes prêt à débiter votre client *hors session* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information), utilisez l’ID du `Customer` ou de l’`Account` configuré par le client ainsi que l’ID du `PaymentMethod` pour créer un `PaymentIntent` avec le montant et la devise du paiement. Définissez quelques autres paramètres pour effectuer le paiement hors session :
- Définissez [off_session](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-off_session) sur true pour indiquer que le client n’est pas dans votre tunnel de paiement et ne peut pas répondre aux demandes d’authentification. Si, pendant votre tunnel de paiement, un partenaire (tel qu’un émetteur de cartes bancaires ou une banque) demande une authentification, Stripe sollicite des exemptions en utilisant les informations client issues d’une transaction précédente *pendant 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). Si les conditions d’exemption ne sont pas remplies, le `PaymentIntent` peut générer une erreur.
- Définissez [confirm](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) sur true pour déclencher la confirmation immédiatement lors de la création du `PaymentIntent`.
- Définissez [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) sur l’ID du `PaymentMethod`.
- Selon la manière dont vous représentez les clients dans votre intégration, définissez soit [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account) sur l’ID de l’objet `Account` configuré pour le client, soit [customer](https://docs.stripe.com/api.md#create_payment_intent-customer) sur l’ID de l’objet `Customer`.
#### 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
```
Lorsqu’une tentative de paiement échoue, la requête échoue également avec un code d’état HTTP 402. L’état du PaymentIntent est *requires\_payment\_method* (This status appears as "requires_source" in API versions before 2019-02-11). Vous devez inviter votre client à revenir dans votre application pour finaliser le paiement (par e-mail ou par une notification dans l’application par exemple).
Vérifiez le code de l’[erreur](https://docs.stripe.com/api/errors/handling.md) levée par l’API Library Stripe. Si le paiement a échoué en raison d’un code de refus de paiement [authentication_required](https://docs.stripe.com/declines/codes.md), utilisez la clé secrète du client du PaymentIntent refusée avec confirmPayment pour permettre au client d’authentifier le paiement.
```javascript
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const {error} = await stripe.confirmPayment({
// The client secret of the PaymentIntent
clientSecret,
confirmParams: {
return_url: 'https://example.com/order/123/complete',
},
});
if (error) {
// This point will only be reached if there is an immediate error when
// confirming the payment. Show error to your customer (for example, payment
// details incomplete)
const messageContainer = document.querySelector('#error-message');
messageContainer.textContent = 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`.
}
});
```
> L’exécution de la méthode `stripe.confirmPayment` peut prendre plusieurs secondes. Pendant ce temps, bloquez le renvoi de votre formulaire et affichez un indicateur d’attente. Si vous recevez une erreur, montrez-la au client, réactivez le formulaire et masquez l’indicateur d’attente. Si le client doit effectuer des actions supplémentaires pour mener à bien le paiement, comme une authentification, Stripe.js le guide tout au long de ce processus.
Si le paiement a échoué pour d’autres raisons, par exemple parce que les fonds sont insuffisants, dirigez votre client vers une page de paiement sur laquelle il pourra spécifier un autre moyen de paiement. Vous pouvez ensuite réutiliser l’objet PaymentIntent existant pour retenter de réaliser le paiement avec les nouvelles données de paiement.
# Créer un abonnement
> This is a Créer un abonnement for when platform is web and type is subscription. View the full page at https://docs.stripe.com/payments/accept-a-payment-deferred?platform=web&type=subscription.
Les *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) sont un modèle tarifaire selon lequel les utilisateurs effectuent des paiements récurrents pour accéder à un produit. Dans ce guide d’intégration, découvrez comment créer un tunnel de paiement personnalisé vous permettant d’afficher le Payment Element, de créer un abonnement et de confirmer le paiement depuis le navigateur du client.
## 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'
```
## Activer des moyens de paiement
> Ce chemin d’intégration ne prend pas en charge BLIK ou les prélèvements automatiques qui utilisent le Système automatisé de compensation et de règlement (ACSS). De plus, si vous créez l’intention différée côté client, vous ne pouvez pas utiliser `customer_balance` avec des moyens de paiement dynamiques, car le PaymentIntent nécessite un objet [Account](https://docs.stripe.com/api/v2/core/accounts/object.md#v2_account_object-configuration-customer) ou [Customer](https://docs.stripe.com/api/customers/object.md) configuré par le client, ce que le flux côté client ne prend pas en charge. Pour utiliser `customer_balance`, créez le `PaymentIntent` côté serveur avec un `Account` ou un `Customer` renvoyez sa `client_secret` au client.
Affichez vos [paramètres des moyens de paiement](https://dashboard.stripe.com/settings/payment_methods) et activez les moyens de paiement que vous souhaitez prendre en charge. Vous devez activer au moins un moyen de paiement pour créer un *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods).
Par défaut, Stripe active les cartes bancaires et les autres moyens de paiement courants qui peuvent vous permettre d’atteindre davantage de clients. Nous vous recommandons toutefois d’activer d’autres moyens de paiement pertinents pour votre entreprise et vos clients. Consultez la page [Prise en charge des moyens de paiement](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) pour en savoir plus sur la prise en charge des produits et des moyens de paiement, et notre [page des tarifs](https://stripe.com/pricing/local-payment-methods) pour prendre connaissance des frais que nous appliquons.
Pour Subscriptions, configurez vos [paramètres de facturation](https://dashboard.stripe.com/settings/billing/invoice) et vos moyens de paiement pris en charge. Afin d’éviter les erreurs, vos paramètres de facturation doivent correspondre à ceux du Payment Element.
## Recueillir les informations de paiement [Côté client]
Utilisez le [Payment Element](https://docs.stripe.com/payments/payment-element.md) pour envoyer en toute sécurité les informations de paiement collectées dans un iFrame à Stripe via une connexion HTTPS.
> #### Conflits entre les iFrames
>
> Évitez de placer le Payment Element dans un autre iframe, car il entre en conflit avec les moyens de paiement qui nécessitent une redirection vers une autre page pour confirmer le paiement.
Your checkout page URL must start with `https://` rather than `http://` for your integration to work. You can test your integration without using HTTPS, but remember to [enable it](https://docs.stripe.com/security/guide.md#tls) when you’re ready to accept live payments.
#### HTML + JS
### Configurer Stripe.js
Le composant Element Payment est automatiquement disponible en tant que fonctionnalité de Stripe.js. Intégrez le script Stripe.js à votre page de paiement en l’ajoutant entre les balises `head` de votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour maintenir votre conformité PCI. Vous ne devez pas inclure le script dans un lot ni en héberger de copie.
```html
Checkout
```
Créez une instance de Stripe avec le code JavaScript suivant sur votre page de paiement :
```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 le composant Payment Element à votre page de paiement
Le composant Payment Element doit avoir un emplacement dédié dans votre page de paiement. Créez un nœud DOM (conteneur) vide doté d’un ID unique dans votre formulaire de paiement :
```html
```
Après le chargement de votre formulaire, créez une instance Elements avec le mode, le montant et la devise. Ces valeurs déterminent les moyens de paiement que l’Element présente à votre client.
Ensuite, créez une instance de l’Element Payment et montez-la sur le nœud DOM conteneur.
> Le `amount` transmis au Payment Element doit refléter le montant qui sera débité immédiatement au client. Il peut s’agir du premier versement de l’abonnement ou de la valeur `0` si l’abonnement comporte une [période d’essai](https://docs.stripe.com/billing/subscriptions/trials.md).
```javascript
const options = {mode:'subscription',
amount: 1099,
currency: 'usd',
// Fully customizable with appearance API.
appearance: {/*...*/},
};
// Set up Stripe.js and Elements to use in checkout formconst elements = stripe.elements(options);
// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');
```
#### React
### Configurer Stripe.js
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
```
### Ajouter et configurer le fournisseur Elements sur votre page de paiement
Pour utiliser le composant Payment Element, incluez votre composant de page de paiement dans un [fournisseur Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Appelez `loadStripe` avec votre clé publique et transmettez le paramètre `Promise` renvoyé au fournisseur `Elements`.
Le fournisseur `Elements` accepte également un mode, un montant et une devise. Ces valeurs déterminent les moyens de paiement qui seront présentés à votre client.
> Le `amount` transmis au Payment Element doit refléter le montant qui sera débité immédiatement au client. Il peut s’agir du premier versement de l’abonnement ou de la valeur `0` si l’abonnement comporte une [période d’essai](https://docs.stripe.com/billing/subscriptions/trials.md).
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';
import CheckoutForm from './CheckoutForm';
// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('<>');
function App() {
const options = {mode:'subscription',
amount: 1099,
currency: 'usd',
// Fully customizable with appearance API.
appearance: {/*...*/},
};
return (
);
};
ReactDOM.render(, document.getElementById('root'));
```
### Ajouter le composant Payment Element
Utilisez le composant `PaymentElement` pour créer votre formulaire.
```jsx
import React from 'react';
import {PaymentElement} from '@stripe/react-stripe-js';
const CheckoutForm = () => {
return (
);
};
export default CheckoutForm;
```
Le composant Element Payment affiche un formulaire dynamique qui permet à votre client de choisir un moyen de paiement. Le formulaire collecte automatiquement toutes les informations de paiement nécessaires pour le moyen de paiement sélectionné par le client.
Vous pouvez personnaliser le Payment Element pour l’adapter au design de votre site en transmettant l’[objet Appearance](https://docs.stripe.com/elements/appearance-api.md) dans les `options` lors de la création du fournisseur `Elements`.
### Collecter les adresses
Par défaut, le Payment Element ne collecte que les informations nécessaires à la facturation. Certaines opérations, telles que le [calcul des taxes](https://docs.stripe.com/api/tax/calculations/create.md) ou la saisie des informations de livraison, nécessitent l’adresse complète de votre client. Vous pouvez :
- Utilisez l’[Address Element](https://docs.stripe.com/elements/address-element.md) pour tirer parti des fonctionnalités de saisie automatique et de localisation et recueillir l’adresse complète de votre client. Cela permet de garantir un calcul des taxes le plus précis possible.
- Recueillez l’adresse à l’aide de votre propre formulaire personnalisé.
## Optional: Personnaliser la mise en page [Côté client]
Vous pouvez adapter la mise en page du composant Payment Element (en accordéon ou en onglets) à votre interface de paiement. Pour plus d’informations sur chacune des propriétés, consultez la section [elements.create](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options).
#### Accordéon
Vous pouvez commencer à utiliser les fonctionnalités de mise en page en transmettant un `type` de mise en page et d’autres propriétés facultatives lors de la création du Payment Element :
```javascript
const paymentElement = elements.create('payment', {
layout: {
type: 'accordion',
defaultCollapsed: false,
radios: 'always',
spacedAccordionItems: false
}
});
```
#### Onglets
### Spécifier la mise en page
Définissez la valeur de mise en page sur `tabs` (onglets). Vous avez également la possibilité de spécifier d’autres propriétés, notamment celles figurant dans l’exemple suivant :
```javascript
const paymentElement = elements.create('payment', {
layout: {
type: 'tabs',
defaultCollapsed: false,
}
});
```
L’image suivante illustre différents affichages du même composant Element Payment correspondant à différentes configurations de mise en page :
Mise en page du composant Element Payment
## Optional: Personnaliser l'apparence [Côté client]
Maintenant que vous avez ajouté le composant Payment Element à votre page, vous pouvez personnaliser son apparence pour l’adapter à votre design. Pour en savoir plus sur la personnalisation de ce composant, consultez la page dédiée à l’[API Elements Appearance](https://docs.stripe.com/elements/appearance-api.md).
Personnaliser le Payment Element
## Optional: Enregistrer et récupérer les moyens de paiement des clients
Vous pouvez configurer le composant Payment Element de façon à enregistrer les moyens de paiement de vos clients en vue d’une utilisation ultérieure. Cette section vous montre comment intégrer la [fonctionnalité d’enregistrement des moyens de paiement](https://docs.stripe.com/payments/save-customer-payment-methods.md), qui permet à Payment Element de :
- De demander aux acheteurs s’ils consentent à ce que leur moyen de paiement soit enregistré
- Enregistrer les moyens de paiement lorsque les clients y consentent
- Afficher les moyens de paiement enregistrés des acheteurs lors de leurs futurs achats
- [Mise à jour automatique des cartes perdues ou expirées](https://docs.stripe.com/payments/cards/overview.md#automatic-card-updates) lorsque les clients les remplacent
Enregistrez les moyens de paiement.
Réutilisez un moyen de paiement précédemment enregistré.
### Activer l’enregistrement du moyen de paiement dans le composant Payment Element
Créez une [CustomerSession](https://docs.stripe.com/api/customer_sessions/.md) sur votre serveur en fournissant l’ID du client (en utilisant soit `customer` pour un objet `Customer`, soit `customer_account` pour un objet `Account` configuré pour le client) et en activant le composant [payment_element](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-components-payment_element) pour votre session. Configurez les [fonctionnalités](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features) des moyens de paiement enregistrés que vous souhaitez activer. Par exemple, l’activation de [payment_method_save](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features-payment_method_save) affiche une case à cocher qui permet aux clients d’enregistrer leurs informations de paiement pour une utilisation ultérieure.
Vous pouvez définir `setup_future_usage` sur un PaymentIntent ou une Checkout Session pour déroger au comportement par défaut d’enregistrement des moyens de paiement. Cela permet d’enregistrer automatiquement le moyen de paiement pour une utilisation ultérieure, même si le client ne choisit pas explicitement de l’enregistrer. Si vous prévoyez de définir `setup_future_usage`, ne définissez pas `payment_method_save_usage` dans la même transaction de paiement, car cela provoque une erreur d’intégration.
> #### 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
#### Ruby
```ruby
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
client = Stripe::StripeClient.new('<>')
post '/create-customer-session' do
customer_session = client.v1.customer_sessions.create({
customer_account: {{CUSTOMER_ACCOUNT_ID}},
components: {
payment_element: {
enabled: true,
features: {
payment_method_redisplay: 'enabled',
payment_method_save: 'enabled',
payment_method_save_usage: 'off_session',
payment_method_remove: 'enabled',
},
},
},
})
{
customer_session_client_secret: customer_session.client_secret
}.to_json
end
```
#### Customers v1
#### Ruby
```ruby
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
client = Stripe::StripeClient.new('<>')
post '/create-customer-session' do
customer_session = client.v1.customer_sessions.create({
customer: {{CUSTOMER_ID}},
components: {
payment_element: {
enabled: true,
features: {
payment_method_redisplay: 'enabled',
payment_method_save: 'enabled',
payment_method_save_usage: 'off_session',
payment_method_remove: 'enabled',
},
},
},
})
{
customer_session_client_secret: customer_session.client_secret
}.to_json
end
```
Votre instance Elements utilise la *clé secrète du client* (A client secret is used with your publishable key to authenticate a request for a single object. Each client secret is unique to the object it's associated with) de la session Client pour accéder aux moyens de paiement enregistrés de ce client. [Gérez les erreurs](https://docs.stripe.com/error-handling.md) correctement lorsque vous créez la session Client. Si une erreur se produit, vous n’avez pas besoin de fournir la clé secrète du client de la session Client à l’instance Elements, car elle est facultative.
Créez l’instance Elements à l’aide de la clé secrète du client de la session Client. Ensuite, utilisez l’instance Elements pour créer un Payment Element.
```javascript
// Create the CustomerSession and obtain its clientSecret
const res = await fetch("/create-customer-session", {
method: "POST"
});
const {
customer_session_client_secret: customerSessionClientSecret
} = await res.json();
const elementsOptions = {
mode: 'payment',
amount: 1099,
currency: 'usd',customerSessionClientSecret,
// Fully customizable with appearance API.
appearance: {/*...*/},
};
// Set up Stripe.js and Elements to use in checkout form, passing the client secret
// and CustomerSession's client secret obtained in a previous step
const elements = stripe.elements(elementsOptions);
// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');
```
Lors de la confirmation du PaymentIntent, Stripe.js contrôle automatiquement le paramètre [setup_future_usage](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-setup_future_usage) sur le PaymentIntent et le paramètre [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) sur le PaymentMethod, selon que le client a coché ou non la case permettant d’enregistrer ses informations de paiement.
### Exiger la collecte du CVC
Vous pouvez également spécifier `require_cvc_recollection` à la fois [lors de la création du PaymentIntent](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-card-require_cvc_recollection) et [lors de la création d’Elements](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-paymentMethodOptions-card-require_cvc_recollection) pour appliquer la collecte du CVC lorsqu’un client paie par carte.
### Détecter la sélection d’un moyen de paiement enregistré
Pour contrôler le contenu dynamique qui s’affiche lors de la sélection d’un moyen de paiement enregistré, écoutez l’événement `change` du composant Element Payment, qui contient le moyen de paiement sélectionné.
```javascript
paymentElement.on('change', function(event) {
if (event.value.payment_method) {
// Control dynamic content if a saved payment method is selected
}
})
```
## Optional: Options d'éléments supplémentaires [Côté client]
L’[objet Elements](https://docs.stripe.com/js/elements_object/create_without_intent) accepte des options supplémentaires qui ont une incidence sur l’encaissement des paiements. En fonction des options proposées, le Payment Element affiche les moyens de paiement disponibles parmi ceux que vous avez activés. En savoir plus sur la [prise en charge des moyens de paiement](https://docs.stripe.com/payments/payment-methods/payment-method-support.md).
Assurez-vous que les options Elements que vous fournissez (telles que `captureMethod`, `setupFutureUsage` et `paymentMethodOptions`) correspondent aux paramètres équivalents que vous transmettez lors de la création et de la confirmation de l’Intent. Des paramètres incohérents peuvent entraîner un comportement inattendu ou des erreurs.
| Propriété | Type | Description | Obligatoire |
| ---------------------------- | -------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `mode` | - `payment`
- `setup`
- `subscription` | Indique si l’Payment Element est utilisé avec un *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods), un *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method) ou un *abonnement* (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). | Oui |
| `currency` | `string` | La devise du montant à facturer au client. | Oui |
| `amount` | `number` | Le montant à débiter au client, indiqué dans les interfaces utilisateur Apple Pay, Google Pay ou BNPL. | Pour les modes `payment` et `subscription` |
| `setupFutureUsage` | - `off_session`
- `on_session` | Indique que vous avez l’intention d’effectuer des paiements ultérieurs avec les informations de paiement collectées par l’Payment Element. | Non |
| `captureMethod` | - `automatic`
- `automatic_async`
- `manual` | Détermine à quel moment capturer les fonds sur le compte du client. | Non |
| `onBehalfOf` | `string` | Connect uniquement. L’ID de compte Stripe qui correspond à l’entreprise de référence. Consultez les [cas d’usage](https://docs.stripe.com/connect/charges.md) pour déterminer si cette option est pertinente pour votre intégration. | Non |
| `paymentMethodTypes` | `string[]` | Liste des types de moyens de paiement à afficher. Vous pouvez omettre cet attribut pour gérer vos moyens de paiement dans le [Dashboard Stripe](https://dashboard.stripe.com/settings/payment_methods). | Non |
| `paymentMethodConfiguration` | `string` | La [configuration des moyens de paiement](https://docs.stripe.com/api/payment_method_configurations.md) à utiliser lors de la gestion de vos moyens de paiement dans le [Dashboard Stripe](https://dashboard.stripe.com/settings/payment_methods). Si aucune configuration n’est spécifiée, votre configuration par défaut sera utilisée. | Non |
| `paymentMethodCreation` | `manual` | Autorise la création d’objets PaymentMethod à partir de l’instance Elements à l’aide de [stripe.createPaymentMethod](https://docs.stripe.com/js/payment_methods/create_payment_method_elements). | Non |
| `paymentMethodOptions` | `{us_bank_account: {verification_method: string}}` | Options de vérification pour le moyen de paiement `us_bank_account`. Accepte les mêmes méthodes de vérification que les [Payment Intents](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-us_bank_account-verification_method). | Non |
| `paymentMethodOptions` | `{card: {installments: {enabled: boolean}}}` | Permet d’activer manuellement l’interface utilisateur de sélection du calendrier de versements échelonnés par carte, le cas échéant, lorsque vous ne gérez pas vos moyens de paiement dans le [Dashboard Stripe](https://dashboard.stripe.com/settings/payment_methods). Vous devez définir `mode='payment'` *et* spécifier explicitement des `paymentMethodTypes`. Dans le cas contraire, une erreur est générée. Non compatible avec `paymentMethodCreation='manual'`. | Non |
| `paymentMethodOptions` | `{[paymentMethod]: {setup_future_usage: string}}` | Vous permet de spécifier `setup_future_usage` pour les seuls moyens de paiement prenant en charge la réutilisation. Uniquement applicable lorsque `le mode` est `paiement`. La valeur de chaque moyen de paiement doit correspondre au `payment_method_options[paymentMethod][setup_future_usage]` correspondant sur le PaymentIntent lors de la confirmation. Consultez la [documentation Stripe.js](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-paymentMethodOptions) pour connaître les moyens de paiement et valeurs pris en charge. | Non |
## Créer le modèle tarifaire [CLI Stripe ou Dashboard]
Les [modèles de tarification récurrents](https://docs.stripe.com/products-prices/pricing-models.md) représentent les produits ou services que vous vendez, leur coût, la devise que vous acceptez pour les paiements et la période de service pour les abonnements. Pour élaborer le modèle de tarification, créez des [produits](https://docs.stripe.com/api/products.md) (ce que vous vendez) et des [prix](https://docs.stripe.com/api/prices.md) (combien et à quelle fréquence facturer vos produits).
Cet exemple utilise une tarification forfaitaire avec deux options de niveau de service différentes : basique et premium. Pour chaque option de niveau de service, vous devez créer un produit et un prix récurrent. Pour ajouter des frais uniques, tels que des frais d’installation, créez un troisième produit avec un prix unique.
Chaque produit est facturé à intervalles mensuels. Le prix du produit basique est de 5 USD. Le prix du produit premium est de 15 USD. Voir le[ guide des tarifs forfaitaires ](https://docs.stripe.com/subscriptions/pricing-models/flat-rate-pricing.md)pour un exemple à trois niveaux.
#### Dashboard
Accédez à la page [Ajouter un produit](https://dashboard.stripe.com/test/products/create) et créez deux produits. Ajoutez un tarif pour chaque produit, avec une période de facturation mensuelle récurrente :
- Produit Premium : service Premium avec fonctionnalités supplémentaires
- Prix : Appuyez sur **Payer 15 USD**.
- Produit de base : service de base avec fonctionnalités minimales
- Prix : Forfaitaire | 5 USD
Après avoir créé vos tarifs, enregistrez les ID de tarif de manière à pouvoir les utiliser dans d’autres étapes. Les ID de tarif se présentent sous la forme suivante : `price_G0FvDp6vZvdwRZ`.
Lorsque vous le souhaitez, cliquez sur le bouton **Copier en mode production** en haut à droite de la page pour dupliquer votre produit de l’[environnement de test en mode production](https://docs.stripe.com/keys.md#test-live-modes).
#### API
Vous pouvez utiliser l’API pour créer les[ produits](https://docs.stripe.com/api/products.md) et les[ prix](https://docs.stripe.com/api/prices.md).
Créez le produit premium :
```curl
curl https://api.stripe.com/v1/products \
-u "<>:" \
--data-urlencode "name=Billing Guide: Premium Service" \
-d "description=Premium service with extra features"
```
Créez le produit de base :
```curl
curl https://api.stripe.com/v1/products \
-u "<>:" \
--data-urlencode "name=Billing Guide: Basic Service" \
-d "description=Basic service with minimum features"
```
Enregistrez l’ID de chaque produit. Les ID de produit se présentent sous la forme suivante :
```json
{
"id": "prod_H94k5odtwJXMtQ",
"object": "product",
"active": true,
"attributes": [
],
"created": 1587577341,
"description": "Premium service with extra features",
"images": [
],
"livemode": false,
"metadata": {
},
"name": "Billing Guide: Premium Service",
"statement_descriptor": null,
"type": "service",
"unit_label": null,
"updated": 1587577341
}
```
Utilisez les ID de produit afin de créer un tarif pour chaque produit. La valeur du champ [unit_amount](https://docs.stripe.com/api/prices/object.md#price_object-unit_amount) est exprimé en centimes, donc `1500` = 15 USD, par exemple.
Créer le prix premium :
```curl
curl https://api.stripe.com/v1/prices \
-u "<>:" \
-d product={{PREMIUM_PRODUCT_ID}} \
-d unit_amount=1500 \
-d currency=usd \
-d "recurring[interval]=month"
```
Créer le prix basique :
```curl
curl https://api.stripe.com/v1/prices \
-u "<>:" \
-d product={{BASIC_PRODUCT_ID}} \
-d unit_amount=500 \
-d currency=usd \
-d "recurring[interval]=month"
```
Enregistrez l’ID de chaque tarif de manière à pouvoir l’utiliser par la suite. Les ID de tarif se présentent sous la forme suivante :
```json
{
"id": "price_HGd7M3DV3IMXkC",
"object": "price",
"product": "prod_HGd6W1VUqqXGvr",
"type": "recurring",
"currency": "usd",
"recurring": {
"interval": "month",
"interval_count": 1,
"trial_period_days": null,
"usage_type": "licensed"
},
"active": true,
"billing_scheme": "per_unit",
"created": 1589319695,
"livemode": false,
"lookup_key": null,
"metadata": {},
"nickname": null,
"unit_amount": 1500,
"unit_amount_decimal": "1500",
"tiers": null,
"tiers_mode": null,
"transform_quantity": null
}
```
## Créer l'objet Customer [Client et serveur]
Stripe a besoin d’un client pour chaque abonnement. Dans le front-end de votre application, collectez les informations client nécessaires et transmettez-les au back-end.
Si vous avez besoin de recueillir des informations d’adresse, l’Address Element vous permet de recueillir une adresse de livraison ou de facturation pour vos clients. Pour en savoir plus, consultez la page [Address Element](https://docs.stripe.com/elements/address-element.md).
```html
```
```javascript
const emailInput = document.querySelector('#email');
fetch('/create-customer', {
method: 'post',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: emailInput.value,
}),
}).then(r => r.json());
```
Sur le serveur, créez l’objet Customer Stripe.
#### Accounts v2
```curl
curl -X POST https://api.stripe.com/v2/core/accounts \
-H "Authorization: Bearer <>" \
-H "Stripe-Version: 2026-04-22.preview" \
--json '{
"contact_email": "jenny.rosen@example.com",
"display_name": "Jenny Rosen",
"identity": {
"individual": {
"given_name": "Jenny Rosen",
"address": {
"city": "San Francisco",
"country": "US",
"line1": "123 Main Street",
"postal_code": "94605",
"state": "CA"
}
}
},
"configuration": {
"customer": {
"capabilities": {
"automatic_indirect_tax": {
"requested": true
}
},
"shipping": {
"address": {
"city": "San Francisco",
"country": "US",
"line1": "123 Main Street",
"postal_code": "94605",
"state": "CA"
}
}
}
},
"include": [
"configuration.customer",
"identity"
]
}'
```
#### Customers v1
```curl
curl https://api.stripe.com/v1/customers \
-u "<>:" \
--data-urlencode "email=jenny.rosen@example.com" \
-d "name=Jenny Rosen" \
-d "shipping[address][city]=San Francisco" \
-d "shipping[address][country]=US" \
-d "shipping[address][line1]=123 Main Street" \
-d "shipping[address][postal_code]=9460" \
-d "shipping[address][state]=CA" \
-d "shipping[name]=Jenny Rosen" \
-d "address[city]=San Francisco" \
-d "address[country]=US" \
-d "address[line1]=123 Main Street" \
-d "address[postal_code]=9460" \
-d "address[state]=CA"
```
## Créer l'abonnement [Côté serveur]
Lorsque le client envoie votre formulaire de paiement, utilisez un *abonnement* (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) pour faciliter le processus de confirmation et de paiement. Pour créer un abonnement, vous avez besoin d’un `Account` ou d’un `Customer` configuré par le client et d’un *tarif* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions).
> Si vous utilisez un *tarif multidevise* (A single Price object can support multiple currencies. Each purchase uses one of the supported currencies for the Price, depending on how you use the Price in your integration), utilisez le paramètre [currency](https://docs.stripe.com/api/subscriptions/create.md#create_subscription-currency) pour indiquer à l’abonnement quelle devise utiliser. (Si vous omettez le paramètre `currency`, l’abonnement utilise la devise par défaut associée au tarif.)
Un abonnement 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)). Renvoyez cette valeur côté client. Stripe.js l’utilisera pour finaliser le processus de paiement en toute sécurité. Dans le cas des abonnements ne générant pas immédiatement de premier paiement (par exemple, les abonnements comprenant une période d’essai gratuite), utilisez la clé secrète du client de `pending_setup_intent`.
#### Accounts v2
#### Ruby
```ruby
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
client = Stripe::StripeClient.new('<>')
post '/create-subscription' do
content_type 'application/json'
data = JSON.parse(request.body.read)
customer_account_id = cookies[:customer_account]
price_id = data['priceId']
subscription = Stripe::Subscription.create(
customer_account: customer_account_id,
items: [{
price: price_id,
}],
payment_behavior: 'default_incomplete',
payment_settings: {save_default_payment_method: 'on_subscription'},
expand: ['latest_invoice.confirmation_secret', 'pending_setup_intent']
)
if subscription.pending_setup_intent != null
{ type: 'setup', clientSecret: subscription.pending_setup_intent.client_secret }.to_json
else
{ type: 'payment', clientSecret: subscription.latest_invoice.confirmation_secret.client_secret }.to_json
end
end
```
#### Customers v1
#### Ruby
```ruby
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
client = Stripe::StripeClient.new('<>')
require 'stripe'
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
client = Stripe::StripeClient.new('<>')
post '/create-subscription' do
content_type 'application/json'
data = JSON.parse(request.body.read)
customer_id = cookies[:customer]
price_id = data['priceId']
subscription = client.v1.subscriptions.create(
customer: customer_id,
items: [{
price: price_id,
}],
payment_behavior: 'default_incomplete',
payment_settings: {save_default_payment_method: 'on_subscription'},
expand: ['latest_invoice.confirmation_secret', 'pending_setup_intent']
)
if subscription.pending_setup_intent != null
{ type: 'setup', clientSecret: subscription.pending_setup_intent.client_secret }.to_json
else
{ type: 'payment', clientSecret: subscription.latest_invoice.confirmation_secret.client_secret }.to_json
end
end
```
## Confirmer l'abonnement [Côté client]
Utilisez [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) ou [stripe.confirmSetup](https://docs.stripe.com/js/setup_intents/confirm_setup) pour confirmer l’abonnement à l’aide des informations du composant Payment Element. Indiquez la page vers laquelle Stripe doit rediriger le client après la confirmation en fournissant une `return_url` à la fonction de confirmation. Selon le moyen de paiement choisi, le client peut d’abord être redirigé vers un site intermédiaire, comme une page d’autorisation bancaire, avant d’être redirigé vers la page spécifiée par le paramètre `return_url`. Vous pouvez également définir `redirect` sur `if_required` pour ne rediriger que les clients qui paient via des moyens de paiement exigeant une redirection.
#### HTML + JS
```javascript
const form = document.getElementById('payment-form');
const submitBtn = document.getElementById('submit');
const handleError = (error) => {
const messageContainer = document.querySelector('#error-message');
messageContainer.textContent = error.message;
submitBtn.disabled = false;
}
form.addEventListener('submit', async (event) => {
// We don't want to let default form submission happen here,
// which would refresh the page.
event.preventDefault();
// Prevent multiple form submissions
if (submitBtn.disabled) {
return;
}
// Disable form submission while loading
submitBtn.disabled = true;
// Trigger form validation and wallet collection
const {error: submitError} = await elements.submit();
if (submitError) {
handleError(submitError);
return;
}
// Create the subscription
const res = await fetch('/create-subscription', {
method: "POST",
});
const {type, clientSecret} = await res.json();
const confirmIntent = type === "setup" ? stripe.confirmSetup : stripe.confirmPayment;
// Confirm the Intent using the details collected by the Payment Element
const {error} = await confirmIntent({
elements,
clientSecret,
confirmParams: {
return_url: 'https://example.com/order/123/complete',
},
});
if (error) {
// This point is only reached if there's an immediate error when confirming the Intent.
// Show the error to your customer (for example, "payment details incomplete").
handleError(error);
} else {
// Your customer is redirected to your `return_url`. For some payment
// methods like iDEAL, your customer is redirected to an intermediate
// site first to authorize the payment, then redirected to the `return_url`.
}
});
```
#### React
```jsx
import React, {useState} from 'react';
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';
export default function CheckoutForm() {
const stripe = useStripe();
const elements = useElements();
const [errorMessage, setErrorMessage] = useState();
const [loading, setLoading] = useState(false);
const handleError = (error) => {
setLoading(false);
setErrorMessage(error.message);
}
const handleSubmit = async (event) => {
// We don't want to let default form submission happen here,
// which would refresh the page.
event.preventDefault();
if (!stripe) {
// Stripe.js hasn't yet loaded.
// Make sure to disable form submission until Stripe.js has loaded.
return;
}
setLoading(true);
// Trigger form validation and wallet collection
const {error: submitError} = await elements.submit();
if (submitError) {
handleError(submitError);
return;
}
// Create the subscription
const res = await fetch('/create-subscription', {
method: "POST",
});
const {type, clientSecret} = await res.json();
const confirmIntent = type === "setup" ? stripe.confirmSetup : stripe.confirmPayment;
// Confirm the Intent using the details collected by the Payment Element
const {error} = await confirmIntent({
elements,
clientSecret,
confirmParams: {
return_url: 'https://example.com/order/123/complete',
},
});
if (error) {
// This point is only reached if there's an immediate error when confirming the Intent.
// Show the error to your customer (for example, "payment details incomplete").
handleError(error);
} else {
// Your customer is redirected to your `return_url`. For some payment
// methods like iDEAL, your customer is redirected to an intermediate
// site first to authorize the payment, then redirected to the `return_url`.
}
};
return (
);
}
```
## Gérer l'abonnement
Pour terminer l’intégration, vous pouvez :
- écouter les webhooks
- fournir l’accès à votre service
- permettre aux clients d’annuler leur abonnement
Pour en savoir plus, consultez [Créer une intégration d’abonnement](https://docs.stripe.com/billing/subscriptions/build-subscriptions.md?payment-ui=elements).
## See also
- [Concevoir une intégration](https://docs.stripe.com/payments/payment-element/design-an-integration.md)