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. Sa mise en place est plus simple, mais elle ne permet pas de se développer à l’international.

Comment fonctionne cette intégration?

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

Les entreprises en pleine croissance ou qui exercent leur activité à l’international devraient opter pour l’intégration mondiale 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.

Développer un formulaire de paiement
Côté client

Elements, 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.

Tout d’abord, ajoutez le script Stripe.js au haut de chaque page de votre site.

<script src="https://js.stripe.com/v3/"></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 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. 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é.

Ajouter Elements à votre page

Vous aurez ensuite besoin d’un compte Stripe. Inscrivez-vous.

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

payment.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 en indiquant comme premier paramètre votre clé API publique. Puis, créez une instance de l’objet Elements et utilisez-la pour monter un élément Card dans le conteneur d’élément DOM vide sur la page.

client.js
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

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

Utilisez stripe.createPaymentMethod côté client pour recueillir les informations de carte et créer un PaymentMethod lorsque le client envoie le formulaire de paiement. Envoyez l’ID du PaymentMethod à votre serveur.

client.js
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 = result.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!';
  }
};

Configurer Stripe
Côté serveur

Utilisez une bibliothèque officielle pour effectuer des requêtes à l’API de Stripe à partir de votre application :

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 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 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 de l’étape 1 avec le code suivant :

Alerte

Si vous définissez le paramètre 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 : succeeded.

{
  "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.

{
  "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 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
	Réussite de la transaction et traitement immédiat du paiement.
	Échoue toujours avec le code de refus de paiement `insufficient_funds`.
	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.

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

Félicitations! 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. L’intégration complète de Stripe traite ces paiements plutôt que de les refuser automatiquement.