Accepter un paiement Bancontact

Découvrez comment accepter les paiements effectués à l'aide de Bancontact, un moyen de paiement très répandu en Belgique.

Checkout

API Direct

Mobile

Bancontact est un moyen de paiement à usage unique qui nécessite une authentification de son paiement par le client. Pour effectuer un paiement avec Bancontact, votre client quitte votre application, authentifie son paiement, puis revient sur votre application. Vous recevez alors une notification immédiate vous indiquant si le paiement a abouti ou s’il a échoué.

Remarque

Votre utilisation de Bancontact doit se conformer aux Conditions d’utilisation du service Bancontact.

Configurer Stripe
Côté serveur

Pour commencer, vous devez créer un compte Stripe. Inscrivez-vous maintenant.

Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre application :

Créer un PaymentIntent
Côté serveur

Un PaymentIntent est un objet qui représente votre intention d’encaisser le paiement d’un client et qui suit le cycle de vie du processus de paiement étape par étape.

Créez un PaymentIntent sur votre serveur et précisez le montant à encaisser ainsi que la devise eur (Bancontact ne prend en charge aucune autre devise). Si vous avez déjà une intégration Payment Intents, ajoutez bancontact à la liste des types de moyens de paiement.

Par défaut, la langue de la page d’autorisation de Bancontact est l’anglais (en). Vous pouvez la remplacer par la langue préférée de votre client en réglant la propriété preferred_language sur fr, nl ou de.

Récupérer la clé secrète du client

Le PaymentIntent contient une clé secrète à utiliser côté client pour finaliser le processus de paiement en toute sécurité. Vous pouvez adopter différentes approches pour transmettre cette clé secrète côté client.

Récupérez la clé secrète du client à partir d’un endpoint sur votre serveur, à l’aide de la fonction fetch du navigateur. Cette approche est recommandée si votre côté client est une application d’une seule page, en particulier si elle repose sur un framework front-end moderne tel que React. Créez l’endpoint de serveur qui gère la clé secrète du client :

Récupérez ensuite la clé secrète du client à l’aide JavaScript côté client :

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

Collecter les informations du moyen de paiement
Côté client

Créez un formulaire de paiement côté client pour collecter les informations de facturation du client :

Champ	Valeur
`name`	Nom et prénom du client.

checkout.html
<form id="payment-form">
  <div class="form-row">
    <label for="name">
      Name
    </label>
    <input id="name" name="name" required>
  </div>

  <!-- Used to display form errors. -->
  <div id="error-message" role="alert"></div>

  <button id="submit-button">Pay with Bancontact</button>
</form>

Soumettre le paiement à Stripe
Côté client

Créez un paiement côté client avec la clé secrète du client du PaymentIntent. La clé secrète du client est distincte de vos clés API qui authentifient les requêtes à l’API Stripe. Celle-ci doit être utilisée avec prudence, car elle peut finaliser le paiement. Elle ne doit être ni enregistrée, ni intégrée dans des URL, ni dévoilée à d’autres personnes que votre client.

Lorsqu’un client clique pour payer avec Bancontact, utilisez Stripe.js pour soumettre le paiement à Stripe. Stripe.js est la bibliothèque JavaScript de base pour créer les tunnels de paiement : elle gère automatiquement les opérations complexes telles que la redirection décrite ci-dessous, et facilite l’extension de votre intégration à d’autres moyens de paiement. Incluez le script Stripe.js sur votre page de paiement en l’ajoutant à la section head de votre fichier HTML.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/clover/stripe.js"></script>
</head>

Créez une instance de Stripe.js avec le code JavaScript suivant sur votre page de paiement.

client.js
// Set your publishable key. Remember to change this to your live publishable key in production!
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

Appelez stripe.confirmBancontactPayment pour rediriger votre client vers le site Web ou l’application de Bancontact afin d’effectuer le paiement. Ajoutez une URL return_url pour rediriger votre client une fois le paiement effectué. Vous devez également fournir le nom complet du client dans billing_details.

client.js
var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

// Redirects away from the client
const {error} = await stripe.confirmBancontactPayment(
  '{{PAYMENT_INTENT_CLIENT_SECRET}}',
  {
    payment_method: {
      billing_details: {
        name: "Jenny Rosen"
      }
    },
    return_url: 'https://example.com/checkout/complete',
  }
);

if (error) {
  // Inform the customer that there was an error.
}

Effectuer la redirection

Les paramètres de requête d’URL suivants sont fournis lorsque Stripe redirige le client vers l’URL return_url.

Paramètre	Description
`payment_intent`	L’identifiant unique du `PaymentIntent`.
`payment_intent_client_secret`	La clé secrète du client de l’objet `PaymentIntent`.

Vous pouvez également ajouter vos propres paramètres de requête lorsque vous fournissez l’url de retour return_url. Ceux-ci resteront activés pendant toute la durée du processus de redirection. Le paramètre return_url doit correspondre à une page de votre site Web sur laquelle l’état du paiement est fourni. Vous devez vérifier l’état du PaymentIntent lors de l’affichage de la page de retour. Vous pouvez le faire en utilisant la fonction retrievePaymentIntent de Stripe.js et en transmettant payment_intent_client_secret.

(async () => {
  const url = new URL(window.location);
  const clientSecret = url.searchParams.get('payment_intent_client_secret');

  const {paymentIntent, error} = await stripe.retrievePaymentIntent(clientSecret);
  if (error) {
    // Handle error
  } else if (paymentIntent && paymentIntent.status === 'succeeded') {
    // Handle successful payment
  }
})();

Détails du compte bancaire

Vous pouvez consulter les informations concernant le compte bancaire qu’utilise le client pour effectuer le paiement sur le montant facturé dans la propriété payment_method_details.

{
  "charges": {
    "data": [
      {
        "payment_method_details": {
          "bancontact": {
            "bank_code": "VAPE",
            "bank_name": "VAN DE PUT & CO",
            "bics": "VAPEBE22",
            "iban_last4": "7061",
            "preferred_language": "en",
            "verified_name": "Jenny Rosen"
          },
          "type": "bancontact"
        },
        "id": "src_16xhynE8WzK49JbAs9M21jaR",
        "object": "source",

FacultatifGérer les événements post-paiement

Stripe envoie un événement payment_intent.succeeded à l’issue du paiement. Utilisez le Dashboard, un webhook personnalisé ou une solution partenaire pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par e-mail à votre client, enregistrer la vente dans une base de données ou lancer un workflow de livraison.

Plutôt que d’attendre un rappel de votre client, écoutez ces événements. En effet, côté client, l’acheteur pourrait fermer la fenêtre de son navigateur ou quitter l’application avant l’exécution du rappel. Des personnes malveillantes peuvent en profiter pour manipuler la réponse. Si vous configurez votre intégration de manière à écouter les événements asynchrones, cela vous permettra également d’accepter de nouveaux moyens de paiement plus facilement à l’avenir. Apprenez-en davantage sur les différences entre les différents moyens de paiement pris en charge.

Gérer les événements manuellement dans le Dashboard
Utilisez le Dashboard pour afficher vos paiements de test dans le Dashboard, envoyer des reçus par e-mail, gérer les virements ou réessayer les paiements échoués.
Créer un webhook personnalisé
Créez un gestionnaire de webhook personnalisé pour écouter les événements et créer des tunnels de paiement asynchrones personnalisés. Testez et déboguez votre intégration de webhook localement avec la CLI Stripe.
Intégrer une application prédéfinie
Gérez les événements commerciaux courants, tels que l’automatisation ou le marketing et les ventes, en intégrant une application partenaire.

FacultatifGérer la redirection de Bancontact manuellement

Nous recommandons d’utiliser Stripe.js pour gérer les Bancontact redirections et paiements côté client avec confirmBancontactPayment. L’utilisation de Stripe.js permet d’ajouter d’autres moyens de paiement à votre intégration. Cependant, vous pouvez aussi rediriger vos clients manuellement sur votre serveur en procédant comme suit :

Créez et confirmez un PaymentIntent de type bancontact. Vous devez fournir la propriété payment_method_data.billing_details.name, que vous aurez recueillie auprès du client. En spécifiant payment_method_data, vous créez un PaymentMethod qui est utilisé immédiatement avec ce PaymentIntent.
Vous devez également fournir dans le champ return_url l’URL vers laquelle le client est redirigé une fois qu’il a finalisé son paiement. Vous pouvez fournir vos propres paramètres de requête dans cette URL. Ces paramètres seront inclus dans l’URL finale à l’issue du flux de redirection.

Vérifiez que le PaymentIntent a l’état requires_action et que le type de next_action est redirect_to_url.

Response
{
  "status": "requires_action",
  "next_action": {
    "type": "redirect_to_url",
    "redirect_to_url": {
      "url": "https://hooks.stripe.com/...",
      "return_url": "https://example.com/checkout/complete"
    }
  },
  "id": "pi_1G1sgdKi6xqXeNtkldRRE6HT",
  "object": "payment_intent",
  ...
}

Redirigez le client vers l’URL fournie dans la propriété next_action.redirect_to_url.url. Cet exemple de code fourni ici n’a qu’une valeur illustrative : la méthode de redirection peut différer sur votre framework Web.

Le client est redirigé vers l’URL return_url une fois qu’il a effectué le paiement. Les paramètres de la requête d’URL payment_intent et payment_intent_client_secret sont inclus avec tous vos propres paramètres. Stripe recommande de configurer un endpoint de webhook pour configurer l’état d’un paiement par voie programmatique.