Paiements par carte sans authentification bancaire

Elements fait partie de Stripe.js et fournit des composants d’interface utilisateur préconfigurés pour la collecte des informations de carte de vos clients. Ces informations sont hébergées par Stripe et placées 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.

<script src="https://js.stripe.com/v3/"></script>

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

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

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

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!';
  }
};

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

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

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 :

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

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_4eC39HqLyjWDarjtT1zdp7dc: \
  -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

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"
  }
}

Pour vérifier que votre intégration est prête, vous avez à votre disposition plusieurs cartes de test. Vous pouvez les utiliser en mode test avec n’importe quel CVC, code postal et date d’expiration non échue.

Voir la liste complète des cartes de test.

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.