Weiter zum Inhalt
Konto erstellen
 oder
anmelden
Das Logo der Stripe-Dokumentation
/
Konto erstellen
Anmelden
ÜbersichtAktualisieren Sie Ihre Integration
Online-Zahlungen
ÜbersichtIhren Use case findenZahlungen verwalten
Zahlungsmethoden
Zahlungsschnittstellen
Zahlungsszenarien
Präsenzzahlungen
Mehr als Zahlungen

Zahlung mit Kriya annehmenPrivate Vorschau

So richten Sie Ihre Integration mit Kriya ein.

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:

Command Line
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# Available as a gem
sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

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.

main.rb
Ruby
Python
PHP
Node.js
Java
Go
.NET
No results
require 'stripe'
Stripe.api_key = 
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'


post '/create-intent' do
  intent = Stripe::PaymentIntent.create({
    # To allow saving and retrieving payment methods, provide the Customer ID.
    customer: customer.id,
    amount:  1000,
    currency: 'gbp',
  })
  {client_secret: intent.client_secret}.to_json
end

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`.
  }
});

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:

FehlercodeEmpfohlene Maßnahme
payment_intent_invalid_currencyGeben Sie eine unterstützte Währung ein.
missing_required_parameterIn der Fehlermeldung erhalten Sie weitere Informationen zum erforderlichen Parameter.
payment_intent_payment_attempt_failedDieser 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_failureDieser 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_urlGeben Sie eine return_url an, wenn Sie einen PaymentIntent bestätigen.
War diese Seite hilfreich?
JaNein