# Paiements par carte sans authentification bancaire

Développez une intégration plus simple, avec des limites régionales.

Cette intégration soutient les entreprises qui n’acceptent que les cartes des États-Unis et du Canada. Elle est plus simple au départ, mais ne se développe pas pour prendre en charge une clientèle internationale.

### Fonctionnement de cette intégration

Dans certaines régions comme l’Europe ou l’Inde, les banques exigent souvent une authentification à deux facteurs pour confirmer un achat. Si vous exercez votre activité principalement aux États-Unis et au Canada, vous pouvez simplifier votre intégration en ignorant l’*authentification* (A bank might require the customer to authenticate a card payment before processing. Implementation varies by bank but commonly consists of a customer entering in a security code sent to their phone), rarement exigée par les banques dans ces régions.

Lorsqu’une banque exige une authentification, au lieu de gérer l’authentification pour effectuer le paiement de manière asynchrone, cette intégration basique génère automatiquement un refus de paiement (similaire à un refus de carte). L’avantage est que la réussite ou l’échec du paiement sont immédiats et que la confirmation de paiement a lieu sur le serveur. De cette manière, vous pouvez immédiatement gérer les actions post-paiement sans *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests).

### En quoi diffère-t-elle de l’intégration mondiale?

| Fonctionnalité                                                                                         | Cette intégration | Intégration mondiale |
| ------------------------------------------------------------------------------------------------------ | ----------------- | -------------------- |
| Formulaire de paiement personnalisé                                                                    | ✔                 | ✔                    |
| Aucune donnée sensible ne transite sur votre serveur                                                   | ✔                 | ✔                    |
| Fonctionne pour vos clients américains et canadiens                                                    | ✔                 | ✔                    |
| Refuse le paiement si les informations de cartes bancaires sont incorrectes ou les fonds insuffisants  | ✔                 | ✔                    |
| Refuse le paiement si l’institution financière demande une authentification                            | ✔                 |                      |
| Fonctionne pour vos clients internationaux                                                             |                   | ✔                    |
| Gère automatiquement les paiements par carte nécessitant une authentification bancaire                 |                   | ✔                    |
| Webhooks recommandés pour les tâches post-paiement                                                     |                   | ✔                    |
| Possibilité d’intégrer facilement d’autres moyens de paiement (par exemple les prélèvements bancaires) |                   | ✔                    |

Les entreprises en pleine croissance ou qui exercent leur activité à l’international devraient opter pour l’[intégration mondiale](https://docs.stripe.com/payments/accept-a-payment.md) de Stripe afin de prendre en charge les demandes d’authentification à deux facteurs des institutions financières et permettre à leurs clients d’utiliser davantage de modes de paiement.
Flux de paiement que vous intégrez (See full diagram at https://docs.stripe.com/payments/without-card-authentication)
## Développer un formulaire de paiement [Côté client]

[Elements](https://docs.stripe.com/payments/elements.md), qui fait partie de Stripe.js, fournit des composants d’interface utilisateur prêts à l’emploi permettant de collecter les informations de carte de vos clients. Stripe les héberge et les place dans votre formulaire de paiement sous forme de balise iframe. De cette façon, les informations de carte de votre client sont entièrement séparées de votre code.

#### HTML + JS

Tout d’abord, ajoutez le script [Stripe.js](https://docs.stripe.com/js.md) au haut de chaque page de votre site.

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

En ajoutant le script sur chaque page de votre site, vous pourrez bénéficier de la [fonctionnalité de protection avancée contre la fraude](https://docs.stripe.com/radar.md) de Stripe et détecter les comportements anormaux des navigateurs.

### Exigences en matière de sécurité

Chargez toujours ce script directement à partir de **js.stripe.com** pour maintenir votre [conformité PCI](https://docs.stripe.com/security/guide.md). Vous ne devez pas inclure le script dans un lot ou en héberger une copie.

Lorsque vous utilisez Elements, toutes les informations de paiement sont transmises au moyen d’une connexion HTTPS sécurisée.

L’adresse de la page qui contient Elements doit également débuter par **https://** et non **http://**. Pour en savoir plus sur l’obtention de certificats SSL et leur intégration à votre serveur en vue de procurer une connexion HTTPS sécurisée, consultez notre documentation sur la [sécurité](https://docs.stripe.com/security.md).

### Ajouter Elements à votre page

Vous aurez ensuite besoin d’un compte Stripe. [Inscrivez-vous](https://dashboard.stripe.com/register).

Créez des éléments de DOM (conteneurs) avec des ID uniques dans votre formulaire de paiement.

```html
<form id="payment-form">
  <div id="card-element"><!-- placeholder for Elements --></div>
  <button id="card-button">Submit Payment</button>
  <p id="payment-result"><!-- we'll pass the response from the server here --></p>
</form>
```

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](https://docs.stripe.com/js.md#element-mount) un élément Card dans le conteneur d’élément DOM vide sur la page.

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

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

Utilisez [stripe.createPaymentMethod](https://docs.stripe.com/js/payment_methods/create_payment_method) côté client pour recueillir les informations de carte et créer un [PaymentMethod](https://docs.stripe.com/api/payment_methods.md) lorsque le client envoie le formulaire de paiement. Envoyez l’ID du PaymentMethod à votre serveur.

```javascript
const form = document.getElementById("payment-form");

var resultContainer = document.getElementById('payment-result');

// cardElement is defined in the previous step
cardElement.on('change', function(event) {
  if (event.error) {
    resultContainer.textContent = event.error.message;
  } else {
    resultContainer.textContent = '';
  }
});

form.addEventListener('submit', async event => {
  event.preventDefault();
  resultContainer.textContent = '';
  const result = await stripe.createPaymentMethod({
    type: 'card',
    card: cardElement,
  });
  handlePaymentMethodResult(result);
});

const handlePaymentMethodResult = async ({ paymentMethod, error }) => {
  if (error) {
    // An error happened when collecting card details, show error in payment form
    resultContainer.textContent = error.message;
  } else {
    // Send paymentMethod.id to your server (see Step 3)
    const response = await fetch("/pay", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ payment_method_id: paymentMethod.id })
    });

    const responseJson = await response.json();

    handleServerResponse(responseJson);
  }
};

const handleServerResponse = async responseJson => {
  if (responseJson.error) {
    // An error happened when charging the card, show it in the payment form
    resultContainer.textContent = responseJson.error;
  } else {
    // Show a success message
    resultContainer.textContent = 'Success!';
  }
};
```

#### React

Tout d’abord, installez [Stripe.js](https://github.com/stripe/stripe-js) et [React Stripe.js](https://docs.stripe.com/sdks/stripejs-react.md).

```bash
npm install --save @stripe/stripe-js @stripe/react-stripe-js
```

> Dans ce guide, nous partons du principe que vous avez déjà des connaissances de base sur le fonctionnement de React et que vous avez déjà configuré un projet React. Si vous ne connaissez pas encore React, nous vous conseillons de consulter notre [Guide de démarrage](https://reactjs.org/docs/getting-started.html) consacré à React avant de poursuivre.
> 
> Si vous cherchez un moyen rapide d’essayer React Stripe.js sans avoir besoin de créer un nouveau projet, commencez par cette[démo dans CodeSandbox](https://codesandbox.io/s/react-stripe-official-q1loc?fontsize=14&hidenavigation=1&theme=dark).

### Exigences en matière de sécurité

Lorsque vous utilisez Elements, toutes les informations de paiement sont transmises au moyen d’une connexion HTTPS sécurisée.

L’adresse de la page qui contient Elements doit également débuter par **https://** et non **http://**. Pour en savoir plus sur l’obtention de certificats SSL et leur intégration à votre serveur en vue de procurer une connexion HTTPS sécurisée, consultez notre documentation sur la [sécurité](https://docs.stripe.com/security.md).

### Charger Stripe.js et ajouter Elements à votre page

Pour utiliser Elements, incluez la racine de votre application React dans un fournisseur [Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Appelez [loadStripe](https://github.com/stripe/stripe-js#loadstripe) avec votre clé publique et transmettez l’élément `Promise` renvoyé au fournisseur `Elements`.

Il est important d’importer et d’appeler `loadStripe` à partir de la racine de votre application React pour pouvoir bénéficier de la [fonctionnalité avancée de détection des fraudes](https://docs.stripe.com/radar.md) de Stripe et détecter les comportements anormaux des navigateurs.

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

import CheckoutForm from './CheckoutForm';

// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe("<<YOUR_PUBLISHABLE_KEY>>");

function App() {
  return (
    <Elements stripe={stripePromise}>
      <CheckoutForm />
    </Elements>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
```

### Créer un PaymentMethod

Utilisez les méthodes `CardElement` et [stripe.createPaymentMethod](https://docs.stripe.com/js/payment_methods/create_payment_method) côté client pour recueillir les informations de carte et créer un [PaymentMethod](https://docs.stripe.com/api/payment_methods.md) lorsque le client envoie le formulaire de paiement. Envoyez l’ID du PaymentMethod à votre serveur.

Pour appeler `stripe.createPaymentMethod` depuis votre composant de formulaire de paiement, utilisez les hooks [useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook) et [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook). Si vous préférez les composants de classe traditionnels aux hooks, vous pourrez utiliser un [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer).

#### Crochets

```jsx
import React from 'react';
import {useStripe, useElements, CardElement} from '@stripe/react-stripe-js';

export default function CheckoutForm() {
  const stripe = useStripe();
  const elements = useElements();

  const handleSubmit = async (event) => {
    // We don't want to let default form submission happen here,
    // which would refresh the page.
    event.preventDefault();
const result = await stripe.createPaymentMethod({
      type: 'card',
      card: elements.getElement(CardElement),
      billing_details: {
        // Include any additional collected billing details.
        name: 'Jenny Rosen',
      },
    });

    handlePaymentMethodResult(result);
  };

  const handlePaymentMethodResult = async (result) => {
    if (result.error) {
      // An error happened when collecting card details,
      // show `result.error.message` in the payment form.
    } else {
      // Otherwise send paymentMethod.id to your server (see Step 3)
      const response = await fetch('/pay', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          payment_method_id: result.paymentMethod.id,
        }),
      });

      const serverResponse = await response.json();

      handleServerResponse(serverResponse);
    }
  };

  const handleServerResponse = (serverResponse) => {
    if (serverResponse.error) {
      // An error happened when charging the card,
      // show the error in the payment form.
    } else {
      // Show a success message
    }
  };

  const handleCardChange = (event) => {
    if (event.error) {
      // Show `event.error.message` in the payment form.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <CardElement onChange={handleCardChange} />
      <button type="submit" disabled={!stripe}>
        Submit Payment
      </button>
    </form>
  );
}
```

## Configurer Stripe [Côté serveur]

Utilisez une bibliothèque officielle pour effectuer des requêtes à l’API de 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'
```

## Effectuer un paiement [Côté serveur]

Configurez un point de terminaison sur votre serveur pour recevoir la requête du client.

Stripe utilise un objet [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) pour représenter votre intention de percevoir le paiement d’un client, qui suit les tentatives de paiement et les changements d’état de paiement tout au long du processus.

Décidez toujours du montant à débiter côté serveur, un environnement sécurisé, plutôt que côté client. Cela permet d’éviter que des clients malveillants puissent définir leurs propres prix.

Créez un point de terminaison HTTP pour répondre à la requête AJAX de l’étape&nbsp;1. Dans cet point de terminaison, décidez de quel montant débiter votre client. Pour créer un paiement, créez un PaymentIntent en utilisant l’ID de *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) de l’étape&nbsp;1 avec le code suivant&nbsp;:

#### curl

```curl
# Check the status of the PaymentIntent to make sure it succeeded

curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d amount=1099 \
  -d currency=usd \

# A PaymentIntent can be confirmed some time after creation,
# but here we want to confirm (collect payment) immediately.
  -d confirm=true \
  -d payment_method="{{PAYMENT_METHOD_ID}}" \

# If the payment requires any follow-up actions from the
# customer, like two-factor authentication, Stripe will error
# and you will need to prompt them for a new payment method.
  -d error_on_requires_action=true
```

> Si vous définissez le paramètre [error_on_requires_action](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-error_on_requires_action) à`true` lors de la confirmation d’un paiement, Stripe entraînera automatiquement un échec de paiement s’il nécessite une authentification à deux facteurs de la part du client.

#### Réponse de l’API Payment Intents

Lorsque vous effectuez un paiement à l’aide de l’API, la réponse indique l’état du PaymentIntent. L’état d’un paiement réussi est&nbsp;: `succeeded`.

```json
{
  "id": "pi_0FdpcX589O8KAxCGR6tGNyWj",
  "object": "payment_intent",
  "amount": 1099,
  "charges": {
    "object": "list",
    "data": [
      {
        "id": "ch_GA9w4aF29fYajT",
        "object": "charge",
        "amount": 1099,
        "refunded": false,
        "status": "succeeded",
      }
    ]
  },
  "client_secret": "pi_0FdpcX589O8KAxCGR6tGNyWj_secret_e00tjcVrSv2tjjufYqPNZBKZc",
  "currency": "usd",
  "last_payment_error": null,"status": "succeeded",
}
```

Si le paiement échoue, la réponse inclut le code de l’erreur et un message d’erreur. Voici un exemple de paiement en échec car la carte bancaire utilisée nécessitait une authentification à deux facteurs.

```json
{
  "error": {"code": "authentication_required",
    "decline_code": "authentication_not_handled",
    "doc_url": "https://docs.stripe.com/error-codes#authentication-required",
    "message": "This payment required an authentication action to complete, but `error_on_requires_action` was set. When you're ready, you can upgrade your integration to handle actions at https://stripe.com/docs/payments/payment-intents/upgrade-to-handle-actions.",
    "payment_intent": {
      "id": "pi_1G8JtxDpqHItWkFAnB32FhtI",
      "object": "payment_intent",
      "amount": 1099,
      "status": "requires_payment_method",
      "last_payment_error": {
        "code": "authentication_required",
        "decline_code": "authentication_not_handled",
        "doc_url": "https://docs.stripe.com/error-codes#authentication-required",
        "message": "This payment required an authentication action to complete, but `error_on_requires_action` was set. When you're ready, you can upgrade your integration to handle actions at https://stripe.com/docs/payments/payment-intents/upgrade-to-handle-actions.",
        "type": "card_error"
      },
    },
    "type": "card_error"
  }
}
```

## Tester l'intégration

Stripe fournit plusieurs cartes de test que vous pouvez utiliser dans un *bac à sable* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes) pour vérifier que cette intégration est prête. Utilisez-les avec n’importe quel CVC, code postal et date d’expiration postérieure.

| Numéro           | Description                                                                                                                   |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| 4242424242424242 | Réussite de la transaction et traitement immédiat du paiement.                                                                |
| 4000000000009995 | Échoue toujours avec le code de refus de paiement `insufficient_funds`.                                                       |
| 4000002500003155 | Exige l’authentification, qui dans cette intégration échouera avec un code de refus de paiement `authentication_not_handled`. |

Consulter la liste complète des [cartes de test](https://docs.stripe.com/testing.md).

## Mettre à niveau votre intégration pour prendre en charge l'authentification de cartes

Vous avez réalisé une intégration capable de gérer des paiements par carte basiques. Veuillez noter que cette intégration **génère des refus de paiement pour les cartes qui nécessitent une authentification lors du paiement**.

Si vous commencez à voir de nombreux paiements être affichés comme `Failed` dans le Dashboard, cela signifie qu’il est temps de [mettre à niveau votre intégration](https://docs.stripe.com/payments/payment-intents/upgrade-to-handle-actions.md). L’intégration complète de Stripe traite ces paiements plutôt que de les refuser automatiquement.