Zahlung mit Kriya annehmenPrivate Vorschau

So richten Sie Ihre Integration mit Kriya ein.

Web

Verwenden Sie das Payment Element, um ein nutzerdefiniertes Stripe-Zahlungsformular in Ihre Website oder Anwendung einzubetten und Kundinnen und Kunden Zahlungsmethoden anzubieten. Erweiterte Konfigurationen und Anpassungen finden Sie im Integrationsleitfaden für die Zahlungsannahme

Stripe einrichten
Serverseitig

Erstellen Sie ein Stripe-Konto, um zu beginnen.

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

Zahlungsdaten erfassen
Clientseitig

Sie können nun mit dem Payment Element Zahlungsdetails auf dem Client erfassen. Das Payment Element ist eine vorgefertigte UI-Komponente, die die Erfassung von Zahlungsdaten für eine Vielzahl von Zahlungsmethoden vereinfacht.

Das Payment Element enthält einen iFrame, der Zahlungsinformationen über eine sichere HTTPS-Verbindung an Stripe sendet. Vermeiden Sie es, das Payment Element in einem anderen iFrame zu platzieren, da einige Zahlungsmethoden die Weiterleitung an eine andere Seite zur Zahlungsbestätigung voraussetzen.

Die Adresse der Bezahlseite muss mit https:// und nicht http:// beginnen, damit Ihre Integration funktioniert. Sie können Ihre Integration ohne HTTPS testen. Denken Sie jedoch daran, es zu aktivieren, wenn Sie bereit sind, Live-Zahlungen zu akzeptieren.

Stripe.js einrichten

Das Payment Element ist ein Feature von Stripe.js und steht damit automatisch zur Verfügung. Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlseite ein, indem Sie es in den head Ihrer HTML-Datei einbinden. Laden Sie Stripe.js immer direkt von js.stripe.com, um die PCI-Konformität zu gewährleisten. Fügen Sie das Skript nicht in ein Paket ein und hosten Sie selbst keine Kopie davon.

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

Erstellen Sie auf Ihrer Zahlungsseite eine Instanz von Stripe mit dem folgenden JavaScript:

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

Payment Element zu Ihrer Checkout-Seite hinzufügen

Das Payment Element benötigt einen Platz auf Ihrer Checkout-Seite. Erstellen Sie einen leeren DOM-Knoten (Container) mit einer eindeutigen ID in Ihrem Zahlungsformular:

checkout.html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>

Nachdem das obige Formular geladen wurde, erstellen Sie eine Elements-Instanz mit einem Wert für mode, amount und currency. Diese Werte bestimmen, welche Zahlungsmethoden Ihren Kundinnen/Kunden angezeigt werden. Um eine neue Zahlungsmethode in Ihrem Fomular anzugeben, müssen Sie sie unbedingt im Dashboard aktivieren.

checkout.js
const options = {
  mode: 'payment',
  amount: 1000,
  currency: 'gbp',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form
const elements = stripe.elements(options);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

Sie können das Payment Element an das Design Ihrer Website anpassen, indem Sie beim Erstellen des Elements-Anbieters das Erscheinungs-Objekt an options übergeben.

Adressen einholen

Standardmäßig erfasst das Payment Element nur die erforderlichen Angaben zur Rechnungsadresse. Verwenden Sie das Address Element, um die vollständige Rechnungsadresse (z. B. zur Berechnung der Steuer für digitale Waren und Dienstleistungen) oder die Versandadresse einer Kundin/eines Kunden zu erfassen.

PaymentIntent erstellen
Serverseitig

Benutzerdefinierte Geschäftslogik unmittelbar vor der Zahlungsbestätigung ausführen

Navigieren Sie zu Schritt 5 im Leitfaden zum Abschließen von Zahlungen, um Ihre nutzerdefinierte Geschäftslogik unmittelbar vor der Zahlungsbestätigung auszuführen. Führen Sie andernfalls die folgenden Schritte für eine einfachere Integration aus, die stripe.confirmPayment auf dem Client verwendet, um die Zahlung zu bestätigen und alle nächsten Aktionen abzuwickeln.

Wenn der Kunde/die Kundin Ihr Zahlungsformular absendet, verwenden Sie einen PaymentIntent, um den Bestätigungs- und Zahlungsvorgang zu vereinfachen. Erstellen Sie einen PaymentIntent auf Ihrem Server mit einem amount und einer currency. Um zu verhindern, dass böswillige Kundinnen/Kunden ihre eigenen Preise wählen, entscheiden Sie, wie viel Sie berechnen möchten, immer auf der Serverseite (einer vertrauenswürdigen Umgebung) und nicht auf dem Client.

Zu einem PaymentIntent gehört ein Client-Geheimnis. Geben Sie diesen Wert an Ihren Client zurück, damit Stripe.js den Zahlungsvorgang sicher abschließen kann.

Zahlung an Stripe senden
Clientseitig

Verwenden Sie stripe.confirmPayment, um die Zahlung mit den Angaben aus dem Payment Element abzuschließen.

Geben Sie eine return_url für diese Funktion an, um anzugeben, wohin Stripe den/die Nutzer/in nach Abschluss der Zahlung weiterleitet. Ihre Nutzer/innen werden möglicherweise zunächst an eine Zwischenwebsite, z. B. eine Bankautorisierungsseite, weitergeleitet, bevor sie zur return_url weitergeleitet werden. Bei Kartenzahlungen erfolgt die Weiterleitung zur return_url sofort, wenn eine Zahlung erfolgreich ist.

Wenn Sie bei Kartenzahlungen nach Abschluss der Zahlung keine Weiterleitung wünschen, können Sie redirect auf if_required festlegen. Dadurch werden nur Kundinnen/Kunden weitergeleitet, die mit auf Weiterleitung basierenden Zahlungsmethoden bezahlen.

checkout.js
const form = document.getElementById('payment-form');
const submitBtn = document.getElementById('submit');

const handleError = (error) => {
  const messageContainer = document.querySelector('#error-message');
  messageContainer.textContent = error.message;
  submitBtn.disabled = false;
}

form.addEventListener('submit', async (event) => {
  // We don't want to let default form submission happen here,
  // which would refresh the page.
  event.preventDefault();

  // Prevent multiple form submissions
  if (submitBtn.disabled) {
    return;
  }

  // Disable form submission while loading
  submitBtn.disabled = true;

  // Trigger form validation and wallet collection
  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Create the PaymentIntent and obtain clientSecret
  const res = await fetch("/create-intent", {
    method: "POST",
  });

  const {client_secret: clientSecret} = await res.json();

  // Confirm the PaymentIntent using the details collected by the Payment Element
  const {error} = await stripe.confirmPayment({
    elements,
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point is only reached if there's an immediate error when
    // confirming the payment. Show the error to your customer (for example, payment details incomplete)
    handleError(error);
  } else {
    // Your customer is redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer is redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

OptionalEreignisse nach 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.

OptionalSeparate Autorisierung und Erfassung

Sie können Autorisierung und Erfassung trennen, um eine Zahlung sofort zu erstellen, Gelder jedoch später zu erfassen. Stripe storniert den PaymentIntent und sendet das Ereignis payment_intent.canceled, wenn die Zahlung nicht während des 7-tägigen Zeitfensters erfasst wird.

Wenn Sie wissen, dass Sie die Zahlung nicht erfassen können, empfehlen wir, den PaymentIntent zu stornieren, anstatt zu warten, bis das Zeitfenster von 7 Tagen abgelaufen ist.

Stripe anweisen, nur die Autorisierung durchzuführen

Um anzugeben, dass Sie Autorisierung und Erfassung trennen möchten, legen Sie capture_method beim Erstellen des PaymentIntent auf manual fest. Dieser Parameter weist Stripe an, nur den Betrag auf dem Kriya-Konto der Kundin/des Kunden zu autorisieren.

Die Gelder erfassen

Nach erfolgreicher Autorisierung wechselt der Status des PaymentIntent zu requires_capture. Um die autorisierten Gelder zu erfassen, führen Sie eine Erfassungsanfrage für den PaymentIntent durch.

Stripe erfasst standardmäßig den autorisierten Gesamtbetrag. Sie können auch angeben, dass amount_to_capture kleiner oder gleich der Summe sein soll.

Optional Autorisierung stornieren

Wenn Sie eine Autorisierung stornieren müssen, können Sie den PaymentIntent stornieren.

Integration testen

Um Ihre Integration zu testen, wählen Sie die Zahlungsmethode aus und tippen Sie auf Bezahlen. In einer Sandbox werden Sie auf eine Test-Zahlungsseite weitergeleitet, auf der Sie die Zahlung genehmigen oder ablehnen können.

Wenn Sie im Live-Modus auf Bezahlen tippen, werden Sie zur Website von Kriya weitergeleitet. Mit Kriya haben Sie keine Möglichkeit, die Zahlung zu genehmigen oder abzulehnen.

Fehlercodes

In der folgenden Tabelle finden Sie häufige Fehlercodes und die empfohlenen Maßnahmen:

Fehlercode	Empfohlene Maßnahme
`payment_intent_invalid_currency`	Geben Sie eine unterstützte Währung ein.
`missing_required_parameter`	In der Fehlermeldung erhalten Sie weitere Informationen zum erforderlichen Parameter.
`payment_intent_payment_attempt_failed`	Dieser Code kann im Feld last_payment_error.code eines PaymentIntent angezeigt werden. Eine genauere Fehlerursache und Vorschläge zur Fehlerbehebung finden Sie in der Fehlermeldung.
`payment_intent_authentication_failure`	Dieser Code kann im Feld last_payment_error.code eines PaymentIntent erscheinen. Prüfen Sie die Fehlermeldung für einen detaillierten Grund des Fehlers und Hinweise zur Fehlerbehandlung. Dieser Fehler tritt auf, wenn Sie während des Testens Ihrer Integration manuell einen Fehler auslösen.
`payment_intent_redirect_confirmation_without_return_url`	Geben Sie eine `return_url` an, wenn Sie einen PaymentIntent bestätigen.