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'

Recueillez les informations de carte 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, le code postal et la date d’expiration.

Un Stripe 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 paiement 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 réels.

<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 point de terminaison sur votre serveur pour recevoir la requête. Ce point de terminaison sera également utilisé plus tard pour gérer 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 définissant la propriété confirm à la valeur true lors de la création du PaymentIntent ou en appelant confirm après sa création. La fonction Séparer l’autorisation et la capture est également prise en charge pour les paiements par carte.

Si le paiement exige des actions supplémentaires, comme l’authentification 3D Secure, l’état du PaymentIntent passera à requires_action. Si le paiement a échoué, l’état repassera à requires_payment_method et vous devrez envoyer un message d’erreur à votre utilisateur. Si le paiement ne nécessite aucune authentification supplémentaire, un débit sera alors créé et l’état du PaymentIntent passera à 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 pour la réutiliser plus tard, créez un objet Customer pour stocker le PaymentMethod, puis transmettez les paramètres supplémentaires suivants lors de la création du PaymentIntent :

• customer. Définissez ce paramètre à l’ID du client.
• setup_future_usage. Définissez ce paramètre à 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. La définition de 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 après un paiement.

Écrivez du code pour gérer les situations qui nécessitent l’intervention de votre client. Un paiement est normalement réussi une fois que vous l’avez confirmé sur le serveur à l’étape 4. Toutefois, si le PaymentIntent exige une action supplémentaire de la part du client, par exemple l’authentification 3D Secure, ce code sera 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 qui exige 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 n’est pas facultatif, car n’importe quel paiement peut nécessiter cette étape supplémentaire.

À l’aide du même point de terminaison que vous aviez configuré ci-dessus, confirmez le PaymentIntent à nouveau pour finaliser le paiement et traiter la commande. Assurez-vous que cette confirmation se produise dans l’heure suivant la tentative de paiement, sinon le paiement échouera et retournera à 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, consultez notre guide sur les tests.