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

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 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/clover/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 Stripe 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. 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éterminez le montant à facturer au client. Pour créer un paiement, créez un PaymentIntent à l’aide de l’ID du PaymentMethod de l’étape 1, à l’aide du 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

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 Dashboard, vous devez mettre à niveau votre intégration. l’intégration mondiale de Stripe gère ces paiements au lieu de les refuser automatiquement.