# Enregistrer le moyen de paiement d'un client lors d'un paiement

Découvrez comment enregistrer les détails de paiement de vos clients pour des achats ultérieurs lorsqu'ils effectuent un paiement.

# API Checkout Sessions

> This is a API Checkout Sessions for when payment-ui is embedded-components. View the full page at https://docs.stripe.com/payments/save-during-payment?payment-ui=embedded-components.

Utilisez l’[API Checkout Sessions](https://docs.stripe.com/api/checkout/sessions.md) pour enregistrer les détails du paiement lors d’un achat. Ceci est utile dans des situations telles que :

- Débiter un client pour une commande en ligne et enregistrer les détails de paiement pour de futurs achats.
- Initier le premier paiement d’une série de paiements récurrents.
- Débiter un versement et sauvegarder les détails du paiement pour débiter le montant total ultérieurement.

## Conformité

Vous êtes responsable du respect de l’ensemble des lois, réglementations et règles des réseaux applicables lorsque vous enregistrez les informations de paiement d’un client pour une utilisation ultérieure, par exemple lorsque vous affichez son moyen de paiement dans le tunnel de paiement pour un achat futur ou lorsque vous le débitez alors qu’il n’utilise pas activement votre site Web ou votre application. Avant d’enregistrer ou de débiter le moyen de paiement d’un client, assurez-vous de :

- Ajouter des conditions d’utilisation à votre site web ou à votre application indiquant comment vous prévoyez d’enregistrer les informations relatives aux moyens de paiement, par exemple :
  - Le consentement du client vous autorisant à initier un paiement ou une série de paiements en son nom pour des transactions spécifiées.
  - Le calendrier et la fréquence prévus des paiements (par exemple, s’il s’agit de versements échelonnés, de paiements d’abonnements ou de recharges ponctuelles).
  - La façon dont vous déterminez le montant à payer.
  - Vos conditions d’annulation, si le moyen de paiement est utilisé dans le cadre d’un abonnement.
- Utiliser un moyen de paiement enregistré uniquement dans le but indiqué dans vos conditions.
- Recueillez le consentement explicite du client pour cet usage spécifique. Par exemple, incluez une case à cocher « Enregistrer mon moyen de paiement pour une utilisation ultérieure ».
- Conserver une trace écrite de l’acceptation de vos conditions par le client.

> Lorsque vous utilisez Elements avec l’API Checkout Sessions, seules les cartes bancaires et ACH Direct Debit sont pris en charge pour les moyens de paiement enregistrés. Vous ne pouvez pas enregistrer d’autres moyens de paiement, comme les comptes bancaires.

## Conditions préalables

1. Suivez le guide Checkout pour [accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=stripe-hosted)
1. Suivez ce guide pour enregistrer le moyen de paiement utilisé lors d’un paiement afin de pouvoir le récupérer et l’utiliser pour de futurs paiements effectués par le même client.

## Activer les moyens de paiement enregistrés

> Les lois internationales sur la protection de la vie privée sont complexes et nuancées. Avant d’activer la fonctionnalité permettant d’enregistrer les informations de paiement des clients, travaillez avec votre équipe juridique pour vous assurer que cette fonctionnalité respecte vos règles de confidentialité et de conformité.

Pour permettre à un client d’enregistrer un moyen de paiement en vue d’une utilisation ultérieure, spécifiez le paramètre [saved_payment_method_options.payment_method_save](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_save) lors de la création de la session Checkout.

> #### Utiliser l’API Accounts v2 pour représenter les clients
> 
> The Accounts v2 API is generally available for Connect users, and in public preview for other Stripe users. If you’re part of the Accounts v2 preview, you need to specify a [specify a preview version](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) in your code.
> 
> To request access to the Accounts v2 preview, 
> 
> 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/connect/use-accounts-as-customers.md), plutôt que d’utiliser des objets [Customer](https://docs.stripe.com/api/customers.md).

L’enregistrement d’un moyen de paiement nécessite un objet représentant votre client. Cet objet peut être un objet [Account](https://docs.stripe.com/api/v2/core/accounts/object.md) configuré pour le client si vous utilisez l’API Accounts v2, ou un objet [Customer](https://docs.stripe.com/api/customers/object.md) si vous utilisez l’API Customers. Transmettez un client existant ou créez-en un nouveau en définissant [customer_creation](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_creation) sur `always` dans la Checkout Session.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price]={{PRICE_ID}}" \
  -d "line_items[0][quantity]=2" \
  -d mode=payment \
  -d ui_mode=elements \
  -d customer_creation=always \
  -d "saved_payment_method_options[payment_method_save]=enabled"
```

Après avoir créé la session de paiement, utilisez la[clé secrète du client](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) renvoyée dans la réponse piur [créer votre page de paiement](https://docs.stripe.com/payments/quickstart-checkout-sessions.md).

> Dans la dernière version de Stripe.js, spécifier `enableSave` sur `auto` est facultatif, car c’est la valeur par défaut lorsque les moyens de paiement enregistrés sont activés dans la session Checkout.

#### HTML + JS

Le composant Payment Element affiche automatiquement une case de consentement lorsque les moyens de paiement enregistrés sont activés sur la Checkout Session. Vous pouvez configurer explicitement ce comportement à l’aide de [elementsOptions](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions) dans `initCheckoutElementsSdk`.

```javascript
const checkout = stripe.initCheckoutElementsSdk({
  clientSecret,
  elementsOptions: {savedPaymentMethod: {
      // Default is 'auto' in the latest version of Stripe.js - this configuration is optional
      enableSave: 'auto',
    }
  }
});
```

#### React

Le Payment Element affiche automatiquement une case à cocher de collecte du consentement lorsque les moyens de paiement enregistrés sont activés dans la session Checkout. Vous pouvez configurer explicitement ce comportement en utilisant [elementsOptions](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions) sur le composant `CheckoutElementsProvider`.

```jsx
import React from 'react';
import {CheckoutElementsProvider} from '@stripe/react-stripe-js/checkout';
import CheckoutForm from './CheckoutForm';

const App = () => {
  const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
    .then((response) => response.json())
    .then((json) => json.checkoutSessionClientSecret);

  return (
    <CheckoutElementsProvider
      stripe={stripe}
      options={{
        clientSecret,
        elementsOptions: {savedPaymentMethod: {
            // Default is 'auto' in the latest version of Stripe.js - this configuration is optional
            enableSave: 'auto',
          },
        },
      }}
    >
      <CheckoutForm />
    </CheckoutElementsProvider>
  );
};

export default App;
```

## Réutiliser un moyen de paiement précédemment enregistré

Chaque moyen de paiement enregistré est associé à un objet représentant votre client. Cet objet peut être un objet [Account](https://docs.stripe.com/api/v2/core/accounts/object.md) configuré pour le client si vous utilisez l’API Accounts v2, ou un objet [Customer](https://docs.stripe.com/api/customers/object.md) si vous utilisez l’API Customers. Avant de créer la Checkout Session, authentifiez votre client et transmettez l’ID de l’objet correspondant à la Checkout Session.

> Dans la dernière version de Stripe.js, `enableRedisplay` est défini par défaut sur `auto` lorsque les moyens de paiement enregistrés sont activés dans la session Checkout.

Le composant Payment Element réaffiche automatiquement les moyens de paiement enregistrés afin que votre client puisse les utiliser lors du paiement, lorsque cette option est activée dans la session Checkout.

#### Accounts v2

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price]={{PRICE_ID}}" \
  -d "line_items[0][quantity]=2" \
  -d mode=payment \
  -d ui_mode=elements \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}"
```

#### Customers&nbsp;v1

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price]={{PRICE_ID}}" \
  -d "line_items[0][quantity]=2" \
  -d mode=payment \
  -d ui_mode=elements \
  -d "customer={{CUSTOMER_ID}}"
```

#### HTML + JS

Vous pouvez configurer explicitement le comportement de réaffichage à l’aide de [elementsOptions](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions) dans `initCheckoutElementsSdk`.

```javascript
const checkout = stripe.initCheckoutElementsSdk({
  clientSecret,
  elementsOptions: {
    savedPaymentMethod: {
      // Default is 'auto' in the latest version of Stripe.js - this configuration is optional
      enableSave: 'auto',// Default is 'auto' in the latest version of Stripe.js - this configuration is optional
      enableRedisplay: 'auto',
    }
  }
});
```

#### React

Vous pouvez configurer explicitement le comportement de réaffichage en utilisant [elementsOptions](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions) sur le composant `CheckoutElementsProvider`.

```jsx
import React from 'react';
import {CheckoutElementsProvider} from '@stripe/react-stripe-js/checkout';
import CheckoutForm from './CheckoutForm';

const App = () => {
  const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
    .then((response) => response.json())
    .then((json) => json.checkoutSessionClientSecret)

  return (
    <CheckoutElementsProvider
      stripe={stripe}
      options={{
        clientSecret,
        elementsOptions: {
          savedPaymentMethod: {
            // Default is 'auto' in the latest version of Stripe.js - this configuration is optional
            enableSave: 'auto',// Default is 'auto' in the latest version of Stripe.js - this configuration is optional
            enableRedisplay: 'auto',
          }
        },
      }}
    >
      <CheckoutForm />
    </CheckoutElementsProvider>
  );
};

export default App;
```

## Optional: Créer une interface utilisateur pour les moyens de paiement enregistrés

#### HTML + JS

Vous pouvez créer votre propre interface utilisateur pour les moyens de paiement enregistrés, au lieu d’utiliser l’interface intégrée fournie par le composant Payment Element.

Pour empêcher le composant Payment Element de gérer le consentement et d’afficher les moyens de paiement enregistrés, transmettez des [elementsOptions](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions) supplémentaires à `initCheckoutElementsSdk`.

```javascript
const checkout = stripe.initCheckoutElementsSdk({
  clientSecret,
  elementsOptions: {savedPaymentMethod: {
      enableSave: 'never',
      enableRedisplay: 'never',
    },
  }
});
```

#### React

Vous pouvez créer votre propre interface utilisateur pour les moyens de paiement enregistrés, au lieu d’utiliser l’interface intégrée fournie par le composant Element Payment. Pour empêcher le composant Element Payment de gérer la collecte du consentement et l’affichage des moyens de paiement enregistrés précédemment, passez des paramètres supplémentaires [elementsOptions](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions) sur `CheckoutElementsProvider`.

```jsx
import React from 'react';
import {CheckoutElementsProvider} from '@stripe/react-stripe-js/checkout';
import CheckoutForm from './CheckoutForm';

const App = () => {
  const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
    .then((response) => response.json())
    .then((json) => json.checkoutSessionClientSecret)

  return (
    <CheckoutElementsProvider
      stripe={stripe}
      options={{
        clientSecret,
        elementsOptions: {savedPaymentMethod: {
            enableSave: 'never',
            enableRedisplay: 'never',
          },
        },
      }}
    >
      <CheckoutForm />
    </CheckoutElementsProvider>
  );
};

export default App;
```

### Collecter le consentement

> Les lois internationales sur la protection de la vie privée sont complexes et nuancées. Avant d’activer la fonctionnalité permettant d’enregistrer les informations de paiement des clients, travaillez avec votre équipe juridique pour vous assurer que cette fonctionnalité respecte vos règles de confidentialité et de conformité.

Dans la plupart des cas, vous devez recueillir le consentement du client avant d’enregistrer ses moyens de paiement. L’exemple suivant montre comment obtenir ce consentement à l’aide d’une case à cocher.

#### HTML + JS

```html
<label>
  <input type="checkbox" id="save-payment-method-checkbox" />
  Save my payment information for future purchases
</label>
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>
```

#### React

```jsx
import React from 'react';

type Props = {
  savePaymentMethod: boolean;
  onSavePaymentMethodChange: (save: boolean) => void;
}
const ConsentCollection = (props: Props) => {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    props.onSavePaymentMethodChange(e.target.checked);
  };
  return (
    <label>
      <input
        type="checkbox"
        checked={props.savePaymentMethod}
        onChange={handleChange}
      />
      Save my payment information for future purchases
    </label>
  );
};

export default ConsentCollection;
```

Lorsque vous appelez [confirm](https://docs.stripe.com/js/custom_checkout/confirm), vous pouvez indiquer à Stripe que votre client a donné son consentement en passant le paramètre `savePaymentMethod`. Lorsque vous enregistrez les détails de paiement d’un client, vous êtes responsable du respect de l’ensemble des lois, réglementations et règles de réseau applicables.

#### HTML + JS

```js
const checkout = stripe.initCheckoutElementsSdk({clientSecret});
const button = document.getElementById('pay-button');
const errors = document.getElementById('confirm-errors');
const checkbox = document.getElementById('save-payment-method-checkbox');
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';
const savePaymentMethod = checkbox.checked;
    actions.confirm({savePaymentMethod}).then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
}
```

#### React

```jsx
import React from 'react';
import {useCheckout} from '@stripe/react-stripe-js/checkout';

type Props = {
  savePaymentMethod: boolean;
}
const PayButton = (props: Props) => {
  const checkoutState = useCheckout();
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);

  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  } else if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }
  const {confirm} = checkoutState.checkout;
  const handleClick = () => {
    setLoading(true);confirm({savePaymentMethod: props.savePaymentMethod}).then((result) => {
      if (result.type === 'error') {
        setError(result.error)
      }
      setLoading(false);
    })
  };

  return (
    <div>
      <button disabled={!loading} onClick={handleClick}>
        Pay
      </button>
      {error && <div>{error.message}</div>}
    </div>
  )
};

export default PayButton;
```

### Afficher les moyens de paiement enregistrés

Utilisez le tableau [savedPaymentMethods](https://docs.stripe.com/js/custom_checkout/session_object#custom_checkout_session_object-savedPaymentMethods) côté front-end pour afficher les moyens de paiement disponibles de votre client.

> Le tableau `savedPaymentMethods` ne contient que les moyens de paiement pour lesquels [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) est défini sur `always`. Suivez les étapes [collecter le consentement](https://docs.stripe.com/payments/save-during-payment.md#collect-consent) de votre client et veillez à définir correctement le paramètre `allow_redisplay`.

#### HTML + JS

```html
<div id="saved-payment-methods"></div>
```

```js
const checkout = stripe.initCheckoutElementsSdk({clientSecret});
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const container = document.getElementById('saved-payment-methods');
  const {actions} = loadActionsResult;
  actions.getSession().savedPaymentMethods.forEach((pm) => {
    const label = document.createElement('label');
    const radio = document.createElement('input');

    radio.type = 'radio';
    radio.value = pm.id;

    label.appendChild(radio);
    label.appendChild(document.createTextNode(`Card ending in ${pm.card.last4}`));
    container.appendChild(label);
  });
}
```

#### React

```jsx
import React from 'react';
import {useCheckout} from '@stripe/react-stripe-js/checkout';

type Props = {
  selectedPaymentMethod: string | null;
  onSelectPaymentMethod: (paymentMethod: string) => void;
};
const PaymentMethods = (props: Props) => {const checkoutState = useCheckout();

  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  } else if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }const {savedPaymentMethods} = checkoutState.checkout;

  const handleOptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    props.onSelectPaymentMethod(e.target.value);
  };

  return (
    <div>
      {savedPaymentMethods.map((pm) => (
        <label key={pm.id}>
          <input
            type="radio"
            value={pm.id}
            checked={props.selectedPaymentMethod === pm.id}
            onChange={handleOptionChange}
          />
          Card ending in {pm.card.last4}
        </label>
      ))}
    </div>
  );
};

export default PaymentMethods;
```

### Confirmer avec un moyen de paiement enregistré

Lorsque votre client sélectionne un moyen de paiement enregistré et qu’il est prêt à finaliser le paiement, appelez [confirm](https://docs.stripe.com/js/custom_checkout/confirm) et transmettez l’identifiant [paymentMethod](https://docs.stripe.com/js/custom_checkout/confirm#custom_checkout_session_confirm-options-paymentMethod).

#### HTML + JS

```html
<button id="pay-button">Pay</button>
```

```js
const checkout = stripe.initCheckoutElementsSdk({clientSecret});

const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const container = document.getElementById('saved-payment-methods');
  const {actions} = loadActionsResult;
  actions.getSession().savedPaymentMethods.forEach((pm) => {
    const label = document.createElement('label');
    const radio = document.createElement('input');

    radio.type = 'radio';
    radio.value = pm.id;

    label.appendChild(radio);
    label.appendChild(document.createTextNode(`Card ending in ${pm.card.last4}`));
    container.appendChild(label);
  });
}
```

#### React

```jsx
import React from 'react';
import {useCheckout} from '@stripe/react-stripe-js/checkout';

type Props = {
  selectedPaymentMethod: string | null;
}
const PayButton = (props: Props) => {
  const checkoutState = useCheckout();
  const [loading, setLoading] = React.useState(false);

  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  } else if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }
  const {confirm} = checkoutState.checkout;

  const handleClick = () => {
    setLoading(true);confirm({paymentMethod: props.selectedPaymentMethod}).then((result) => {
      if (result.error) {
        // Confirmation failed. Display the error message.
      }
      setLoading(false);
    })
  };

  return (
    <button disabled={loading} onClick={handleClick}>
      Pay
    </button>
  )
};

export default PayButton;
```


# API Payment Intents

> This is a API Payment Intents for when payment-ui is elements. View the full page at https://docs.stripe.com/payments/save-during-payment?payment-ui=elements.

Utilisez l’[API Payment&nbsp;Intents](https://docs.stripe.com/api/payment_intents.md) pour enregistrer des informations de paiement à partir d’un achat. Il existe plusieurs cas d’utilisation&nbsp;:

- Débiter un client pour une commande en ligne et sauvegarder les détails pour des achats ultérieurs.
- Initier le premier paiement d’une série de paiements récurrents.
- Débiter un acompte et sauvegarder les détails pour facturer plus tard le montant total.

> #### Transactions avec présentation de la carte
> 
> Les transactions avec présentation de la carte, telles que les paiements via Stripe Terminal, utilisent un processus différent pour enregistrer le moyen de paiement. Pour en savoir plus, consultez [la documentation de Terminal](https://docs.stripe.com/terminal/features/saving-payment-details/save-after-payment.md).

## Conformité

Vous êtes responsable du respect de l’ensemble des lois, réglementations et règles des réseaux applicables lorsque vous enregistrez les informations de paiement d’un client pour une utilisation ultérieure, par exemple lorsque vous affichez son moyen de paiement dans le tunnel de paiement pour un achat futur ou lorsque vous le débitez alors qu’il n’utilise pas activement votre site Web ou votre application. Avant d’enregistrer ou de débiter le moyen de paiement d’un client, assurez-vous de&nbsp;:

- Ajouter des conditions d’utilisation à votre site web ou à votre application indiquant comment vous prévoyez d’enregistrer les informations relatives aux moyens de paiement, par exemple&nbsp;:
  - Le consentement du client vous autorisant à initier un paiement ou une série de paiements en son nom pour des transactions spécifiées.
  - Le calendrier et la fréquence prévus des paiements (par exemple, si les paiements concernent des versements échelonnés, des paiements d’abonnement ou des recharges non programmées).
  - La façon dont vous déterminez le montant du paiement.
  - Votre politique d’annulation, si le moyen de paiement est utilisé dans le cadre d’un abonnement
- Utiliser un moyen de paiement enregistré uniquement dans le but indiqué dans vos conditions.
- Recueillez le consentement explicite du client pour cet usage spécifique. Par exemple, incluez une case à cocher «&nbsp;Enregistrer mon moyen de paiement pour une utilisation ultérieure&nbsp;».
- Conserver une trace écrite de l’acceptation de vos conditions par le client.

## Conditions préalables

1. Suivez le guide de l’API Payment Intents pour [accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents).
1. Suivez ce guide pour enregistrer le moyen de paiement utilisé lors d’un paiement afin de pouvoir le récupérer et l’utiliser pour de futurs paiements effectués par le même client.

## Enregistrer les moyens de paiement pendant le paiement [Côté serveur]

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&nbsp;:

- 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
![Le composant Payment Element et une case à cocher pour le moyen de paiement enregistré](https://b.stripecdn.com/docs-statics-srv/assets/spm-save.fe0b24afd0f0a06e0cf4eecb0ce2403a.png)

Enregistrez les moyens de paiement.
![Le composant Payment Element avec un moyen de paiement enregistré sélectionné](https://b.stripecdn.com/docs-statics-srv/assets/spm-saved.5dba5a8a190a9a0e9f1a99271bed3f4b.png)

Réutilisez un moyen de paiement précédemment enregistré.

### Activer l’enregistrement du moyen de paiement dans le composant Payment Element

Lorsque vous créez un [PaymentIntent](https://docs.stripe.com/api/payment_intents/.md) sur votre serveur, créez également une [CustomerSession](https://docs.stripe.com/api/customer_sessions/.md) 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 permettant 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
> 
> The Accounts v2 API is generally available for Connect users, and in public preview for other Stripe users. If you’re part of the Accounts v2 preview, you need to specify a [specify a preview version](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) in your code.
> 
> To request access to the Accounts v2 preview, 
> 
> 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/connect/use-accounts-as-customers.md), plutôt que d’utiliser des objets [Customer](https://docs.stripe.com/api/customers.md).

#### Accounts&nbsp;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('<<YOUR_SECRET_KEY>>')

post '/create-intent-and-customer-session' do
  intent = client.v1.payment_intents.create({
    amount: 1099,
    currency: 'usd',
    automatic_payment_methods: {enabled: true},
    customer_account: {{CUSTOMER_ACCOUNT_ID}},
  })
  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',
          },
        },
    },
  })
  {
    client_secret: intent.client_secret,
    customer_session_client_secret: customer_session.client_secret
  }.to_json
end
```

#### Customers&nbsp;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('<<YOUR_SECRET_KEY>>')

post '/create-intent-and-customer-session' do
  intent = client.v1.payment_intents.create({
    amount: 1099,
    currency: 'usd',
    # In the latest version of the API, specifying the `automatic_payment_methods` parameter
    # is optional because Stripe enables its functionality by default.
    automatic_payment_methods: {enabled: true},
    customer: {{CUSTOMER_ID}},
  })
  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',
          },
        },
    },
  })
  {
    client_secret: intent.client_secret,
    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 des clés secrètes du client pour le PaymentIntent et la session Client. Ensuite, utilisez cette instance d’Elements pour créer un Payment Element.

```javascript
// Create the CustomerSession and obtain its clientSecret
const res = await fetch("/create-intent-and-customer-session", {
  method: "POST"
});

const {
  customer_session_client_secret: customerSessionClientSecret
} = await res.json();

const elementsOptions = {
  clientSecret: '{{CLIENT_SECRET}}',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

Au besoin, spécifiez `require_cvc_recollection` [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) pour appliquer la collecte du CVC lors des paiements 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
  }
})
```

## Enregistrer uniquement les moyens de paiement qui prennent en charge la réutilisation [Côté serveur]

Vous ne pouvez pas rendre tous les moyens de paiement [réutilisables](https://docs.stripe.com/payments/accept-a-payment.md#save-payment-method-details) en activant `setup_future_usage` dans le PaymentIntent. Consultez la page sur la [compatibilité des moyens de paiement](https://docs.stripe.com/payments/payment-methods/payment-method-support.md#additional-api-supportability) pour savoir quels moyens de paiement prennent en charge `setup_future_usage`.

Vous pouvez toutefois enregistrer les informations de moyen de paiement uniquement lorsqu’un client sélectionne un moyen de paiement qui prend en charge cette fonctionnalité. Par exemple, si vous acceptez à la fois les paiements par carte bancaire et Giropay (qui ne peut pas être réutilisé), configurez `setup_future_usage=off_session` sur l’objet `payment_method_options[card]`.

Si le client refuse que ses informations de paiement soient enregistrées, désactivez `setup_future_usage` dans le PaymentIntent côté serveur. Nous ne prenons pas en charge ce réajustement côté client.

#### Gérer les moyens de paiement depuis le Dashboard

Vous pouvez gérer les moyens de paiement depuis le [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gère l’affichage des moyens de paiement admissibles en fonction de facteurs tels que le montant de la transaction, la devise et le tunnel de paiement.

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "automatic_payment_methods[enabled]"="true" \
  -d "payment_method_options[card][setup_future_usage]"="off_session"
```

#### Référencement manuel des moyens de paiement

Vous pouvez aussi lister `card` et `giropay` à l’aide [du paramètre de sélection du type de moyen de paiement](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) comme dans l’exemple ci-dessous.

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "payment_method_types[]"="card" \
  -d "payment_method_types[]"="giropay" \
  -d "payment_method_options[card][setup_future_usage]"="off_session"
```

## Débiter ultérieurement le moyen de paiement enregistré [Côté serveur]

> Les moyens de paiement `bancontact`, `ideal` et `sofort` sont considérés comme des moyens de paiement ponctuels par défaut. Lorsque vous les configurez pour une utilisation future, ils génèrent le type de moyen de paiement réutilisable `sepa_debit`. Vous devez donc utiliser la requête `sepa_debit` pour retrouver 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
> 
> The Accounts v2 API is generally available for Connect users, and in public preview for other Stripe users. If you’re part of the Accounts v2 preview, you need to specify a [specify a preview version](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) in your code.
> 
> To request access to the Accounts v2 preview, 
> 
> 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/connect/use-accounts-as-customers.md), plutôt que d’utiliser des objets [Customer](https://docs.stripe.com/api/customers.md).

#### Accounts&nbsp;v2

```curl
curl -G https://api.stripe.com/v1/payment_methods \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}" \
  -d type=card
```

#### Customers&nbsp;v1

```curl
curl -G https://api.stripe.com/v1/payment_methods \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer={{CUSTOMER_ID}}" \
  -d type=card
```

Lorsque vous êtes prêt à débiter votre client *off-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 client et l’ID du `PaymentMethod` pour créer un `PaymentIntent` avec le montant et la devise du paiement. Définissez également quelques autres paramètres pour effectuer le paiement *off-session* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information)&nbsp;:

- Définissez [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) sur `true` pour indiquer que le client n’est pas dans votre tunnel de paiement lors d’une tentative de paiement et ne peut pas satisfaire une demande d’authentification émise par un partenaire, tel qu’un émetteur de carte, une banque ou un autre établissement de paiement. Si, pendant votre tunnel de paiement, un partenaire demande une authentification, Stripe demande des exemptions en utilisant les informations client issues d’une transaction *on-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) précédente. Si les conditions d’exemption ne sont pas remplies, le `PaymentIntent` peut renvoyer une erreur.
- Définissez la propriété [confirm](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) du `PaymentIntent` sur true, ce qui déclenche 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&nbsp;v2

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -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&nbsp;v1

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -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
```

## Tester l'intégration

Utilisez les informations de paiement et la page de redirection test pour vérifier votre intégration. Cliquez sur les onglets ci-après pour obtenir des informations sur chacun des moyens de paiement.

#### Cartes bancaires

| Moyen de paiement | Scénario                                                                                                                                                                                                                                                                                                                         | Méthode de test                                                                                                                                                                         |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Carte bancaire    | La configuration de la carte aboutit et ne requiert aucune *authentification* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte `4242 4242 4242 4242` ainsi que la date d’expiration, le CVC et le code postal de votre choix. |
| Carte bancaire    | La carte exige une authentification pour la configuration initiale, mais la transaction aboutit pour les paiements suivants.                                                                                                                                                                                                     | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte `4000 0025 0000 3155` ainsi que la date d’expiration, le CVC et le code postal de votre choix. |
| Carte bancaire    | La carte exige une authentification pour la configuration initiale et pour les paiements suivants.                                                                                                                                                                                                                               | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte `4000 0027 6000 3184` ainsi que la date d’expiration, le CVC et le code postal de votre choix. |
| Carte bancaire    | La carte est refusée durant la configuration.                                                                                                                                                                                                                                                                                    | Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro `4000 0000 0000 9995` ainsi que la date d’expiration, le CVC et le code postal de votre choix.          |

#### Virements avec redirection bancaire

| Moyen de paiement            | Scénario                                                                                                                                                                          | Méthode de test                                                                                                                                                                           |
| ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Bancontact                   | Votre client définit le prélèvement automatique SEPA comme moyen de paiement pour les prochaines transactions à l’aide de Bancontact.                                             | Saisissez un nom quelconque sur le formulaire Bancontact, puis cliquez sur **Autoriser la configuration test** sur la page de redirection.                                                |
| Bancontact                   | Votre client ne parvient pas à s’authentifier sur la page de redirection Bancontact.                                                                                              | Saisissez un nom quelconque sur le formulaire Bancontact, puis cliquez sur **Faire échouer la configuration test** sur la page de redirection.                                            |
| Prélèvement automatique BECS | Le montant dû est réglé par prélèvement automatique BECS.                                                                                                                         | Remplissez le formulaire à l’aide du numéro de compte `900123456`. Le PaymentIntent confirmé passe d’abord à l’état `processing`, puis à l’état `succeeded` trois&nbsp;minutes plus tard. |
| Prélèvement automatique BECS | Le paiement de votre client échoue avec un code d’erreur `account_closed`.                                                                                                        | Remplissez le formulaire à l’aide du numéro de compte `111111113`.                                                                                                                        |
| iDEAL                        | Votre client définit le [prélèvement automatique SEPA](https://docs.stripe.com/payments/sepa-debit.md) comme moyen de paiement pour les prochaines transactions à l’aide d’iDEAL. | Saisissez un nom et une banque quelconques sur le formulaire iDEAL, puis cliquez sur **Autoriser la configuration test** sur la page de redirection.                                      |
| iDEAL                        | Votre client ne parvient pas à s’authentifier sur la page de redirection iDEAL.                                                                                                   | Sélectionnez une banque quelconque et saisissez n’importe quel nom sur le formulaire iDEAL, puis cliquez sur **Faire échouer la configuration test** sur la page de redirection.          |

#### Prélèvements bancaires

| Moyen de paiement            | Scénario                                                                                                 | Méthode de test                                                                                                                                                                             |
| ---------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Prélèvement automatique SEPA | Le montant dû est réglé par prélèvement automatique SEPA.                                                | Remplissez le formulaire à l’aide du numéro de compte `AT321904300235473204`. Le PaymentIntent confirmé passe d’abord à l’état processing, puis à l’état succeeded trois minutes plus tard. |
| Prélèvement automatique SEPA | L’intention de paiement de votre client passe de l’état `processing` à l’état `requires_payment_method`. | Remplissez le formulaire à l’aide du numéro de compte `AT861904300235473202`.                                                                                                               |

### Tester le traitement d’un PaymentMethod enregistré de type prélèvement automatique SEPA

La confirmation du PaymentIntent  à l’aide d’iDEAL, de Bancontact ou de Sofort génère un *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) de type [prélèvement automatique SEPA](https://docs.stripe.com/payments/sepa-debit.md). Le prélèvement automatique SEPA est un moyen de paiement à [notification différée](https://docs.stripe.com/payments/payment-methods.md#payment-notification) qui passe à l’état intermédiaire `processing` avant de basculer quelques jours plus tard à l’état `succeeded` ou `requires_payment_method`.

#### Adresse e-mail

Configurez le paramètre `payment_method.billing_details.email` sur l’une des valeurs suivantes afin de tester les changements d’état du `PaymentIntent`. Au début de l’adresse e-mail, vous pouvez inclure votre propre texte suivi d’un tiret bas. Par exemple, ``test_1_generatedSepaDebitIntentsFail@example.com`donne lieu à un PaymentMethod de prélèvement automatique SEPA qui échoue systématiquement en cas d'utilisation avec un`PaymentIntent`.

| Adresse e-mail                                                     | Description                                                                                                            |
| ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
| `generatedSepaDebitIntentsSucceed@example.com`                     | L’état du `PaymentIntent` passe de `processing` à `succeeded`.                                                         |
| `generatedSepaDebitIntentsSucceedDelayed@example.com`              | L’état du `PaymentIntent` passe de `processing` à `succeeded` après trois minutes.                                     |
| `generatedSepaDebitIntentsFail@example.com`                        | L’état du `PaymentIntent` passe de `processing` à `requires_payment_method`.                                           |
| `generatedSepaDebitIntentsFailDelayed@example.com`                 | L’état du `PaymentIntent` passe de `processing` à `requires_payment_method` après trois minutes.                       |
| `generatedSepaDebitIntentsSucceedDisputed@example.com`             | L’état du `PaymentIntent` passe de `processing` à `succeeded`, mais un litige est créé immédiatement.                  |
| `generatedSepaDebitIntentsFailsDueToInsufficientFunds@example.com` | L’état du `PaymentIntent` passe de `processing` à `requires_payment_method` avec un code d’échec `insufficient_funds`. |

#### PaymentMethod

Utilisez ces PaymentMethods pour tester les changements d’état du `PaymentIntent`. Ces tokens sont utiles pour les tests automatiques, car ils associent immédiatement le PaymentMethod au SetupIntent sur le serveur.

| Moyen de paiement                                                    | Description                                                                                                            |
| -------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| `pm_bancontact_generatedSepaDebitIntentsSucceed`                     | L’état du `PaymentIntent` passe de `processing` à `succeeded`.                                                         |
| `pm_bancontact_generatedSepaDebitIntentsSucceedDelayed`              | L’état du `PaymentIntent` passe de `processing` à `succeeded` après trois minutes.                                     |
| `pm_bancontact_generatedSepaDebitIntentsFail`                        | L’état du `PaymentIntent` passe de `processing` à `requires_payment_method`.                                           |
| `pm_bancontact_generatedSepaDebitIntentsFailDelayed`                 | L’état du `PaymentIntent` passe de `processing` à `requires_payment_method` après trois minutes.                       |
| `pm_bancontact_generatedSepaDebitIntentsSucceedDisputed`             | L’état du `PaymentIntent` passe de `processing` à `succeeded`, mais un litige est créé immédiatement.                  |
| `pm_bancontact_generatedSepaDebitIntentsFailsDueToInsufficientFunds` | L’état du `PaymentIntent` passe de `processing` à `requires_payment_method` avec un code d’échec `insufficient_funds`. |

## See also

- [Enregistrer les informations de paiement lors des paiements intégrés à l’application](https://docs.stripe.com/payments/mobile/save-during-payment.md)
- [Enregistrer les informations de paiement dans une session Checkout](https://docs.stripe.com/payments/checkout/how-checkout-works.md#save-payment-methods)
- [Configurer des paiements futurs](https://docs.stripe.com/payments/save-and-reuse.md)
- [Gérer les événements post-paiement](https://docs.stripe.com/webhooks/handling-payment-events.md)