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

Découvrez comment enregistrer le mode de paiement du client lorsque vous confirmez un PaymentIntent.

# Checkout Sessions API

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

Use the [Checkout Sessions API](https://docs.stripe.com/api/checkout/sessions.md) to save payment details during a purchase. This is useful for situations such as:

- Charging a customer for an e-commerce order and storing the payment details for future purchases.
- Initiating the first payment in a series of recurring payments.
- Charging a deposit and storing the payment details to charge the full amount later.

## Compliance

Vous êtes responsable de votre conformité à toutes les lois, réglementations et règles du réseau applicables lorsque vous enregistrez les informations de paiement d’un client pour une utilisation future, par exemple pour lui présenter son mode de paiement lors du flux de paiement pour un achat futur ou pour le facturer lorsqu’il n’utilise pas activement votre site Web ou votre application. Avant d’enregistrer ou de facturer le mode de paiement d’un client, assurez-vous :

- Ajoutez à votre site Web ou à votre application des conditions indiquant comment vous comptez enregistrer les informations relatives aux modes de paiement, par exemple :
  - Le consentement du client vous autorisant à effectuer un paiement ou une série de paiements en son nom pour des transactions spécifiques.
  - Le calendrier et la fréquence des paiements prévus (par exemple, si les frais concernent des versements planifiés, des paiements d’abonnement ou des recharges non planifiées).
  - La façon dont vous déterminez le montant du paiement.
  - Vos conditions d’annulation, si le moyen de paiement est un service d’abonnement.
- Utilisez un mode de paiement enregistré uniquement aux fins indiquées dans vos conditions générales.
- Obtenez le consentement explicite du client pour cette utilisation précise. Par exemple, ajoutez une case à cocher « Enregistrer mon mode de paiement pour une utilisation ultérieure ».
- Conservez une trace de l’accord écrit de votre client à vos conditions.

> When using Elements with the Checkout Sessions API, only cards and ACH Direct Debit are supported for saved payment methods. You can’t save other payment methods, such as bank accounts.

## Prerequisites

1. Follow the Checkout guide to [accept a payment](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=stripe-hosted).
1. Suivez ce guide pour enregistrer le mode de paiement utilisé lors d’un paiement pour pouvoir le réutiliser pour les paiements futurs par le même client.

## Enable saved payment methods

> Les lois mondiales en matière de confidentialité sont complexes et nuancées. Avant de mettre en place l’option permettant de stocker les informations sur les modes de paiement des clients, consultez votre service juridique pour vous assurer qu’elle est conforme à votre cadre de confidentialité et de conformité.

Pour permettre à un client d’enregistrer son mode de paiement en vue d’une utilisation ultérieure, définissez 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 Checkout Session.

> #### Utilisez l’API Accounts v2 pour représenter les clients
> 
> L’API Accounts v2 est désormais accessible à tous les utilisateurs de Connect et disponible en version bêta publique pour les autres utilisateurs de Stripe. Si vous participez à la version bêta d’Accounts v2, vous devez [indiquer une version bêta](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) dans votre code.
> 
> Pour demander l’accès à la version bêta d’Accounts v2, 
> 
> Dans la plupart des cas d’usage, nous vous recommandons de [modéliser vos clients en tant qu’objets Account](https://docs.stripe.com/connect/use-accounts-as-customers.md) configurés par le client plutôt que d’utiliser des objets [Customer](https://docs.stripe.com/api/customers.md).

Saving a payment method requires an object that represents your customer. This object can be a customer-configured [Account](https://docs.stripe.com/api/v2/core/accounts/object.md) if you use the Accounts v2 API, or a [Customer](https://docs.stripe.com/api/customers/object.md) if you use the Customers API. Pass an existing customer or create a new one by setting [customer_creation](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_creation) to `always` on the 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 Checkout Session, utilisez la [clé secrète](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) du client renvoyée dans la réponse pour [créer votre page de paiement](https://docs.stripe.com/payments/quickstart-checkout-sessions.md).

> In the latest version of Stripe.js, specifying `enableSave` to `auto` is optional because that’s the default value when saved payment methods are enabled on the Checkout Session.

#### HTML + JS

The Payment Element automatically displays a consent collection checkbox when saved payment methods are enabled on the Checkout Session. You can explicitly configure this behavior using [elementsOptions](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions) on `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

The Payment Element automatically displays a consent collection checkbox when saved payment methods are enabled on the Checkout Session. You can explicitly configure this behavior using [elementsOptions](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions) on the `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 mode de paiement précédemment enregistré

Each saved payment method is linked to an object that represents your customer. This object can be a customer-configured [Account](https://docs.stripe.com/api/v2/core/accounts/object.md) if you use the Accounts v2 API, or a [Customer](https://docs.stripe.com/api/customers/object.md) if you use the Customers API. Before creating the Checkout Session, authenticate your customer, and pass the corresponding object ID to the Checkout Session.

> In the latest version of Stripe.js, `enableRedisplay` defaults to `auto` when saved payment methods are enabled on the Checkout Session.

The Payment Element automatically redisplays previously saved payment methods for your customer to use during checkout when saved payment methods are enabled on the Checkout Session.

#### 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 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

You can explicitly configure the redisplay behavior using [elementsOptions](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions) on `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

You can explicitly configure the redisplay behavior using [elementsOptions](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions) on the `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: Build a saved payment method UI

#### HTML + JS

You can build your own saved payment method UI instead of using the built-in UI provided by the Payment Element.

To prevent the Payment Element from handling consent collection and displaying the previously saved payment methods, pass in additional [elementsOptions](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions) on `initCheckoutElementsSdk`.

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

#### React

You can build your own saved payment method UI instead of using the built-in UI provided by the Payment Element. To prevent the Payment Element from handling consent collection and displaying the previously saved payment methods, pass in additional [elementsOptions](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions) on the `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;
```

### Collect consent

> Les lois mondiales en matière de confidentialité sont complexes et nuancées. Avant de mettre en place l’option permettant de stocker les informations sur les modes de paiement des clients, consultez votre service juridique pour vous assurer qu’elle est conforme à votre cadre de confidentialité et de conformité.

In most cases, you must collect a customer’s consent before you save their payment method details. The following example shows how to obtain consent using a checkbox.

#### 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;
```

When you call [confirm](https://docs.stripe.com/js/custom_checkout/confirm), you can indicate to Stripe that your customer has provided consent by passing the `savePaymentMethod` parameter. When you save a customer’s payment details, you’re responsible for complying with all applicable laws, regulations, and network rules.

#### 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;
```

### Render saved payment methods

Use the [savedPaymentMethods](https://docs.stripe.com/js/custom_checkout/session_object#custom_checkout_session_object-savedPaymentMethods) array on the front end to render the customer’s available payment methods.

> The `savedPaymentMethods` array includes only the payment methods that have [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) set to `always`. Follow the steps for [collecting consent](https://docs.stripe.com/payments/save-during-payment.md#collect-consent) from your customer and make sure to properly set the `allow_redisplay` parameter.

#### 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;
```

### Confirm with a saved payment method

When your customer selects a saved payment method and is ready to complete checkout, call [confirm](https://docs.stripe.com/js/custom_checkout/confirm) and pass in the [paymentMethod](https://docs.stripe.com/js/custom_checkout/confirm#custom_checkout_session_confirm-options-paymentMethod) ID.

#### 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;
```


# Payment Intents API

> This is a Payment Intents API 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 Intents](https://docs.stripe.com/api/payment_intents.md) pour enregistrer des informations de paiement à partir d’un achat. Il existe plusieurs cas d’usage&nbsp;:

- Débiter un client pour une commande en ligne et enregistrer les informations pour des achats ultérieurs.
- Entreprendre le premier paiement d’une série de paiements récurrents.
- Débiter un acompte et enregistrer 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 mode 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 de votre conformité à toutes les lois, réglementations et règles du réseau applicables lorsque vous enregistrez les informations de paiement d’un client pour une utilisation future, par exemple pour lui présenter son mode de paiement lors du flux de paiement pour un achat futur ou pour le facturer lorsqu’il n’utilise pas activement votre site Web ou votre application. Avant d’enregistrer ou de facturer le mode de paiement d’un client, assurez-vous&nbsp;:

- Ajoutez à votre site Web ou à votre application des conditions indiquant comment vous comptez enregistrer les informations relatives aux modes de paiement, par exemple&nbsp;:
  - Le consentement du client vous autorisant à effectuer un paiement ou une série de paiements en son nom pour des transactions spécifiques.
  - Le calendrier et la fréquence des paiements prévus (par exemple, si les frais concernent des versements planifiés, des paiements d’abonnement ou des recharges non planifiées).
  - La façon dont vous déterminez le montant du paiement.
  - Vos conditions d’annulation, si le moyen de paiement est un service d’abonnement.
- Utilisez un mode de paiement enregistré uniquement aux fins indiquées dans vos conditions générales.
- Obtenez le consentement explicite du client pour cette utilisation précise. Par exemple, ajoutez une case à cocher «&nbsp;Enregistrer mon mode de paiement pour une utilisation ultérieure&nbsp;».
- Conservez une trace de l’accord écrit de votre client à vos conditions.

## Prerequisites

1. Follow the Payment Intents API guide to [accept a payment](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents).
1. Suivez ce guide pour enregistrer le mode de paiement utilisé lors d’un paiement pour pouvoir le réutiliser pour les paiements futurs par le même client.

## Save payment methods during payment [Côté serveur]

Vous pouvez configurer le composant Payment&nbsp;Element de façon à enregistrer les modes de paiement de vos clients en vue d’une utilisation ultérieure. Cette section vous montre comment intégrer la [fonctionnalité d’enregistrement des modes de paiement](https://docs.stripe.com/payments/save-customer-payment-methods.md), qui permet au Payment&nbsp;Element&nbsp;:

- Inviter les acheteurs à consentir à enregistrer un moyen de paiement
- Enregistrer les moyens de paiement lorsque les acheteurs donnent leur consentement
- Afficher aux acheteurs les moyens de paiement enregistrés pour leurs prochains 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 mode de paiement enregistré](https://b.stripecdn.com/docs-statics-srv/assets/spm-save.fe0b24afd0f0a06e0cf4eecb0ce2403a.png)

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

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

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

Lors de la création d’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 (à l’aide soit du `customer` pour un objet `Customer`, soit du `customer_account` pour un objet `Account` configuré par 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) de mode de paiement enregistrées 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 proposant aux clients d’enregistrer leurs informations de paiement pour une utilisation ultérieure.

Vous pouvez définir le paramètre `setup_future_usage` sur un objet PaymentIntent ou une session de paiement pour remplacer le comportement par défaut concernant l’enregistrement des modes de paiement. Cela garantit que le mode de paiement sera automatiquement enregistré pour une utilisation future, 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 provoquerait une erreur d’intégration.

> #### Utilisez l’API Accounts&nbsp;v2 pour représenter les clients
> 
> L’API Accounts&nbsp;v2 est désormais accessible à tous les utilisateurs de Connect et disponible en version bêta publique pour les autres utilisateurs de Stripe. Si vous participez à la version bêta d’Accounts&nbsp;v2, vous devez [indiquer une version bêta](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) dans votre code.
> 
> Pour demander l’accès à la version bêta d’Accounts&nbsp;v2, 
> 
> Dans la plupart des cas d’usage, nous vous recommandons de [modéliser vos clients en tant qu’objets Account](https://docs.stripe.com/connect/use-accounts-as-customers.md) configurés par le client plutôt que d’utiliser des objets [Customer](https://docs.stripe.com/api/customers.md).

#### Accounts&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 CustomerSession pour accéder aux modes de paiement enregistrés de ce client. [Traitez les erreurs](https://docs.stripe.com/error-handling.md) correctement lorsque vous créez la session CustomerSession. Si une erreur se produit, vous n’avez pas besoin de fournir la clé secrète du client de la session CustomerSession à l’instance Elements, car ceci est facultatif.

Créez l’instance Elements à l’aide des clés secrètes du client pour le PaymentIntent et la CustomerSession. Ensuite, utilisez cette instance Elements pour créer un Payment&nbsp;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 récupération du CVC

Vous pouvez également spécifier `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) afin d’exiger à nouveau la collecte du CVC lorsque le client paie par carte.

### Détecter la sélection d’un moyen de paiement enregistré

Pour contrôler le contenu dynamique lorsqu’un moyen de paiement enregistré est sélectionné, écoutez l’événement `change` de Payment Element, qui est rempli avec 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
  }
})
```

## Save only payment methods that support reuse [Côté serveur]

You can’t make all payment methods [reusable](https://docs.stripe.com/payments/accept-a-payment.md#save-payment-method-details) by enabling `setup_future_usage` in the Payment Intent. See [Payment method support](https://docs.stripe.com/payments/payment-methods/payment-method-support.md#additional-api-supportability) to learn more about which payment methods are compatible with `setup_future_usage`.

Instead, you can save payment method details only when a customer selects a payment method that supports it. For example, if you accept both card payments and Giropay (which you can’t reuse), configure `setup_future_usage=off_session` on the `payment_method_options[card]` object.

Si le client refuse que ses informations de paiement soient enregistrées, désactivez `setup_future_usage` dans PaymentIntent côté serveur. Nous ne sommes pas favorables à ce que cet ajustement soit effectué du côté du client.

#### Gérer les moyens de paiement à partir du Dashboard

Vous pouvez gérer les moyens de paiement à partir du [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gère le retour des moyens de paiement admissibles en fonction de facteurs tels que le montant de la transaction, la devise et le flux 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 également définir `card` et `giropay` à l’aide des [types de moyens 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 le moyen de paiement enregistré ultérieurement [Côté serveur]

> `bancontact`, `ideal` et `sofort` 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 toutes les lois, réglementations et règles du réseau applicables. Lorsque vous présentez au client final des modes de paiement précédemment utilisés en vue d’effectuer des achats futurs, assurez-vous de répertorier les modes de paiement pour lesquels vous avez obtenu le consentement du client afin d’enregistrer les informations du mode de paiement pour cette utilisation future spécifique. Pour différencier les modes de paiement associés aux clients qui peuvent ou non être présentés au client final en tant que mode de paiement enregistré pour des achats futurs, utilisez le paramètre [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay).

Pour trouver un mode de paiement à débiter, répertoriez les modes de paiement associés à votre client. Cet exemple présente les cartes, mais vous pouvez répertorier n’importe quel [type](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-type) de paiement pris en charge.

> #### Utilisez l’API Accounts&nbsp;v2 pour représenter les clients
> 
> L’API Accounts&nbsp;v2 est désormais accessible à tous les utilisateurs de Connect et disponible en version bêta publique pour les autres utilisateurs de Stripe. Si vous participez à la version bêta d’Accounts&nbsp;v2, vous devez [indiquer une version bêta](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) dans votre code.
> 
> Pour demander l’accès à la version bêta d’Accounts&nbsp;v2, 
> 
> Dans la plupart des cas d’usage, nous vous recommandons de [modéliser vos clients en tant qu’objets Account](https://docs.stripe.com/connect/use-accounts-as-customers.md) configurés par le client plutôt que d’utiliser des objets [Customer](https://docs.stripe.com/api/customers.md).

#### Accounts&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 à facturer 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’identifiant du client et l’identifiant du `PaymentMethod` pour créer un `PaymentIntent` en indiquant le montant et la devise du paiement. Définissez quelques autres paramètres pour effectuer le paiement hors session&nbsp;:

- Assignez la valeur [true](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) à `off_session` pour indiquer que le client n’est pas dans votre processus de paiement lors d’une tentative de paiement et ne peut pas répondre à une demande d’authentification faite par un partenaire, comme un émetteur de cartes, une institution financière ou un autre établissement financier. Si, au cours de votre processus de paiement, un partenaire demande une authentification, Stripe demandera des exemptions à l’aide des informations client provenant d’une transaction effectuée *pendant une session précédente* (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 respectées, le `PaymentIntent` peut générer une erreur.
- Assignez la valeur true à la propriété [confirm](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) du `PaymentIntent`, ce qui aura pour effet de générer une confirmation immédiate lorsque le `PaymentIntent` est créé.
- Définissez le [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) sur l’ID du `PaymentMethod`.
- Selon la façon 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 du `compte` configuré par le client, soit [client](https://docs.stripe.com/api.md#create_payment_intent-customer) sur l’ID du `Customer`.

#### Comptes&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
```

#### Clients&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 afin de vérifier votre intégration. Cliquez sur les onglets ci-après pour obtenir des informations sur chacun des moyens de paiement.

#### Cartes

| Moyen de paiement | Scénario                                                                                                                                                                                                                                                                                                                         | Méthode de test                                                                                                                                                                                    |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Carte de crédit   | 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 de crédit en saisissant le numéro de carte de crédit `4242 4242 4242 4242` ainsi qu’une date d’expiration, un CVC et un code postal de votre choix. |
| Carte de crédit   | La carte exige une authentification pour la configuration initiale, mais la transaction aboutit pour les paiements suivants.                                                                                                                                                                                                     | Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit `4000 0025 0000 3155` ainsi qu’une date d’expiration, un CVC et un code postal de votre choix. |
| Carte de crédit   | La carte exige une authentification pour la configuration initiale et pour les paiements suivants.                                                                                                                                                                                                                               | Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit `4000 0027 6000 3184` ainsi qu’une date d’expiration, un CVC et un code postal de votre choix. |
| Carte de crédit   | La carte est refusée durant la configuration.                                                                                                                                                                                                                                                                                    | Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit `4000 0000 0000 9995` ainsi qu’une date d’expiration, un CVC et un code postal de votre choix. |

#### Redirections vers l'institution financière

| Moyen de paiement            | Scénario                                                                                                                                                                         | Méthode de test                                                                                                                                                                                  |
| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Bancontact                   | Votre client définit le prélèvement 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 é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 mode de paiement pour les prochaines transactions à l’aide d’iDEAL. | Saisissez un nom et une institution financière quelconque 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 institution financière 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 SEPA  | Le montant dû est réglé par prélèvement 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 SEPA  | L’intention de paiement de votre client passe de l’état `processing` à l’état `requires_payment_method`. | Remplissez le formulaire en utilisant le numéro de compte `AT861904300235473202`.                                                                                                           |

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

La confirmation du SetupIntent  du PaymentIntent 



#### Adresse de courriel

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 de courriel, 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 SEPA qui échoue systématiquement en cas d’utilisation avec un `PaymentIntent`.

| Adresse de courriel                                                | Description                                                                                                            |
| ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
| `generatedSepaDebitIntentsSucceed@example.com`                     | L’état du `PaymentIntent` passe de `processing` à `succeeded`.                                                         |
| `generatedSepaDebitIntentsSucceedDelayed@example.com`              | L’état du `PaymentIntent` passe de `processing` à `succeeded` au bout de 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` au bout de 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 le code d’échec `insufficient_funds`. |

#### PaymentMethod

Utilisez ces PaymentMethods pour tester les changements d’état du `PaymentIntent` . Ces jetons 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` au bout de 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` au bout de 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 le code d’échec `insufficient_funds`. |

## See also

- [Enregistrer les informations de paiement lors des paiements dans 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 ultérieurs](https://docs.stripe.com/payments/save-and-reuse.md)
- [Handle post-payment events](https://docs.stripe.com/webhooks/handling-payment-events.md)