Zahlungsdetails einziehen, bevor Sie einen Intent erstellen

Erstellen Sie eine Integration, in der Sie das Payment Element rendern können, bevor Sie eine PaymentIntent oder SetupIntent erstellen.

Bei Abonnements handelt es sich um ein Preismodell, bei dem Nutzer/innen wiederkehrende Zahlungen für den Zugriff auf ein Produkt tätigen. In diesem Integrationsleitfaden erfahren Sie, wie Sie einen benutzerdefinierten Zahlungsablauf erstellen, mit dem Sie das Payment Element rendern, ein Abonnement erstellen und die Zahlung im Browser der Kundin/des Kunden bestätigen können.

Stripe einrichten
Serverseitig

Erstellen Sie zunächst ein Stripe-Konto oder melden Sie sich an.

Verwenden Sie unsere offiziellen Bibliotheken, um von Ihrer Anwendung aus auf die Stripe API zuzugreifen:

Zahlungsmethoden aktivieren

Vorsicht

Dieser Integrationspfad unterstützt weder BLIK noch vorab autorisierte Lastschriften, die das Automated Clearing Settlement System (ACSS) verwenden.

Zeigen Sie Ihre Einstellungen für Zahlungsmethoden an und aktivieren Sie die Zahlungsmethoden, die Sie unterstützen möchten. Sie müssen mindestens eine Zahlungsmethode aktiviert haben, um einen PaymentIntent zu erstellen.

Standardmäßig aktiviert Stripe Karten und andere gängige Zahlungsmethoden, mit denen Sie mehr Kundinnen und Kunden erreichen können. Wir empfehlen jedoch, zusätzliche Zahlungsmethoden zu aktivieren, die für Ihr Unternehmen und Ihre Kundschaft relevant sind. Weitere Informationen zur Unterstützung von Produkten und Zahlungsmethoden finden Sie auf der Seite Unterstützte Zahlungsmethoden und der Preisseite für Gebühren.

Konfigurieren Sie für Abonnements Ihre Rechnungseinstellungen und unterstützten Zahlungsmethoden. Um Unstimmigkeiten und Fehler zu vermeiden, müssen Ihre Rechnungseinstellungen mit Ihren Payment Element-Einstellungen übereinstimmen.

Zahlungsdetails erfassen
Client-seitig

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 HTTPS-Verbindung sicher 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 verlangen.

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

Einrichten von Stripe.js

Das Payment Element ist automatisch als Funktion von Stripe.js verfügbar. Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlseite ein, indem Sie es im head Ihrer HTML-Datei einfügen. 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/v3/"></script>
</head>

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

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

Fügen Sie das Payment Element zu Ihrer Checkout-Seite hinzu

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

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>

Wenn das obige Formular geladen wurde, erstellen Sie eine Elements-Instanz mit dem Modus, dem Betrag und der Währung. Diese Werte bestimmen, welche Zahlungsmethoden Ihren Kund/innen angezeigt werden.

Erstellen Sie dann eine Instanz des Payment Element und verbinden Sie sie mit dem Container DOM-Knoten.

Notiz

Der an das Payment Element übergebene amount sollte widerspiegeln, welcher Betrag dem Konto des Kunden/der Kundin sofort belastet wird. Dies kann entweder die erste Rate des Abonnements oder 0 sein, wenn das Abonnement einen Testzeitraum hat.

checkout.js
const options = {
  mode: 'subscription',
  amount: 1099,
  currency: 'usd',
  // 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');

Das Payment Element rendert ein dynamisches Formular, mit dem Ihr/e Kund/in eine Zahlungsmethode auswählen kann. Das Formular erfasst automatisch alle notwendigen Zahlungsdetails für die vom Kunden/von der Kundin ausgewählte Zahlungsmethode.

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.

OptionalAnpassen des Layouts
Client-seitig

OptionalPassen Sie das Erscheinungsbild an
Client-seitig

OptionalZahlungsmethoden von Kundinnen und Kunden speichern und abrufen

OptionalOptionen für zusätzliche Elemente
Client-seitig

Preismodell erstellen
Stripe-CLI oder Dashboard

Erstellen Sie Ihre Produkte und die zugehörigen Preise im Dashboard oder mit der Stripe-CLI.

In diesem Beispiel wird ein Festpreisdienst mit zwei verschiedenen Service-Level-Optionen verwendet: Basic und Premium. Für jede Service-Level-Option müssen Sie ein Produkt und einen wiederkehrenden Preis erstellen. (Wenn Sie eine einmalige Gebühr, z. B. für die Einrichtung, hinzufügen möchten, erstellen Sie ein drittes Produkt mit einem einmaligen Preis. Der Einfachheit halber verzichtet dieses Beispiel auf eine einmalige Gebühr).

In diesem Beispiel wird jedes Produkt in monatlichen Intervallen abgerechnet. Der Preis für das Basic-Produkt beträgt 5 USD. Der Preis für das Premium-Produkt beträgt 15 USD.

Gehen Sie zur Seite Produkt hinzufügen und erstellen Sie zwei Produkte. Fügen Sie für jedes Produkt einen Preis hinzu, jeweils mit einem monatlich wiederkehrenden Abrechnungszeitraum:

Premium-Produkt: Premium-Dienstleistung mit zusätzlichen Funktionen
- Preis: Standardpreis | 15 USD
Basic-Produkt: Basic-Dienstleistung mit minimalem Funktionsumfang
- Preis: Standardpreis | 5 USD

Zeichnen Sie nach Erstellung der Preise die Preis-IDs auf, sodass diese in anderen Schritten verwendet werden können. Preis-IDs sehen in etwa wie folgt aus: price_G0FvDp6vZvdwRZ.

Wenn Sie bereit sind, verwenden Sie die Schaltfläche In Live-Modus kopieren oben rechts auf der Seite, um Ihr Produkt aus der Sandbox in den Live-Modus zu kopieren.

Kund/in erstellen
Client und Server

Stripe benötigt für jedes Abonnement einen Kunden. Erfassen Sie im Frontend Ihrer Anwendung alle erforderlichen Kundeninformationen und übergeben Sie sie an das Backend.

Wenn Sie Adressdaten erfassen müssen, können Sie mit dem Address Element eine Versand- oder Rechnungsadresse für Ihre Kundinnen/Kunden erfassen. Weitere Informationen finden Sie unter Address Element.

register.html
<form id="signup-form">
  <label>
    Email
    <input id="email" type="text" placeholder="Email address" value="test@example.com" required />
  </label>

  <button type="submit">
    Register
  </button>
</form>

register.js
const emailInput = document.querySelector('#email');

fetch('/create-customer', {
  method: 'post',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    email: emailInput.value,
  }),
}).then(r => r.json());

Erstellen Sie das Stripe Customer-Objekt auf dem Server.

Abonnement erstellen
Serverseitig

Wenn der Kunde/die Kundin Ihr Zahlungsformular absendet, verwenden Sie ein Abonnement, um den Bestätigungs- und Zahlungsvorgang zu vereinfachen. Um ein Abonnement zu erstellen, benötigen Sie eine/n Kundin/Kunden und einen Preis.

Notiz

Wenn Sie einen Preis mit mehreren Währungen verwenden, verwenden Sie den Parameter currency, um das Abonnement anzuweisen, welche Währung des Preises verwendet werden soll. (Wenn Sie den Parameter currency weglassen, wird für das Abonnement die Standardwährung des Preises verwendet.)

Zu einem Abonnement gehört ein Client-Geheimnis. Geben Sie diesen Wert an Ihren Client zurück, damit Stripe.js den Zahlungsvorgang sicher abschließen kann. Verwenden Sie für Abonnements, die keine Vorauszahlung erfordern (z. B. Abonnements mit einem kostenlosen Testzeitraum), das Client-Geheimnis aus dem pending_setup_intent.

Abonnement bestätigen
Client-seitig

Verwenden Sie stripe.confirmPayment oder stripe.confirmSetup, um das Abonnement mit den Angaben aus dem Payment Element zu bestätigen. Geben Sie an, wohin Stripe den Kunden/die Kundin nach der Bestätigung weiterleiten soll, indem Sie eine return_url für die Bestätigungsfunktion bereitstellen. Bei einigen Zahlungsmethoden werden die Kundinnen/Kunden an eine Zwischenseite, wie z. B. eine Bankautorisierungsseite, weitergeleitet, bevor sie zur return_url weitergeleitet werden. Sie können redirect auch auf if_required festlegen, um nur Kundinnen/Kunden weiterzuleiten, die mit auf Weiterleitung basierten 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 subscription
  const res = await fetch('/create-subscription', {
    method: "POST",
  });
  const {type, clientSecret} = await res.json();
  const confirmIntent = type === "setup" ? stripe.confirmSetup : stripe.confirmPayment;

  // Confirm the Intent using the details collected by the Payment Element
  const {error} = await confirmIntent({
    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 Intent.
    // 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`.
  }
});

Abonnement verwalten

Gehen Sie wie folgt vor, um die Integration abzuschließen:

auf Webhooks achten
Bereitstellung des Zugriffs auf Ihren Dienst
Ermöglichen Sie Kund/innen, ihre Abonnements zu kündigen

Weitere Informationen finden Sie unter Abonnement-Integration erstellen.

Siehe auch

Integration entwerfen

Zahlungsdetails einziehen, bevor Sie einen Intent erstellen

Erstellen Sie eine Integration, in der Sie das Payment Element rendern können, bevor Sie eine PaymentIntent oder SetupIntent erstellen.

Stripe einrichtenServerseitig

Zahlungsmethoden aktivieren

Vorsicht

Zahlungsdetails erfassenClient-seitig

Einrichten von Stripe.js

Fügen Sie das Payment Element zu Ihrer Checkout-Seite hinzu

Notiz

Adressen einholen

OptionalAnpassen des LayoutsClient-seitig

OptionalPassen Sie das Erscheinungsbild anClient-seitig

OptionalZahlungsmethoden von Kundinnen und Kunden speichern und abrufen

OptionalOptionen für zusätzliche ElementeClient-seitig

Preismodell erstellenStripe-CLI oder Dashboard

Kund/in erstellenClient und Server

Abonnement erstellenServerseitig

Notiz

Abonnement bestätigenClient-seitig

Abonnement verwalten

Siehe auch

Stripe einrichten
Serverseitig

Zahlungsdetails erfassen
Client-seitig

OptionalAnpassen des Layouts
Client-seitig

OptionalPassen Sie das Erscheinungsbild an
Client-seitig

OptionalOptionen für zusätzliche Elemente
Client-seitig

Preismodell erstellen
Stripe-CLI oder Dashboard

Kund/in erstellen
Client und Server

Abonnement erstellen
Serverseitig

Abonnement bestätigen
Client-seitig