# Enregistrer une carte sans authentification

Recueillez des informations de carte pour débiter votre client ultérieurement.

Stripe vous permet de recueillir les informations de la carte de votre client afin de la débiter ultérieurement. Dans certaines régions, les banques exigent souvent une deuxième forme d’authentification pour effectuer un paiement, par exemple en saisissant un code envoyé sur un téléphone. Cette étape supplémentaire tend à diminuer le taux de conversion. En effet, si votre client n’utilise pas activement votre site Web ou votre application il ne pourra pas authentifier l’achat.

​​Si vous exercez votre activité principalement aux États-Unis et au Canada, où les institutions financières n’exigent pas d’authentification, vous pourrez donc adopter cette intégration plus simple. Cette intégration ne sera pas conforme dans les pays qui exigent une authentification pour enregistrer les cartes (par exemple, l’Inde). Cependant, si vous optez pour cette intégration, il vous faudra y apporter des modifications importantes si vous voulez vous étendre à d’autres pays ou ajouter d’autres modes de paiement. Découvrez comment [enregistrer des cartes qui exigent une authentification](https://docs.stripe.com/payments/save-and-reuse.md).

> #### Conformité
> 
> Vous êtes responsable du respect de toutes les lois, réglementations et règles du réseau applicables lorsque vous enregistrez les informations de paiement d’un client. Par exemple, si vous souhaitez enregistrer leur moyen de paiement pour une utilisation future, comme les facturer lorsqu’ils n’utilisent pas activement votre site Web ou votre application. Ajoutez des conditions à votre site Web ou à votre application qui indiquent comment vous prévoyez enregistrer les détails du moyen de paiement et permettez aux clients de donner leur consentement. Si vous souhaitez facturer vos clients lorsqu’ils sont hors ligne, assurez-vous que vos conditions comprennent les éléments suivants :
> 
> - Le consentement du client vous autorisant à prélever 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.
> 
> Assurez-vous de conserver une trace de l’accord écrit de votre client à ces conditions.

## Collectez les informations de carte [Côté client]

Avant d’utiliser ce guide, il vous faut un compte Stripe. [Inscrivez-vous](https://dashboard.stripe.com/register).

Créez une page de paiement pour recueillir les informations de carte du client. Utilisez [Stripe Elements](https://docs.stripe.com/payments/elements.md), une bibliothèque d’interfaces utilisateur qui vous aide à créer des formulaires de paiement personnalisés. Pour démarrer avec Elements, incluez la bibliothèque Stripe.js avec le script suivant dans votre page de paiement.

```html
<script src="https://js.stripe.com/dahlia/stripe.js"></script>
```

Chargez toujours Stripe.js directement à partir de js.stripe.com pour maintenir votre conformité PCI. Vous ne devez pas inclure le script dans un lot ni en héberger de copie vous-même.

Pour tirer le meilleur parti des [fonctionnalités avancées de prévention de la fraude](https://docs.stripe.com/radar.md) de Stripe, incluez ce script sur chaque page de votre site, et pas uniquement sur la page de paiement. L’ajout du script sur l’ensemble des pages [permet à Stripe de détecter les comportements suspects](https://docs.stripe.com/disputes/prevention/advanced-fraud-detection.md) pouvant indiquer une fraude lorsque des utilisateurs naviguent sur votre site.

### Ajouter Elements à votre page

Afin de recueillir les informations de carte de vos clients en toute sécurité, Elements crée pour vous des composants d’interface hébergés par Stripe. Ils sont ensuite placés dans votre formulaire de paiement. Vous n’avez ainsi pas à le faire. Pour déterminer l’emplacement d’insertion de ces composants, créez des éléments DOM (contenants) vides associés à des identifiants uniques dans votre formulaire de paiement.

```html
<input id="cardholder-name" type="text">
<!-- placeholder for Elements -->
<div id="card-element"></div>
<div id="card-result"></div>
<button id="card-button">Save Card</button>
```

Créez ensuite une instance de l’[objet Stripe](https://docs.stripe.com/js.md#stripe-function) en indiquant comme premier paramètre votre [clé API](https://docs.stripe.com/keys.md) publique. Puis, créez une instance de l’[objet Elements](https://docs.stripe.com/js.md#stripe-elements) et utilisez-la pour monter un élément `card` dans le DOM.

L’élément `card` simplifie le formulaire de paiement et réduit le nombre de champs requis en insérant un champ de saisie flexible et unique qui recueille toutes les informations de carte nécessaires de manière sécurisée.

Vous pouvez aussi combiner les composants Elements `cardNumber`, `cardExpiry` et `cardCvc` pour créer un formulaire de carte multi-saisie flexible.

> Recueillez toujours un numéro de code postal afin d’améliorer vos taux d’acceptation des cartes bancaires et de réduire la fraude.
> 
> Le [Card Element à une seule ligne](https://docs.stripe.com/js/element/other_element?type=card) collecte automatiquement le code postal du client et l’envoie à Stripe. Si vous créez votre formulaire de paiement avec des Elements fractionnés ([Numéro de carte](https://docs.stripe.com/js/element/other_element?type=cardNumber), [Expiration](https://docs.stripe.com/js/element/other_element?type=cardExpiry), [CVC](https://docs.stripe.com/js/element/other_element?type=cardCvc)), ajoutez un champ de saisie distinct pour le code postal du client.

```javascript
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

const elements = stripe.elements();
const cardElement = elements.create('card');
cardElement.mount('#card-element');
```

Un élément Stripe contient une balise iframe qui envoie de manière sécurisée les informations de paiement à Stripe par une connexion HTTPS. Pour que votre intégration fonctionne, l’adresse de votre page de paiement doit aussi commencer par `https://` au lieu de `http://`.

Vous pouvez tester votre intégration sans utiliser le protocole HTTPS. [Activez-le](https://docs.stripe.com/security/guide.md#tls) lorsque vous êtes prêt(e) à accepter des paiements réels.

```javascript
const cardholderName = document.getElementById('cardholder-name');
const cardButton = document.getElementById('card-button');
const resultContainer = document.getElementById('card-result');

cardButton.addEventListener('click', async (ev) => {
  const {paymentMethod, error} = await stripe.createPaymentMethod({
      type: 'card',
      card: cardElement,
      billing_details: {
        name: cardholderName.value,
      },
    }
  );

  if (error) {
    // Display error.message in your UI.
    resultContainer.textContent = error.message;
  } else {
    // You have successfully created a new PaymentMethod
    resultContainer.textContent = "Created payment method: " + paymentMethod.id;
  }
});
```

Envoyez l’identifiant de *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) qui en résulte à votre serveur.

## Configurer Stripe [Côté serveur]

Utilisez nos bibliothèques officielles pour accéder à l’API Stripe à partir de votre application&nbsp;:

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

## Enregistrez la carte [Côté serveur]

Enregistrez la carte en associant le PaymentMethod à un *Customer* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments). Vous pouvez utiliser l’objet `Customer` pour stocker d’autres informations sur votre client, telles que les informations d’expédition et l’adresse e-mail.

```curl
curl https://api.stripe.com/v1/customers \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d payment_method={{PAYMENT_METHOD_ID}}
```

Si vous avez un objet Customer existant, vous pouvez joindre le PaymentMethod plutôt à cet objet.

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

À ce stade, associez l’identifiant du client et l’identifiant du PaymentMethod à votre propre représentation interne d’un client, si vous en avez une.

## Débitez la carte enregistrée [Côté serveur]

Lorsque vous êtes prêt, récupérez les identifiants du PaymentMethod et du Customer à débiter. Vous pouvez le faire soit en stockant ces deux identifiants dans votre base de données, soit en utilisant l’identifiant du Customer pour rechercher tous les PaymentMethods disponibles du client.

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

Utilisez l’identifiant du PaymentMethod et celui du Customer pour créer un nouveau PaymentIntent. Définissez [error_on_requires_action](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-error_on_requires_action) sur `true` afin de refuser les paiements qui nécessitent une action de la part de votre client, comme une authentification à deux facteurs.

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=usd \
  -d "payment_method_types[]=card" \
  -d "customer={{CUSTOMER_ID}}" \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  -d error_on_requires_action=true \
  -d confirm=true
```

Lorsqu’une tentative de paiement échoue, la requête échoue également avec un code d’état HTTP 402 et Stripe renvoie une erreur. Vous devez aviser l’utilisateur de retourner dans votre application (par exemple en lui envoyant un courriel) afin de terminer le paiement. Consultez le code d’[erreur](https://docs.stripe.com/api/errors/handling.md) généré par la bibliothèque d’API de Stripe ou le paramètre [last_payment_error.decline_code](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-decline_code) du PaymentIntent pour déterminer le motif du refus du paiement par l’émetteur de la carte.

## Gérer les erreurs de carte

Informez votre client que le paiement a échoué et redirigez-le vers le formulaire de paiement que vous avez créé à l’étape 1, où il pourra saisir de nouvelles informations de carte. Envoyez ce nouvel identifiant de PaymentMethod à votre serveur pour l’[associer](https://docs.stripe.com/api/payment_methods/attach.md) à l’objet Customer et réessayer le paiement.

Vous pouvez également créer un PaymentIntent et enregistrer une carte bancaire en un seul appel d’API si vous avez déjà créé un Customer.

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=usd \
  -d "payment_method_types[]=card" \
  -d "customer={{CUSTOMER_ID}}" \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  -d error_on_requires_action=true \
  -d confirm=true \
  -d setup_future_usage=on_session
```

Définir [setup_future_usage](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-setup_future_usage) sur `on_session` indique à Stripe que vous souhaitez enregistrer la carte bancaire pour une utilisation ultérieure, sans déclencher d’authentification inutile.

## Tester l'intégration

Stripe met à disposition des [cartes de test](https://docs.stripe.com/testing.md) que vous pouvez utiliser dans un environnement de test pour simuler le comportement de différents types de cartes bancaires. Utilisez ces cartes avec n’importe quel CVC, code postal et une date d’expiration dans le futur.

| Numéro           | Description                                                                                          |
| ---------------- | ---------------------------------------------------------------------------------------------------- |
| 4242424242424242 | Transaction réussie et paiement effectué immédiatement.                                              |
| 4000000000009995 | Échoue toujours avec un code de refus de paiement `insufficient_funds`.                              |
| 4000002500003155 | Nécessite une authentification, que cette intégration refuse avec le code `authentication_required`. |

## Optional: Récupérer un CVC

Lorsque vous créez de nouveaux paiements sur une carte enregistrée, il est conseillé de récupérer e CVC de la carte afin d’en vérifier le titulaire et d’ajouter ainsi une mesure supplémentaire de lutte contre la fraude.

Commencez par créer un PaymentIntent depuis votre serveur avec le montant et la devise du paiement, puis définissez le [Customer](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer) sur l’identifiant de votre client. Ensuite, [répertoriez](https://docs.stripe.com/api/payment_methods/list.md) les PaymentMethods associés à votre client afin de déterminer lesquels afficher à votre utilisateur pour la recollecte du CVC.

Après avoir transmis la clé secrète du client de l’objet PaymentIntent au navigateur, vous pouvez récupérer les données relatives au CVC sur votre client à l’aide de Stripe Elements. Utilisez l’élément `cardCvc` pour récupérer la valeur CVC auprès de votre utilisateur et confirmez ensuite le paiement du client au moyen de [stripe.confirmCardPayment](https://docs.stripe.com/js.md#stripe-confirm-card-payment). Définissez l’ID de l’objet PaymentMethod à `payment_method` et l’élément `cardCvc` à `payment_method_options[card][cvc]`.

```javascript
const result = await stripe.confirmCardPayment(clientSecret, {
  payment_method: '{{PAYMENT_METHOD_ID}}',
  payment_method_options: {
    card: {
      cvc: cardCvcElement
    }
  },
});

if (result.error) {
  // Show error to your customer
  console.log(result.error.message);
} else {
  if (result.paymentIntent.status === 'succeeded') {
    // Show a success message to your customer
    // There's a risk of the customer closing the window before callback
    // execution. Set up a webhook or plugin to listen for the
    // payment_intent.succeeded event that handles any business critical
    // post-payment actions.
  }
}
```

Un paiement peut réussir même lorsqu’un contrôle CVC ne fonctionne pas. Pour éviter cette situation, configurez vos [règles Radar](https://docs.stripe.com/radar/rules.md#traditional-bank-checks) afin de bloquer les paiements lorsque la vérification CVC échoue.

## Mettez à niveau votre intégration pour prendre en charge l’authentification des cartes bancaires

Cette intégration *refuse les cartes qui nécessitent une authentification au moment du paiement*. Si vous commencez à voir de nombreux paiements apparaître comme `Échoués` dans le Dashboard, il est temps de [mettre à niveau votre intégration](https://docs.stripe.com/payments/payment-intents/upgrade-to-handle-actions.md). L’intégration globale de Stripe prend en charge ces paiements au lieu de les refuser automatiquement.