# Zahlungen auf dem Server finalisieren
Erstellen Sie eine Integration, bei der Sie das Payment Element rendern, bevor Sie eine PaymentIntent oder SetupIntent erstellen, und bestätigen Sie dann die Intent von Ihrem Server.
# Zahlungen annehmen
> This is a Zahlungen annehmen for when platform is web and type is payment. View the full page at https://docs.stripe.com/payments/finalize-payments-on-the-server?platform=web&type=payment.
> #### Use the Accounts v2 API to represent customers
>
> If your integration uses [customer-configured Accounts](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), replace `Customer` and event references in the code examples with the equivalent Accounts v2 API references. For more information, see [Represent customers with Account objects](https://docs.stripe.com/connect/use-accounts-as-customers.md).
Mit dem Payment Element können Sie mehrere Zahlungsmethoden mithilfe einer einzigen Integration akzeptieren. Diese Integration erstellt einen nutzerdefinierten Zahlungsablauf, bei dem Sie das Payment Element rendern, den *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) erstellen und die Zahlung von Ihrem Server aus bestätigen.
## Stripe einrichten [Serverseitig]
[Erstellen Sie zunächst ein Stripe-Konto](https://dashboard.stripe.com/register) oder [melden Sie sich an](https://dashboard.stripe.com/login).
Verwenden Sie unsere offiziellen Bibliotheken, um von Ihrer Anwendung aus auf die Stripe API zuzugreifen:
#### 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'
```
## Zahlungsmethoden aktivieren
> Dieser Integrationspfad unterstützt weder BLIK noch vorab autorisierte Lastschriften, die das Automated Clearing Settlement System (ACSS) verwenden. Sie können `customer_balance` auch nicht mit dynamischen Zahlungsmethoden verwenden, wenn der zurückgestellte Intent clientseitig erstellt wird. Der clientseitige Ablauf für zurückgestellte Intents darf keine/n [Kunden/Kundin](https://docs.stripe.com/api/customers/object.md) enthalten und `customer_balance` erfordert eine/n `Kunden/Kundin` auf dem [PaymentIntent](https://docs.stripe.com/api/payment_intents.md). Zur Fehlervermeidung wird es daher ausgeschlossen. Um `customer_balance` zu verwenden, erstellen Sie den `PaymentIntent` serverseitig mit einem/einer `Kunden/Kundin` und geben Sie sein `client_secret` an den Client zurück.
Zeigen Sie Ihre [Einstellungen für Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods) an und aktivieren Sie die Zahlungsmethoden, die Sie unterstützen möchten. Sie müssen mindestens eine Zahlungsmethode aktiviert haben, um einen *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) zu erstellen.
Standardmäßig aktiviert Stripe Karten und andere gängige Zahlungsmethoden, mit denen Sie mehr Kundinnen und Kunden erreichen können. Wir empfehlen jedoch, zusätzliche Zahlungsmethoden zu aktivieren, die für Ihr Unternehmen und Ihre Kundschaft relevant sind. Weitere Informationen zur Unterstützung von Produkten und Zahlungsmethoden finden Sie auf der Seite [Unterstützte Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) und der [Preisseite](https://stripe.com/pricing/local-payment-methods) für Gebühren.
## Zahlungsdetails erfassen [Client-seitig]
Verwenden Sie das [Payment Element](https://docs.stripe.com/payments/payment-element.md), um in einem iFrame erfasste Zahlungsinformationen sicher über eine HTTPS-Verbindung an Stripe zu senden.
> #### Widersprüchliche iFrames
>
> Vermeiden Sie es, das Payment Element in einem anderen iFrame zu platzieren, da es im Widerspruch zu Zahlungsmethoden steht, die eine Weiterleitung zu einer anderen Seite zur Zahlung erfordern.
Die Adresse Ihrer Bezahlseite muss mit `https://` rather beginnen, nicht mit `http://` for, damit Ihre Integration funktioniert. Sie können Ihre Integration ohne HTTPS testen. Denken Sie jedoch daran, [dieses zu aktivieren](https://docs.stripe.com/security/guide.md#tls), wenn Sie bereit sind, Live-Zahlungen zu akzeptieren.
#### HTML + JS
### Einrichten von Stripe.js
Das Payment Element ist automatisch als Funktion von Stripe.js verfügbar. Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlseite ein, indem Sie es im `head` Ihrer HTML-Datei einfügen. Laden Sie Stripe.js immer direkt von js.stripe.com, um die PCI-Konformität zu gewährleisten. Fügen Sie das Skript nicht in ein Paket ein und hosten Sie selbst keine Kopie davon.
```html
Checkout
```
Erstellen Sie eine Instanz von Stripe mit dem folgenden JavaScript auf Ihrer Bezahlseite:
```javascript
// 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('<>');
```
### Fügen Sie das Payment Element zu Ihrer Checkout-Seite hinzu
Das Payment Element benötigt einen festen Platz auf Ihrer Checkout-Seite. Erstellen Sie in Ihrem Zahlungsformular einen leeren DOM-Knoten (Container) mit einer eindeutigen ID:
```html
```
Nachdem Ihr Formular geladen wurde, erstellen Sie eine Elements-Instanz mit dem Modus, dem Betrag und der Währung. Diese Werte bestimmen, welche Zahlungsmethoden das Element Ihren Kundinnen und Kunden anzeigt.
Erstellen Sie dann eine Instanz des Payment Element und verbinden Sie sie mit dem Container DOM-Knoten.
```javascript
const options = {mode:'payment',
amount: 1099,
currency: 'usd',paymentMethodCreation: 'manual',
// Fully customizable with appearance API.
appearance: {/*...*/},
};
// Set up Stripe.js and Elements to use in checkout formconst elements = stripe.elements(options);
// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');
```
#### Reagieren
### Einrichten von Stripe.js
Installieren Sie [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) und den [Stripe.js-Loader](https://www.npmjs.com/package/@stripe/stripe-js) aus dem öffentlichen npm-Register.
```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```
### Den Elements-Anbieter zu Ihrer Checkout-Seite hinzufügen und konfigurieren
Um die Payment Element-Komponente zu verwenden, schließen Sie die Komponente Ihrer Bezahlseite in einen [Elements-Anbieter](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider) ein. Rufen Sie `loadStripe` mit Ihrem veröffentlichbaren Schlüssel auf und übergeben Sie das zurückgegebene `Promise` an den `Elements`-Anbieter.
Der Anbieter `Elements` akzeptiert auch den Modus, den Betrag und die Währung. Diese Werte bestimmen, welche Zahlungsmethoden Ihren Kund/innen angezeigt werden.
```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('<>');
function App() {
const options = {mode:'payment',
amount: 1099,
currency: 'usd',paymentMethodCreation: 'manual',
// Fully customizable with appearance API.
appearance: {/*...*/},
};
return (
);
};
ReactDOM.render(, document.getElementById('root'));
```
### Payment Element hinzufügen
Verwenden Sie die Komponente `PaymentElement`, um Ihr Formular zu erstellen.
```jsx
import React from 'react';
import {PaymentElement} from '@stripe/react-stripe-js';
const CheckoutForm = () => {
return (
);
};
export default CheckoutForm;
```
Das Payment Element rendert ein dynamisches Formular, mit dem Ihr/e Kund/in eine Zahlungsmethode auswählen kann. Das Formular erfasst automatisch alle notwendigen Zahlungsdetails für die vom Kunden/von der Kundin ausgewählte Zahlungsmethode.
Sie können das Payment Element an das Design Ihrer Website anpassen, indem Sie beim Erstellen des `Elements`-Anbieters das [Erscheinungs-Objekt](https://docs.stripe.com/elements/appearance-api.md) an `options` übergeben.
### Adressen einholen
Standardmäßig erfasst das Payment Element nur die erforderlichen Angaben zur Rechnungsadresse. Einige Verhaltensweisen, wie z. B. die [Berechnung der Steuer](https://docs.stripe.com/api/tax/calculations/create.md) oder die Eingabe der Versanddaten, erfordern die vollständige Adresse Ihrer Kundin/Ihres Kunden. Sie können Folgendes tun:
- Verwenden Sie das [Address Element](https://docs.stripe.com/elements/address-element.md), um die Vorteile der Funktionen der automatischen Vervollständigung und Lokalisierung zu nutzen, um die vollständige Adresse Ihrer Kundin oder Ihres Kunden zu erfassen. Dies trägt dazu bei, eine möglichst genaue Steuerberechnung zu gewährleisten.
- Erfassen Sie Adressdaten mit Ihrem eigenen benutzerdefinierten Formular.
## Optional: Anpassen des Layouts [Client-seitig]
Sie können das Layout des Payment Element (Akkordeon oder Registerkarten) an Ihre Checkout-Nutzeroberfläche anpassen. Weitere Informationen zu den einzelnen Eigenschaften finden Sie unter [elements.create](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options).
#### Accordion
Mit der Verwendung der Layout-Funktionen können Sie beginnen, indem Sie beim Erstellen des Payment Element einen `type` und weitere optionale Eigenschaften übergeben:
```javascript
const paymentElement = elements.create('payment', {
layout: {
type: 'accordion',
defaultCollapsed: false,
radios: 'always',
spacedAccordionItems: false
}
});
```
#### Registerkarten
### Legen Sie das Layout fest
Legen Sie den Wert für das Layout auf `tabs` fest. Sie haben außerdem die Möglichkeit, andere Eigenschaften anzugeben, wie z. B.:
```javascript
const paymentElement = elements.create('payment', {
layout: {
type: 'tabs',
defaultCollapsed: false,
}
});
```
Das folgende Bild zeigt dasselbe Payment Element, das mit unterschiedlichen Layout-Konfigurationen gerendert wurde.
Layouts für Payment Element
## Optional: Passen Sie das Erscheinungsbild an [Client-seitig]
Nachdem Sie das Payment Element zu Ihrer Seite hinzugefügt haben, können Sie das Erscheinungsbild an Ihr Design anpassen. Weitere Informationen zum Anpassen des Payment Element finden Sie unter [Elements Appearance API](https://docs.stripe.com/elements/appearance-api.md).
Payment Element anpassen
## Optional: Zahlungsmethoden von Kundinnen und Kunden speichern und abrufen
Sie können das Payment Element so konfigurieren, dass die Zahlungsmethoden Ihrer Kundinnen und Kunden für die zukünftige Verwendung gespeichert werden. In diesem Abschnitt erfahren Sie, wie Sie die neue Funktion für [gespeicherte Zahlungsmethoden](https://docs.stripe.com/payments/save-customer-payment-methods.md) integrieren, mit der das Payment Element Folgendes tun kann:
- Käufer/innen um Zustimmung zur Speicherung einer Zahlungsmethode bitten
- Zahlungsmethoden speichern, wenn Käufer/innen zustimmen
- Gespeicherte Zahlungsmethoden für zukünftige Käufe anzeigen
- [Aktualisieren Sie verlorene oder abgelaufene Karten automatisch](https://docs.stripe.com/payments/cards/overview.md#automatic-card-updates), wenn Käufer/innen sie ersetzen
Zahlungsmethoden speichern.
Verwenden Sie eine zuvor gespeicherte Zahlungsmethode erneut.
### Speichern der Zahlungsmethode im Payment Element aktivieren
Create a [CustomerSession](https://docs.stripe.com/api/customer_sessions/.md) on your server by providing the customer’s ID (using either `customer` for a `Customer` object or `customer_account` for a customer-configured `Account` object) and enabling the [payment_element](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-components-payment_element) component for your session. Configure which saved payment method [features](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features) you want to enable. For instance, enabling [payment_method_save](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features-payment_method_save) displays a checkbox that allows customers to save their payment details for future use.
You can specify `setup_future_usage` on a PaymentIntent or Checkout Session to override the default behavior for saving payment methods. This ensures that you automatically save the payment method for future use, even if the customer doesn’t explicitly choose to save it. If you intend to specify `setup_future_usage`, don’t set `payment_method_save_usage` in the same payment transaction because this causes an integration error.
> #### Use the Accounts v2 API to represent customers
>
> The Accounts v2 API is GA for Connect users, and in public preview for other Stripe users. All Stripe users can enable Accounts v2 [in their Dashboard](https://dashboard.stripe.com/settings/connect/platform-setup). However, when making calls to the Accounts v2 API, preview users need to [specify a preview version](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning).
>
> Für die meisten Anwendungsfälle empfehlen wir, [Ihre Kundinnen und Kunden als vom Kunden bzw. von der Kundin konfigurierte Account-Objekte abzubilden](https://docs.stripe.com/connect/use-accounts-as-customers.md), anstatt das [Kundenobjekt](https://docs.stripe.com/api/customers.md) zu verwenden.
#### Accounts v2
#### Ruby
```ruby
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
Stripe.api_key = '<>'
post '/create-customer-session' do
customer_session = Stripe::CustomerSession.create({
customer_account: {{CUSTOMER_ACCOUNT_ID}},
components: {
payment_element: {
enabled: true,
features: {
payment_method_redisplay: 'enabled',
payment_method_save: 'enabled',
payment_method_save_usage: 'off_session',
payment_method_remove: 'enabled',
},
},
},
})
{
customer_session_client_secret: customer_session.client_secret
}.to_json
end
```
#### Customers v1
#### Ruby
```ruby
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
Stripe.api_key = '<>'
post '/create-customer-session' do
customer_session = Stripe::CustomerSession.create({
customer: {{CUSTOMER_ID}},
components: {
payment_element: {
enabled: true,
features: {
payment_method_redisplay: 'enabled',
payment_method_save: 'enabled',
payment_method_save_usage: 'off_session',
payment_method_remove: 'enabled',
},
},
},
})
{
customer_session_client_secret: customer_session.client_secret
}.to_json
end
```
Ihre Elements-Instanz verwendet das *Client-Geheimnis* (A client secret is used with your publishable key to authenticate a request for a single object. Each client secret is unique to the object it's associated with) der CustomerSession, um auf die gespeicherten Zahlungsmethoden dieses Kunden/dieser Kundin zuzugreifen. [Umgang mit Fehlern](https://docs.stripe.com/error-handling.md), wenn Sie die CustomerSession korrekt erstellen. Wenn ein Fehler auftritt, müssen Sie das Client-Geheimnis der CustomerSession nicht für die Elements-Instanz bereitstellen, da dies optional ist.
Erstellen Sie die Elements-Instanz mit dem Client-Geheimnis der CustomerSession. Verwenden Sie dann die Elements-Instanz, um ein Payment Element zu erstellen.
```javascript
// Create the CustomerSession and obtain its clientSecret
const res = await fetch("/create-customer-session", {
method: "POST"
});
const {
customer_session_client_secret: customerSessionClientSecret
} = await res.json();
const elementsOptions = {
mode: 'payment',
amount: 1099,
currency: 'usd',customerSessionClientSecret,
// Fully customizable with appearance API.
appearance: {/*...*/},
};
// Set up Stripe.js and Elements to use in checkout form, passing the client secret
// and CustomerSession's client secret obtained in a previous step
const elements = stripe.elements(elementsOptions);
// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');
```
> Allowing customers to remove their saved payment methods by enabling [payment_method_remove](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features-payment_method_remove) impacts subscriptions that depend on that payment method. Removing the payment method detaches the [PaymentMethod](https://docs.stripe.com/api/payment_methods.md) from the object that represents the customer (either a customer-configured `Account` or a `Customer`).
Bei der Erstellung des ConfirmationToken steuert Stripe.js automatisch die Einstellung [setup_future_usage](https://docs.stripe.com/api/confirmation_tokens/object.md#confirmation_token_object-setup_future_usage) für das ConfirmationToken und [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) für die PaymentMethod, je nachdem, ob die Kundin/der Kunde das Kontrollkästchen aktiviert hat, um die Zahlungsdetails zu speichern.
### Erneute Erfassung der CVC erzwingen
Wenn Sie PaymentIntents verwenden, geben Sie optional `require_cvc_recollection` an, sowohl [beim Erstellen des PaymentIntent](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-card-require_cvc_recollection) als auch [beim Erstellen von Elements](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-paymentMethodOptions-card-require_cvc_recollection). Dadruch müssen Kundinnen und Kunden ihre Prüfziffer/CVC zwingend erneut eingeben, wenn sie eine Kartenzahlung tätigen.
### Auswahl einer gespeicherten Zahlungsmethode erkennen
Um dynamische Inhalte zu steuern, wenn eine gespeicherte Zahlungsmethode ausgewählt wird, überwachen Sie das `change`-Ereignis des Payment Element, das automatisch mit der ausgewählten Zahlungsmethode ausgefüllt wird.
```javascript
paymentElement.on('change', function(event) {
if (event.value.payment_method) {
// Control dynamic content if a saved payment method is selected
}
})
```
## Optional: Zahlungsdetails dynamisch aktualisieren [Client-seitig]
Wenn der/die Kund/in Aktionen durchführt, die die Zahlungsdetails ändern (zum Beispiel das Anwenden eines Rabattcodes), aktualisieren Sie die Elements-Instanz, um die neuen Werte widerzuspiegeln. Bei einigen Zahlungsmethoden, wie Apple Pay und Google Pay, wird der Betrag in der Nutzeroberfläche angezeigt. Stellen Sie daher sicher, dass er immer korrekt und aktuell ist.
#### HTML + JS
```js
async function handleDiscountCode(code) {
// On the server, validate that the discount code is valid and return the new amount
const {newAmount} = await fetch("/apply-discount", {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({code}),
});
elements.update({amount: newAmount});
}
```
#### React
```jsx
function App() {
const [amount, setAmount] = React.useState(1099);
const handleDiscountCode = useCallback(async (code) => {
// On the server, validate that the discount code is valid and return the new amount
const {newAmount} = await fetch("/apply-discount", {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({code}),
});
// Trigger a state change that re-renders the Elements provider with the new amount
setAmount(newAmount);
}, []);
const options = {
mode: 'payment',
amount,
currency: 'usd',
appearance: {/*...*/},
};
return (
);
};
```
## Optional: Optionen für zusätzliche Elemente [Client-seitig]
Das [Elements-Objekt](https://docs.stripe.com/js/elements_object/create_without_intent) akzeptiert zusätzliche Optionen, die die Zahlungserfassung beeinflussen. Basierend auf den angegebenen Optionen zeigt das Payment Element die verfügbaren Zahlungsmethoden an, die Sie aktiviert haben. Erfahren Sie mehr über die [Unterstützung von Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/payment-method-support.md).
Stellen Sie sicher, dass die von Ihnen angegebenen Elements-Optionen (wie `captureMethod`, `setupFutureUsage` und `paymentMethodOptions`) mit den entsprechenden Parametern übereinstimmen, die Sie beim Erstellen und Bestätigen des Intent übergeben. Nicht übereinstimmende Parameter können zu unerwartetem Verhalten oder Fehlern führen.
| Eigentum | Typ | Beschreibung | Erforderlich |
| ---------------------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------ |
| `mode` | - `payment`
- `setup`
- `subscription` | Gibt an, ob das Payment Element mit einem *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods), *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method) oder *Abonnement* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis) verwendet wird. | Ja |
| `currency` | `string` | Die Währung des Betrags, der dem Kunden/der Kundin berechnet werden soll. | Ja |
| `amount` | `number` | Der Betrag, der dem Kunden/der Kundin in Rechnung gestellt werden soll, angezeigt in Apple Pay, Google Pay oder BNPL-Nutzeroberflächen. | Für den Modus `payment` und `subscription` |
| `setupFutureUsage` | - `off_session`
- `on_session` | Gibt an, dass Sie beabsichtigen, zukünftige Zahlungen mit den vom Payment Element erfassten Zahlungsdaten zu tätigen. | Nein |
| `captureMethod` | - `automatic`
- `automatic_async`
- `manual` | Steuert, wann die Gelder vom Kundenkonto erfasst werden. | Nein |
| `onBehalfOf` | `string` | Nur Connect. Die Stripe-Konto-ID, die das Unternehmen des Datensatzes ist. Weitere Informationen dazu, ob diese Option für Ihre Integration relevant ist, finden Sie unter [Use cases](https://docs.stripe.com/connect/charges.md). | Nein |
| `paymentMethodTypes` | `string[]` | Eine Liste der zu rendernden Zahlungsmethodentypen. Sie können dieses Attribut weglassen, um Ihre Zahlungsmethoden im [Stripe-Dashboard](https://dashboard.stripe.com/settings/payment_methods) zu verwalten. | Nein |
| `paymentMethodConfiguration` | `string` | Die [Konfiguration der Zahlungsmethode](https://docs.stripe.com/api/payment_method_configurations.md), die bei der Verwaltung Ihrer Zahlungsmethoden im [Stripe-Dashboard](https://dashboard.stripe.com/settings/payment_methods) verwendet werden soll. Wenn keine Angabe gemacht wird, wird Ihre Standardkonfiguration verwendet. | Nein |
| `paymentMethodCreation` | `manual` | Ermöglicht die Erstellung von PaymentMethods aus der Elements-Instanz mit [stripe.createPaymentMethod](https://docs.stripe.com/js/payment_methods/create_payment_method_elements). | Nein |
| `paymentMethodOptions` | `{us_bank_account: {verification_method: string}}` | Verifizierungsoptionen für die Zahlungsmethode `us_bank_account`. Akzeptiert dieselben Verifizierungsmethoden wie [Payment Intents](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-us_bank_account-verification_method). | Nein |
| `paymentMethodOptions` | `{card: {installments: {enabled: boolean}}}` | Ermöglicht die ggf. manuelle Aktivierung der Nutzeroberfläche zur Auswahl des Karten-Ratenzahlungsplans, wenn Sie Ihre Zahlungsmethoden nicht im [Stripe-Dashboard](https://dashboard.stripe.com/settings/payment_methods) verwalten. Sie müssen `mode='payment'` festlegen *und* `paymentMethodTypes` explizit angeben. Andernfalls wird ein Fehler ausgelöst. Nicht kompatibel mit `paymentMethodCreation='manual'`. | Nein |
| `paymentMethodOptions` | `{[paymentMethod]: {setup_future_usage: string}}` | Ermöglicht es Ihnen, `setup_future_usage` nur für Zahlungsmethoden anzugeben, die die Wiederverwendung unterstützen. Gilt nur, wenn der `mode` `payment` ist. Der Wert für jede Zahlungsmethode muss mit der entsprechenden `payment_method_options[paymentMethod][setup_future_usage]` im PaymentIntent während der Bestätigung übereinstimmen. Unterstützte Zahlungsmethoden und Werte finden Sie in der [Ressource zu Stripe.js](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-paymentMethodOptions). | Nein |
## ConfirmationToken erstellen [Clientseitig]
> #### createPaymentMethod mit einer Legacy-Implementierung verwenden
>
> Wenn Sie eine Legacy-Implementierung nutzen, verwenden Sie möglicherweise die Informationen von `stripe.createPaymentMethod`, um Zahlungen auf dem Server abzuschließen. Wir empfehlen Ihnen, diesen Leitfaden zu befolgen, um auf [Bestätigungstoken umzustellen](https://docs.stripe.com/payments/payment-element/migration-ct.md). Sie können aber auch weiterhin auf unsere alte Dokumentation zugreifen, um [Zahlungen auf dem Server abzuschließen](https://docs.stripe.com/payments/finalize-payments-on-the-server-legacy.md).
Wenn der Kunde/die Kundin Ihr Zahlungsformular absendet, rufen Sie [stripe.createConfirmationToken](https://docs.stripe.com/js/confirmation_tokens/create_confirmation_token) auf, um ein *ConfirmationToken* (ConfirmationTokens help capture data from your client, such as your customer's payment instruments and shipping address, and are used to confirm a PaymentIntent or SetupIntent) zu erstellen, das zur zusätzlichen Validierung oder als zusätzliche Geschäftslogik vor der Zahlungsbestätigung an Ihren Server gesendet wird.
Durch Bestätigung des PaymentIntent wird eine *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) generiert. Sie können die [payment_method](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method)-ID aus der PaymentIntent- Bestätigungsantwort lesen.
> Sie müssen das erstellte ConfirmationTokensofort verwenden, um einen PaymentIntent zu bestätigen. Wird es nicht verwendet, läuft es nach 12 Stunden ab.
#### HTML + JS
```javascript
const form = document.getElementById('payment-form');
const submitBtn = document.getElementById('submit');
const handleError = (error) => {
const messageContainer = document.querySelector('#error-message');
messageContainer.textContent = error.message;
submitBtn.disabled = false;
}
form.addEventListener('submit', async (event) => {
// We don't want to let default form submission happen here,
// which would refresh the page.
event.preventDefault();
// Prevent multiple form submissions
if (submitBtn.disabled) {
return;
}
// Disable form submission while loading
submitBtn.disabled = true;
// Trigger form validation and wallet collection
const {error: submitError} = await elements.submit();
if (submitError) {
handleError(submitError);
return;
}
// Create the ConfirmationToken using the details collected by the Payment Element
// and additional shipping information
const {error, confirmationToken} = await stripe.createConfirmationToken({
elements,
params: {
shipping: {
name: 'Jenny Rosen',
address: {
line1: '1234 Main Street',
city: 'San Francisco',
state: 'CA',
country: 'US',
postal_code: '94111',
},
},
return_url: 'https://example.com/order/123/complete'
}
});
if (error) {
// This point is only reached if there's an immediate error when
// creating the ConfirmationToken. Show the error to your customer (for example, payment details incomplete)
handleError(error);
return;
}
// Create the PaymentIntent
const res = await fetch("/create-confirm-intent", {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({
confirmationTokenId: confirmationToken.id,
}),
});
const data = await res.json();
// Handle any next actions or errors. See the Handle any next actions step for implementation.
handleServerResponse(data);
});
```
#### React
```jsx
import React, {useState} from 'react';
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';
export default function CheckoutForm() {
const stripe = useStripe();
const elements = useElements();
const [errorMessage, setErrorMessage] = useState();
const [loading, setLoading] = useState(false);
const handleError = (error) => {
setLoading(false);
setErrorMessage(error.message);
}
const handleSubmit = async (event) => {
// We don't want to let default form submission happen here,
// which would refresh the page.
event.preventDefault();
if (!stripe) {
// Stripe.js hasn't yet loaded.
// Make sure to disable form submission until Stripe.js has loaded.
return;
}
setLoading(true);
// Trigger form validation and wallet collection
const {error: submitError} = await elements.submit();
if (submitError) {
handleError(submitError);
return;
}
// Create the ConfirmationToken using the details collected by the Payment Element
// and additional shipping information
const {error, confirmationToken} = await stripe.createConfirmationToken({
elements,
params: {
shipping: {
name: 'Jenny Rosen',
address: {
line1: '1234 Main Street',
city: 'San Francisco',
state: 'CA',
country: 'US',
postal_code: '94111',
},
}
}
});
if (error) {
// This point is only reached if there's an immediate error when
// creating the ConfirmationToken. Show the error to your customer (for example, payment details incomplete)
handleError(error);
return;
}
// Create the PaymentIntent
const res = await fetch("/create-confirm-intent", {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({
confirmationTokenId: confirmationToken.id,
}),
});
const data = await res.json();
// Handle any next actions or errors. See the Handle any next actions step for implementation.
handleServerResponse(data);
};
return (
);
}
```
## Optional: Benutzerdefinierte Geschäftslogik einfügen [Serverseitig]
Bevor Sie die Zahlung erstellen und bestätigen, können Sie Ihre eigene Geschäftslogik ausführen. Informationen zu den Zahlungsdetails der Kundin/des Kunden finden Sie in dem von Ihnen erstellten [ConfirmationToken](https://docs.stripe.com/api/confirmation_tokens.md). Wenn Sie das Stripe SDK verwenden, stellen Sie sicher, dass Ihr SDK über die folgenden aktuellen Versionen aufweist:
- `stripe-php v13.15.0`
- `stripe-go v76.22.0`
- `stripe-ruby v10.13.0`
- `stripe-java v24.21.0`
- `stripe-node v14.22.0`
- `stripe-python v8.8.0`
- `stripe-dotnet v43.20.0`
## Zahlung erstellen und an Stripe übermitteln [Serverseitig]
Wenn der Kunde/die Kundin sein/ihr Zahlungsformular absendet, verwenden Sie einen *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods), um die Bestätigung und den Zahlungsvorgang zu vereinfachen. Erstellen Sie einen PaymentIntent auf Ihrem Server, wobei ein `amount` und eine `currency` angegeben werden. In der neuesten Version der API ist die Angabe des Parameters `automatic_payment_methods` optional, da Stripe die Funktion standardmäßig aktiviert. Sie können Zahlungsmethoden über das [Dashboard](https://dashboard.stripe.com/settings/payment_methods) verwalten. Stripe handhabt die Rückgabe geeigneter Zahlungsmethoden basierend auf Faktoren wie Betrag, Währung und Zahlungsablauf der Transaktion. Um zu verhindern, dass böswillige Kunden/Kundinnen ihre eigenen Preise wählen, sollten Sie den Preis immer auf der Serverseite (einer vertrauenswürdigen Umgebung) festlegen und nicht auf dem Client.
Sie können das von Ihrem Client gesendete ConfirmationToken verwenden, um den PaymentIntent in einer einzigen Anfrage zu erstellen und zu bestätigen.
```javascript
const stripe = require("stripe")("<>");
const express = require('express');
const app = express();
app.set('trust proxy', true);
app.use(express.json());
app.use(express.static("."));
app.post('/create-confirm-intent', async (req, res) => {
try {
const intent = await stripe.paymentIntents.create({
confirm: true,
amount: 1099,
currency: 'usd',
// In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
automatic_payment_methods: {enabled: true},
confirmation_token: req.body.confirmationTokenId, // the ConfirmationToken ID sent by your client
});
res.json({
client_secret: intent.client_secret,
status: intent.status
});
} catch (err) {
res.json({
error: err
})
}
});
app.listen(3000, () => {
console.log('Running on port 3000');
});
```
## Nächste Aktionen bearbeiten [Clientseitig]
Wenn der PaymentIntent zusätzliche Aktionen von den Kundinnen/Kunden verlangt, wie z. B. die Authentifizierung mit 3D Secure oder die Weiterleitung an eine andere Website, müssen Sie diese Aktionen auslösen. Mit `stripe.handleNextAction` lösen Sie die Nutzeroberfläche für die Bearbeitung von Kundenaktionen und den Abschluss der Zahlung aus.
#### JavaScript
```javascript
const handleServerResponse = async (response) => {
if (response.error) {
// Show error from server on payment form
} else if (response.status === "requires_action") {
// Use Stripe.js to handle the required next action
const {
error,
paymentIntent
} = await stripe.handleNextAction({
clientSecret: response.clientSecret
});
if (error) {
// Show error from Stripe.js in payment form
} else {
// Actions handled, show success message
}
} else {
// No actions needed, show success message
}
}
```
## Optional: Ereignisse nach Zahlung verarbeiten
Stripe übermittelt ein [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie im Dashboard einen *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) oder eine Partnerlösung, um diese Ereignisse zu empfangen und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kund/innen, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs).
Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnte der Kunde/die Kundin das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist und böswillige Clients könnten die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass asynchrone Ereignisse überwacht werden, hilft Ihnen dies auch dabei, in Zukunft mehr Zahlungsmethoden zu akzeptieren. Hier erhalten Sie Informationen zu den [Unterschieden zwischen allen unterstützten Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide).
- **Manuelles Bearbeiten von Ereignissen im Dashboard**
Verwenden Sie das Dashboard, um [Ihre Testzahlungen im Dashboard anzuzeigen](https://dashboard.stripe.com/test/payments), E-Mail-Belege zu senden, Auszahlungen zu bearbeiten oder fehlgeschlagene Zahlungen erneut zu versuchen.
- **Erstellen eines benutzerdefinierten Webhooks**
[Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI.
- **Integrieren einer vorgefertigten App**
Bearbeiten Sie häufige Unternehmensereignisse, wie z. B.[Automatisierung](https://stripe.partners/?f_category=automation) oder[Marketing und Vertrieb](https://stripe.partners/?f_category=marketing-and-sales), indem Sie eine Partneranwendung integrieren.
# Richten Sie eine Zahlungsmethode ein
> This is a Richten Sie eine Zahlungsmethode ein for when platform is web and type is setup. View the full page at https://docs.stripe.com/payments/finalize-payments-on-the-server?platform=web&type=setup.
> #### Use the Accounts v2 API to represent customers
>
> If your integration uses [customer-configured Accounts](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), replace `Customer` and event references in the code examples with the equivalent Accounts v2 API references. For more information, see [Represent customers with Account objects](https://docs.stripe.com/connect/use-accounts-as-customers.md).
Ein Einrichtungsablauf ermöglicht es Ihnen, eine Zahlungsmethode für zukünftige Zahlungen einzurichten, ohne die Konten Ihrer Kundinnen/Kunden sofort zu belasten. Bei dieser Integration erstellen Sie einen nutzerdefinierten Zahlungsablauf, bei dem Sie das Payment Element rendern, den *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method) erstellen und die Einrichtung von Ihrem Server aus bestätigen.
## Stripe einrichten [Serverseitig]
[Erstellen Sie zunächst ein Stripe-Konto](https://dashboard.stripe.com/register) oder [melden Sie sich an](https://dashboard.stripe.com/login).
Verwenden Sie unsere offiziellen Bibliotheken, um von Ihrer Anwendung aus auf die Stripe API zuzugreifen:
#### 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'
```
## Zahlungsmethoden aktivieren
> Dieser Integrationspfad unterstützt weder BLIK noch vorab autorisierte Lastschriften, die das Automated Clearing Settlement System (ACSS) verwenden. Sie können `customer_balance` auch nicht mit dynamischen Zahlungsmethoden verwenden, wenn der zurückgestellte Intent clientseitig erstellt wird. Der clientseitige Ablauf für zurückgestellte Intents darf keine/n [Kunden/Kundin](https://docs.stripe.com/api/customers/object.md) enthalten und `customer_balance` erfordert eine/n `Kunden/Kundin` auf dem [PaymentIntent](https://docs.stripe.com/api/payment_intents.md). Zur Fehlervermeidung wird es daher ausgeschlossen. Um `customer_balance` zu verwenden, erstellen Sie den `PaymentIntent` serverseitig mit einem/einer `Kunden/Kundin` und geben Sie sein `client_secret` an den Client zurück.
Zeigen Sie Ihre [Einstellungen für Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods) an und aktivieren Sie die Zahlungsmethoden, die Sie unterstützen möchten. Sie müssen mindestens eine Zahlungsmethode aktiviert haben, um einen *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method) zu erstellen.
Standardmäßig aktiviert Stripe Karten und andere gängige Zahlungsmethoden, mit denen Sie mehr Kundinnen und Kunden erreichen können. Wir empfehlen jedoch, zusätzliche Zahlungsmethoden zu aktivieren, die für Ihr Unternehmen und Ihre Kundschaft relevant sind. Weitere Informationen zur Unterstützung von Produkten und Zahlungsmethoden finden Sie auf der Seite [Unterstützte Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) und der [Preisseite](https://stripe.com/pricing/local-payment-methods) für Gebühren.
## Zahlungsdetails erfassen [Client-seitig]
Verwenden Sie das [Payment Element](https://docs.stripe.com/payments/payment-element.md), um in einem iFrame erfasste Zahlungsinformationen sicher über eine HTTPS-Verbindung an Stripe zu senden.
> #### Widersprüchliche iFrames
>
> Vermeiden Sie es, das Payment Element in einem anderen iFrame zu platzieren, da es im Widerspruch zu Zahlungsmethoden steht, die eine Weiterleitung zu einer anderen Seite zur Zahlung erfordern.
Die Adresse Ihrer Bezahlseite muss mit `https://` rather beginnen, nicht mit `http://` for, damit Ihre Integration funktioniert. Sie können Ihre Integration ohne HTTPS testen. Denken Sie jedoch daran, [dieses zu aktivieren](https://docs.stripe.com/security/guide.md#tls), wenn Sie bereit sind, Live-Zahlungen zu akzeptieren.
#### HTML + JS
### Einrichten von Stripe.js
Das Payment Element ist automatisch als Funktion von Stripe.js verfügbar. Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlseite ein, indem Sie es im `head` Ihrer HTML-Datei einfügen. Laden Sie Stripe.js immer direkt von js.stripe.com, um die PCI-Konformität zu gewährleisten. Fügen Sie das Skript nicht in ein Paket ein und hosten Sie selbst keine Kopie davon.
```html
Checkout
```
Erstellen Sie eine Instanz von Stripe mit dem folgenden JavaScript auf Ihrer Bezahlseite:
```javascript
// 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('<>');
```
### Fügen Sie das Payment Element zu Ihrer Checkout-Seite hinzu
Das Payment Element benötigt einen festen Platz auf Ihrer Checkout-Seite. Erstellen Sie in Ihrem Zahlungsformular einen leeren DOM-Knoten (Container) mit einer eindeutigen ID:
```html
```
Nachdem Ihr Formular geladen wurde, erstellen Sie eine Elements-Instanz mit dem Modus ‘setup’. Erstellen Sie dann eine Instanz des Payment Element und verbinden Sie sie mit dem DOM-Knoten des Containers.
```javascript
const options = {mode: 'setup',
currency: 'usd',paymentMethodCreation: 'manual',
// Fully customizable with appearance API.
appearance: {/*...*/},
};
// Set up Stripe.js and Elements to use in checkout formconst elements = stripe.elements(options);
// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');
```
#### Reagieren
### Einrichten von Stripe.js
Installieren Sie [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) und den [Stripe.js-Loader](https://www.npmjs.com/package/@stripe/stripe-js) aus dem öffentlichen npm-Register.
```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```
### Den Elements-Anbieter zu Ihrer Checkout-Seite hinzufügen und konfigurieren
Um die Payment Element-Komponente zu verwenden, schließen Sie die Komponente Ihrer Bezahlseite in einen [Elements-Anbieter](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider) ein. Rufen Sie `loadStripe` mit Ihrem veröffentlichbaren Schlüssel auf und übergeben Sie das zurückgegebene `Promise` an den `Elements`-Anbieter, sowie `mode: 'setup'`.
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';
import SetupForm from './SetupForm';
// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('<>');
function App() {
const options = {mode: 'setup',
currency: 'usd',paymentMethodCreation: 'manual',
// Fully customizable with appearance API.
appearance: {/*...*/},
};
return (
);
};
ReactDOM.render(, document.getElementById('root'));
```
### Payment Element hinzufügen
Verwenden Sie die Komponente `PaymentElement`, um Ihr Formular zu erstellen.
```jsx
import React from 'react';
import {PaymentElement} from '@stripe/react-stripe-js';
const SetupForm = () => {
return (
);
};
export default SetupForm;
```
Das Payment Element rendert ein dynamisches Formular, mit dem Ihr/e Kund/in eine Zahlungsmethode auswählen kann. Das Formular erfasst automatisch alle notwendigen Zahlungsdetails für die vom Kunden/von der Kundin ausgewählte Zahlungsmethode.
Sie können das Payment Element an das Design Ihrer Website anpassen, indem Sie beim Erstellen des `Elements`-Anbieters das [Erscheinungs-Objekt](https://docs.stripe.com/elements/appearance-api.md) an `options` übergeben.
### Adressen einholen
Standardmäßig erfasst das Payment Element nur die erforderlichen Angaben zur Rechnungsadresse. Einige Verhaltensweisen, wie z. B. die [Berechnung der Steuer](https://docs.stripe.com/api/tax/calculations/create.md) oder die Eingabe der Versanddaten, erfordern die vollständige Adresse Ihrer Kundin/Ihres Kunden. Sie können Folgendes tun:
- Verwenden Sie das [Address Element](https://docs.stripe.com/elements/address-element.md), um die Vorteile der Funktionen der automatischen Vervollständigung und Lokalisierung zu nutzen, um die vollständige Adresse Ihrer Kundin oder Ihres Kunden zu erfassen. Dies trägt dazu bei, eine möglichst genaue Steuerberechnung zu gewährleisten.
- Erfassen Sie Adressdaten mit Ihrem eigenen benutzerdefinierten Formular.
## Optional: Anpassen des Layouts [Client-seitig]
Sie können das Layout des Payment Element (Akkordeon oder Registerkarten) an Ihre Checkout-Nutzeroberfläche anpassen. Weitere Informationen zu den einzelnen Eigenschaften finden Sie unter [elements.create](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options).
#### Accordion
Mit der Verwendung der Layout-Funktionen können Sie beginnen, indem Sie beim Erstellen des Payment Element einen `type` und weitere optionale Eigenschaften übergeben:
```javascript
const paymentElement = elements.create('payment', {
layout: {
type: 'accordion',
defaultCollapsed: false,
radios: 'always',
spacedAccordionItems: false
}
});
```
#### Registerkarten
### Legen Sie das Layout fest
Legen Sie den Wert für das Layout auf `tabs` fest. Sie haben außerdem die Möglichkeit, andere Eigenschaften anzugeben, wie z. B.:
```javascript
const paymentElement = elements.create('payment', {
layout: {
type: 'tabs',
defaultCollapsed: false,
}
});
```
Das folgende Bild zeigt dasselbe Payment Element, das mit unterschiedlichen Layout-Konfigurationen gerendert wurde.
Layouts für Payment Element
## Optional: Passen Sie das Erscheinungsbild an [Client-seitig]
Nachdem Sie das Payment Element zu Ihrer Seite hinzugefügt haben, können Sie das Erscheinungsbild an Ihr Design anpassen. Weitere Informationen zum Anpassen des Payment Element finden Sie unter [Elements Appearance API](https://docs.stripe.com/elements/appearance-api.md).
Payment Element anpassen
## Optional: Zahlungsmethoden von Kundinnen und Kunden speichern und abrufen
Sie können das Payment Element so konfigurieren, dass die Zahlungsmethoden Ihrer Kundinnen und Kunden für die zukünftige Verwendung gespeichert werden. In diesem Abschnitt erfahren Sie, wie Sie die neue Funktion für [gespeicherte Zahlungsmethoden](https://docs.stripe.com/payments/save-customer-payment-methods.md) integrieren, mit der das Payment Element Folgendes tun kann:
- Käufer/innen um Zustimmung zur Speicherung einer Zahlungsmethode bitten
- Zahlungsmethoden speichern, wenn Käufer/innen zustimmen
- Gespeicherte Zahlungsmethoden für zukünftige Käufe anzeigen
- [Aktualisieren Sie verlorene oder abgelaufene Karten automatisch](https://docs.stripe.com/payments/cards/overview.md#automatic-card-updates), wenn Käufer/innen sie ersetzen
Zahlungsmethoden speichern.
Verwenden Sie eine zuvor gespeicherte Zahlungsmethode erneut.
### Speichern der Zahlungsmethode im Payment Element aktivieren
Create a [CustomerSession](https://docs.stripe.com/api/customer_sessions/.md) on your server by providing the customer’s ID (using either `customer` for a `Customer` object or `customer_account` for a customer-configured `Account` object) and enabling the [payment_element](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-components-payment_element) component for your session. Configure which saved payment method [features](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features) you want to enable. For instance, enabling [payment_method_save](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features-payment_method_save) displays a checkbox that allows customers to save their payment details for future use.
You can specify `setup_future_usage` on a PaymentIntent or Checkout Session to override the default behavior for saving payment methods. This ensures that you automatically save the payment method for future use, even if the customer doesn’t explicitly choose to save it. If you intend to specify `setup_future_usage`, don’t set `payment_method_save_usage` in the same payment transaction because this causes an integration error.
> #### Use the Accounts v2 API to represent customers
>
> The Accounts v2 API is GA for Connect users, and in public preview for other Stripe users. All Stripe users can enable Accounts v2 [in their Dashboard](https://dashboard.stripe.com/settings/connect/platform-setup). However, when making calls to the Accounts v2 API, preview users need to [specify a preview version](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning).
>
> Für die meisten Anwendungsfälle empfehlen wir, [Ihre Kundinnen und Kunden als vom Kunden bzw. von der Kundin konfigurierte Account-Objekte abzubilden](https://docs.stripe.com/connect/use-accounts-as-customers.md), anstatt das [Kundenobjekt](https://docs.stripe.com/api/customers.md) zu verwenden.
#### Accounts v2
#### Ruby
```ruby
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
Stripe.api_key = '<>'
post '/create-customer-session' do
customer_session = Stripe::CustomerSession.create({
customer_account: {{CUSTOMER_ACCOUNT_ID}},
components: {
payment_element: {
enabled: true,
features: {
payment_method_redisplay: 'enabled',
payment_method_save: 'enabled',
payment_method_save_usage: 'off_session',
payment_method_remove: 'enabled',
},
},
},
})
{
customer_session_client_secret: customer_session.client_secret
}.to_json
end
```
#### Customers v1
#### Ruby
```ruby
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
Stripe.api_key = '<>'
post '/create-customer-session' do
customer_session = Stripe::CustomerSession.create({
customer: {{CUSTOMER_ID}},
components: {
payment_element: {
enabled: true,
features: {
payment_method_redisplay: 'enabled',
payment_method_save: 'enabled',
payment_method_save_usage: 'off_session',
payment_method_remove: 'enabled',
},
},
},
})
{
customer_session_client_secret: customer_session.client_secret
}.to_json
end
```
Ihre Elements-Instanz verwendet das *Client-Geheimnis* (A client secret is used with your publishable key to authenticate a request for a single object. Each client secret is unique to the object it's associated with) der CustomerSession, um auf die gespeicherten Zahlungsmethoden dieses Kunden/dieser Kundin zuzugreifen. [Umgang mit Fehlern](https://docs.stripe.com/error-handling.md), wenn Sie die CustomerSession korrekt erstellen. Wenn ein Fehler auftritt, müssen Sie das Client-Geheimnis der CustomerSession nicht für die Elements-Instanz bereitstellen, da dies optional ist.
Erstellen Sie die Elements-Instanz mit dem Client-Geheimnis der CustomerSession. Verwenden Sie dann die Elements-Instanz, um ein Payment Element zu erstellen.
```javascript
// Create the CustomerSession and obtain its clientSecret
const res = await fetch("/create-customer-session", {
method: "POST"
});
const {
customer_session_client_secret: customerSessionClientSecret
} = await res.json();
const elementsOptions = {
mode: 'setup',
currency: 'usd',customerSessionClientSecret,
// Fully customizable with appearance API.
appearance: {/*...*/},
};
// Set up Stripe.js and Elements to use in checkout form, passing the client secret
// and CustomerSession's client secret obtained in a previous step
const elements = stripe.elements(elementsOptions);
// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');
```
> Allowing customers to remove their saved payment methods by enabling [payment_method_remove](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features-payment_method_remove) impacts subscriptions that depend on that payment method. Removing the payment method detaches the [PaymentMethod](https://docs.stripe.com/api/payment_methods.md) from the object that represents the customer (either a customer-configured `Account` or a `Customer`).
Bei der Erstellung des ConfirmationToken steuert Stripe.js automatisch die Einstellung [setup_future_usage](https://docs.stripe.com/api/confirmation_tokens/object.md#confirmation_token_object-setup_future_usage) für das ConfirmationToken und [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) für die PaymentMethod, je nachdem, ob die Kundin/der Kunde das Kontrollkästchen aktiviert hat, um die Zahlungsdetails zu speichern.
### Auswahl einer gespeicherten Zahlungsmethode erkennen
Um dynamische Inhalte zu steuern, wenn eine gespeicherte Zahlungsmethode ausgewählt wird, überwachen Sie das `change`-Ereignis des Payment Element, das automatisch mit der ausgewählten Zahlungsmethode ausgefüllt wird.
```javascript
paymentElement.on('change', function(event) {
if (event.value.payment_method) {
// Control dynamic content if a saved payment method is selected
}
})
```
## Optional: Optionen für zusätzliche Elemente [Client-seitig]
Das [Elements-Objekt](https://docs.stripe.com/js/elements_object/create_without_intent) akzeptiert zusätzliche Optionen, die die Zahlungserfassung beeinflussen. Basierend auf den angegebenen Optionen zeigt das Payment Element die verfügbaren Zahlungsmethoden an, die Sie aktiviert haben. Erfahren Sie mehr über die [Unterstützung von Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/payment-method-support.md).
Stellen Sie sicher, dass die von Ihnen angegebenen Elements-Optionen (wie `captureMethod`, `setupFutureUsage` und `paymentMethodOptions`) mit den entsprechenden Parametern übereinstimmen, die Sie beim Erstellen und Bestätigen des Intent übergeben. Nicht übereinstimmende Parameter können zu unerwartetem Verhalten oder Fehlern führen.
| Eigentum | Typ | Beschreibung | Erforderlich |
| ---------------------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------ |
| `mode` | - `payment`
- `setup`
- `subscription` | Gibt an, ob das Payment Element mit einem *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods), *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method) oder *Abonnement* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis) verwendet wird. | Ja |
| `currency` | `string` | Die Währung des Betrags, der dem Kunden/der Kundin berechnet werden soll. | Ja |
| `amount` | `number` | Der Betrag, der dem Kunden/der Kundin in Rechnung gestellt werden soll, angezeigt in Apple Pay, Google Pay oder BNPL-Nutzeroberflächen. | Für den Modus `payment` und `subscription` |
| `setupFutureUsage` | - `off_session`
- `on_session` | Gibt an, dass Sie beabsichtigen, zukünftige Zahlungen mit den vom Payment Element erfassten Zahlungsdaten zu tätigen. | Nein |
| `captureMethod` | - `automatic`
- `automatic_async`
- `manual` | Steuert, wann die Gelder vom Kundenkonto erfasst werden. | Nein |
| `onBehalfOf` | `string` | Nur Connect. Die Stripe-Konto-ID, die das Unternehmen des Datensatzes ist. Weitere Informationen dazu, ob diese Option für Ihre Integration relevant ist, finden Sie unter [Use cases](https://docs.stripe.com/connect/charges.md). | Nein |
| `paymentMethodTypes` | `string[]` | Eine Liste der zu rendernden Zahlungsmethodentypen. Sie können dieses Attribut weglassen, um Ihre Zahlungsmethoden im [Stripe-Dashboard](https://dashboard.stripe.com/settings/payment_methods) zu verwalten. | Nein |
| `paymentMethodConfiguration` | `string` | Die [Konfiguration der Zahlungsmethode](https://docs.stripe.com/api/payment_method_configurations.md), die bei der Verwaltung Ihrer Zahlungsmethoden im [Stripe-Dashboard](https://dashboard.stripe.com/settings/payment_methods) verwendet werden soll. Wenn keine Angabe gemacht wird, wird Ihre Standardkonfiguration verwendet. | Nein |
| `paymentMethodCreation` | `manual` | Ermöglicht die Erstellung von PaymentMethods aus der Elements-Instanz mit [stripe.createPaymentMethod](https://docs.stripe.com/js/payment_methods/create_payment_method_elements). | Nein |
| `paymentMethodOptions` | `{us_bank_account: {verification_method: string}}` | Verifizierungsoptionen für die Zahlungsmethode `us_bank_account`. Akzeptiert dieselben Verifizierungsmethoden wie [Payment Intents](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-us_bank_account-verification_method). | Nein |
| `paymentMethodOptions` | `{card: {installments: {enabled: boolean}}}` | Ermöglicht die ggf. manuelle Aktivierung der Nutzeroberfläche zur Auswahl des Karten-Ratenzahlungsplans, wenn Sie Ihre Zahlungsmethoden nicht im [Stripe-Dashboard](https://dashboard.stripe.com/settings/payment_methods) verwalten. Sie müssen `mode='payment'` festlegen *und* `paymentMethodTypes` explizit angeben. Andernfalls wird ein Fehler ausgelöst. Nicht kompatibel mit `paymentMethodCreation='manual'`. | Nein |
| `paymentMethodOptions` | `{[paymentMethod]: {setup_future_usage: string}}` | Ermöglicht es Ihnen, `setup_future_usage` nur für Zahlungsmethoden anzugeben, die die Wiederverwendung unterstützen. Gilt nur, wenn der `mode` `payment` ist. Der Wert für jede Zahlungsmethode muss mit der entsprechenden `payment_method_options[paymentMethod][setup_future_usage]` im PaymentIntent während der Bestätigung übereinstimmen. Unterstützte Zahlungsmethoden und Werte finden Sie in der [Ressource zu Stripe.js](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-paymentMethodOptions). | Nein |
## Kundin/Kunde erstellen [Serverseitig]
To set up a payment method for future payments, you must attach it to an object that represents your customer. When your customer creates an account or has their first transaction with your business, create either a customer-configured [Account](https://docs.stripe.com/api/v2/core/accounts/create.md) object with the Accounts v2 API or a [Customer](https://docs.stripe.com/api/customers/create.md) object with the Customers API.
> #### Use the Accounts v2 API to represent customers
>
> The Accounts v2 API is GA for Connect users, and in public preview for other Stripe users. All Stripe users can enable Accounts v2 [in their Dashboard](https://dashboard.stripe.com/settings/connect/platform-setup). However, when making calls to the Accounts v2 API, preview users need to [specify a preview version](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning).
>
> Für die meisten Anwendungsfälle empfehlen wir, [Ihre Kundinnen und Kunden als vom Kunden bzw. von der Kundin konfigurierte Account-Objekte abzubilden](https://docs.stripe.com/connect/use-accounts-as-customers.md), anstatt das [Kundenobjekt](https://docs.stripe.com/api/customers.md) zu verwenden.
```curl
curl -X POST https://api.stripe.com/v1/customers \
-u "<>:"
```
## ConfirmationToken erstellen [Clientseitig]
> #### createPaymentMethod mit einer Legacy-Implementierung verwenden
>
> Wenn Sie eine Legacy-Implementierung nutzen, verwenden Sie möglicherweise die Informationen von `stripe.createPaymentMethod`, um Zahlungen auf dem Server abzuschließen. Wir empfehlen Ihnen, diesen Leitfaden zu befolgen, um auf [Bestätigungstoken umzustellen](https://docs.stripe.com/payments/payment-element/migration-ct.md). Sie können aber auch weiterhin auf unsere alte Dokumentation zugreifen, um [Zahlungen auf dem Server abzuschließen](https://docs.stripe.com/payments/finalize-payments-on-the-server-legacy.md).
Wenn der Kunde/die Kundin Ihr Zahlungsformular absendet, rufen Sie [stripe.createConfirmationToken](https://docs.stripe.com/js/confirmation_tokens/create_confirmation_token) auf, um ein *ConfirmationToken* (ConfirmationTokens help capture data from your client, such as your customer's payment instruments and shipping address, and are used to confirm a PaymentIntent or SetupIntent) zu erstellen, das zur zusätzlichen Validierung oder als zusätzliche Geschäftslogik vor der Zahlungsbestätigung an Ihren Server gesendet wird.
Durch Bestätigung des SetupIntent wird eine *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) generiert. Sie können die [payment_method](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-payment_method)-ID aus der SetupIntent- Bestätigungsantwort lesen.
> Sie müssen das erstellte ConfirmationTokensofort verwenden, um einen SetupIntent zu bestätigen. Wird es nicht verwendet, läuft es nach 12 Stunden ab.
#### HTML + JS
```javascript
const form = document.getElementById('payment-form');
const submitBtn = document.getElementById('submit');
const handleError = (error) => {
const messageContainer = document.querySelector('#error-message');
messageContainer.textContent = error.message;
submitBtn.disabled = false;
}
form.addEventListener('submit', async (event) => {
// We don't want to let default form submission happen here,
// which would refresh the page.
event.preventDefault();
// Prevent multiple form submissions
if (submitBtn.disabled) {
return;
}
// Disable form submission while loading
submitBtn.disabled = true;
// Trigger form validation and wallet collection
const {error: submitError} = await elements.submit();
if (submitError) {
handleError(submitError);
return;
}
// Create the ConfirmationToken using the details collected by the Payment Element
// and additional shipping information
const {error, confirmationToken} = await stripe.createConfirmationToken({
elements,
params: {
return_url: 'https://example.com/order/123/complete'
}
});
if (error) {
// This point is only reached if there's an immediate error when
// creating the ConfirmationToken. Show the error to your customer (for example, payment details incomplete)
handleError(error);
return;
}
// Create the SetupIntent
const res = await fetch("/create-confirm-intent", {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({
confirmationTokenId: confirmationToken.id,
}),
});
const data = await res.json();
// Handle any next actions or errors. See the Handle any next actions step for implementation.
handleServerResponse(data);
});
```
#### React
```jsx
import React, {useState} from 'react';
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';
export default function CheckoutForm() {
const stripe = useStripe();
const elements = useElements();
const [errorMessage, setErrorMessage] = useState();
const [loading, setLoading] = useState(false);
const handleError = (error) => {
setLoading(false);
setErrorMessage(error.message);
}
const handleSubmit = async (event) => {
// We don't want to let default form submission happen here,
// which would refresh the page.
event.preventDefault();
if (!stripe) {
// Stripe.js hasn't yet loaded.
// Make sure to disable form submission until Stripe.js has loaded.
return;
}
setLoading(true);
// Trigger form validation and wallet collection
const {error: submitError} = await elements.submit();
if (submitError) {
handleError(submitError);
return;
}
// Create the ConfirmationToken using the details collected by the Payment Element
// and additional shipping information
const {error, confirmationToken} = await stripe.createConfirmationToken({
elements,
params: {
shipping: {
name: 'Jenny Rosen',
address: {
line1: '1234 Main Street',
city: 'San Francisco',
state: 'CA',
country: 'US',
postal_code: '94111',
},
}
}
});
if (error) {
// This point is only reached if there's an immediate error when
// creating the ConfirmationToken. Show the error to your customer (for example, payment details incomplete)
handleError(error);
return;
}
// Create the SetupIntent
const res = await fetch("/create-confirm-intent", {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({
confirmationTokenId: confirmationToken.id,
}),
});
const data = await res.json();
// Handle any next actions or errors. See the Handle any next actions step for implementation.
handleServerResponse(data);
};
return (
);
}
```
## Übermitteln Sie die Zahlungsdetails an Stripe [Serverseitig]
Wenn der Kunde/die Kundin Ihr Zahlungsformular übermittelt, erstellen Sie einen *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method) auf Ihrem Server. Zahlungsmethoden können Sie über das [Dashboard](https://dashboard.stripe.com/settings/payment_methods) verwalten. Stripe handhabt die Rückgabe geeigneter Zahlungsmethoden basierend auf Faktoren wie Betrag, Währung und Zahlungsablauf der Transaktion.
Sie können die von Ihrem Client gesendete PaymentMethod verwenden, um den SetupIntent in einer einzigen Anfrage zu erstellen und zu bestätigen.
```javascript
const stripe = require('stripe')('<>');
const express = require('express');
const app = express();
app.set('trust proxy', true);
app.use(express.json());
app.use(express.static("."));
app.post('/create-confirm-intent', async (req, res) => {
try {
const intent = await stripe.setupIntents.create({
confirm: true,
customer: req.cookies['customer'], // the Customer ID you previously created
// In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
automatic_payment_methods: {enabled: true},
confirmation_token: req.body.confirmationTokenId
});
res.json({
client_secret: intent.client_secret,
status: intent.status
});
} catch (err) {
res.json({
error: err
})
}
});
app.listen(3000, () => {
console.log('Running on port 3000');
});
```
## Nächste Aktionen bearbeiten [Clientseitig]
Wenn der SetupIntent zusätzliche Aktionen von den Kundinnen/Kunden verlangt, wie z. B. die Authentifizierung mit 3D Secure oder die Weiterleitung an eine andere Website, müssen Sie diese Aktionen auslösen. Mit `stripe.handleNextAction` lösen Sie die Nutzeroberfläche für die Bearbeitung von Kundenaktionen und den Abschluss der Einrichtung aus.
#### JavaScript
```javascript
const handleServerResponse = async (response) => {
if (response.error) {
// Show error from server in payment setup form
} else if (response.status === "requires_action") {
// Use Stripe.js to handle the required next action
const {
error,
setupIntent
} = await stripe.handleNextAction({
clientSecret: response.clientSecret
});
if (error) {
// Show error from Stripe.js in payment setup form
} else {
// Actions handled, show success message
}
} else {
// No actions needed, show success message
}
}
```
## Die gespeicherte Zahlungsmethode später belasten [Serverseitig]
> `bancontact` und `ideal` sind standardmäßig einmalige Zahlungsmethoden. Bei der Einrichtung für die zukünftige Nutzung wird eine wiederverwendbare Zahlungsmethode vom Typ `sepa_debit` generiert. Sie müssen also `sepa_debit` verwenden, um gespeicherte Zahlungsmethoden abzufragen.
> #### Compliance
>
> Sie sind für die Einhaltung aller geltenden Gesetze, Vorschriften und Netzwerkregeln verantwortlich, wenn Sie die Zahlungsdaten von Kundinnen und Kunden speichern. Wenn Sie Ihren Endkundinnen und Endkunden zuvor genutzte Zahlungsmethoden für zukünftige Einkäufe anzeigen, dürfen Sie nur Zahlungsmethoden auflisten, für die Sie bereits eine kundenseitige Zustimmung eingeholt haben, dank der Sie die Details der Zahlungsmethode für diese spezifische zukünftige Verwendung speichern können. Verwenden Sie den Parameter [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay), um zwischen Zahlungsmethoden zu unterscheiden, die mit Kundinnen und Kunden verknüpft sind und Ihren Endkundinnen und Endkunden als gespeicherte Zahlungsmethode für zukünftige Einkäufe angezeigt werden können oder nicht.
To find a payment method to charge, list the payment methods associated with your customer. This example lists cards but you can list any supported [type](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-type).
#### Accounts v2
```curl
curl -G https://api.stripe.com/v1/payment_methods \
-u "<>:" \
-d "customer_account={{CUSTOMERACCOUNT_ID}}" \
-d type=card
```
#### Customers v1
```curl
curl -G https://api.stripe.com/v1/payment_methods \
-u "<>:" \
-d "customer={{CUSTOMER_ID}}" \
-d type=card
```
When you’re ready to charge your customer *off-session* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information), use the customer’s ID and the `PaymentMethod` ID to create a `PaymentIntent` with the amount and currency of the payment. Set a few other parameters to make the off-session payment:
- Set [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) to `true` to indicate that the customer isn’t in your checkout flow during a payment attempt and can’t fulfill an authentication request made by a partner, such as a card issuer, bank, or other payment institution. If, during your checkout flow, a partner requests authentication, Stripe requests exemptions using customer information from a previous *on-session* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method) transaction. If the conditions for exemption aren’t met, the `PaymentIntent` might throw an error.
- Set the value of the `PaymentIntent`’s [confirm](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) property to true, which causes confirmation to occur immediately when the `PaymentIntent` is created.
- Set [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) to the `PaymentMethod`’s ID.
- Depending on how you represent customers in your integration, set either [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account) to the ID of the customer-configured `Account` or [customer](https://docs.stripe.com/api.md#create_payment_intent-customer) to the ID of the `Customer`.
> #### Use the Accounts v2 API to represent customers
>
> The Accounts v2 API is GA for Connect users, and in public preview for other Stripe users. All Stripe users can enable Accounts v2 [in their Dashboard](https://dashboard.stripe.com/settings/connect/platform-setup). However, when making calls to the Accounts v2 API, preview users need to [specify a preview version](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning).
>
> Für die meisten Anwendungsfälle empfehlen wir, [Ihre Kundinnen und Kunden als vom Kunden bzw. von der Kundin konfigurierte Account-Objekte abzubilden](https://docs.stripe.com/connect/use-accounts-as-customers.md), anstatt das [Kundenobjekt](https://docs.stripe.com/api/customers.md) zu verwenden.
#### Accounts v2
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d "automatic_payment_methods[enabled]=true" \
-d "customer_account={{CUSTOMERACCOUNT_ID}}" \
-d payment_method={{PAYMENT_METHOD_ID}} \
--data-urlencode "return_url=https://example.com/order/123/complete" \
-d off_session=true \
-d confirm=true
```
#### Customers v1
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d "automatic_payment_methods[enabled]=true" \
-d "customer={{CUSTOMER_ID}}" \
-d payment_method={{PAYMENT_METHOD_ID}} \
--data-urlencode "return_url=https://example.com/order/123/complete" \
-d off_session=true \
-d confirm=true
```
Schlägt ein Zahlungsversuch fehl, schlägt die Anfrage ebenfalls mit einem 402 HTTP-Statuscode fehl, und der Status des PaymentIntent ist *requires\_payment\_method* (This status appears as "requires_source" in API versions before 2019-02-11). Sie müssen Ihre Kundinnen/Kunden auffordern, zu Ihrer Anwendung zurückzukehren (z. B. per E-Mail oder In-App-Benachrichtigung), um die Zahlung abzuschließen.
Überprüfen Sie den Code des von der Stripe-API-Bibliothek ausgelösten [Fehlers](https://docs.stripe.com/api/errors/handling.md). Wenn die Zahlung aufgrund eines Ablehnungscodes vom Typ [authentication_required](https://docs.stripe.com/declines/codes.md) fehlgeschlagen ist, verwenden Sie das Client-Geheimnis des abgelehnten PaymentIntent mit confirmPayment, damit die Kundinnen/Kunden die Zahlung authentifizieren können.
```javascript
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const {error} = await stripe.confirmPayment({
// The client secret of the PaymentIntent
clientSecret,
confirmParams: {
return_url: 'https://example.com/order/123/complete',
},
});
if (error) {
// This point will only be reached if there is an immediate error when
// confirming the payment. Show error to your customer (for example, payment
// details incomplete)
const messageContainer = document.querySelector('#error-message');
messageContainer.textContent = error.message;
} else {
// Your customer will be redirected to your `return_url`. For some payment
// methods like iDEAL, your customer will be redirected to an intermediate
// site first to authorize the payment, then redirected to the `return_url`.
}
});
```
> Für die Durchführung von `stripe.confirmPayment` werden möglicherweise einige Sekunden benötigt. Während dieser Zeit sollten Sie Ihr Formular deaktivieren, damit keine erneute Absendung erfolgen kann. Zeigen Sie stattdessen ein Wartesymbol an, wie beispielsweise eine Sanduhr. Tritt ein Fehler auf, teilen Sie dies der Kundin/dem Kunden mit, reaktivieren Sie das Formular und blenden Sie das Wartesymbol aus. Falls die Kundin/der Kunde weitere Schritte (z. B. eine Authentifizierung) für den Abschluss der Zahlung durchführen muss, begleitet sie Stripe.js bei diesem Vorgang.
Wenn die Zahlung aus anderen Gründen fehlgeschlagen ist, z. B. wegen unzureichender Deckung, verweisen Sie Ihre Kundinnen/Kunden auf eine Zahlungsseite, um eine neue Zahlungsmethode einzugeben. Versuchen Sie die Zahlung mit den neuen Zahlungsdetails erneut durchzuführen und verwenden Sie hierfür den bestehenden PaymentIntent.
# Abonnement erstellen
> This is a Abonnement erstellen for when platform is web and type is subscription. View the full page at https://docs.stripe.com/payments/finalize-payments-on-the-server?platform=web&type=subscription.
> #### Use the Accounts v2 API to represent customers
>
> If your integration uses [customer-configured Accounts](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), replace `Customer` and event references in the code examples with the equivalent Accounts v2 API references. For more information, see [Represent customers with Account objects](https://docs.stripe.com/connect/use-accounts-as-customers.md).
Bei *Abonnements* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis) handelt es sich um ein Preismodell, bei dem Nutzer/innen wiederkehrende Zahlungen für die Nutzung eines Produkts tätigen. In diesem Integrationsleitfaden erstellen Sie einen nutzerdefinierten Zahlungsablauf, bei dem Sie das Payment Element rendern, ein Abonnement erstellen und das Abonnement von Ihrem Server aus bestätigen.
## Stripe einrichten [Serverseitig]
[Erstellen Sie zunächst ein Stripe-Konto](https://dashboard.stripe.com/register) oder [melden Sie sich an](https://dashboard.stripe.com/login).
Verwenden Sie unsere offiziellen Bibliotheken, um von Ihrer Anwendung aus auf die Stripe API zuzugreifen:
#### 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'
```
## Zahlungsmethoden aktivieren
> Dieser Integrationspfad unterstützt weder BLIK noch vorab autorisierte Lastschriften, die das Automated Clearing Settlement System (ACSS) verwenden. Sie können `customer_balance` auch nicht mit dynamischen Zahlungsmethoden verwenden, wenn der zurückgestellte Intent clientseitig erstellt wird. Der clientseitige Ablauf für zurückgestellte Intents darf keine/n [Kunden/Kundin](https://docs.stripe.com/api/customers/object.md) enthalten und `customer_balance` erfordert eine/n `Kunden/Kundin` auf dem [PaymentIntent](https://docs.stripe.com/api/payment_intents.md). Zur Fehlervermeidung wird es daher ausgeschlossen. Um `customer_balance` zu verwenden, erstellen Sie den `PaymentIntent` serverseitig mit einem/einer `Kunden/Kundin` und geben Sie sein `client_secret` an den Client zurück.
Zeigen Sie Ihre [Einstellungen für Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods) an und aktivieren Sie die Zahlungsmethoden, die Sie unterstützen möchten. Sie müssen mindestens eine Zahlungsmethode aktiviert haben, um einen *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) zu erstellen.
Standardmäßig aktiviert Stripe Karten und andere gängige Zahlungsmethoden, mit denen Sie mehr Kundinnen und Kunden erreichen können. Wir empfehlen jedoch, zusätzliche Zahlungsmethoden zu aktivieren, die für Ihr Unternehmen und Ihre Kundschaft relevant sind. Weitere Informationen zur Unterstützung von Produkten und Zahlungsmethoden finden Sie auf der Seite [Unterstützte Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) und der [Preisseite](https://stripe.com/pricing/local-payment-methods) für Gebühren.
Konfigurieren Sie für Abonnements Ihre [Rechnungseinstellungen](https://dashboard.stripe.com/settings/billing/invoice) und unterstützten Zahlungsmethoden. Um Unstimmigkeiten und Fehler zu vermeiden, müssen Ihre Rechnungseinstellungen mit Ihren Payment Element-Einstellungen übereinstimmen.
## Zahlungsdetails erfassen [Client-seitig]
Verwenden Sie das [Payment Element](https://docs.stripe.com/payments/payment-element.md), um in einem iFrame erfasste Zahlungsinformationen sicher über eine HTTPS-Verbindung an Stripe zu senden.
> #### Widersprüchliche iFrames
>
> Vermeiden Sie es, das Payment Element in einem anderen iFrame zu platzieren, da es im Widerspruch zu Zahlungsmethoden steht, die eine Weiterleitung zu einer anderen Seite zur Zahlung erfordern.
Die Adresse Ihrer Bezahlseite muss mit `https://` rather beginnen, nicht mit `http://` for, damit Ihre Integration funktioniert. Sie können Ihre Integration ohne HTTPS testen. Denken Sie jedoch daran, [dieses zu aktivieren](https://docs.stripe.com/security/guide.md#tls), wenn Sie bereit sind, Live-Zahlungen zu akzeptieren.
#### HTML + JS
### Einrichten von Stripe.js
Das Payment Element ist automatisch als Funktion von Stripe.js verfügbar. Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlseite ein, indem Sie es im `head` Ihrer HTML-Datei einfügen. Laden Sie Stripe.js immer direkt von js.stripe.com, um die PCI-Konformität zu gewährleisten. Fügen Sie das Skript nicht in ein Paket ein und hosten Sie selbst keine Kopie davon.
```html
Checkout
```
Erstellen Sie eine Instanz von Stripe mit dem folgenden JavaScript auf Ihrer Bezahlseite:
```javascript
// 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('<>');
```
### Fügen Sie das Payment Element zu Ihrer Checkout-Seite hinzu
Das Payment Element benötigt einen festen Platz auf Ihrer Checkout-Seite. Erstellen Sie in Ihrem Zahlungsformular einen leeren DOM-Knoten (Container) mit einer eindeutigen ID:
```html
```
Nachdem Ihr Formular geladen wurde, erstellen Sie eine Elements-Instanz mit dem Modus, dem Betrag und der Währung. Diese Werte bestimmen, welche Zahlungsmethoden das Element Ihren Kundinnen und Kunden anzeigt.
Erstellen Sie dann eine Instanz des Payment Element und verbinden Sie sie mit dem Container DOM-Knoten.
> Der an das Payment Element übergebene `amount` sollte widerspiegeln, welcher Betrag dem Konto des Kunden/der Kundin sofort belastet wird. Dies kann entweder die erste Rate des Abonnements oder `0` sein, wenn das Abonnement einen [Testzeitraum](https://docs.stripe.com/billing/subscriptions/trials.md) hat.
```javascript
const options = {mode:'subscription',
amount: 1099,
currency: 'usd',paymentMethodCreation: 'manual',
// Fully customizable with appearance API.
appearance: {/*...*/},
};
// Set up Stripe.js and Elements to use in checkout formconst elements = stripe.elements(options);
// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');
```
#### Reagieren
### Einrichten von Stripe.js
Installieren Sie [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) und den [Stripe.js-Loader](https://www.npmjs.com/package/@stripe/stripe-js) aus dem öffentlichen npm-Register.
```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```
### Den Elements-Anbieter zu Ihrer Checkout-Seite hinzufügen und konfigurieren
Um die Payment Element-Komponente zu verwenden, schließen Sie die Komponente Ihrer Bezahlseite in einen [Elements-Anbieter](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider) ein. Rufen Sie `loadStripe` mit Ihrem veröffentlichbaren Schlüssel auf und übergeben Sie das zurückgegebene `Promise` an den `Elements`-Anbieter.
Der Anbieter `Elements` akzeptiert auch den Modus, den Betrag und die Währung. Diese Werte bestimmen, welche Zahlungsmethoden Ihren Kund/innen angezeigt werden.
> Der an das Payment Element übergebene `amount` sollte widerspiegeln, welcher Betrag dem Konto des Kunden/der Kundin sofort belastet wird. Dies kann entweder die erste Rate des Abonnements oder `0` sein, wenn das Abonnement einen [Testzeitraum](https://docs.stripe.com/billing/subscriptions/trials.md) hat.
```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('<>');
function App() {
const options = {mode:'subscription',
amount: 1099,
currency: 'usd',paymentMethodCreation: 'manual',
// Fully customizable with appearance API.
appearance: {/*...*/},
};
return (
);
};
ReactDOM.render(, document.getElementById('root'));
```
### Payment Element hinzufügen
Verwenden Sie die Komponente `PaymentElement`, um Ihr Formular zu erstellen.
```jsx
import React from 'react';
import {PaymentElement} from '@stripe/react-stripe-js';
const CheckoutForm = () => {
return (
);
};
export default CheckoutForm;
```
Das Payment Element rendert ein dynamisches Formular, mit dem Ihr/e Kund/in eine Zahlungsmethode auswählen kann. Das Formular erfasst automatisch alle notwendigen Zahlungsdetails für die vom Kunden/von der Kundin ausgewählte Zahlungsmethode.
Sie können das Payment Element an das Design Ihrer Website anpassen, indem Sie beim Erstellen des `Elements`-Anbieters das [Erscheinungs-Objekt](https://docs.stripe.com/elements/appearance-api.md) an `options` übergeben.
### Adressen einholen
Standardmäßig erfasst das Payment Element nur die erforderlichen Angaben zur Rechnungsadresse. Einige Verhaltensweisen, wie z. B. die [Berechnung der Steuer](https://docs.stripe.com/api/tax/calculations/create.md) oder die Eingabe der Versanddaten, erfordern die vollständige Adresse Ihrer Kundin/Ihres Kunden. Sie können Folgendes tun:
- Verwenden Sie das [Address Element](https://docs.stripe.com/elements/address-element.md), um die Vorteile der Funktionen der automatischen Vervollständigung und Lokalisierung zu nutzen, um die vollständige Adresse Ihrer Kundin oder Ihres Kunden zu erfassen. Dies trägt dazu bei, eine möglichst genaue Steuerberechnung zu gewährleisten.
- Erfassen Sie Adressdaten mit Ihrem eigenen benutzerdefinierten Formular.
## Optional: Anpassen des Layouts [Client-seitig]
Sie können das Layout des Payment Element (Akkordeon oder Registerkarten) an Ihre Checkout-Nutzeroberfläche anpassen. Weitere Informationen zu den einzelnen Eigenschaften finden Sie unter [elements.create](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options).
#### Accordion
Mit der Verwendung der Layout-Funktionen können Sie beginnen, indem Sie beim Erstellen des Payment Element einen `type` und weitere optionale Eigenschaften übergeben:
```javascript
const paymentElement = elements.create('payment', {
layout: {
type: 'accordion',
defaultCollapsed: false,
radios: 'always',
spacedAccordionItems: false
}
});
```
#### Registerkarten
### Legen Sie das Layout fest
Legen Sie den Wert für das Layout auf `tabs` fest. Sie haben außerdem die Möglichkeit, andere Eigenschaften anzugeben, wie z. B.:
```javascript
const paymentElement = elements.create('payment', {
layout: {
type: 'tabs',
defaultCollapsed: false,
}
});
```
Das folgende Bild zeigt dasselbe Payment Element, das mit unterschiedlichen Layout-Konfigurationen gerendert wurde.
Layouts für Payment Element
## Optional: Passen Sie das Erscheinungsbild an [Client-seitig]
Nachdem Sie das Payment Element zu Ihrer Seite hinzugefügt haben, können Sie das Erscheinungsbild an Ihr Design anpassen. Weitere Informationen zum Anpassen des Payment Element finden Sie unter [Elements Appearance API](https://docs.stripe.com/elements/appearance-api.md).
Payment Element anpassen
## Optional: Zahlungsmethoden von Kundinnen und Kunden speichern und abrufen
Sie können das Payment Element so konfigurieren, dass die Zahlungsmethoden Ihrer Kundinnen und Kunden für die zukünftige Verwendung gespeichert werden. In diesem Abschnitt erfahren Sie, wie Sie die neue Funktion für [gespeicherte Zahlungsmethoden](https://docs.stripe.com/payments/save-customer-payment-methods.md) integrieren, mit der das Payment Element Folgendes tun kann:
- Käufer/innen um Zustimmung zur Speicherung einer Zahlungsmethode bitten
- Zahlungsmethoden speichern, wenn Käufer/innen zustimmen
- Gespeicherte Zahlungsmethoden für zukünftige Käufe anzeigen
- [Aktualisieren Sie verlorene oder abgelaufene Karten automatisch](https://docs.stripe.com/payments/cards/overview.md#automatic-card-updates), wenn Käufer/innen sie ersetzen
Zahlungsmethoden speichern.
Verwenden Sie eine zuvor gespeicherte Zahlungsmethode erneut.
### Speichern der Zahlungsmethode im Payment Element aktivieren
Create a [CustomerSession](https://docs.stripe.com/api/customer_sessions/.md) on your server by providing the customer’s ID (using either `customer` for a `Customer` object or `customer_account` for a customer-configured `Account` object) and enabling the [payment_element](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-components-payment_element) component for your session. Configure which saved payment method [features](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features) you want to enable. For instance, enabling [payment_method_save](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features-payment_method_save) displays a checkbox that allows customers to save their payment details for future use.
You can specify `setup_future_usage` on a PaymentIntent or Checkout Session to override the default behavior for saving payment methods. This ensures that you automatically save the payment method for future use, even if the customer doesn’t explicitly choose to save it. If you intend to specify `setup_future_usage`, don’t set `payment_method_save_usage` in the same payment transaction because this causes an integration error.
> #### Use the Accounts v2 API to represent customers
>
> The Accounts v2 API is GA for Connect users, and in public preview for other Stripe users. All Stripe users can enable Accounts v2 [in their Dashboard](https://dashboard.stripe.com/settings/connect/platform-setup). However, when making calls to the Accounts v2 API, preview users need to [specify a preview version](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning).
>
> Für die meisten Anwendungsfälle empfehlen wir, [Ihre Kundinnen und Kunden als vom Kunden bzw. von der Kundin konfigurierte Account-Objekte abzubilden](https://docs.stripe.com/connect/use-accounts-as-customers.md), anstatt das [Kundenobjekt](https://docs.stripe.com/api/customers.md) zu verwenden.
#### Accounts v2
#### Ruby
```ruby
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
Stripe.api_key = '<>'
post '/create-customer-session' do
customer_session = Stripe::CustomerSession.create({
customer_account: {{CUSTOMER_ACCOUNT_ID}},
components: {
payment_element: {
enabled: true,
features: {
payment_method_redisplay: 'enabled',
payment_method_save: 'enabled',
payment_method_save_usage: 'off_session',
payment_method_remove: 'enabled',
},
},
},
})
{
customer_session_client_secret: customer_session.client_secret
}.to_json
end
```
#### Customers v1
#### Ruby
```ruby
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
Stripe.api_key = '<>'
post '/create-customer-session' do
customer_session = Stripe::CustomerSession.create({
customer: {{CUSTOMER_ID}},
components: {
payment_element: {
enabled: true,
features: {
payment_method_redisplay: 'enabled',
payment_method_save: 'enabled',
payment_method_save_usage: 'off_session',
payment_method_remove: 'enabled',
},
},
},
})
{
customer_session_client_secret: customer_session.client_secret
}.to_json
end
```
Ihre Elements-Instanz verwendet das *Client-Geheimnis* (A client secret is used with your publishable key to authenticate a request for a single object. Each client secret is unique to the object it's associated with) der CustomerSession, um auf die gespeicherten Zahlungsmethoden dieses Kunden/dieser Kundin zuzugreifen. [Umgang mit Fehlern](https://docs.stripe.com/error-handling.md), wenn Sie die CustomerSession korrekt erstellen. Wenn ein Fehler auftritt, müssen Sie das Client-Geheimnis der CustomerSession nicht für die Elements-Instanz bereitstellen, da dies optional ist.
Erstellen Sie die Elements-Instanz mit dem Client-Geheimnis der CustomerSession. Verwenden Sie dann die Elements-Instanz, um ein Payment Element zu erstellen.
```javascript
// Create the CustomerSession and obtain its clientSecret
const res = await fetch("/create-customer-session", {
method: "POST"
});
const {
customer_session_client_secret: customerSessionClientSecret
} = await res.json();
const elementsOptions = {
mode: 'payment',
amount: 1099,
currency: 'usd',customerSessionClientSecret,
// Fully customizable with appearance API.
appearance: {/*...*/},
};
// Set up Stripe.js and Elements to use in checkout form, passing the client secret
// and CustomerSession's client secret obtained in a previous step
const elements = stripe.elements(elementsOptions);
// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');
```
> Allowing customers to remove their saved payment methods by enabling [payment_method_remove](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features-payment_method_remove) impacts subscriptions that depend on that payment method. Removing the payment method detaches the [PaymentMethod](https://docs.stripe.com/api/payment_methods.md) from the object that represents the customer (either a customer-configured `Account` or a `Customer`).
Bei der Erstellung des ConfirmationToken steuert Stripe.js automatisch die Einstellung [setup_future_usage](https://docs.stripe.com/api/confirmation_tokens/object.md#confirmation_token_object-setup_future_usage) für das ConfirmationToken und [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) für die PaymentMethod, je nachdem, ob die Kundin/der Kunde das Kontrollkästchen aktiviert hat, um die Zahlungsdetails zu speichern.
### Erneute Erfassung der CVC erzwingen
Wenn Sie PaymentIntents verwenden, geben Sie optional `require_cvc_recollection` an, sowohl [beim Erstellen des PaymentIntent](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-card-require_cvc_recollection) als auch [beim Erstellen von Elements](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-paymentMethodOptions-card-require_cvc_recollection). Dadruch müssen Kundinnen und Kunden ihre Prüfziffer/CVC zwingend erneut eingeben, wenn sie eine Kartenzahlung tätigen.
### Auswahl einer gespeicherten Zahlungsmethode erkennen
Um dynamische Inhalte zu steuern, wenn eine gespeicherte Zahlungsmethode ausgewählt wird, überwachen Sie das `change`-Ereignis des Payment Element, das automatisch mit der ausgewählten Zahlungsmethode ausgefüllt wird.
```javascript
paymentElement.on('change', function(event) {
if (event.value.payment_method) {
// Control dynamic content if a saved payment method is selected
}
})
```
## Optional: Zahlungsdetails dynamisch aktualisieren [Client-seitig]
Wenn der/die Kund/in Aktionen durchführt, die die Zahlungsdetails ändern (zum Beispiel das Anwenden eines Rabattcodes), aktualisieren Sie die Elements-Instanz, um die neuen Werte widerzuspiegeln. Bei einigen Zahlungsmethoden, wie Apple Pay und Google Pay, wird der Betrag in der Nutzeroberfläche angezeigt. Stellen Sie daher sicher, dass er immer korrekt und aktuell ist.
#### HTML + JS
```js
async function handleDiscountCode(code) {
// On the server, validate that the discount code is valid and return the new amount
const {newAmount} = await fetch("/apply-discount", {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({code}),
});
elements.update({amount: newAmount});
}
```
#### React
```jsx
function App() {
const [amount, setAmount] = React.useState(1099);
const handleDiscountCode = useCallback(async (code) => {
// On the server, validate that the discount code is valid and return the new amount
const {newAmount} = await fetch("/apply-discount", {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({code}),
});
// Trigger a state change that re-renders the Elements provider with the new amount
setAmount(newAmount);
}, []);
const options = {
mode: 'payment',
amount,
currency: 'usd',
appearance: {/*...*/},
};
return (
);
};
```
## Optional: Optionen für zusätzliche Elemente [Client-seitig]
Das [Elements-Objekt](https://docs.stripe.com/js/elements_object/create_without_intent) akzeptiert zusätzliche Optionen, die die Zahlungserfassung beeinflussen. Basierend auf den angegebenen Optionen zeigt das Payment Element die verfügbaren Zahlungsmethoden an, die Sie aktiviert haben. Erfahren Sie mehr über die [Unterstützung von Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/payment-method-support.md).
Stellen Sie sicher, dass die von Ihnen angegebenen Elements-Optionen (wie `captureMethod`, `setupFutureUsage` und `paymentMethodOptions`) mit den entsprechenden Parametern übereinstimmen, die Sie beim Erstellen und Bestätigen des Intent übergeben. Nicht übereinstimmende Parameter können zu unerwartetem Verhalten oder Fehlern führen.
| Eigentum | Typ | Beschreibung | Erforderlich |
| ---------------------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------ |
| `mode` | - `payment`
- `setup`
- `subscription` | Gibt an, ob das Payment Element mit einem *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods), *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method) oder *Abonnement* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis) verwendet wird. | Ja |
| `currency` | `string` | Die Währung des Betrags, der dem Kunden/der Kundin berechnet werden soll. | Ja |
| `amount` | `number` | Der Betrag, der dem Kunden/der Kundin in Rechnung gestellt werden soll, angezeigt in Apple Pay, Google Pay oder BNPL-Nutzeroberflächen. | Für den Modus `payment` und `subscription` |
| `setupFutureUsage` | - `off_session`
- `on_session` | Gibt an, dass Sie beabsichtigen, zukünftige Zahlungen mit den vom Payment Element erfassten Zahlungsdaten zu tätigen. | Nein |
| `captureMethod` | - `automatic`
- `automatic_async`
- `manual` | Steuert, wann die Gelder vom Kundenkonto erfasst werden. | Nein |
| `onBehalfOf` | `string` | Nur Connect. Die Stripe-Konto-ID, die das Unternehmen des Datensatzes ist. Weitere Informationen dazu, ob diese Option für Ihre Integration relevant ist, finden Sie unter [Use cases](https://docs.stripe.com/connect/charges.md). | Nein |
| `paymentMethodTypes` | `string[]` | Eine Liste der zu rendernden Zahlungsmethodentypen. Sie können dieses Attribut weglassen, um Ihre Zahlungsmethoden im [Stripe-Dashboard](https://dashboard.stripe.com/settings/payment_methods) zu verwalten. | Nein |
| `paymentMethodConfiguration` | `string` | Die [Konfiguration der Zahlungsmethode](https://docs.stripe.com/api/payment_method_configurations.md), die bei der Verwaltung Ihrer Zahlungsmethoden im [Stripe-Dashboard](https://dashboard.stripe.com/settings/payment_methods) verwendet werden soll. Wenn keine Angabe gemacht wird, wird Ihre Standardkonfiguration verwendet. | Nein |
| `paymentMethodCreation` | `manual` | Ermöglicht die Erstellung von PaymentMethods aus der Elements-Instanz mit [stripe.createPaymentMethod](https://docs.stripe.com/js/payment_methods/create_payment_method_elements). | Nein |
| `paymentMethodOptions` | `{us_bank_account: {verification_method: string}}` | Verifizierungsoptionen für die Zahlungsmethode `us_bank_account`. Akzeptiert dieselben Verifizierungsmethoden wie [Payment Intents](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-us_bank_account-verification_method). | Nein |
| `paymentMethodOptions` | `{card: {installments: {enabled: boolean}}}` | Ermöglicht die ggf. manuelle Aktivierung der Nutzeroberfläche zur Auswahl des Karten-Ratenzahlungsplans, wenn Sie Ihre Zahlungsmethoden nicht im [Stripe-Dashboard](https://dashboard.stripe.com/settings/payment_methods) verwalten. Sie müssen `mode='payment'` festlegen *und* `paymentMethodTypes` explizit angeben. Andernfalls wird ein Fehler ausgelöst. Nicht kompatibel mit `paymentMethodCreation='manual'`. | Nein |
| `paymentMethodOptions` | `{[paymentMethod]: {setup_future_usage: string}}` | Ermöglicht es Ihnen, `setup_future_usage` nur für Zahlungsmethoden anzugeben, die die Wiederverwendung unterstützen. Gilt nur, wenn der `mode` `payment` ist. Der Wert für jede Zahlungsmethode muss mit der entsprechenden `payment_method_options[paymentMethod][setup_future_usage]` im PaymentIntent während der Bestätigung übereinstimmen. Unterstützte Zahlungsmethoden und Werte finden Sie in der [Ressource zu Stripe.js](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-paymentMethodOptions). | Nein |
## Preismodell erstellen [Stripe-CLI oder Dashboard]
[Wiederkehrende Preismodelle](https://docs.stripe.com/products-prices/pricing-models.md) umfassen die Produkte und Dienstleistungen, die Sie anbieten, die Preise dafür, welche Währungen Sie für Zahlungen verwenden und den Leistungszeitraum (für Abos). Verwenden Sie zum Aufbau des Preismodells [Produkte](https://docs.stripe.com/api/products.md) (was Sie anbieten) und [Preise](https://docs.stripe.com/api/prices.md) (Höhe und Abrechnungsintervall).
In diesem Beispiel wird ein Pauschalpreisdienst mit zwei verschiedenen Service-Optionen verwendet: Basis und Premium. Für jede Service-Option müssen Sie ein Produkt und einen wiederkehrenden Preis erstellen. Um eine einmalige Gebühr, z. B. für die Einrichtung, hinzufügen möchten, erstellen Sie ein drittes Produkt mit einem einmaligen Preis.
Jedes Produkt wird in monatlichen Intervallen abgerechnet. Der Preis für das Basisprodukt beträgt 5 USD. Der Preis für das Premiumprodukt beträgt 15 USD. Ein Beispiel mit drei Stufen finden Sie im Leitfaden zu [Pauschalpreismodellen](https://docs.stripe.com/subscriptions/pricing-models/flat-rate-pricing.md).
#### Dashboard
Gehen Sie zur Seite [Produkt hinzufügen](https://dashboard.stripe.com/test/products/create) und erstellen Sie zwei Produkte. Fügen Sie für jedes Produkt einen Preis hinzu, jeweils mit einem monatlich wiederkehrenden Abrechnungszeitraum:
- Premium-Produkt: Premium-Dienstleistung mit zusätzlichen Funktionen
- Preis: Pauschalpreis | 15 USD
- Basic-Produkt: Basic-Dienstleistung mit minimalem Funktionsumfang
- Preis: Pauschalpreis | 5 USD
Zeichnen Sie nach Erstellung der Preise die Preis-IDs auf, sodass diese in anderen Schritten verwendet werden können. Preis-IDs sehen in etwa wie folgt aus: `price_G0FvDp6vZvdwRZ`.
Wenn Sie bereit sind, verwenden Sie die Schaltfläche **In Live-Modus kopieren** oben rechts auf der Seite, um Ihr Produkt aus der [Sandbox in den Live-Modus zu kopieren](https://docs.stripe.com/keys.md#test-live-modes).
#### API
Sie können die API zum Erstellen der [Produkte](https://docs.stripe.com/api/products.md) und [Preise](https://docs.stripe.com/api/prices.md) verwenden.
Premiumprodukt erstellen:
```curl
curl https://api.stripe.com/v1/products \
-u "<>:" \
--data-urlencode "name=Billing Guide: Premium Service" \
-d "description=Premium service with extra features"
```
Basisprodukt erstellen:
```curl
curl https://api.stripe.com/v1/products \
-u "<>:" \
--data-urlencode "name=Billing Guide: Basic Service" \
-d "description=Basic service with minimum features"
```
Zeichnen Sie Preis-ID für jedes Produkt auf. Die Preis-IDs sehen in etwa wie folgt aus:
```json
{
"id": "prod_H94k5odtwJXMtQ",
"object": "product",
"active": true,
"attributes": [
],
"created": 1587577341,
"description": "Premium service with extra features",
"images": [
],
"livemode": false,
"metadata": {
},
"name": "Billing Guide: Premium Service",
"statement_descriptor": null,
"type": "service",
"unit_label": null,
"updated": 1587577341
}
```
Verwenden Sie die Produkt-IDs, um einen Preis für jedes Produkt zu erstellen. Die Zahl [unit_amount](https://docs.stripe.com/api/prices/object.md#price_object-unit_amount) wird in Cent angegeben, also z. B.`1500` = 15 USD.
Premiumpreis erstellen:
```curl
curl https://api.stripe.com/v1/prices \
-u "<>:" \
-d product={{PREMIUM_PRODUCT_ID}} \
-d unit_amount=1500 \
-d currency=usd \
-d "recurring[interval]=month"
```
Basispreis erstellen:
```curl
curl https://api.stripe.com/v1/prices \
-u "<>:" \
-d product={{BASIC_PRODUCT_ID}} \
-d unit_amount=500 \
-d currency=usd \
-d "recurring[interval]=month"
```
Zeichnen Sie Preis-ID für jeden Preis auf, sodass diese in nachfolgenden Schritten verwendet werden können. Die Preis-IDs sehen in etwa wie folgt aus:
```json
{
"id": "price_HGd7M3DV3IMXkC",
"object": "price",
"product": "prod_HGd6W1VUqqXGvr",
"type": "recurring",
"currency": "usd",
"recurring": {
"interval": "month",
"interval_count": 1,
"trial_period_days": null,
"usage_type": "licensed"
},
"active": true,
"billing_scheme": "per_unit",
"created": 1589319695,
"livemode": false,
"lookup_key": null,
"metadata": {},
"nickname": null,
"unit_amount": 1500,
"unit_amount_decimal": "1500",
"tiers": null,
"tiers_mode": null,
"transform_quantity": null
}
```
## Kund/in erstellen [Client und Server]
Stripe benötigt für jedes Abonnement einen *Kunden* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments). Erfassen Sie im Frontend Ihrer Anwendung alle erforderlichen Nutzerinformationen und übergeben Sie sie an das Backend.
Wenn Sie Adressdaten erfassen müssen, können Sie mit dem Adresselement eine Versand- oder Rechnungsadresse für Ihre Kundinnen/Kunden erfassen. Weitere Informationen finden Sie unter [Address Element](https://docs.stripe.com/elements/address-element.md).
```html
```
```javascript
const emailInput = document.querySelector('#email');
fetch('/create-customer', {
method: 'post',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: emailInput.value,
}),
}).then(r => r.json());
```
Erstellen Sie das Stripe Customer-Objekt auf dem Server.
```curl
curl https://api.stripe.com/v1/customers \
-u "<>:" \
-d email={{CUSTOMER_EMAIL}} \
-d name={{CUSTOMER_NAME}} \
-d "shipping[address][city]=Brothers" \
-d "shipping[address][country]=US" \
-d "shipping[address][line1]=27 Fredrick Ave" \
-d "shipping[address][postal_code]=97712" \
-d "shipping[address][state]=CA" \
-d "shipping[name]={{CUSTOMER_NAME}}" \
-d "address[city]=Brothers" \
-d "address[country]=US" \
-d "address[line1]=27 Fredrick Ave" \
-d "address[postal_code]=97712" \
-d "address[state]=CA"
```
## ConfirmationToken erstellen [Clientseitig]
> #### createPaymentMethod mit einer Legacy-Implementierung verwenden
>
> Wenn Sie eine Legacy-Implementierung nutzen, verwenden Sie möglicherweise die Informationen von `stripe.createPaymentMethod`, um Zahlungen auf dem Server abzuschließen. Wir empfehlen Ihnen, diesen Leitfaden zu befolgen, um auf [Bestätigungstoken umzustellen](https://docs.stripe.com/payments/payment-element/migration-ct.md). Sie können aber auch weiterhin auf unsere alte Dokumentation zugreifen, um [Zahlungen auf dem Server abzuschließen](https://docs.stripe.com/payments/finalize-payments-on-the-server-legacy.md).
Wenn der Kunde/die Kundin Ihr Zahlungsformular absendet, rufen Sie [stripe.createConfirmationToken](https://docs.stripe.com/js/confirmation_tokens/create_confirmation_token) auf, um ein *ConfirmationToken* (ConfirmationTokens help capture data from your client, such as your customer's payment instruments and shipping address, and are used to confirm a PaymentIntent or SetupIntent) zu erstellen, das zur zusätzlichen Validierung oder als zusätzliche Geschäftslogik vor der Zahlungsbestätigung an Ihren Server gesendet wird.
Durch Bestätigung des PaymentIntent wird eine *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) generiert. Sie können die [payment_method](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method)-ID aus der PaymentIntent- Bestätigungsantwort lesen.
> Sie müssen das erstellte ConfirmationTokensofort verwenden, um einen PaymentIntent zu bestätigen. Wird es nicht verwendet, läuft es nach 12 Stunden ab.
#### HTML + JS
```javascript
const form = document.getElementById('payment-form');
const submitBtn = document.getElementById('submit');
const handleError = (error) => {
const messageContainer = document.querySelector('#error-message');
messageContainer.textContent = error.message;
submitBtn.disabled = false;
}
form.addEventListener('submit', async (event) => {
// We don't want to let default form submission happen here,
// which would refresh the page.
event.preventDefault();
// Prevent multiple form submissions
if (submitBtn.disabled) {
return;
}
// Disable form submission while loading
submitBtn.disabled = true;
// Trigger form validation and wallet collection
const {error: submitError} = await elements.submit();
if (submitError) {
handleError(submitError);
return;
}
// Create the ConfirmationToken using the details collected by the Payment Element
// and additional shipping information
const {error, confirmationToken} = await stripe.createConfirmationToken({
elements,
params: {
return_url: 'https://example.com/order/123/complete'
}
});
if (error) {
// This point is only reached if there's an immediate error when
// creating the ConfirmationToken. Show the error to your customer (for example, payment details incomplete)
handleError(error);
return;
}
// Create the Subscription
const res = await fetch("/create-confirm-subscription", {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({
confirmationTokenId: confirmationToken.id,
}),
});
const data = await res.json();
// Handle any next actions or errors. See the Handle any next actions step for implementation.
handleServerResponse(data);
});
```
#### React
```jsx
import React, {useState} from 'react';
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';
export default function CheckoutForm() {
const stripe = useStripe();
const elements = useElements();
const [errorMessage, setErrorMessage] = useState();
const [loading, setLoading] = useState(false);
const handleError = (error) => {
setLoading(false);
setErrorMessage(error.message);
}
const handleSubmit = async (event) => {
// We don't want to let default form submission happen here,
// which would refresh the page.
event.preventDefault();
if (!stripe) {
// Stripe.js hasn't yet loaded.
// Make sure to disable form submission until Stripe.js has loaded.
return;
}
setLoading(true);
// Trigger form validation and wallet collection
const {error: submitError} = await elements.submit();
if (submitError) {
handleError(submitError);
return;
}
// Create the ConfirmationToken using the details collected by the Payment Element
// and additional shipping information
const {error, confirmationToken} = await stripe.createConfirmationToken({
elements,
params: {
shipping: {
name: 'Jenny Rosen',
address: {
line1: '1234 Main Street',
city: 'San Francisco',
state: 'CA',
country: 'US',
postal_code: '94111',
},
}
}
});
if (error) {
// This point is only reached if there's an immediate error when
// creating the ConfirmationToken. Show the error to your customer (for example, payment details incomplete)
handleError(error);
return;
}
// Create the Subscription
const res = await fetch("/create-confirm-subscription", {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({
confirmationTokenId: confirmationToken.id,
}),
});
const data = await res.json();
// Handle any next actions or errors. See the Handle any next actions step for implementation.
handleServerResponse(data);
};
return (
);
}
```
## Abonnements erstellen und an Stripe übermitteln [Serverseitig]
Nachdem Kund/innen Ihr Zahlungsformular abgeschickt haben, verwenden Sie ein *Abonnement* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis), um den Bestätigungs- und Zahlungsprozess zu erleichtern. Auf dem Server verwenden Sie die Kunden-ID (aus einem Cookie oder Anfrageparameter), die Preis-ID und die ID der Zahlungsmethode, um das Abonnement zu erstellen und zu bestätigen.
```javascript
const stripe = require("stripe")("<>");
const express = require('express');
const cookieParser = require('cookieParser');
const app = express();
app.set('trust proxy', true);
app.use(express.json());
app.use(express.static("."));
app.use(cookieParser());
app.post('/create-confirm-subscription', async (req, res) => {
const customerId = req.cookies['customer'];
const confirmationTokenId = req.body.confirmationTokenId;
// The ID of the Price that you created previously
const priceId = '{{ PRICE_ID }}';
try {
const subscription = await stripe.subscriptions.create({
customer: customerId,
items: [{
price: priceId,
}],
payment_behavior: 'default_incomplete',
payment_settings: { save_default_payment_method: 'on_subscription' },
expand: ['latest_invoice.payments']
});
// Confirm intent with collected payment method
const {status, clientSecret} = await stripe.paymentIntents.confirm(
subscription.latest_invoice.payments.data[0].payment.payment_intent,
{
confirmation_token: confirmationTokenId,
}
);
res.json({status, clientSecret});
} catch (err) {
res.json({
error: err
});
}
});
app.listen(3000, () => {
console.log('Running on port 3000');
});
```
## Nächste Aktionen bearbeiten [Clientseitig]
Wenn der PaymentIntent zusätzliche Aktionen von den Kundinnen/Kunden verlangt, wie z. B. die Authentifizierung mit 3D Secure oder die Weiterleitung an eine andere Website, müssen Sie diese Aktionen auslösen. Mit `stripe.handleNextAction` lösen Sie die Nutzeroberfläche für die Bearbeitung von Kundenaktionen und den Abschluss der Zahlung aus.
#### JavaScript
```javascript
const handleServerResponse = async (response) => {
if (response.error) {
// Show error from server on payment form
} else if (response.status === "requires_action") {
// Use Stripe.js to handle the required next action
const {
error,
paymentIntent
} = await stripe.handleNextAction({
clientSecret: response.clientSecret
});
if (error) {
// Show error from Stripe.js in payment form
} else {
// Actions handled, show success message
}
} else {
// No actions needed, show success message
}
}
```
## Abonnement verwalten
Um die Integration abzuschließen, sollten Sie Webhooks überwachen, Zugriff auf Ihren Dienst gewähren und Kundinnen und Kunden ermöglichen, ihre Abos zu kündigen. Weitere Details hierzu finden Sie im [Leitfaden zur Integration von Abos](https://docs.stripe.com/billing/subscriptions/build-subscriptions.md?payment-ui=elements).
## Stripe Ihren Kundinnen/Kunden anzeigen
Stripe erfasst Informationen über Kundeninteraktionen mit Elements , um Ihnen Dienste bereitzustellen, Betrug vorzubeugen und seine Dienste zu verbessern. Dies umfasst auch die Verwendung von Cookies und IP-Adressen, um zu ermitteln, welche Elements ein/e Kund/in während einer einzelnen Checkout-Sitzung gesehen hat. Sie sind dafür verantwortlich, alle Rechte und Zustimmungen offenzulegen und einzuholen, die Stripe benötigen, um Ihre Daten auf diese Weise zu nutzen. Weitere Informationen finden Sie in unserem [Datenschutzcenter](https://stripe.com/legal/privacy-center#as-a-business-user-what-notice-do-i-provide-to-my-end-customers-about-stripe).
## See also
- [Integration entwerfen](https://docs.stripe.com/payments/payment-element/design-an-integration.md)
- [Erstellen Sie eine Integration für In-App-Zahlungen](https://docs.stripe.com/payments/mobile.md)