Weiter zum Inhalt
Konto erstellen
oder
anmelden
Das Logo der Stripe-Dokumentation
/
KI fragen
Konto erstellen
Anmelden
Jetzt starten
Zahlungen
Finanzautomatisierung
Plattformen und Marktplätze
Geldmanagement
Entwickler-Tools
Jetzt starten
Zahlungen
Finanzautomatisierung
Jetzt starten
Zahlungen
Finanzautomatisierung
Plattformen und Marktplätze
Geldmanagement
ÜbersichtAlle Produkte ansehen
Beginnen Sie mit der Entwicklung
Entwicklung starten
Beispiel-Projekte
Informationen zu APIs
    API-Tour
    Payment Intents API
    Setup Intents API
    Zahlungsmethoden
    Produkte und Preise
    Ältere API
      Zahlungen
        Auf die neuen APIs umstellen
        Kartenzahlung akzeptieren
        Karte speichern
        Karte zurückstellen
        Abbuchungen mit Connect
      Quellen
    Veröffentlichungsphase
Build with LLMs
Stripe verwenden, ohne Code zu erstellen
Stripe einrichten
Konto erstellen
Web-Dashboard
Mobiles Dashboard
Auf Stripe umsteigen
Betrugsrisiko verwalten
Betrug verstehen
Betrugsprävention von Radar
Zahlungsanfechtungen verwalten
Identitäten verifizieren
StartseiteJetzt startenAbout the APIsOlder APIsCharges

Eine Zahlung über Stripe Elements und die Charges API annehmenCharges API

Nehmen Sie Online-Zahlungen von Kund/innen in den USA und Kanada an.

Seite kopieren

Legacy API

The content of this section refers to a Legacy feature. Use the Payment Intents API instead.

Die Charges API unterstützt die folgenden Funktionen nicht, von denen viele für die Einhaltung von Kreditkartenvorschriften erforderlich sind:

  • Händler in Indien
  • Bankanfragen zur Kartenauthentifizierung
  • Starke Kundenauthentifizierung

Mit Stripe Elements, unseren vordefinierten Nutzeroberflächenkomponenten, können Sie ein Zahlungsformular erstellen, mit dem Sie die Kartendaten Ihrer Kundinnen/Kunden sicher erfassen können, ohne die sensiblen Daten verarbeiten zu müssen. Die Kartendaten werden hierbei in ein repräsentatives Token konvertiert, das Sie sicher an Ihre Server übermitteln können. Mit diesem Token können Sie anschließend auf Ihrem Server eine Zahlung erstellen.

Stripe einrichten

Zunächst benötigen Sie ein Stripe-Konto. Registrieren Sie sich jetzt.

Nutzen Sie unsere offiziellen Bibliotheken für den Zugriff auf die Stripe-API über Ihre Anwendung:

Command Line
Ruby
# Available as a gem sudo gem install stripe
Gemfile
Ruby
# If you use bundler, you can add this line to your Gemfile gem 'stripe'

Zahlungsformular erstellen
Clientseitig

Um Kartendaten von Ihren Kundinnen/Kunden sicher zu erfassen, erstellt Stripe Elements Nutzeroberflächenkomponenten für Sie, die auf Stripe gehostet werden. Diese Komponenten werden dann in Ihrem Zahlungsformular platziert, wodurch Sie sie nicht selbst erstellen müssen.

Stripe Elements einrichten

Um Elements auf Ihrer Website zu nutzen, fügen Sie im head Ihrer HTML-Seite das folgende Skript-Tag ein:

payment.html
<script src="https://js.stripe.com/v3/"></script>

Das Skript sollte immer direkt von https://js.stripe.com geladen werden.

Erstellen Sie auf Ihrer Zahlungsseite mit dem folgenden JavaScript eine Instanz von Elements:

client.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'
); const elements = stripe.elements();

Nachdem Elements geladen wurde, können Sie in Ihrem Zahlungsformular an der Stelle, wo das Eingabefeld von Elements platziert werden soll, einen leeren DOM-Container mit einer eindeutigen ID erstellen. Wir empfehlen, diesen Container in einem <label> oder neben einem <label> mit einem for-Attribut zu erstellen, das der eindeutigen id des Element-Containers entspricht. Dadurch fällt der Fokus automatisch auf das Element, wenn der/die Kund/in auf das entsprechende Label klickt.

Ein Beispiel:

payment.html
<form action="/charge" method="post" id="payment-form"> <div class="form-row"> <label for="card-element"> Credit or debit card </label> <div id="card-element"> <!-- A Stripe Element will be inserted here. --> </div> <!-- Used to display Element errors. --> <div id="card-errors" role="alert"></div> </div> <button>Submit Payment</button> </form>

Wenn das oben erwähnte Formular geladen wurde, erstellen Sie eine Instanz eines card-Elements und verbinden Sie sie mit dem oben erstellten Element-Container:

client.js
// Custom styling can be passed to options when creating an Element. const style = { base: { // Add your base input styles here. For example: fontSize: '16px', color: '#32325d', }, }; // Create an instance of the card Element. const card = elements.create('card', {style}); // Add an instance of the card Element into the `card-element` <div>. 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 Elements 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 Referenz für Stripe.js.

Token erstellen
Clientseitig

Fügen Sie einen Event Listener für die Eingabe von Kartendaten durch Ihre Kund/innen ein und verwenden Sie dann stripe.createToken(card), um diese Informationen zu tokenisieren:

client.js
// Create a token or display an error when the form is submitted. const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {token, error} = await stripe.createToken(card); if (error) { // Inform the customer that there was an error. const errorElement = document.getElementById('card-errors'); errorElement.textContent = error.message; } else { // Send the token to your server. stripeTokenHandler(token); } });

createToken akzeptiert auch einen optionalen zweiten Parameter, der die von den Kundinnen/Kunden erfassten zusätzlichen Kartendaten enthält. Dieser wird in diesem Beispiel nicht verwendet. Die Funktion liefert ein Promise, das mit einem result-Objekt aufgelöst wird. Dieses Objekt hat eines der folgenden Ergebnisse:

  • result.token: Es wurde erfolgreich ein Token erstellt.
  • result.error: Es ist ein Fehler aufgetreten. Hierzu zählen auch clientseitige Validierungsfehler. Eine Liste aller möglichen Fehler finden Sie in der API-Dokumentation.

Wenn das Objekt ein result.token beinhaltet, übermitteln Sie es an Ihren Server. Ansonsten lassen Sie den Kund/innen eine Fehlermeldung anzeigen.

Token an Ihren Server übermitteln
Clientseitig

Übermitteln Sie den Token zusammen mit weiteren erfassten Informationen an Ihren Server:

client.js
const stripeTokenHandler = (token) => { // Insert the token ID into the form so it gets submitted to the server const form = document.getElementById('payment-form'); const hiddenInput = document.createElement('input'); hiddenInput.setAttribute('type', 'hidden'); hiddenInput.setAttribute('name', 'stripeToken'); hiddenInput.setAttribute('value', token.id); form.appendChild(hiddenInput); // Submit the form form.submit(); }

Zahlung mit dem Token erstellen
Serverseitig

Nachdem der Client den Token an Ihren Server übermittelt hat, können Sie damit eine Zahlung erstellen. Den Stripe-Token finden Sie auf Ihrem Server unter den von Ihrem Formular übermittelten POST-Parametern. Um die Karte zu belasten, genügt dann ein API-Aufruf:

Command Line
Curl
curl https://api.stripe.com/v1/charges \ -u
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:
\ -d "amount"=999 \ -d "currency"="usd" \ -d "description"="Example charge" \ -d "source"="tok_visa"

Die Reaktion auf die Erstellung einer Zahlung ist entweder eine Zahlung oder ein Fehler mit einem Fehlercode. Ist die Reaktion erfolgreich, wickeln Sie die Bestellung des Kunden/der Kundin ab und lassen Sie eine Bestätigungsseite anzeigen. Wenn nicht, lassen Sie eine Fehlerseite anzeigen.


Integration testen

Wenn Sie zuverlässig eine Testkarte in Ihrem HTML-Formular eingeben, die Daten an den Server übermitteln und sehen können, dass Ihr Server die Zahlung erstellt hat, ist Ihre Integration abgeschlossen.

Herzlichen Glückwunsch! Sie haben eine einfache Zahlungsintegration mit der Charges API erstellt. Diese API unterstützt keine expandierenden Unternehmen oder Kundinnen/Kunden, die ihren Sitz nicht in den USA oder Kanada haben. Für umfangreichere und globale Zahlungen sollten Sie sich mit der Payment Intents API vertraut machen.

Siehe auch

Erfahren Sie mehr über Elements und darüber, wie Sie mit der Charges API Karten speichern.

  • Weitere Informationen zu Stripe Elements
  • Karten mit der Charges API speichern
War diese Seite hilfreich?
JaNein
Benötigen Sie Hilfe? Kontaktieren Sie den Kundensupport.
Nehmen Sie an unserem Programm für frühzeitigen Zugriff teil.
Schauen Sie sich unser Änderungsprotokoll an.
Fragen? Sales-Team kontaktieren.
LLM? Lesen Sie llms.txt.
Unterstützt von Markdoc