Kartenzahlungen ohne Webhooks akzeptieren

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:

# Available as a gem
sudo gem install stripe

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

Erfassen Sie Kartendaten auf dem Client mit Stripe.js und Stripe Elements. 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, bevor Sie Ihre ersten Live-Zahlungen empfangen.

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

<form id='payment-form'>
  <label>
    Card details
    <!-- placeholder for Elements -->
    <div id="card-element"></div>
  </label>
  <button type="submit">Submit Payment</button>
</form>

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');
const elements = stripe.elements();
// Set up Stripe.js and Elements to use in checkout form
const style = {
  base: {
    color: "#32325d",
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: "antialiased",
    fontSize: "16px",
    "::placeholder": {
      color: "#aab7c4"
    }
  },
  invalid: {
    color: "#fa755a",
    iconColor: "#fa755a"
  },
};
const cardElement = elements.create('card', {style});
cardElement.mount('#card-element');

const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
  // We don't want to let default form submission happen here,
  // which would refresh the page.
  event.preventDefault();
  const result = await stripe.createPaymentMethod({
    type: 'card',
    card: cardElement,
    billing_details: {
      // Include any additional collected billing details.
      name: 'Jenny Rosen',
    },
  })
  stripePaymentMethodHandler(result);
});

Wenn die PaymentMethod erfolgreich erstellt wurde, senden Sie ihre ID an den Server.

const stripePaymentMethodHandler = async (result) => {
  if (result.error) {
    // Show error in payment form
  } else {
    // Otherwise send paymentMethod.id to your server (see Step 4)
    const res = await fetch('/pay', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        payment_method_id: result.paymentMethod.id,
      }),
    })
    const paymentResponse = await res.json();
    // Handle server response (see Step 4)
    handleServerResponse(paymentResponse);
  }
}

Richten Sie auf Ihrem Server einen Endpoint für den Empfang der Anfrage ein. Dieser Endpoint wird auch später verwendet, um Karten zu verarbeiten, die einen zusätzlichen Authentifizierungsschritt erfordern.

Erstellen Sie einen neuen PaymentIntent mit der ID der auf Ihrem Client erstellten PaymentMethod. Sie können den PaymentIntent bestätigen, indem Sie die Eigenschaft Bestätigen auf „true“ festlegen, wenn der PaymentIntent erstellt wird oder indem Sie nach der Erstellung Bestätigen aufrufen. Die separate Autorisierung und Erfassung wird für Kartenzahlungen ebenfalls unterstützt.

Wenn für die Zahlung weitere Aktionen wie 3D Secure-Authentifizierung erforderlich sind, wird der Status des PaymentIntent auf requires_action gesetzt. Wenn die Zahlung fehlschlägt, wird der Status wieder auf requires_payment_method gesetzt und Sie sollten dem/der Nutzer/in eine Fehlermeldung anzeigen. Wenn für die Zahlung keine zusätzliche Authentifizierung erforderlich ist, wird eine Abbuchung erstellt und der Status des PaymentIntent wird auf succeeded gesetzt.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "payment_method"="{{PAYMENT_METHOD_ID}}" \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "confirmation_method"="manual" \
  -d "confirm"="true"

Wenn Sie die Karte für die spätere Wiederverwendung speichern möchten, erstellen Sie ein Customer-Objekt, um die PaymentMethod zu speichern, und übergeben Sie beim Erstellen der PaymentIntent die folgenden zusätzlichen Parameter:

• customer. Legen Sie die Eigenschaft auf die ID des/der Kunden/Kundin fest.
• setup_future_usage. Legen Sie die Eigenschaft auf off_session fest, damit Stripe darüber informiert wird, dass Sie diese PaymentMethod für Off-Session-Zahlungen wiederverwenden möchten, wenn die Kundin/der Kunde nicht anwesend ist. Wenn Sie diese Eigenschaft festlegen, wird die PaymentMethod nach der Bestätigung des PaymentIntent und nach Durchführung aller erforderlichen Aktionen der Nutzerin/des Nutzers für die Kundin/den Kunden gespeichert. Mehr dazu finden Sie im Code-Beispiel unter Karten nach einer Zahlung speichern.

Schreiben Sie Code für Situationen, in denen Ihre Kundinnen/Kunden handeln müssen. In der Regel werden Zahlungen erfolgreich durchgeführt, nachdem Sie sie in Schritt 4 auf dem Server bestätigt haben. Wenn der PaymentIntent allerdings weitere Schritte von der Kundin/dem Kunden verlangt, wie etwa die Authentifizierung mit 3D Secure, kommt dieser Code zum Einsatz.

Verwenden Sie stripe.handleCardAction, um die Nutzeroberfläche für die Bearbeitung von Kundenaktionen und den Abschluss der Zahlung auszulösen. Bei erfolgreicher Authentifizierung erhält der PaymentIntent den Status requires_confirmation. Bestätigen Sie den PaymentIntent erneut auf Ihrem Server, um die Zahlung abzuschließen.

Verwenden Sie beim Testen eine Testkartennummer, die eine Authentifizierung erfordert (zum Beispiel 4000002760003184

), um diesen Ablauf zu erzwingen. Wenn Sie eine Karte verwenden, die keine Authentifizierung erfordert (zum Beispiel 4242424242424242

), wird dieser Teil des Ablaufs übersprungen und mit Schritt 4 abgeschlossen.

const handleServerResponse = async (response) => {
  if (response.error) {
    // Show error from server on payment form
  } else if (response.requires_action) {
    // Use Stripe.js to handle the required card action
    const { error: errorAction, paymentIntent } =
      await stripe.handleCardAction(response.payment_intent_client_secret);
    if (errorAction) {
      // Show error from Stripe.js in payment form
    } else {
      // The card action has been handled
      // The PaymentIntent can be confirmed again on the server
      const serverResponse = await fetch('/pay', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ payment_intent_id: paymentIntent.id })
      });
      handleServerResponse(await serverResponse.json());
    }
  } else {
    // Show success message
  }
}

Dieser Code wird nur ausgeführt, wenn für eine Zahlung – wie bei der Vorgehensweise im vorherigen Schritt – eine zusätzliche Authentifizierung erforderlich ist. Der Code selbst ist nicht optional, da jede Zahlung diesen zusätzlichen Schritt erfordern kann.

Bestätigen Sie den PaymentIntent erneut mit demselben Endpoint, den Sie zuvor eingerichtet haben, um die Zahlung abzuschließen und die Bestellung abzuwickeln. Stellen Sie sicher, dass diese Bestätigung innerhalb einer Stunde nach dem Zahlungsversuch erfolgt. Andernfalls schlägt die Zahlung fehl und der Status wird auf requires_payment_method zurückgesetzt.

curl https://api.stripe.com/v1/payment_intents/{{PAYMENT_INTENT_ID}}/confirm \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST"

​​Ihnen stehen mehrere Testkarten zur Verwendung in einer Sandbox zur Verfügung, um sicherzustellen, dass diese Integration bereit ist. Sie können sie mit einer beliebigen Prüfziffer/CVC und einem Ablaufdatum in der Zukunft verwenden.

Eine vollständige Liste der Testkarten finden Sie in unserem Leitfaden zum Testbetrieb.