Umstieg auf Payment Element

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.

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 mode, currency und amount zu übergeben. Für die Verwendung mit einem PaymentIntent setzen Sie den mode auf 'payment' und die currency und den amount auf den Betrag, den Sie Ihrem/Ihrer Kund/in in Rechnung stellen möchten.

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

const stripe =
    Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');
const options = {
  mode: 'payment',
  currency: 'usd',
  amount: 1099,
};
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.confirmPayment zurückgeben.

Mit dem Payment Element können Sie mehrere Zahlungsmethoden annehmen. Sie können Zahlungsmethoden über das Dashboard verwalten. Stripe handhabt die Rückgabe geeigneter Zahlungsmethoden basierend auf Faktoren wie Betrag, Währung und Zahlungsablauf. Wir priorisieren Zahlungsmethoden, die die Konversion erhöhen und für die Währung und den Standort des Kunden/der Kundin am relevantesten sind.

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

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_4eC39HqLyjWDarjtT1zdp7dc
: \
  -H "Stripe-Version: 2024-11-20.acacia" \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "payment_method_types[]"=card \
  -d "automatic_payment_methods[enabled]"=true \

Statt einzelne Bestätigungsmethoden wie stripe.confirmCardPayment oder stripe.confirmP24Payment zu verwenden, verwenden Sie stripe.confirmPayment, um Zahlungsinformationen zu erfassen und an Stripe zu übermitteln.

Um den PaymentIntent 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 Erstellung des PaymentIntent innerhalb des Submit-Handlers. Auf diese Weise erstellen Sie den PaymentIntent nur, wenn Sie den endgültigen Betrag kennen.
• Übergeben Sie die elements-Instanz, die Sie zum Erstellen des Payment Element verwendet haben, und das clientSecret aus dem PaymentIntent als Parameter an stripe.confirmPayment.

Beim Aufruf versucht stripe.confirmPayment, 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 Zahlungsstatus gibt.

Wenn Sie den gleichen Bezahlvorgang für Kartenzahlungen 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.confirmCardPayment durch stripe.confirmPayment ersetzt:

// Create the PaymentIntent 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.confirmCardPayment(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 PaymentIntent 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.confirmPayment({
    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);
  }
};

Stripe sendet ein payment_intent.succeeded-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie Webhook-Tool im Dashboard oder folgen Sie der Webhook-Anleitung, um diese Ereignisse zu empfangen und führen Sie Aktionen aus, wie beispielsweise das Senden einer Bestellbestätigung per E-Mail, das Protokollieren des Verkaufs in der Datenbank oder das Starten eines Versand-Workflows.

Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnten die Kund/innen das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist. Bösartige Clients könnten dann die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass sie asynchrone Ereignisse überwacht, können Sie verschiedene Arten von Zahlungsmethoden mit einer einzelnen Integration akzeptieren.

Neben der Abwicklung des payment_intent.succeeded-Ereignisses empfehlen wir die Abwicklung von diesen weiteren Ereignissen, wenn Sie Zahlungen mit dem Payment Element erfassen:

Hier finden Sie weitere Informationen zum Testen Ihrer Integration.