Bancontact-Zahlungen annehmen

So akzeptieren Sie Zahlungen per Bancontact, einer gängigen Zahlungsmethode in Belgien.

Checkout

Direkt-API

Mobilgeräte

Bei Bancontact handelt es sich um eine Zahlungsmethode für die einmalige Nutzung, bei der Kundinnen/Kunden ihre Zahlungen authentifizieren müssen. Bei Zahlungen mit Bancontact werden Kundinnen/Kunden zur Authentifizierung der Zahlung von Ihrer App weitergeleitet und dann wieder an Ihre App zurückgeleitet, wo Sie eine sofortige Benachrichtigung über den Erfolg oder das Fehlschlagen der Zahlung erhalten.

Note

Ihre Nutzung von Bancontact unterliegt den Bancontact-Nutzungsbedingungen.

Stripe einrichten
Serverseitig

Zunächst benötigen Sie ein Stripe-Konto. Registrieren Sie sich jetzt.

Nutzen Sie unsere offiziellen Bibliotheken für den Zugriff auf die Stripe-API über Ihre Anwendung:

Erstellen Sie ein PaymentIntent
Serverseitig

Ein PaymentIntent ist ein Objekt, das Ihre Absicht, eine Kundenzahlung einzuziehen, darstellt und den gesamten Zahlungsvorgang dokumentiert.

Erstellen Sie einen PaymentIntent auf Ihrem Server und geben Sie den einzuziehenden Betrag und die Währung eur an (Bancontact unterstützt keine anderen Währungen). Wenn Sie über eine bestehende Payment Intents-Integration verfügen, fügen Sie bancontact der Liste der Arten von Zahlungsmethoden hinzu.

Die Standardsprache für die Bancontact-Autorisierungsseite ist Englisch (en). Sie können dies an die bevorzugte Sprache Ihrer Kund/innen anpassen, indem Sie preferred_language auf fr, nl oder de festlegen.

Client-Geheimnis abrufen

Im PaymentIntent ist ein Client-Geheimnis enthalten, das auf dem Client verwendet wird, um Zahlungen sicher abzuschließen. Es gibt verschiedene Verfahren zum Übergeben des Client-Geheimnisses an den Client.

Rufen Sie das Client-Geheimnis von einem Endpoint auf Ihrem Server ab, indem Sie die Browser-Funktion fetch verwenden. Diese Vorgehensweise funktioniert am besten, wenn es sich bei Ihrer Client-Seite um eine einseitige Anwendung handelt, insbesondere wenn sie mit einem modernen Frontend-Framework wie React erstellt wurde. Erstellen Sie den Server-Endpoint, der das Client-Geheimnis bereitstellt:

Und dann rufen Sie das Client-Geheimnis mit JavaScript auf der Client-Seite ab:

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

Angaben zur Zahlungsmethode erfassen
Clientseitig

Erstellen Sie ein Zahlungsformular auf Ihrem Client, um die erforderlichen Rechnungsdaten von den Kund/innen zu erfassen:

Feld	Wert
`name`	Der vollständige Name (Vor- und Nachname) der Kundin/des Kunden.

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>

Zahlung an Stripe senden
Clientseitig

Erstellen Sie eine Zahlung auf der Client-Seite mit dem Client-Geheimnis des PaymentIntent. Das Client-Geheimnis unterscheidet sich von Ihren API-Schlüsseln, die Stripe-API-Anfragen authentifizieren. Achten Sie auf einen vorsichtigen Umgang mit dem Client-Geheimnis, da mit ihm die Zahlung abgeschlossen werden kann. Es darf nicht protokolliert, in URLs eingebettet oder Personen außer der Kunden/dem Kunden selbst zugänglich gemacht werden.

Wenn Kundinnen/Kunden über das „Click to Pay“-Verfahren mit Bancontact bezahlen, verwenden Sie Stripe.js, um die Zahlungen an Stripe zu übermitteln. Stripe.js ist die grundlegende JavaScript-Bibliothek für die Erstellung von Zahlungsabläufen. Sie verarbeitet automatisch komplexe Szenarien wie die nachfolgend beschriebene Weiterleitung und ermöglicht die Erweiterung Ihrer Integration durch zusätzliche Zahlungsmethoden. Binden Sie das Stripe.js-Skript in Ihre Bezahlseite ein, indem Sie es im head Ihrer HTML-Datei einfügen.

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

Erstellen Sie auf Ihrer Checkout-Seite mit dem folgenden JavaScript eine Instanz von Stripe.js.

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'
);

Rufen Sie stripe.confirmBancontactPayment auf, um Ihre Kundinnen/Kunden zur Durchführung der Zahlung an die Website oder App von Bancontact weiterzuleiten. Fügen Sie eine return_url ein, um Ihre Kundinnen/Kunden nach Abschluss der Zahlung weiterzuleiten. Sie müssen auch den vollständigen Namen der Kundin/des Kunden in billing_details angeben.

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

Weiterleitung verarbeiten

Die folgenden URL-Abfrageparameter werden angegeben, wenn Stripe Kund/innen an die return_url weiterleitet.

Parameter	Beschreibung
`payment_intent`	Die eindeutige ID für `PaymentIntent`.
`payment_intent_client_secret`	Das Client-Geheimnis des `PaymentIntent`-Objekts.

Bei Angabe der return_url können Sie auch Ihre eigenen Abfrageparameter hinzufügen. Sie bleiben während des gesamten Weiterleitungsvorgangs erhalten. Die return_url sollte einer Seite auf Ihrer Website entsprechen, die den Status der Zahlung angibt. Sie sollten den Status des PaymentIntent beim Rendern der Rückgabeseite überprüfen. Hierfür können Sie die Funktion retrievePaymentIntent von Stripe.js verwenden und im payment_intent_client_secret übergeben.

(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
  }
})();

Bankkontodaten

Details zum Bankkonto, mit dem die Kundin/der Kunde die Zahlung durchgeführt hat, finden Sie in der zugehörigen Zahlung unter der Eigenschaft 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",

OptionalEreignisse nach der Zahlung verarbeiten

Stripe übermittelt ein payment_intent.succeeded-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie im Dashboard einen Webhook oder eine Partnerlösung, um diese Ereignisse zu empfangen und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kund/innen, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs).

Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnte der Kunde/die Kundin das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist und böswillige Clients könnten die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass asynchrone Ereignisse überwacht werden, hilft Ihnen dies auch dabei, in Zukunft mehr Zahlungsmethoden zu akzeptieren. Hier erhalten Sie Informationen zu den Unterschieden zwischen allen unterstützten Zahlungsmethoden.

Manuelles Bearbeiten von Ereignissen im Dashboard
Verwenden Sie das Dashboard, um Ihre Testzahlungen im Dashboard anzuzeigen, E-Mail-Belege zu senden, Auszahlungen zu bearbeiten oder fehlgeschlagene Zahlungen erneut zu versuchen.
Erstellen eines benutzerdefinierten Webhooks
Erstellen Sie einen benutzerdefinierten Webhook-Handler, um auf Ereignisse zu hören und eigene asynchrone Zahlungsabläufe zu implementieren. Testen und debuggen Sie Ihre Webhook-Integration lokal mit der Stripe CLI.
Integrieren einer vorgefertigten App
Bearbeiten Sie häufige Unternehmensereignisse, wie z. B.Automatisierung oderMarketing und Vertrieb, indem Sie eine Partneranwendung integrieren.

OptionalBancontact-Weiterleitung manuell verarbeiten

Wir empfehlen, die Verarbeitung von Bancontact-Weiterleitungen und -Zahlungen auf Client-Seite mit confirmBancontactPayment Stripe.js zu überlassen. Wenn Sie Stripe.js verwenden, können Sie Ihre Integration um weitere Zahlungsmethoden erweitern. Sie können Ihre Kundinnen/Kunden jedoch mit den folgenden Schritten auch manuell an Ihren Server weiterleiten:

Erstellen und bestätigen Sie eine PaymentIntent vom Typ bancontact. Sie müssen die Eigenschaft payment_method_data.billing_details.name angeben, die Sie von Ihren Kund/innen erfassen sollten. Beachten Sie, dass durch Angeben von payment_method_data eine PaymentMethod erstellt und sofort für diesen PaymentIntent verwendet wird.
Sie müssen außerdem im Feld return_url die URL angeben, an die Ihre Kund/innen weitergeleitet werden, nachdem sie ihre Zahlung abgeschlossen haben. Sie können optional in dieser URL Ihre eigenen Abfrageparameter übergeben. Diese Parameter sind bei Abschluss des Weiterleitungsablaufs in der endgültigen URL enthalten.

Überprüfen Sie, ob der PaymentIntent den Status requires_action und ob next_action den Typ redirect_to_url hat.

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

Leiten Sie die Kundinnen/Kunden an die in der Eigenschaft next_action.redirect_to_url.url angegebene URL weiter. Dieses Codebeispiel ist nur eine Annäherung und kann sich vom Weiterleitungsverfahren in Ihrem Web-Framework unterscheiden.

Bei Abschluss des Bezahlvorgangs werden Ihre Kundinnen/Kunden zu Ihrer return_url weitergeleitet. Die URL-Abfrageparameter payment_intent und payment_intent_client_secret sind zusammen mit Ihren eigenen Abfrageparametern enthalten. Stripe empfiehlt, einen Webhook-Endpoint einzurichten, um den Zahlungsstatus programmgesteuert zu bestätigen.