Auf das Payment Element mit Payment Intents umstellen

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 SetupIntent zu erstellen.

By default, Stripe enables cards and other prevalent payment methods that can help you reach more customers, but we recommend turning on additional payment methods that are relevant for your business and customers. See Payment method support for product and payment method support, and our pricing page for fees.

Aktualisieren Sie als Nächstes Ihren clientseitigen Code, um beim Erstellen der Elements-Instanz den Parameter mode und currency zu übergeben. Für die Verwendung mit einem SetupIntent setzen Sie den mode auf 'setup' und die currency auf das, was Sie Ihrem/Ihrer Kund/in zukünftig in Rechnung stellen werden.

const stripe =
    Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');
const elements = stripe.elements();

const stripe =
    Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');
const options = {
  mode: 'setup',
  currency: 'usd',
};
const elements = stripe.elements(options);

Sie können jetzt das Card Element und die Elemente der einzelnen Zahlungsmethoden durch das Payment Element ersetzen. Das Payment Element passt basierend auf der Zahlungsmethode und dem Land die zu erfassenden Eingabefelder automatisch an (z. B. Erfassung der vollständigen Rechnungsadresse), sodass Sie keine nutzerdefinierten Eingabefelder pflegen müssen.

Im folgenden Beispiel wird CardElement durch PaymentElement ersetzt:

<form id="payment-form">
  <div id="card-element">
  </div>
  <div id="payment-element">
    <!-- Mount the Payment Element here -->
  </div>
  <button id="submit">Submit</button>
</form>

const cardElement = elements.create("card");
cardElement.mount("#card-element");
const paymentElement = elements.create("payment");
paymentElement.mount("#payment-element");

Wenn in Ihrem Zahlungsablauf bereits immer Details wie der Name oder die E-Mail-Adresse der Kundinnen und Kunden erfasst wird, können Sie verhindern, dass das Payment Element diese Informationen erfasst, indem Sie die Option Felder beim Erstellen des Payment Element übergeben. Wenn Sie die Erfassung eines bestimmten Felds deaktivieren, müssen Sie die gleichen Daten mit stripe.confirmSetup zurückgeben.

Da Sie mit dem Payment Element mehrere Zahlungsmethoden akzeptieren können, empfehlen wir die Verwendung von automatic_payment_methods. Wenn Sie sie aktivieren, wertet Stripe die Währung, Einschränkungen der Zahlungsmethode und andere Parameter aus, um die Liste der für Ihre Kund/innen verfügbaren Zahlungsmethoden zu ermitteln. Wir bevorzugen Zahlungsmethoden, die die Konversionsrate erhöhen und die für die Währung und den Standort der Kund/innen am relevantesten sind.

Fügen Sie das Attribut automatic_payment_methods dem Endpoint auf Ihrem Server hinzu. Dieser erstellt den SetupIntent.

Alle zusätzlichen Elementoptionen, die beim Erstellen der Elements-Gruppe im vorherigen Schritt übergeben wurden, sollten auch beim Erstellen des SetupIntent übergeben werden.

curl https://api.stripe.com/v1/setup_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -H "Stripe-Version: 2025-03-31.basil" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "automatic_payment_methods[enabled]"=true

Statt einzelne Bestätigungsmethoden wie stripe.confirmCardSetup oder stripe.confirmP24Setup zu verwenden, verwenden Sie stripe.confirmSetup, um Zahlungsinformationen zu erfassen und an Stripe zu übermitteln.

Um den SetupIntent zu bestätigen, nehmen Sie die folgenden Änderungen an Ihrem Submit-Handler vor:

• Rufen Sie await elements.submit() auf, um die Formularvalidierung auszulösen und alle Daten zu erfassen, die für Wallets erforderlich sind.
• Optional: Verschieben Sie die SetupIntent-Erstellung an den Setup-Handler. Auf diese Weise erstellen Sie den SetupIntent erst, wenn Nutzer/innen bereit sind, ihre Angaben zur Zahlungsmethode zu übermitteln.
• Übergeben Sie die elements-Instanz, die Sie zum Erstellen des Payment Element verwendet haben, und das clientSecret aus dem SetupIntent als Parameter an stripe.confirmSetup.

Beim Aufruf versucht stripe.confirmSetup, alle erforderlichen Aktionen durchzuführen, wie z. B. die Authentifizierung Ihrer Kundinnen/Kunden durch Anzeigen eines 3DS-Dialogfelds oder die Weiterleitung an eine Bankautorisierungsseite. Nach der Bestätigung werden die Nutzer/innen an die von Ihnen konfigurierte return_url weitergeleitet. Dies entspricht in der Regel einer Seite auf Ihrer Website, die Auskunft zum Status des SetupIntent gibt.

Wenn Sie den gleichen Bezahlvorgang zum Speichern der Kartendaten beibehalten möchten und Weiterleitungen nur für Zahlungsmethoden mit Weiterleitung vornehmen möchten, können Sie die Weiterleitung auf if_required festlegen.

Im folgenden Codebeispiel wird stripe.confirmCardSetup durch stripe.confirmSetup ersetzt:

// Create the SetupIntent and obtain clientSecret
const res = await fetch("/create-intent", {
  method: "POST",
  headers: {"Content-Type": "application/json"},
});

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

const handleSubmit = async (event) => {
  event.preventDefault();

  if (!stripe) {
    // Stripe.js hasn't yet loaded.
    // Make sure to disable form submission until Stripe.js has loaded.
    return;
  }

  setLoading(true);

  const {error} = await stripe.confirmCardSetup(clientSecret, {
    payment_method: {
      card: elements.getElement(CardElement)
    }
  });

  if (error) {
    handleError(error);
  }
};

const handleSubmit = async (event) => {
  event.preventDefault();

  if (!stripe) {
    // Stripe.js hasn't yet loaded.
    // Make sure to disable form submission until Stripe.js has loaded.
    return;
  }

  setLoading(true);

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

  // Create the SetupIntent and obtain clientSecret
  const res = await fetch("/create-intent", {
    method: "POST",
    headers: {"Content-Type": "application/json"},
  });

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

  // Use the clientSecret and Elements instance to confirm the setup
  const {error} = await stripe.confirmSetup({
    elements,
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
    // Uncomment below if you only want redirect for redirect-based payments
    // redirect: "if_required",
  });

  if (error) {
    handleError(error);
  }
};

Verwenden Sie Test-Zahlungsdaten und die Test-Weiterleitungsseite um Ihre Integration zu überprüfen. Klicken Sie auf die nachfolgenden Registerkarten, um Details zu jeder Zahlungsmethode anzuzeigen.

Testen Sie das Belasten mit einer gespeicherten SEPA-Lastschrift

Wenn der SetupIntent für die Nutzung mit iDEAL, Bancontact oder Sofort bestätigt ist, wird eine wiederverwendbare SEPA-Lastschrift -PaymentMethod erstellt. SEPA-Lastschrift ist eine Zahlungsmethode mit verzögerter Benachrichtigung, die in den Übergangsstatus processing wechselt, bevor sie einige Tage später den Status succeeded oder requires_payment_method annimmt.