Eine Karte ohne Bankauthentifizierung speichern

Bevor Sie mit diesem Leitfaden beginnen, benötigen Sie ein Stripe-Konto. Registrieren Sie sich jetzt.

Erstellen Sie eine Checkout-Seite, um die Kartendaten Ihrer Kundinnen/Kunden zu erfassen. Verwenden Sie Stripe Elements, eine UI-Bibliothek, mit der Sie nutzerdefinierte Zahlungsformulare erstellen können. Um mit Elements zu beginnen, binden Sie die Stripe.js-Bibliothek mit dem folgenden Skript in Ihre Checkout-Seite ein.

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

Laden Sie Stripe.js immer direkt von js.stripe.com, um die PCI-Compliance einzuhalten. Fügen Sie das Skript nicht in ein Paket ein und hosten Sie selbst keine Kopie davon.

Um die hochentwickelte Betrugsprävention von Stripe bestmöglich zu nutzen, binden Sie dieses Skript auf jeder Seite Ihrer Website ein, nicht nur auf der Bezahlseite. Indem Sie es auf jeder Seite einbinden, ermöglichen Sie Stripe die Erkennung verdächtiger Aktivitäten, die auf einen Betrug hinweisen könnten, wenn Ihre Website besucht wird.

Elements zu Ihrer Seite hinzufügen

Um Kartendaten von Ihren Kund/innen sicher zu erfassen, erstellt Elements für Sie Komponenten der Nutzeroberfläche, die von Stripe gehostet werden. Sie werden dann Ihrem Zahlungsformular hinzugefügt, anstatt sie direkt zu erstellen. Um zu bestimmen, wo diese Komponenten eingefügt werden sollen, erstellen Sie leere DOM-Elemente (Container) mit eindeutigen IDs in Ihrem Zahlungsformular.

<input id="cardholder-name" type="text">
<!-- placeholder for Elements -->
<div id="card-element"></div>
<div id="card-result"></div>
<button id="card-button">Save Card</button>

Erstellen Sie anschließend eine Instanz des Stripe-Objekts und geben Sie dabei Ihren veröffentlichbaren API-Schlüssel als ersten Parameter an. Erstellen Sie dann eine Instanz des Elements-Objekts und verbinden Sie damit ein card-Element im DOM.

Das card-Element vereinfacht das Zahlungsformular und minimiert durch ein einziges, flexibles Eingabefeld, mit dem alle notwendigen Kartenangaben sicher erfasst werden können, die Anzahl der Pflichtfelder.

Alternativ können Sie die Elemente cardNumber, cardExpiry und cardCvc zu einem flexiblen Kartenformular mit Mehrfacheingabe kombinieren.

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const elements = stripe.elements();
const cardElement = elements.create('card');
cardElement.mount('#card-element');

Ein Stripe Element enthält einen iFrame, der die Zahlungsdaten sicher über eine HTTPS-Verbindung an Stripe übermittelt. Die Adresse der Zahlungsseite 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, bevor Sie Ihre ersten Live-Zahlungen empfangen.

const cardholderName = document.getElementById('cardholder-name');
const cardButton = document.getElementById('card-button');
const resultContainer = document.getElementById('card-result');

cardButton.addEventListener('click', async (ev) => {
  const {paymentMethod, error} = await stripe.createPaymentMethod({
      type: 'card',
      card: cardElement,
      billing_details: {
        name: cardholderName.value,
      },
    }
  );

  if (error) {
    // Display error.message in your UI.
    resultContainer.textContent = error.message;
  } else {
    // You have successfully created a new PaymentMethod
    resultContainer.textContent = "Created payment method: " + paymentMethod.id;
  }
});

Senden Sie die resultierende PaymentMethod-ID an Ihren Server.

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

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Speichern Sie die Karte, indem Sie die PaymentMethod einem/einer Kund/in zuordnen. Sie können das Customer-Objekt nutzen, um weitere Informationen über Ihre Kundin/Ihren Kunden zu speichern, wie etwa Lieferdaten und E-Mail-Adresse.

curl https://api.stripe.com/v1/customers \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d payment_method={{PAYMENT_METHOD_ID}}

Wenn bereits ein Kunde besteht, können Sie die PaymentMethod stattdessen an dieses Objekt anhängen.

curl https://api.stripe.com/v1/payment_methods/{{PAYMENT_METHOD_ID}}/attach \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d customer=
{{CUSTOMER_ID}}

Verknüpfen Sie anschließend die ID des Kundenobjekts und die ID der PaymentMethod mit Ihrer eigenen Kundenrepräsentation, falls vorhanden.

Wenn Sie bereit sind, rufen Sie die Kunden- und die PaymentMethod-ID ab, die Sie belasten möchten. Dies können Sie entweder durch Speichern der IDs beider Objekte in Ihrer Datenbank tun oder indem Sie mittels der Kunden-ID alle für das Kundenobjekt verfügbaren PaymentMethods suchen.

curl -G https://api.stripe.com/v1/payment_methods \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d customer=
{{CUSTOMER_ID}} \
  -d type=card

Nutzen Sie die PaymentMethod-ID und die Kunden-ID, um einen neuen PaymentIntent zu erstellen. Setzen Sie error_on_requires_action auf „true“, um Zahlungen abzulehnen, die weitere Schritte wie die Zwei-Faktor-Authentifizierung erfordern.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d amount=1099 \
  -d currency=usd \
  -d "payment_method_types[]"=card \
  -d customer=
{{CUSTOMER_ID}} \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  -d error_on_requires_action=true \
  -d confirm=true

Schlägt ein Zahlungsversuch fehl, schlägt auch die Anfrage mit einem HTTP-Statuscode 402 fehl, und Stripe gibt eine Fehlermeldung aus. Sie müssen Ihre Kundinnen/Kunden dann auffordern, Ihre Anwendung erneut aufzurufen (zum Beispiel indem Sie eine E-Mail senden), um die Zahlung abzuschließen. Prüfen Sie den Code des von der Stripe-API-Bibliothek gemeldeten Fehlers oder prüfen Sie den last_payment_error.decline_code im PaymentIntent, um zu erfahren, warum der/die Kartenaussteller/in die Zahlung abgelehnt hat.

Benachrichtigen Sie Ihren Kunden/Ihre Kundin, dass die Zahlung fehlgeschlagen ist und verweisen Sie sie/ihn auf das Bezahlformular, das Sie in Schritt 1 erstellt haben. Dort kann er/sie seine Kartendaten neu eingeben. Senden Sie die neue PaymentMethod-ID an Ihren Server, um sie an das Kundenobjekt anzufügen und die Zahlung erneut durchzuführen.

Alternativ können Sie in einem einzigen API-Aufruf eine PaymentIntent erstellen und eine Karte speichern, wenn Sie bereits einen Kunden/eine Kundin erstellt haben.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d amount=1099 \
  -d currency=usd \
  -d "payment_method_types[]"=card \
  -d customer=
{{CUSTOMER_ID}} \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  -d error_on_requires_action=true \
  -d confirm=true \
  -d setup_future_usage=on_session

Indem setup_future_usage auf on_session gesetzt wird, erhält Stripe die Nachricht, dass Sie die Karte für später speichern möchten, ohne dass eine unnötige Authentifizierung eingeleitet wird.

Stripe stellt Testkarten bereit, die Sie im Test-Modus verwenden können, um verschiedene Kartenverhaltensweisen zu simulieren. Die Karten können Sie mit beliebigen CVCs, Postleitzahlen und künftigen Ablaufdaten nutzen.