# Kartenzahlungen ohne Bankauthentifizierung

Erstellen Sie eine einfachere Integration mit regionalen Beschränkungen.

Diese Integration unterstützt Unternehmen, die nur Karten aus den USA und Kanada akzeptieren. Sie ist zwar zunächst einfacher zu erstellen, lässt sich jedoch nicht ausreichend skalieren, wenn der Kundenstamm international wird.

### Funktionsweise dieser Integration

In Regionen wie Europa und Indien verlangen Banken von ihren Kundinnen und Kunden oft eine Zwei-Faktor-Authentifizierung, um ihre Einkäufe zu bestätigen. Wenn Sie hauptsächlich in den USA und Kanada tätig sind, können Sie die *Kartenauthentifizierung* (A bank might require the customer to authenticate a card payment before processing. Implementation varies by bank but commonly consists of a customer entering in a security code sent to their phone) ignorieren und so Ihre Integration einfach halten, zumal die Banken in diesen Regionen nur selten eine Authentifizierung verlangen.

Verlangt eine Bank dennoch eine Authentifizierung, wird die Zahlung mit dieser Basisintegration direkt abgelehnt (ähnlich wie eine abgelehnte Karte), anstatt die Zahlung asynchron mittels Authentifizierung abzuschließen. Der Vorteil liegt darin, dass die Zahlung sofort genehmigt oder abgelehnt wird und die Zahlungsbestätigung auf dem Server erfolgt, sodass Sie ohne *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) umgehend mit den Aktionen nach der Zahlung fortfahren können.

### Vergleich zur globalen Integration

| Funktion                                                                        | Diese Integration | Globale Integration |
| ------------------------------------------------------------------------------- | ----------------- | ------------------- |
| Kunden-Zahlungsformular                                                         | ✔                 | ✔                   |
| Sensible Daten gelangen nicht auf Ihren Server                                  | ✔                 | ✔                   |
| Funktioniert mit Kund/innen in den USA und Kanada                               | ✔                 | ✔                   |
| Zahlungen mit falschen Kartendaten oder unzureichender Deckung werden abgelehnt | ✔                 | ✔                   |
| Zahlungen mit Bankauthentifizierung werden abgelehnt                            | ✔                 |                     |
| Funktioniert mit internationalen Kund/innen                                     |                   | ✔                   |
| Kartenzahlungen mit Bankauthentifizierung werden automatisch abgewickelt        |                   | ✔                   |
| Für die Bestellabwicklung werden Webhooks empfohlen                             |                   | ✔                   |
| Einfache Skalierung auf weitere Zahlungsmethoden (beispielsweise Lastschriften) |                   | ✔                   |

Wachsende oder international tätige Unternehmen sollten die [globale Integration](https://docs.stripe.com/payments/accept-a-payment.md) von Stripe nutzen, um Bankanfragen zur Zwei-Faktor-Authentifizierung unterstützen und Kundinnen/Kunden weitere Zahlungsmethoden anbieten zu können.
Der von Ihnen integrierte Zahlungsfluss (See full diagram at https://docs.stripe.com/payments/without-card-authentication)
## Ein Bezahlformular erstellen [Clientseitig]

[Elements](https://docs.stripe.com/payments/elements.md), ein Teil von Stripe.js, bietet Drop-In-Komponenten der Nutzeroberfläche zur Erfassung von Kartendaten von Kundinnen und Kunden. Stripe hostet diese und bindet sie in Ihrem Zahlungsformular als iFrame ein, sodass die Kartendaten Ihrer Kundinnen/Kunden nie in Kontakt mit Ihrem Code kommen.

#### HTML + JS

Binden Sie zunächst das [Stripe.js](https://docs.stripe.com/js.md)-Skript in den Header jeder Seite auf Ihrer Website ein.

```html
<script src="https://js.stripe.com/dahlia/stripe.js"></script>
```

Indem Sie das Skript auf jeder Seite Ihrer Website einbinden, profitieren Sie von der [erweiterten Betrugsfunktionalität](https://docs.stripe.com/radar.md) von Stripe und der Möglichkeit, ungewöhnliches Browserverhalten zu erkennen.

### Sicherheitsanforderungen

Dieses Skript muss immer direkt von **js.stripe.com** geladen werden, damit die [PCI-Konformität](https://docs.stripe.com/security/guide.md) gewahrt bleibt. Sie dürfen das Skript nicht in ein Paket einfügen oder selbst eine Kopie davon hosten.

Wenn Sie Elements nutzen, werden alle Zahlungsdaten über eine sichere HTTPS-Verbindung gesendet.

Die Adresse der Seite, die Elements enthält, muss ebenfalls mit **https://** beginnen, nicht mit **http://**. Weitere Informationen darüber, wie Sie SSL-Zertifikate erhalten und in Ihren Server integrieren und eine HTTPS-Verbindung ermöglichen können, finden Sie in der Dokumentation zum Thema [Sicherheit](https://docs.stripe.com/security.md).

### Elements zu Ihrer Seite hinzufügen

Als Nächstes benötigen Sie ein Stripe-Konto. [Registrieren Sie sich jetzt](https://dashboard.stripe.com/register).

Erstellen Sie leere DOM-Elemente (Container) mit eindeutigen IDs innerhalb Ihres Bezahlformulars.

```html
<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>
```

Erstellen Sie anschließend eine Instanz des [Stripe-Objekts](https://docs.stripe.com/js.md#stripe-function) und geben Sie dabei Ihren veröffentlichbaren [API-Schlüssel](https://docs.stripe.com/keys.md) als ersten Parameter an. Erstellen Sie dann eine Instanz des [Elements-Objekts](https://docs.stripe.com/js.md#stripe-elements) und [verbinden](https://docs.stripe.com/js.md#element-mount) Sie damit ein Kartenelement im leeren DOM-Element-Container auf der Seite.

```javascript
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

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

Nutzen Sie [stripe.createPaymentMethod](https://docs.stripe.com/js/payment_methods/create_payment_method) auf Ihrem Client, um die Kartenangaben zu erfassen und eine [PaymentMethod](https://docs.stripe.com/api/payment_methods.md) zu erstellen, wenn die Kundin/der Kunde das Zahlungsformular absendet. Übermitteln Sie die ID der PaymentMethod an Ihren Server.

```javascript
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!';
  }
};
```

#### React

Installieren Sie zunächst [Stripe.js](https://github.com/stripe/stripe-js) und [React Stripe.js](https://docs.stripe.com/sdks/stripejs-react.md).

```bash
npm install --save @stripe/stripe-js @stripe/react-stripe-js
```

> In diesem Leitfaden wird davon ausgegangen, dass Sie bereits über grundlegende Kenntnisse in React verfügen und bereits ein React-Projekt eingerichtet haben. Wenn Sie neu bei React sind, empfehlen wir Ihnen, den Leitfaden „React – [die ersten Schritte“](https://reactjs.org/docs/getting-started.html) zu lesen, bevor Sie fortfahren.
> 
> Wenn Sie React Stripe.js schnell ausprobieren möchten, ohne ein neues Projekt erstellen zu müssen, beginnen Sie mit dieser [Demo in CodeSandbox](https://codesandbox.io/s/react-stripe-official-q1loc?fontsize=14&hidenavigation=1&theme=dark).

### Sicherheitsanforderungen

Wenn Sie Elements nutzen, werden alle Zahlungsdaten über eine sichere HTTPS-Verbindung gesendet.

Die Adresse der Seite, die Elements enthält, muss ebenfalls mit **https://** beginnen, nicht mit **http://**. Weitere Informationen darüber, wie Sie SSL-Zertifikate erhalten und in Ihren Server integrieren und eine HTTPS-Verbindung ermöglichen können, finden Sie in der Dokumentation zum Thema [Sicherheit](https://docs.stripe.com/security.md).

### Laden Sie Stripe.js und fügen Sie Ihrer Seite Elements hinzu.

Um Elements zu verwenden, führen Sie das Wrapping des Stammverzeichnisses Ihrer React-App in einem [Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider)-Anbieter durch. Rufen Sie [loadStripe](https://github.com/stripe/stripe-js#loadstripe) mit Ihrem veröffentlichbaren Schlüssel auf und geben Sie das zurückgegebene `Promise` an den `Elements`-Anbieter weiter.

Importieren und rufen Sie `loadStripe` im Stammverzeichnis Ihrer React-App auf, um von der [erweiterten Betrugsfunktionalität](https://docs.stripe.com/radar.md) von Stripe und deren Fähigkeit, ungewöhnliches Surfverhalten zu erkennen, zu profitieren.

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

import CheckoutForm from './CheckoutForm';

// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe("<<YOUR_PUBLISHABLE_KEY>>");

function App() {
  return (
    <Elements stripe={stripePromise}>
      <CheckoutForm />
    </Elements>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
```

### Eine PaymentMethod erstellen

Nutzen Sie das `CardElement` und [stripe.createPaymentMethod](https://docs.stripe.com/js/payment_methods/create_payment_method) auf Ihrem Client, um die Kartenangaben zu erfassen und eine [PaymentMethod](https://docs.stripe.com/api/payment_methods.md) zu erstellen, wenn die Kundin/der Kunde das Zahlungsformular absendet. Übermitteln Sie die ID der PaymentMethod an Ihren Server.

Verwenden Sie die Hooks [useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook) und [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook), um `stripe.createPaymentMethod` über Ihre Zahlungsformularkomponente aufzurufen. Falls Sie herkömmliche Klassenkomponenten bevorzugen, können Sie stattdessen auch [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer) verwenden.

#### Hooks

```jsx
import React from 'react';
import {useStripe, useElements, CardElement} from '@stripe/react-stripe-js';

export default function CheckoutForm() {
  const stripe = useStripe();
  const elements = useElements();

  const handleSubmit = 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: elements.getElement(CardElement),
      billing_details: {
        // Include any additional collected billing details.
        name: 'Jenny Rosen',
      },
    });

    handlePaymentMethodResult(result);
  };

  const handlePaymentMethodResult = async (result) => {
    if (result.error) {
      // An error happened when collecting card details,
      // show `result.error.message` in the payment form.
    } else {
      // Otherwise 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: result.paymentMethod.id,
        }),
      });

      const serverResponse = await response.json();

      handleServerResponse(serverResponse);
    }
  };

  const handleServerResponse = (serverResponse) => {
    if (serverResponse.error) {
      // An error happened when charging the card,
      // show the error in the payment form.
    } else {
      // Show a success message
    }
  };

  const handleCardChange = (event) => {
    if (event.error) {
      // Show `event.error.message` in the payment form.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <CardElement onChange={handleCardChange} />
      <button type="submit" disabled={!stripe}>
        Submit Payment
      </button>
    </form>
  );
}
```

## Stripe einrichten [Serverseitig]

Nutzen Sie eine offizielle Library für den Zugriff auf die Stripe-API über Ihre Anwendung:

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

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

## Eine Zahlung tätigen [Serverseitig]

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

Stripe verwendet ein [PaymentIntent](https://docs.stripe.com/api/payment_intents.md)-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/der Kundin in Rechnung stellen. Um eine Zahlung zu erstellen, legen Sie unter Verwendung der *Zahlungsmethode* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs)-ID aus Schritt 1 einen PaymentIntent mit folgendem Code an:

#### Curl

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

curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -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
```

> Wenn Sie [error_on_requires_action](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-error_on_requires_action) bei der Bestätigung einer Zahlung auf `true` setzen, lässt Stripe die Zahlung automatisch fehlschlagen, wenn eine Zwei-Faktor-Authentifizierung des Nutzers/der Nutzerin erforderlich ist.

#### 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`.

```json
{
  "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.

```json
{
  "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"
  }
}
```

## Integration testen

Stripe stellt mehrere Testkarten zur Verfügung, die Sie in einer *Sandbox* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes) verwenden können, um sicherzustellen, dass diese Integration bereit ist. Verwenden Sie sie mit einer beliebigen Prüfziffer (CVC), einer Postleitzahl und einem Ablaufdatum in der Zukunft.

| Nummer           | Beschreibung                                                                                                                                    |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| 4242424242424242 | Bei Erfolg sofortige Verarbeitung der Zahlung.                                                                                                  |
| 4000000000009995 | Schlägt stets mit dem Ablehnungscode `insufficient_funds` fehl.                                                                                 |
| 4000002500003155 | Erfordert eine Authentifizierung, die in dieser Integration zu einem Fehler führt. Der Ablehnungscode lautet dann `authentication_not_handled`. |

Siehe dazu die vollständige Liste der [Testkarten](https://docs.stripe.com/testing.md).

## Upgrade Ihrer Integration zur Authentifizierung von Karten

Ihre Zahlungsintegration für einfache Kartenzahlungen ist jetzt abgeschlossen. Diese Integration **lehnt Karten ab, die während der Zahlung eine Authentifizierung erfordern**.

Wenn Zahlungen im Dashboard als `Failed` angezeigt werden, müssen Sie [Ihre Integration aktualisieren](https://docs.stripe.com/payments/payment-intents/upgrade-to-handle-actions.md). Die globale Integration von Stripe verarbeitet diese Zahlungen, anstatt sie automatisch abzulehnen.