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 acceptant uniquement les cartes bancaires du Canada ou des États-Unis. 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 travaillent à l’international devraient opter pour notre intégration mondiale afin de prendre en charge les demandes d’authentification à deux facteurs des banques et permettre à leurs clients d’utiliser davantage de moyens de paiement.

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

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

Tout d’abord, ajoutez le script Stripe.js en 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 depuis js.stripe.com pour maintenir votre conformité PCI. 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é.

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 publiable. 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 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 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é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 :

Avertissement

Si vous réglez le paramètre 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 : 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 environnement de test 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
	Réussite de la transaction et traitement immédiat du paiement.
	Échec systématique 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`.

Voir la liste complète des cartes de test.

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

Félicitations ! Vous avez réalisé une intégration capable de gérer des paiements par carte bancaire 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 s’afficher comme Failed sur le Dashboard, cela veut dire qu’il est temps de mettre à niveau votre intégration. L’intégration mondiale de Stripe traite ces paiements au lieu de les refuser automatiquement.