# Enregistrer une carte bancaire sans authentification

Collectez des informations de carte bancaire et débitez votre client plus tard.

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 vos activités commerciales principalement aux États-Unis et au Canada où les banques n’exigent pas d’authentification, vous pouvez adopter cette intégration plus simple. Cette intégration ne sera pas conforme dans les pays nécessitant une authentification pour l’enregistrement des cartes (par exemple l’Inde). Par conséquent, 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 moyens de paiement. Apprenez comment [enregistrer les cartes nécessitant une authentification](https://docs.stripe.com/payments/save-and-reuse.md).

> #### 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. C’est notamment le cas si vous souhaitez enregistrer le moyen de paiement d’un client en vue d’une utilisation ultérieure, par exemple pour le débiter à un moment où il n’utilise pas activement votre site Web ou votre application. Dans les conditions d’utilisation de votre application ou de votre site Web, précisez la façon dont vous comptez enregistrer les informations du moyen de paiement, puis invitez le client à accepter ces conditions. Si vous prévoyez de débiter votre client lorsqu’il est hors ligne, veillez à inclure à vos conditions les éléments suivants :
> 
> - Le consentement du client vous autorisant à déclencher un paiement ou une série de paiements en son nom pour les transactions spécifiées.
- Le calendrier et la fréquence prévus des paiements (par exemple, si les paiements se font par versements échelonnés, par recharges non programmées, ou s’il s’agit d’abonnements).
- La façon dont vous déterminez le montant à payer.
- Vos conditions de résiliation, si le moyen de paiement est utilisé dans le cadre d’un abonnement.
> 
> Veillez à conserver une trace écrite de l’acceptation de ces conditions par votre client.

## Collecter les informations de carte bancaire [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 collecter les informations de carte de vos clients. Utilisez [Stripe Elements](https://docs.stripe.com/payments/elements.md), notre bibliothèque d’interface utilisateur conçue pour vous aider à créer des formulaires de paiement personnalisés. Pour démarrer avec Elements, incluez la bibliothèque Stripe.js avec le script suivant sur 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.

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 bancaire de vos clients en toute sécurité, Elements crée pour vous des composants d’interface hébergés par Stripe, qui sont ensuite placés dans votre formulaire de paiement. Vous n’avez ainsi pas à le faire. Pour définir où ces composants doivent être insérés, 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) publiable. Puis, créez une instance de [l’objet Elements](https://docs.stripe.com/js.md#stripe-elements) et utilisez-la pour intégrer un Element `card` au DOM.

Le composant Element `card` simplifie le formulaire de paiement et réduit le nombre de champs requis en insérant un champ de saisie flexible unique qui collecte toutes les informations de carte nécessaires, en toute sécurité.

Vous pouvez également 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 [composant Card&nbsp;Element à une seule ligne](https://docs.stripe.com/js/element/other_element?type=card) recueille 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 composant Element contient une balise iframe qui envoie de manière sécurisée les informations de paiement à Stripe via une connexion HTTPS. Pour que votre intégration fonctionne, l’adresse de votre page de règlement 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) au moment d’accepter des paiements en mode production.

```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 *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 depuis 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'
```

## Enregistrer la carte bancaire [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 Client 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.

```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 sur](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-error_on_requires_action) `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 inviter l’utilisateur à retourner dans votre application (par exemple en lui envoyant un e-mail) 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 bancaire

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: Demande à nouveau la saisie d'un CVC

Lorsque vous créez de nouveaux paiements sur une carte bancaire sauvegardée, il est conseillé de collecter à nouveau le CVC de la carte afin d’en vérifier le titulaire et de renforcer vos mesures 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 du PaymentIntent au navigateur, vous pouvez collecter à nouveau le CVC avec Stripe Elements sur votre client. Utilisez le composant Element `cardCvc` pour collecter à nouveau le CVC auprès de votre utilisateur et confirmez ensuite le paiement de votre client à l’aide de [stripe.confirmCardPayment](https://docs.stripe.com/js.md#stripe-confirm-card-payment). Spécifiez l’ID de l’objet PaymentMethod dans l’attribut `payment_method` et votre composant Element `cardCvc` dans `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 pourrait réussir même lorsqu’un contrôle CVC n’aboutit pas. Pour éviter cette situation, configurez vos [règles Radar](https://docs.stripe.com/radar/rules.md#traditional-bank-checks) de sorte à 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.