Zahlungsseite erstellen
Integrieren Sie Apple Pay und Google Pay mit zusätzlichem Code.
Passen Sie alle Komponenten nach Bedarf mit CSS an.
Notiz
Sehen Sie in Ihrem Plattform-Profil nach, ob Direct Charges oder Destination Charges besser für Ihr Unternehmen geeignet sind.
Destination Charges
Bei dieser Beispielplattform handelt es sich um einen Marktplatz für Wohnungsvermittlung, auf dem Zahlungen für Wohnungseigentümer/innen, die ihre Wohnungen vermieten, erstellt werden. Selbstverständlich können Destination Charges auch in anderen Anwendungen verwendet werden.
Schritt 1: PaymentIntent erstellen Server-side
curl https://api.stripe.com/v1/payment_intents \ -u "
:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]"=truesk_test_4eC39HqLyjWDarjtT1zdp7dc
In der neuesten API-Version ist die Angabe des Parameters automatic_payment_methods
optional, da Stripe diese Funktionalität standardmäßig aktiviert.
Stripe nutzt ein PaymentIntent-Objekt, um Ihre Absicht zu repräsentieren, Zahlungen von Ihren Kunden anzufordern und Abbuchungsversuche und Zahlungsstatusänderungen im gesamten Vorgang zu dokumentieren.
Erstellen Sie einen PaymentIntent
auf Ihrem Server mit einem Betrag und einer Währung. Entscheiden Sie immer auf der Server-Seite, einer vertrauenswürdigen Umgebung, im Gegensatz zum Client, wie viel berechnet werden soll. Dadurch wird verhindert, dass böswillige Kund/innen ihre eigenen Preise wählen können.
curl https://api.stripe.com/v1/payment_intents \ -u
: \ -d amount=1000 \ -d currency="usd" \ -d "automatic_payment_methods[enabled]"=true \ -d application_fee_amount="123" \ -d "transfer_data[destination]"=sk_test_4eC39HqLyjWDarjtT1zdp7dc{{CONNECTED_STRIPE_ACCOUNT_ID}}
In unserem Beispiel für Wohnungsvermietung möchten wir ein Unternehmen schaffen, bei dem die Kundinnen und Kunden Mieten über unsere Plattform bezahlen und wir die Eigentümer für die Vermietung bezahlen. Ein solches Unternehmen erstellen Sie so:
- Mit
transfer_data[destination]
geben Sie an, dass es sich bei der Miete um eine Destination Charge handelt. - Mit
application_fee_amount
geben Sie an, welcher Anteil des Mietbetrags an die Plattform bezahlt werden soll.
Wird eine Mietzahlung gebucht, überträgt Stripe den Gesamtbetrag an das ausstehende Guthaben des verbundenen Kontos (transfer_data[destination]
). Anschließend überträgt Stripe die Gebühr (application_fee_amount
) an das Plattformkonto. Dabei handelt es sich um den Anteil für die Bereitstellung des Vermietungsvorgangs. Stripe zieht danach die Stripe-Gebühren von den Gebühren der Plattform ab. Eine Darstellung der Geldbewegung sehen Sie hier:
Notiz
Dieser PaymentIntent erstellt eine Destination Charge. Wenn Sie Zahlungen terminieren oder Geld aus einer einzelnen Zahlung an mehrere Empfänger weiterleiten müssen, nutzen Sie bitte stattdessen separate Zahlungen und Überweisungen.
Client-Geheimnis abrufen
Im PaymentIntent ist ein Client-Geheimnis enthalten, das auf dem Client verwendet wird, um Zahlungen sicher abzuschließen. Es gibt verschiedene Verfahren zum Übergeben des Client-Geheimnisses an den Client.
Rufen Sie das Client-Geheimnis von einem Endpoint auf Ihrem Server ab, indem Sie die Browser-Funktion fetch
verwenden. Diese Vorgehensweise funktioniert am besten, wenn es sich bei Ihrer Client-Seite um eine einseitige Anwendung handelt, insbesondere wenn sie mit einem modernen Frontend-Framework wie React erstellt wurde. Erstellen Sie den Server-Endpoint, der das Client-Geheimnis bereitstellt:
get '/secret' do intent = # ... Create or retrieve the PaymentIntent {client_secret: intent.client_secret}.to_json end
Und dann rufen Sie das Client-Geheimnis mit JavaScript auf der Client-Seite ab:
(async () => { const response = await fetch('/secret'); const {client_secret: clientSecret} = await response.json(); // Render the form using the clientSecret })();
Schritt 2: Kartendaten erfassen Client-side
Sie können jetzt mit Stripe Elements Kartendaten auf dem Client erfassen. Elements beinhaltet vorgefertigte Komponenten der Nutzeroberfläche zur Erfassung und Validierung von Kartennummern, Postleitzahlen und Ablaufdaten.
Ein Stripe Element enthält ein iframe, dass die Zahlungsdaten über eine HTTPS-Verbindung sicher an Stripe sendet. Die Adresse der Bezahlseite muss ebenfalls mit https:// beginnen, nicht mit http://, damit Ihre Integration funktioniert.
Sie können Ihre Integration ohne HTTPS testen. Dann müssen Sie das Protokoll aber aktivieren, wenn Sie bereit sind, Live-Zahlungen anzunehmen.
Stripe Elements einrichten
Stripe Elements ist ein Feature von Stripe.js und steht damit automatisch zur Verfügung. Fügen Sie das Stripe.js-Skript auf Ihrer Zahlungsseite ein, indem Sie es in den head
Ihrer HTML-Datei einbinden. Laden Sie Stripe.js immer direkt von js.stripe.com, um die PCI-Compliance zu gewährleisten. Fügen Sie das Skript nicht in ein Bundle ein und hosten Sie selbst keine Kopie davon.
<head> <title>Checkout</title> <script src="https://js.stripe.com/v3/"></script> </head>
Erstellen Sie auf Ihrer Checkout-Seite mit dem folgenden JavaScript eine Instanz von Elements:
// Set your publishable key: remember to change this to your live publishable key in production // See your keys here: https://dashboard.stripe.com/apikeys var stripe = Stripe(
); var elements = stripe.elements();'pk_test_TYooMQauvdEDq54NiTphI7jx'
Elements zu Ihrer Zahlungsseite hinzufügen
Ihr Zahlungsformular muss einen Platz für Elements enthalten. Erstellen Sie in Ihrem Zahlungsformular leere DOM-Nodes (Container) mit eindeutigen IDs und übergeben Sie diese IDs dann an Elements.
<form id="payment-form"> <div id="card-element"> <!-- Elements will create input elements here --> </div> <!-- We'll put the error messages in this element --> <div id="card-errors" role="alert"></div> <button id="submit">Pay</button> </form>
Wenn das oben erwähnte Formular geladen wurde, erstellen Sie eine Instanz eines Elements und verbinden Sie sie mit dem erstellten Element-Container:
// Set up Stripe.js and Elements to use in checkout form var elements = stripe.elements(); var style = { base: { color: "#32325d", } }; var card = elements.create("card", { style: style }); card.mount("#card-element");
Das card
-Element vereinfacht das Formular und minimiert die Anzahl der Pflichtfelder durch Einfügen eines einzigen, flexiblen Eingabefelds, mit dem alle notwendigen Kartendaten sicher erfasst werden können. Alternativ können Sie die Elemente cardNumber
, cardExpiry
und cardCvc
zu einem flexiblen Kartenformular mit Mehrfacheingabe kombinieren.
Notiz
Erfassen Sie immer eine Postleitzahl, um die Kartenakzeptanzquote zu steigern und Betrug vorzubeugen.
Das einzeilige Card Element erfasst und sendet die Postleitzahl der Kundin/des Kunden an Stripe. Wenn Sie Ihr Zahlungsformular mit geteilten Elementen erstellen (Kartennummer, Ablaufdatum, Prüfziffer) fügen Sie ein separates Eingabefeld für die Postleitzahl der Kundin/des Kunden hinzu.
Eine vollständige Liste der unterstützten Element-Typen finden Sie in unserer Dokumentation für Stripe.js.
Elements validiert Nutzereingaben bereits bei der Eingabe. Überprüfen Sie das card
-Element auf change
-Ereignisse und zeigen Sie alle Fehler an:
card.on('change', ({error}) => { let displayError = document.getElementById('card-errors'); if (error) { displayError.textContent = error.message; } else { displayError.textContent = ''; } });
Die Postleitzahlprüfung hängt vom Abrechnungsland Ihrer Kundin/Ihres Kunden ab). Nutzen Sie unsere internationalen Testkarten, um mit anderen Postleitzahlformaten zu experimentieren.
Schritt 3: Zahlung an Stripe senden Client-side
Anstatt das gesamte PaymentIntent-Objekt an den Client zu übermitteln, verwenden Sie dessen Client-Geheimnis aus Step 1. Dieses unterscheidet sich von Ihren API-Schlüsseln, mit denen Sie Stripe-API-Anfragen authentifizieren.
Achten Sie aber auf einen vorsichtigen Umgang mit dem Client-Geheimnis, da mit ihm die Einrichtung durchgeführt werden kann. Es darf nicht protokolliert, in URLs eingebettet oder Personen außer der Kundin/dem Kunden selbst zugänglich gemacht werden.
Rufen Sie das Client-Geheimnis aus dem in Step 1 erstellten PaymentIntent ab und rufen Sie stripe.confirmCardPayment auf, um die Zahlung abzuschließen, sobald die Kundin/der Kunde auf die Schaltfläche klickt.
Geben Sie weitere Rechnungsdaten wie Name und Adresse der Karteninhaberin/des Karteninhabers an den Hash billing_details
weiter. Das Element card
übermittelt die PLZ-Daten der Kundin/des Kunden automatisch weiter. Wenn Sie allerdings die Elemente cardNumber
, cardCvc
und cardExpiry
kombinieren möchten, müssen Sie die PLZ an billing_details[address][postal_code]
übergeben.
var form = document.getElementById('payment-form'); form.addEventListener('submit', function(ev) { ev.preventDefault(); stripe.confirmCardPayment(clientSecret, { payment_method: { card: card, billing_details: { name: 'Jenny Rosen' } } }).then(function(result) { if (result.error) { // Show error to your customer (for example, insufficient funds) console.log(result.error.message); } else { // The payment has been processed! if (result.paymentIntent.status === 'succeeded') { // Show a success message to your customer // There's a risk of the customer closing the window before callback // execution. Set up a webhook or plugin to listen for the // payment_intent.succeeded event that handles any business critical // post-payment actions. } } }); });
Notiz
Für die Durchführung von stripe.confirmCardPayment
werden möglicherweise einige Sekunden benötigt. Während dieser Zeit sollten Sie Ihr Formular deaktivieren, damit keine erneute Absendung erfolgen kann. Zeigen Sie stattdessen ein Wartesymbol an, wie beispielsweise eine Sanduhr o. ä. Kommt es zu einem Fehler, teilen Sie dies dem Kunden/der Kundin mit, reaktivieren Sie das Formular und verbergen Sie das Wartesymbol.
Falls der Kunde/die Kundin die Karte authentifizieren muss, führt Stripe.js mit einem Modal durch den Vorgang. Ein Beispiel dieser Modal-Erfahrung sehen Sie, wenn Sie die Test-Kartennummer mit einer beliebigen Prüfziffer/CVC, einem beliebigen Ablaufdatum und einer beliebigen PLZ in der Demo oben auf der Seite verwenden.
Wenn die Zahlung erfolgreich war, lautet der Wert der Eigenschaft status
des PaymentIntent erfolgreich. Überprüfen Sie den Status eines PaymentIntent im Dashboard oder durch Nachschlagen der Eigenschaft „Status“ des Objekts. War die Zahlung nicht erfolgreich, prüfen Sie den angegebenen error
, um den Grund zu erfahren.
Schritt 4: Ausführung Server-side
Nach Abwicklung der Zahlung erfolgt auf Ihrer Seite die Ausführung. Bei einer Wohnungsvermittlung, die Vorauskasse verlangt, wäre beispielsweise nach erfolgreicher Zahlung der Kontakt zwischen Mieter/in und Hauseigentümer/in herzustellen.
Konfigurieren Sie in Ihrem Dashboard einen Webhook-Endpoint (für Ereignisse von Ihrem Konto).
Erstellen Sie dann einen HTTP-Endpoint auf Ihrem Server, um die abgeschlossenen Zahlungen zu überwachen, damit Ihre Verkäufer und Dienstleister die Bestellungen abwickeln können. Ersetzen Sie den geheimen Schlüssel des Endpoints (whsec_...
) aus dem Beispiel durch Ihren Schlüssel.
# Using Sinatra. require 'sinatra' require 'stripe' set :port, 4242 # Set your secret key. Remember to switch to your live secret key in production. # See your keys here: https://dashboard.stripe.com/apikeys Stripe.api_key =
# If you are testing your webhook locally with the Stripe CLI you # can find the endpoint's secret by running `stripe listen` # Otherwise, find your endpoint's secret in your webhook settings in # the Developer Dashboard endpoint_secret = 'whsec_...' post '/webhook' do payload = request.body.read sig_header = request.env['HTTP_STRIPE_SIGNATURE'] event = nil # Verify webhook signature and extract the event. # See https://stripe.com/docs/webhooks#verify-events for more information. begin event = Stripe::Webhook.construct_event( payload, sig_header, endpoint_secret ) rescue JSON::ParserError => e # Invalid payload. status 400 return rescue Stripe::SignatureVerificationError => e # Invalid Signature. status 400 return end if event['type'] == 'payment_intent.succeeded' payment_intent = event['data']['object'] handle_successful_payment_intent(payment_intent) end status 200 end def handle_successful_payment_intent(payment_intent) # Fulfill the purchase puts payment_intent.to_s end'sk_test_4eC39HqLyjWDarjtT1zdp7dc'
Weitere Informationen finden Sie in unserem Fulfillment-Leitfaden für Zahlungen.
Webhooks lokal testen
Verwenden Sie die Stripe-Kommandozeile, um Webhooks lokal zu testen
Falls noch nicht vorhanden, installieren Sie zunächst die Stripe-CLI auf Ihrem Rechner.
Führen Sie dann zum Anmelden
stripe login
in der Befehlszeile aus und folgen Sie den Anweisungen.Lassen Sie Ihren lokalen Host ein simuliertes Ereignis in Ihrem verbundenen Konto empfangen, indem Sie in einem Terminalfenster
stripe listen --forward-to localhost:{PORT}/webhook
und in einem anderenstripe trigger --stripe-account={{CONNECTED_STRIPE_ACCOUNT_ID}} payment_intent.succeeded
ausführen (oder ein anderes unterstütztes Ereignis auslösen).
Schritt 5: Zahlungsanfechtungen
Als Abwicklungshändler für Zahlungen trägt Ihre Plattform die Verantwortung für Zahlungsanfechtungen. Beachten Sie hierfür die Best Practices für den Umgang mit Zahlungsanfechtungen.
Zahlungsmethoden aktivieren
Stripe enables certain payment methods for your connected accounts by default. You can change these defaults at any time in your Stripe Dashboard.
Bevor das Zahlungsformular angezeigt wird, wertet Stripe die Währung, Einschränkungen für Zahlungsmethoden und andere Parameter aus, um die Liste der unterstützten Zahlungsmethoden zu ermitteln. Zahlungsmethoden, die die Konversion steigern und die für die Währung und den Standort des/der Kund/in am relevantesten sind, erhalten Priorität. Zahlungsmethoden mit niedrigerer Priorität sind in einem Überlaufmenü verborgen.