Kartenzahlungen ohne Bankauthentifizierung

Elements, ein Teil von Stripe.js, bietet Drop-In-Komponenten der Nutzeroberfläche zur Erfassung von Kartendaten von Kundinnen und Kunden. Sie werden von Stripe gehostet und als iframe in Ihr Bezahlformular eingebunden, sodass die Kartendaten Ihrer Kundinnen/Kunden nie in Kontakt mit Ihrem Code kommen.

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

<form id="payment-form">
  <div id="card-element"><!-- placeholder for Elements --></div>
  <button id="card-button">Submit Payment</button>
  <p id="payment-result"><!-- we'll pass the response from the server here --></p>
</form>

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

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

const form = document.getElementById("payment-form");

var resultContainer = document.getElementById('payment-result');

// cardElement is defined in the previous step
cardElement.on('change', function(event) {
  if (event.error) {
    resultContainer.textContent = event.error.message;
  } else {
    resultContainer.textContent = '';
  }
});

form.addEventListener('submit', async event => {
  event.preventDefault();
  resultContainer.textContent = '';
  const result = await stripe.createPaymentMethod({
    type: 'card',
    card: cardElement,
  });
  handlePaymentMethodResult(result);
});

const handlePaymentMethodResult = async ({ paymentMethod, error }) => {
  if (error) {
    // An error happened when collecting card details, show error in payment form
    resultContainer.textContent = result.error.message;
  } else {
    // Send paymentMethod.id to your server (see Step 3)
    const response = await fetch("/pay", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ payment_method_id: paymentMethod.id })
    });

    const responseJson = await response.json();

    handleServerResponse(responseJson);
  }
};

const handleServerResponse = async responseJson => {
  if (responseJson.error) {
    // An error happened when charging the card, show it in the payment form
    resultContainer.textContent = responseJson.error;
  } else {
    // Show a success message
    resultContainer.textContent = 'Success!';
  }
};

Nutzen Sie eine offizielle Library 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'

Richten Sie auf Ihrem Server einen Endpoint zum Empfang der Anfrage vom Client ein.

Stripe verwendet ein PaymentIntent-Objekt, um Ihre Absicht darzustellen, eine Kundenzahlung einzuziehen. Dabei werden die Abbuchungsversuche und Zahlungsstatusänderungen während des gesamten Vorgangs dokumentiert.

Entscheiden Sie immer auf dem Server, welcher Betrag abgebucht werden soll, nicht auf dem Client. So wird verhindert, dass böswillige Kunden ihre eigenen Preise festlegen können.

Erstellen Sie einen HTTP-Endpoint, um auf die AJAX-Anfrage aus Schritt 1 reagieren zu können. In diesem Endpoint sollten Sie entscheiden, welchen Betrag Sie dem Kunden in Rechnung stellen. Um eine Zahlung zu erstellen, legen Sie unter Verwendung der PaymentMethod-ID aus Schritt 1 einen PaymentIntent mit folgendem Code an:

# Check the status of the PaymentIntent to make sure it succeeded

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_4eC39HqLyjWDarjtT1zdp7dc: \
  -d amount=1099 \
  -d currency=usd \

# A PaymentIntent can be confirmed some time after creation,
# but here we want to confirm (collect payment) immediately.
  -d confirm=true \
  -d payment_method="{{PAYMENT_METHOD_ID}}" \

# If the payment requires any follow-up actions from the
# customer, like two-factor authentication, Stripe will error
# and you will need to prompt them for a new payment method.
  -d error_on_requires_action=true

Antwort der Payment Intents API

Wenn eine Zahlung über die API erfolgt, enthält die Antwort einen PaymentIntent-Status. War die Zahlung erfolgreich, lautet der Status succeeded.

{
  "id": "pi_0FdpcX589O8KAxCGR6tGNyWj",
  "object": "payment_intent",
  "amount": 1099,
  "charges": {
    "object": "list",
    "data": [
      {
        "id": "ch_GA9w4aF29fYajT",
        "object": "charge",
        "amount": 1099,
        "refunded": false,
        "status": "succeeded",
      }
    ]
  },
  "client_secret": "pi_0FdpcX589O8KAxCGR6tGNyWj_secret_e00tjcVrSv2tjjufYqPNZBKZc",
  "currency": "usd",
  "last_payment_error": null,
  "status": "succeeded",
}

Wurde die Zahlung abgelehnt, enthält die Antwort den Fehlercode und eine Fehlermeldung. Hier ist ein Beispiel einer Zahlung, die fehlgeschlagen ist, weil für die Karte eine Zwei-Faktor-Authentifizierung erforderlich war.

{
  "error": {
    "code": "authentication_required",
    "decline_code": "authentication_not_handled",
    "doc_url": "https://docs.stripe.com/error-codes#authentication-required",
    "message": "This payment required an authentication action to complete, but `error_on_requires_action` was set. When you're ready, you can upgrade your integration to handle actions at https://stripe.com/docs/payments/payment-intents/upgrade-to-handle-actions.",
    "payment_intent": {
      "id": "pi_1G8JtxDpqHItWkFAnB32FhtI",
      "object": "payment_intent",
      "amount": 1099,
      "status": "requires_payment_method",
      "last_payment_error": {
        "code": "authentication_required",
        "decline_code": "authentication_not_handled",
        "doc_url": "https://docs.stripe.com/error-codes#authentication-required",
        "message": "This payment required an authentication action to complete, but `error_on_requires_action` was set. When you're ready, you can upgrade your integration to handle actions at https://stripe.com/docs/payments/payment-intents/upgrade-to-handle-actions.",
        "type": "card_error"
      },
    },
    "type": "card_error"
  }
}

Im Testmodus können Sie mehrere Testkarten nutzen, um sicherzustellen, dass die Integration bereit ist. Die Karten können Sie mit beliebigen CVCs, Postleitzahlen und künftigen Auslaufdaten nutzen.

Siehe dazu die vollständige Liste der Testkarten.

Glückwunsch! Sie haben eine Zahlungsintegration für grundlegende Kartenzahlungen erstellt. Bitte beachten Sie, dass diese Integration alle Karten ablehnt, die bei der Zahlung eine Authentifizierung erfordern.

Kommt es vermehrt zu Zahlungen, die im Dashboard als Failed aufgelistet werden, ist es an der Zeit für ein Upgrade Ihrer Integration. Die globale Integration von Stripe verarbeitet diese Zahlungen, statt sie automatisch abzulehnen.