Accepter les paiements par carte sans webhooks

Tout d’abord, il vous faut un compte Stripe. S’inscrire.

Utilisez nos bibliothèques officielles pour accéder à l’API 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'

Collectez les informations de carte bancaire côté client avec Stripe.js et Stripe Elements. Elements est un ensemble de composants d’interface utilisateur conçu pour recueillir et valider le numéro de carte bancaire, le code postal et la date d’expiration.

Un composant Element contient une balise iframe qui envoie de manière sécurisée les informations de paiement à Stripe par une connexion HTTPS. Pour que votre intégration fonctionne, l’adresse de votre page de règlement doit aussi commencer par https:// au lieu de http://.

Vous pouvez tester votre intégration sans utiliser le protocole HTTPS. Activez-le au moment d’accepter des paiements en mode production.

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

<form id='payment-form'>
  <label>
    Card details
    <!-- placeholder for Elements -->
    <div id="card-element"></div>
  </label>
  <button type="submit">Submit Payment</button>
</form>

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');
const elements = stripe.elements();
// Set up Stripe.js and Elements to use in checkout form
const style = {
  base: {
    color: "#32325d",
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: "antialiased",
    fontSize: "16px",
    "::placeholder": {
      color: "#aab7c4"
    }
  },
  invalid: {
    color: "#fa755a",
    iconColor: "#fa755a"
  },
};
const cardElement = elements.create('card', {style});
cardElement.mount('#card-element');

const form = document.getElementById('payment-form');
form.addEventListener('submit', 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: cardElement,
    billing_details: {
      // Include any additional collected billing details.
      name: 'Jenny Rosen',
    },
  })
  stripePaymentMethodHandler(result);
});

Une fois le PaymentMethod créé avec succès, envoyez l’identifiant qui en résulte à votre serveur.

const stripePaymentMethodHandler = async (result) => {
  if (result.error) {
    // Show error in payment form
  } else {
    // Otherwise send paymentMethod.id to your server (see Step 4)
    const res = await fetch('/pay', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        payment_method_id: result.paymentMethod.id,
      }),
    })
    const paymentResponse = await res.json();
    // Handle server response (see Step 4)
    handleServerResponse(paymentResponse);
  }
}

Configurez un endpoint sur votre serveur pour recevoir la requête. Cet endpoint sera également utilisé ultérieurement pour traiter les cartes qui nécessitent une étape d’authentification supplémentaire.

Créer un nouveau PaymentIntent avec l’ID du PaymentMethod créé côté client. Vous pouvez confirmer le PaymentIntent en attribuant à la propriété confirm la valeur true lors de la création du PaymentIntent ou appelez confirm après la création. Pour les paiements par carte bancaire, il est également possible de séparer l’autorisation de la capture.

Si le paiement exige des actions supplémentaires comme l’authentification 3D Secure, l’état du PaymentIntent sera défini sur requires_action. Si le paiement a échoué, l’état bascule à nouveau sur requires_payment_method et vous devez envoyer un message d’erreur à votre utilisateur. Si le paiement ne nécessite aucune authentification supplémentaire, un paiement est alors créé et l’état PaymentIntent est défini sur succeeded.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "payment_method"="{{PAYMENT_METHOD_ID}}" \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "confirmation_method"="manual" \
  -d "confirm"="true"

Si vous souhaitez enregistrer la carte bancaire pour la réutiliser plus tard, créez un objet Customer pour stocker l’objet PaymentMethod, puis transmettez les paramètres supplémentaires suivants lors de la création du PaymentIntent :

• client. Défini sur l’ID du client.
• setup_future_usage. Défini sur off_session pour indiquer à Stripe que vous prévoyez de réutiliser ce PaymentMethod pour des paiements hors session en l’absence de votre client. Définir cette propriété permet d’enregistrer le PaymentMethod pour ce client une fois le PaymentIntent confirmé et toutes les actions requises effectuées par l’utilisateur. Pour en savoir plus, consultez l’exemple de code montrant comment enregistrer des cartes bancaires après un paiement.

Écrivez le code qui permettra de traiter les situations qui nécessitent l’intervention de votre client. En règle générale, un paiement aboutit une fois que vous l’avez confirmé sur le serveur à l’étape 4. Cependant, lorsque le PaymentIntent exige une action supplémentaire de la part du client, telle que l’authentification 3D Secure, ce code est alors utilisé.

Utilisez stripe.handleCardAction pour déclencher l’interface utilisateur qui traite les actions du client. Si l’authentification réussit, l’état du PaymentIntent passe à requires_confirmation. Reconfirmez le PaymentIntent sur votre serveur pour finaliser le paiement.

Pour tester votre intégration, utilisez un numéro de carte de test nécessitant une authentification (par exemple, 4000002760003184

) afin de forcer ce flux. Si vous utilisez une carte qui ne nécessite aucune authentification (par exemple, 4242424242424242

), cette partie du flux sera ignorée et le flux se terminera à l’étape 4.

const handleServerResponse = async (response) => {
  if (response.error) {
    // Show error from server on payment form
  } else if (response.requires_action) {
    // Use Stripe.js to handle the required card action
    const { error: errorAction, paymentIntent } =
      await stripe.handleCardAction(response.payment_intent_client_secret);
    if (errorAction) {
      // Show error from Stripe.js in payment form
    } else {
      // The card action has been handled
      // The PaymentIntent can be confirmed again on the server
      const serverResponse = await fetch('/pay', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ payment_intent_id: paymentIntent.id })
      });
      handleServerResponse(await serverResponse.json());
    }
  } else {
    // Show success message
  }
}

Ce code est exécuté uniquement lorsqu’un paiement nécessite une authentification supplémentaire, comme c’était le cas à l’étape précédente. Le code lui-même n’est pas facultatif, car n’importe quel paiement peut nécessiter cette étape supplémentaire.

À l’aide du même endpoint que celui configuré plus tôt, reconfirmez le PaymentIntent pour mener à bien le paiement et traiter la commande. Veillez à ce que cette confirmation survienne dans l’heure qui suit la tentative de paiement. À défaut, le paiement échouera et repassera à l’état requires_payment_method.

curl https://api.stripe.com/v1/payment_intents/{{PAYMENT_INTENT_ID}}/confirm \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST"

​​Pour vérifier que votre intégration est prête, vous avez à votre disposition plusieurs cartes de test dans un bac à sable. Utilisez-les avec n’importe quel CVC et une date d’expiration non échue.

Pour obtenir la liste complète de nos cartes de test, veuillez consulter notre guide de test.