# Paiements par carte sans authentification bancaire

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

Cette intégration prend en charge les entreprises qui acceptent uniquement les cartes américaines et canadiennes. Elle est plus simple à mettre en place, mais ne s’adapte pas à une clientèle mondiale.

### Fonctionnement de cette intégration

Les banques dans des régions comme l’Europe et l’Inde exigent souvent une authentification à deux facteurs pour confirmer un achat. Si votre activité est principalement basée aux États-Unis et au Canada, ignorer l’*authentification de la carte* (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) peut simplifier votre intégration, car les banques la demandent rarement dans ces régions.

Lorsqu’une banque requiert une authentification, cette intégration de base refuse immédiatement le paiement (de la même manière qu’un refus de carte), au lieu de gérer l’authentification pour finaliser le paiement de façon asynchrone. L’avantage est que le paiement est accepté ou refusé instantanément, et la confirmation du paiement a lieu côté serveur, ce qui permet de gérer les actions post-paiement immédiates sans *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests).

### Comparaison avec 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 étasuniens et canadiens                                                    | ✔                 | ✔                    |
| Refuse le paiement si les informations de cartes bancaires sont incorrectes ou les fonds insuffisants  | ✔                 | ✔                    |
| Refuse le paiement si la banque 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 travaillent à l’international devraient opter pour notre [intégration mondiale](https://docs.stripe.com/payments/accept-a-payment.md) afin de prendre en charge les demandes d’authentification à deux facteurs des banques et permettre à leurs clients d’utiliser davantage de moyens de paiement.
Tunnel 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 intégrés pour recueillir les informations de carte des clients. Stripe les héberge et les place dans votre formulaire de paiement sous forme d’iframe. De cette façon, les informations de carte de votre client sont totalement séparées de votre code.

#### HTML + JS

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

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

inclure le script sur chaque page de votre site vous permet de bénéficier de la [fonctionnalité avancée de lutte contre la fraude de&nbsp;Stripe](https://docs.stripe.com/radar.md) et de sa capacité à détecter les comportements de navigation anormaux.

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

Chargez toujours ce script directement depuis **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 ni en héberger de copie.

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

L’adresse de la page contenant 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 d’une connexion HTTPS sécurisée, consultez notre documentation relative à 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) publiable. 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
```

> Ce guide suppose que vous avez déjà une connaissance de base de React et que vous avez déjà configuré un projet React. Si vous débutez avec React, nous vous recommandons de lire le guide [Getting Started](https://reactjs.org/docs/getting-started.html) de React avant de continuer.
> 
> si vous souhaitez tester rapidement React&nbsp;Stripe.js sans créer un nouveau projet, commencez par cette [présentation 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 via une connexion HTTPS sécurisée.

L’adresse de la page contenant 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 d’une connexion HTTPS sécurisée, consultez notre documentation relative à 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’attribut `Promise` renvoyé au fournisseur `Elements`.

importez et appelez `loadStripe` à la racine de votre application react pour bénéficier de la [fonctionnalité avancée de lutte contre la fraude de&nbsp;Stripe](https://docs.stripe.com/radar.md) et de sa capacité à détecter les comportements de navigation anormaux.

```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 pouvez utiliser un [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer).

#### Hooks

```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 endpoint sur votre serveur pour recevoir la requête du client.

Pour représenter votre intention d’encaisser le paiement d’un client, Stripe utilise un objet [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) qui suit vos tentatives de débit et les changements d’état du 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 endpoint HTTP pour répondre à la requête AJAX de l’étape 1. Dans cet endpoint, déterminez le montant à facturer au client. Pour créer un paiement, créez un PaymentIntent à l’aide de l’ID du *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) de l’étape 1, à l’aide du 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 réglez le paramètre [error_on_requires_action](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-error_on_requires_action) sur `true` lors de la confirmation d’un paiement et que ce paiement nécessite une authentification à deux facteurs de la part du client, le paiement échouera automatiquement.

#### 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 *environnement de test* (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 quels code CVC, code postal et date d’expiration future.

| Numéro           | Description                                                                                                                   |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| 4242424242424242 | Réussite de la transaction et traitement immédiat du paiement.                                                                |
| 4000000000009995 | Échec systématique 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`. |

Voir 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 bancaires

Votre intégration de paiements par carte de base est maintenant terminée. Cette intégration **refuse les cartes nécessitant une authentification pendant le paiement**.

si vous commencez à voir des paiements marqués comme `Failed` dans le&nbsp;Dashboard, vous devez [mettre à niveau votre intégration](https://docs.stripe.com/payments/payment-intents/upgrade-to-handle-actions.md). l’intégration mondiale de&nbsp;Stripe&nbsp;gère ces paiements au lieu de les refuser automatiquement.