Zahlungen für bestehende Kundinnen/Kunden

Erfahren Sie, wie Sie eine bestehende Zahlungsmethode belasten, während ein Kunde/eine Kundin On-Session ist.

Das Payment Element ermöglicht es Käuferinnen und Käufern, ihre Zahlungsdetails einzugeben. Wenn der/die Käufer/in ein/e bestehende/r Kunde/Kundin ist, können Sie eine Kundensitzung im Payment Element konfigurieren, um die vorhandenen Zahlungsmethoden des Kunden/der Kundin anzuzeigen.

Payment Element mit einer gespeicherten Karte

Das Payment Element kann nur die folgenden gespeicherten Arten von Zahlungsmethoden anzeigen:

card
us_bank_account
link
sepa_debit
ideal
sofort
bancontact

PaymentIntent und CustomerSession erstellen
Serverseitig

Erstellen Sie einen PaymentIntent und eine CustomerSession. Achten Sie darauf, die bestehende Kunden-ID zu übergeben und die Funktion payment_method_redisplay zu aktivieren.

OptionalWeitere gespeicherte Zahlungsmethoden anzeigen
Serverseitig

Das Payment Element anzeigen
Clientseitig

Einrichten von Stripe.js

Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlseite ein, indem sie es zum head Ihrer HTML-Datei hinzufü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 es nicht selbst.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/v3/"></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 Zahlungsseite hinzufügen

Das Payment Element benötigt einen festen Platz auf Ihrer Zahlungsseite. 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>

Rufen Sie die beiden clients_secret aus dem vorherigen Schritt ab, um das Element zu initialisieren. Erstellen und verbinden Sie dann das Payment Element.

checkout.js
// Fetch the two `client_secret`
const response = await fetch('/create-intent-and-customer-session', { method: "POST" });
const { client_secret, customer_session_client_secret } = await response.json();

// Initialize Elements
const elements = stripe.elements({
  clientSecret: client_secret,
  customerSessionClientSecret: customer_session_client_secret,
});

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

Zahlung an Stripe senden
Clientseitig

Verwenden Sie stripe.confirmPayment, um die Zahlung mit Details aus dem Payment Element vorzunehmen. Geben Sie für diese Funktion eine return_url an, um anzugeben, wohin Stripe die Nutzer/innen nach Durchführung der Zahlung weiterleiten soll. Ihre Nutzer/innen werden möglicherweise zunächst an eine zwischengeschaltete Seite weitergeleitet, wie z. B. eine Bankautorisierungsseite, bevor sie zur return_url weitergeleitet werden. Kartenzahlungen werden sofort zur return_url weitergeleitet, wenn eine Zahlung erfolgreich war.

Wenn Sie Kartenzahlungen nach Abschluss der Zahlung nicht weiterleiten möchten, können Sie redirect auf if_required festlegen. Dadurch werden nur Kundinnen/Kunden weitergeleitet, die mit weiterleitungsbasierten Zahlungsmethoden bezahlen.

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

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

Achten Sie darauf, dass die return_url auf eine Seite Ihrer Website verweist, die den Status der Zahlung angibt. Wenn Stripe den/die Kund/in an die return_url weiterleitet, stellen wir die folgenden URL-Abfrageparameter bereit:

Parameter	Beschreibung
`payment_intent`	Die eindeutige ID für die `PaymentIntent`.
`payment_intent_client_secret`	Das Client-Geheimnis des `PaymentIntent`-Objekts.

Vorsicht

Wenn Sie über Tools verfügen, die die Browser-Sitzung der Kund/innen verfolgen, müssen Sie möglicherweise die Domain stripe.com zur Referenz-Ausschlussliste hinzufügen. Weiterleitungen haben zur Folge, dass einige Tools neue Sitzungen erstellen. Dies wiederum hindert Sie daran, die gesamte Sitzung zu verfolgen.

Verwenden Sie einen der Abfrageparameter, um den PaymentIntent abzurufen. Überprüfen Sie den Status des PaymentIntent, um zu entscheiden, was Ihren Kundinnen/Kunden angezeigt werden soll. Sie können bei der Angabe der return_url auch Ihre eigenen Abfrageparameter anhängen, die während des Weiterleitungsvorgangs erhalten bleiben.

status.js
// Initialize Stripe.js using your publishable key
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

// Retrieve the "payment_intent_client_secret" query parameter appended to
// your return_url by Stripe.js
const clientSecret = new URLSearchParams(window.location.search).get(
  'payment_intent_client_secret'
);

// Retrieve the PaymentIntent
stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => {
  const message = document.querySelector('#message')

  // Inspect the PaymentIntent `status` to indicate the status of the payment
  // to your customer.
  //
  // Some payment methods will [immediately succeed or fail][0] upon
  // confirmation, while others will first enter a `processing` state.
  //
  // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
  switch (paymentIntent.status) {
    case 'succeeded':
      message.innerText = 'Success! Payment received.';
      break;

    case 'processing':
      message.innerText = "Payment processing. We'll update you when payment is received.";
      break;

    case 'requires_payment_method':
      message.innerText = 'Payment failed. Please try another payment method.';
      // Redirect your user back to your payment page to attempt collecting
      // payment again
      break;

    default:
      message.innerText = 'Something went wrong.';
      break;
  }
});

Ereignisse nach der Zahlung verarbeiten
Serverseitig

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:

Ereignis	Beschreibung	Aktion
payment_intent.succeeded	Wird gesendet, wenn Kundinnen und Kunden eine Zahlung erfolgreich abgeschlossen haben.	Senden Sie den Kund/innen eine Auftragsbestätigung und wickeln Sie die Bestellung ab.
payment_intent.processing	Wird gesendet, wenn eine/e Kund/in eine Zahlung erfolgreich veranlasst hat, die Zahlung aber noch nicht abgeschlossen ist. Dieses Ereignis wird am häufigsten gesendet, wenn der Kunde/die Kundin eine Bankabbuchung veranlasst. In Zukunft folgt darauf entweder ein `payment_intent.succeeded`- oder ein `payment_intent.payment_failed`-Ereignis.	Senden Sie eine Bestellbestätigung an die Kund/innen, in der angegeben ist, dass die Zahlung noch aussteht. Bei digitalen Waren können Sie die Bestellung abwickeln, bevor Sie darauf warten, dass die Zahlung erfolgt.
payment_intent.payment_failed	Wird gesendet, wenn ein Kunde/eine Kundin einen Zahlungsversuch durchführt, die Zahlung jedoch fehlschlägt.	Wenn eine Zahlung von `processing` zu `payment_failed` übergeht, bieten Sie der Kundin/dem Kunden einen weiteren Zahlungsversuch an.

Zahlungen für bestehende Kundinnen/Kunden

Erfahren Sie, wie Sie eine bestehende Zahlungsmethode belasten, während ein Kunde/eine Kundin On-Session ist.

PaymentIntent und CustomerSession erstellenServerseitig

OptionalWeitere gespeicherte Zahlungsmethoden anzeigenServerseitig

Das Payment Element anzeigenClientseitig