>');
function App() {
const [clientSecret, setClientSecret] = useState("");
const [customerSessionClientSecret, setCustomerSessionClientSecret] = useState("");
// Fetch the two `client_secret`
useEffect(() => {
fetch("/create-intent-and-customer-session", { method: "POST" })
.then((res) => res.json())
.then((data) => {
setClientSecret(data.client_secret);
setCustomerSessionClientSecret(data.customer_session_client_secret);
});
}, []);
// Initialize the Element provider once we we received the two `client_secret`
// And render the CheckoutForm
return (
{clientSecret && customerSessionClientSecret && (
)}
);
};
ReactDOM.render(, document.getElementById('root'));
```
### Payment Element hinzufügen
Verwenden Sie die Komponente `PaymentElement`, um das Zahlungsformular anzuzeigen.
```jsx
import React from 'react';
import {PaymentElement} from '@stripe/react-stripe-js';
const CheckoutForm = () => {
return (
);
};
export default CheckoutForm;
```
## Zahlung an Stripe senden [Clientseitig]
Verwenden Sie [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment), um die Zahlung mit Details aus dem Payment Element vorzunehmen. Geben Sie für diese Funktion eine [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) an, um anzugeben, wohin Stripe die Nutzer/innen nach Durchführung der Zahlung weiterleiten soll. Ihre Nutzer/innen werden möglicherweise zunächst an eine zwischengeschaltete Seite weitergeleitet, wie z. B. eine Bankautorisierungsseite, bevor sie zur `return_url` weitergeleitet werden. Kartenzahlungen werden sofort zur `return_url` weitergeleitet, wenn eine Zahlung erfolgreich war.
Wenn Sie Kartenzahlungen nach Abschluss der Zahlung nicht weiterleiten möchten, können Sie [redirect](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) auf `if_required` festlegen. Dadurch werden nur Kundinnen/Kunden weitergeleitet, die mit weiterleitungsbasierten Zahlungsmethoden bezahlen.
#### HTML + JS
```javascript
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const {error} = await stripe.confirmPayment({
//`Elements` instance that was used to create the Payment Element
elements,
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`.
}
});
```
#### React
Verwenden Sie die Hooks [useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook) und [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook), um [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) über die Komponente Ihres Zahlungsformulars aufzurufen.
Wenn Sie herkömmliche Klassenkomponenten gegenüber Hooks bevorzugen, können Sie stattdessen einen [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer) verwenden.
```jsx
import React, {useState} from 'react';
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';
const CheckoutForm = () => {
const stripe = useStripe();
const elements = useElements();
const [errorMessage, setErrorMessage] = useState(null);
const handleSubmit = async (event) => {
// We don't want to let default form submission happen here,
// which would refresh the page.
event.preventDefault();
if (!stripe || !elements) {
// Stripe.js hasn't yet loaded.
// Make sure to disable form submission until Stripe.js has loaded.
return;
}
const {error} = await stripe.confirmPayment({
//`Elements` instance that was used to create the Payment Element
elements,
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)
setErrorMessage(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`.
}
};
return (
);
};
export default CheckoutForm;
```
Achten Sie darauf, dass die `return_url` auf eine Seite Ihrer Website verweist, die den Status der Zahlung angibt. Wenn Stripe den/die Kund/in an die `return_url` weiterleitet, stellen wir die folgenden URL-Abfrageparameter bereit:
| Parameter | Beschreibung |
| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent` | Die eindeutige ID für die `PaymentIntent`. |
| `payment_intent_client_secret` | Das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) des `PaymentIntent`-Objekts. |
> Wenn Sie über Tools verfügen, die die Browser-Sitzung der Kund/innen verfolgen, müssen Sie möglicherweise die Domain `stripe.com` zur Referenz-Ausschlussliste hinzufügen. Weiterleitungen haben zur Folge, dass einige Tools neue Sitzungen erstellen. Dies wiederum hindert Sie daran, die gesamte Sitzung zu verfolgen.
Verwenden Sie einen der Abfrageparameter, um den PaymentIntent abzurufen. Überprüfen Sie den [Status des PaymentIntent](https://docs.stripe.com/payments/paymentintents/lifecycle.md), um zu entscheiden, was Ihren Kundinnen/Kunden angezeigt werden soll. Sie können bei der Angabe der `return_url` auch Ihre eigenen Abfrageparameter anhängen, die während des Weiterleitungsvorgangs erhalten bleiben.
#### HTML + JS
```javascript
// Initialize Stripe.js using your publishable key
const stripe = Stripe('<>');
// Retrieve the "payment_intent_client_secret" query parameter appended to
// your return_url by Stripe.js
const clientSecret = new URLSearchParams(window.location.search).get(
'payment_intent_client_secret'
);
// Retrieve the PaymentIntent
stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => {
const message = document.querySelector('#message')
// Inspect the PaymentIntent `status` to indicate the status of the payment
// to your customer.
//
// Some payment methods will [immediately succeed or fail][0] upon
// confirmation, while others will first enter a `processing` state.
//
// [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
switch (paymentIntent.status) {
case 'succeeded':
message.innerText = 'Success! Payment received.';
break;
case 'processing':
message.innerText = "Payment processing. We'll update you when payment is received.";
break;
case 'requires_payment_method':
message.innerText = 'Payment failed. Please try another payment method.';
// Redirect your user back to your payment page to attempt collecting
// payment again
break;
default:
message.innerText = 'Something went wrong.';
break;
}
});
```
#### React
```jsx
import React, {useState, useEffect} from 'react';
import {useStripe} from '@stripe/react-stripe-js';
const PaymentStatus = () => {
const stripe = useStripe();
const [message, setMessage] = useState(null);
useEffect(() => {
if (!stripe) {
return;
}
// Retrieve the "payment_intent_client_secret" query parameter appended to
// your return_url by Stripe.js
const clientSecret = new URLSearchParams(window.location.search).get(
'payment_intent_client_secret'
);
// Retrieve the PaymentIntent
stripe
.retrievePaymentIntent(clientSecret)
.then(({paymentIntent}) => {
// Inspect the PaymentIntent `status` to indicate the status of the payment
// to your customer.
//
// Some payment methods will [immediately succeed or fail][0] upon
// confirmation, while others will first enter a `processing` state.
//
// [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
switch (paymentIntent.status) {
case 'succeeded':
setMessage('Success! Payment received.');
break;
case 'processing':
setMessage("Payment processing. We'll update you when payment is received.");
break;
case 'requires_payment_method':
// Redirect your user back to your payment page to attempt collecting
// payment again
setMessage('Payment failed. Please try another payment method.');
break;
default:
setMessage('Something went wrong.');
break;
}
});
}, [stripe]);
return message;
};
export default PaymentStatus;
```
## Ereignisse nach der Zahlung verarbeiten [Serverseitig]
Stripe sendet 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 [Webhook-Tool im Dashboard](https://dashboard.stripe.com/webhooks) oder folgen Sie der [Webhook-Anleitung](https://docs.stripe.com/webhooks/quickstart.md), um diese Ereignisse zu empfangen und führen Sie Aktionen aus, wie beispielsweise das Senden einer Bestellbestätigung per E-Mail, das Protokollieren des Verkaufs in der Datenbank oder das Starten eines Versand-Workflows.
Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnten die Kund/innen das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist. Bösartige Clients könnten dann die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass sie asynchrone Ereignisse überwacht, können Sie [verschiedene Arten von Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide) mit einer einzelnen Integration akzeptieren.
Neben der Abwicklung des `payment_intent.succeeded`-Ereignisses empfehlen wir die Abwicklung von diesen weiteren Ereignissen, wenn Sie Zahlungen mit dem Payment Element erfassen:
| Ereignis | Beschreibung | Aktion |
| ------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded) | Wird gesendet, wenn Kundinnen und Kunden eine Zahlung erfolgreich abgeschlossen haben. | Senden Sie den Kund/innen eine Auftragsbestätigung und *wickeln* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) Sie die Bestellung ab. |
| [payment_intent.processing](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing) | Wird gesendet, wenn eine/e Kund/in eine Zahlung erfolgreich veranlasst hat, die Zahlung aber noch nicht abgeschlossen ist. Dieses Ereignis wird am häufigsten gesendet, wenn der Kunde/die Kundin eine Bankabbuchung veranlasst. In Zukunft folgt darauf entweder ein `payment_intent.succeeded`- oder ein `payment_intent.payment_failed`-Ereignis. | Senden Sie eine Bestellbestätigung an die Kund/innen, in der angegeben ist, dass die Zahlung noch aussteht. Bei digitalen Waren können Sie die Bestellung abwickeln, bevor Sie darauf warten, dass die Zahlung erfolgt. |
| [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Wird gesendet, wenn ein Kunde/eine Kundin einen Zahlungsversuch durchführt, die Zahlung jedoch fehlschlägt. | Wenn eine Zahlung von `processing` zu `payment_failed` übergeht, bieten Sie der Kundin/dem Kunden einen weiteren Zahlungsversuch an. |
# Direct API
Verwenden Sie die Direct API-Implementierung, um die Anzeige vorhandener Zahlungsmethoden vollständig zu steuern.
## Zahlungsmethoden anzeigen [Clientseitig] [Serverseitig]
Rufen Sie den Endpoint [Zahlungsmethode auflisten](https://docs.stripe.com/api/payment_methods/customer_list.md)) mit dem Parameter `allow_redisplay` auf, um die wiederverwendbaren Zahlungsmethoden eines Kunden/einer Kundin abzurufen.
#### Accounts v2
```curl
curl -G https://api.stripe.com/v1/payment_methods \
-u "<>:" \
-d customer_account={{CUSTOMER_ACCOUNT_ID}} \
-d allow_redisplay=always
```
#### Customers v1
```curl
curl -G https://api.stripe.com/v1/customers/{{CUSTOMER_ID}}/payment_methods \
-u "<>:" \
-d allow_redisplay=always
```
Verwenden Sie die API-Antwortdaten, um die Zahlungsmethoden in Ihrer eigenen Nutzeroberfläche anzuzeigen, und lassen Sie den Kunden/die Kundin eine auswählen.
## Optional: Weitere gespeicherte Zahlungsmethoden anzeigen [Serverseitig]
> #### Compliance
>
> Sie sind für die Einhaltung aller geltenden Gesetze, Vorschriften und Netzwerkregeln verantwortlich, wenn Sie die Zahlungsdaten eines Kunden/einer Kundin speichern. Wenn Sie einem Kunden/einer Kundin zuvor genutzte Zahlungsmethoden für zukünftige Einkäufe anzeigen, stellen Sie sicher, dass Sie die Zustimmung eingeholt haben, um die Details der Zahlungsmethode für diese spezifische zukünftige Verwendung zu speichern.
Standardmäßig werden nur Zahlungsmethoden angezeigt, die auf [Erneute Anzeige immer zulassen](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) eingestellt sind.
Apple Pay und Google Pay können während einer Checkout-Sitzung nicht wiederverwendet werden, daher erscheinen diese Zahlungsmethoden nicht in der Liste der gespeicherten Optionen. Sie müssen die Nutzeroberfläche von Google Pay und Apple Pay sowie die Nutzeroberfläche der Zahlungsanforderung jedes Mal anzeigen, wenn die Checkout-Sitzung aktiv ist.
Sie können andere zuvor gespeicherte Zahlungsmethoden anzeigen, indem Sie weitere Werte für die erneute Anzeige in die Checkout-Sitzung aufnehmen oder die Einstellung `allow_redisplay` einer Zahlungsmethode auf `always` setzen.
- Verwenden Sie den [Parameter](https://docs.stripe.com/api/payment_methods/customer_list.md#list_customer_payment_methods-allow_redisplay) `allow_redisplay`, um anzugeben, welche gespeicherten Zahlungsmethoden dem Kunden/der Kundin angezeigt werden sollen. Sie können jeden der gültigen Werte festlegen: `limited`, `unspecified` und `always`.
#### Accounts v2
```curl
curl -G https://api.stripe.com/v1/payment_methods \
-u "<>:" \
-d "customer_account={{CUSTOMERACCOUNT_ID}}" \
-d allow_redisplay=unspecified
```
#### Customers v1
```curl
curl -G https://api.stripe.com/v1/customers/{{CUSTOMER_ID}}/payment_methods \
-u "<>:" \
-d allow_redisplay=unspecified
```
- [Aktualisieren Sie die Zahlungsmethode](https://docs.stripe.com/api/payment_methods/update.md), um den Wert `allow_redisplay` für einzelne Zahlungsmethoden festzulegen.
```curl
curl https://api.stripe.com/v1/payment_methods/{{PAYMENTMETHOD_ID}} \
-u "<>:" \
-d allow_redisplay=always
```
## PaymentIntent erstellen [Serverseitig]
Erstellen Sie ein [PaymentIntent](https://docs.stripe.com/api/payment_intents/create.md), um zu versuchen, den Kunden/die Kundin mit der von ihm/ihr ausgewählten Zahlungsmethode zu belasten.
#### Accounts v2
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d customer_account={{CUSTOMER_ACCOUNT_ID}} \
-d payment_method={{PAYMENT_METHOD_ID}} \
-d confirm=true \
--data-urlencode "return_url=https://example.com/order/123/complete"
```
#### Customers v1
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d customer={{CUSTOMER_ID}} \
-d payment_method={{PAYMENT_METHOD_ID}} \
-d confirm=true \
--data-urlencode "return_url=https://example.com/order/123/complete"
```
Wenn der API-Aufruf mit einer 402-Antwort fehlschlägt, bedeutet dies, dass die Zahlung abgelehnt wurde. Bitten Sie den Kunden/die Kundin, es erneut zu versuchen oder eine andere Zahlungsmethode zu verwenden.
## PaymentIntent-Status prüfen [Clientseitig] [Serverseitig]
Unter der Annahme, dass der PaymentIntent erfolgreich erstellt wurde, überprüfen Sie seinen `status`:
- `succeeded` bedeutet, dass der Kunde/die Kundin wie erwartet belastet wurde. Zeigen Sie Ihrem Kunden/Ihrer Kundin eine Erfolgsmeldung.
- `requires_action` gibt an, dass Sie zusätzliche Maßnahmen ergreifen müssen, wie zum Beispiel die Authentifizierung mit 3D Secure. Rufen Sie [`handleNextAction`](https://docs.stripe.com/js/payment_intents/handle_next_action) im Frontend auf, um die Aktion auszulösen, die der Kunde/die Kundin ausführen muss.
```javascript
const { error, paymentIntent } = await stripe.handleNextAction({
clientSecret: "{{CLIENT_SECRET}}"
});
if (error) {
// Show error from Stripe.js
} else {
// Actions handled, show success message
}
```
## Ereignisse nach der Zahlung verarbeiten [Serverseitig]
Stripe sendet 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 [Webhook-Tool im Dashboard](https://dashboard.stripe.com/webhooks) oder folgen Sie der [Webhook-Anleitung](https://docs.stripe.com/webhooks/quickstart.md), um diese Ereignisse zu empfangen und führen Sie Aktionen aus, wie beispielsweise das Senden einer Bestellbestätigung per E-Mail, das Protokollieren des Verkaufs in der Datenbank oder das Starten eines Versand-Workflows.
Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnten die Kund/innen das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist. Bösartige Clients könnten dann die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass sie asynchrone Ereignisse überwacht, können Sie [verschiedene Arten von Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide) mit einer einzelnen Integration akzeptieren.
Neben der Abwicklung des `payment_intent.succeeded`-Ereignisses empfehlen wir die Abwicklung von diesen weiteren Ereignissen, wenn Sie Zahlungen mit dem Payment Element erfassen:
| Ereignis | Beschreibung | Aktion |
| ------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded) | Wird gesendet, wenn Kundinnen und Kunden eine Zahlung erfolgreich abgeschlossen haben. | Senden Sie den Kund/innen eine Auftragsbestätigung und *wickeln* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) Sie die Bestellung ab. |
| [payment_intent.processing](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing) | Wird gesendet, wenn eine/e Kund/in eine Zahlung erfolgreich veranlasst hat, die Zahlung aber noch nicht abgeschlossen ist. Dieses Ereignis wird am häufigsten gesendet, wenn der Kunde/die Kundin eine Bankabbuchung veranlasst. In Zukunft folgt darauf entweder ein `payment_intent.succeeded`- oder ein `payment_intent.payment_failed`-Ereignis. | Senden Sie eine Bestellbestätigung an die Kund/innen, in der angegeben ist, dass die Zahlung noch aussteht. Bei digitalen Waren können Sie die Bestellung abwickeln, bevor Sie darauf warten, dass die Zahlung erfolgt. |
| [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Wird gesendet, wenn ein Kunde/eine Kundin einen Zahlungsversuch durchführt, die Zahlung jedoch fehlschlägt. | Wenn eine Zahlung von `processing` zu `payment_failed` übergeht, bieten Sie der Kundin/dem Kunden einen weiteren Zahlungsversuch an. |