# Nutzerdefinierte Storefront erstellen So erstellen Sie eine benutzerdefinierte Storefront, die die Zahlungsfunktionen von Stripe unterstützt. Adobe Commerce kann als Headless-Handelsplattform laufen, die komplett von der Storefront getrennt ist. Mit der REST API oder der GraphQL API erstellen Sie benutzerdefinierte Storefronts, wie z. B. progressive Web-Apps (PWA), mobile Apps oder ein Frontend, das auf React, Vue oder anderen Frameworks aufgebaut ist. Das Stripe-Modul erweitert die REST API und die GraphQL API wie folgt: - Token für die Zahlungsmethode bei der Bestellung festlegen - 3D Secure-Kundenauthentifizierung durchführen - Gespeicherte Zahlungsmethoden von Kundinnen und Kunden verwalten Das Stripe-Modul verwendet die REST API auf der Bezahlseite. Im Unterverzeichnis `resources/examples/` finden Sie Beispiele dazu, wie Sie die API im Stripe-Modulverzeichnis verwenden. In diesem Leitfaden wird die GraphQL API zum Erstellen einer nutzerdefinierten Storefront verwendet. ## Initialisierungsparameter abrufen Um Stripe.js und das Zahlungsformular im Frontend zu initialisieren, benötigen Sie den [veröffentlichbaren API-Schlüssel](https://docs.stripe.com/keys.md#obtain-api-keys), den Sie im Admin-Bereich konfiguriert haben. Sie können den Schlüssel und andere Initialisierungsparameter mit der folgenden GraphQL-Mutation abrufen: ``` query { getStripeConfiguration { apiKey locale appInfo options { betas apiVersion } elementsOptions } } ``` ## Zahlungsmethode während des Bezahlvorgangs tokenisieren Mit dem [PaymentElement](https://docs.stripe.com/payments/payment-element.md) können Sie beim Bezahlvorgang Zahlungsmethoden Ihrer Kundinnen und Kunden erfassen. Nachdem die Zahlungsmethode kundenseitig angegeben wurde und der Klick auf **Bestellung aufgeben** erfolgt ist, können Sie die Zahlungsmethode tokenisieren und sie zum Aufgeben der Bestellung verwenden. Durch Aufrufen von `createPaymentMethod` wird [ein Token für die Zahlungsmethode](https://docs.stripe.com/payments/finalize-payments-on-the-server-legacy.md?type=payment#create-pm) aus den im `PaymentElement` angegebenen Details generiert. ``` var stripe = Stripe(API_PUBLISHABLE_KEY); var options = { mode: 'payment', amount: 1099, currency: 'eur' }; var elements = stripe.elements(options); var paymentElement = elements.create('payment'); paymentElement.mount('#payment-element'); var placeOrder = function() { elements.submit().then(function() { stripe.createPaymentMethod({ elements: elements, params: { billing_details: { name: 'Jenny Rosen' } } }).then(function(result) { if (result && result.paymentMethod) { // Success } }); }); } ``` ## Tokenisierte Zahlungsmethode übergeben Nachdem Sie ein Token für die Zahlungsmethode erhalten haben, müssen Sie `setPaymentMethodOnCart` aufrufen, um die [Zahlungsmethode für die Bestellung festzulegen](https://developer.adobe.com/commerce/webapi/graphql/tutorials/checkout/set-payment-method/#set-payment-method-on-cart). ``` mutation { setPaymentMethodOnCart(input: { cart_id: "CART_ID" payment_method: { code: "stripe_payments" stripe_payments: { payment_method: "PAYMENT_METHOD_ID" save_payment_method: true } } }) { cart { selected_payment_method { code } } } } ``` Verwenden Sie die folgenden Parameter für `setPaymentMethodOnCart`: | Parameter | Typ | Beschreibung | | --------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `payment_method` | Zeichenfolge | Mit diesem Parameter übergeben Sie die tokenisierte Zahlungsmethoden-ID. Sie können außerdem gespeicherte Token für Zahlungsmethoden übergeben, wenn Kundinnen und Kunden während des Bezahlvorgangs gespeicherte Zahlungsmethoden auswählen. | | `save_payment_method` | Boolesch | Gibt an, ob die Zahlungsmethode gespeichert werden soll oder nicht. | | `cvc_token` | Zeichenfolge | Wenn die Prüfziffer (CVC) für gespeicherte Karten aktiviert ist, können Sie mit diesem Parameter das Prüfziffer-Token übergeben und die Zahlung verifizieren. | ## Bestellung aufgeben Wenn Sie das Token für die Zahlungsmethode festgelegt haben, können Sie die `placeOrder`-Mutation von Adobe Commerce verwenden, um Bestellungen aufzugeben: ``` mutation { placeOrder(input: {cart_id: "CART_ID"}) { order { order_number client_secret } } } ``` Im obigen Beispiel wird ein `client_secret` angefordert, bei dem es sich nicht um einen Standard-Mutationsparameter für `placeOrder` handelt. Das Stripe-Modul fügt diesen Parameter hinzu, damit Sie ihn nach der Bestellung verwenden können und so für die gewählte Zahlungsmethode spezifische Details festzulegen. Die Zahlung können Sie mit der Methode `stripe.handleNextAction(client_secret)` abschließen. Zu den Optionen gehören die Inline-Authentifizierung per 3D Secure für Karten, die Anzeige ausdruckbarer Gutscheine für bestimmte Zahlungsmethoden oder auch die externe Weiterleitung von Kundinnen und Kunden zur Authentifizierung. ## Ablauf der Auftragserteilung Zahlungsmethoden vom Typ `card` oder `link`, bei denen eine Kundenauthentifizierung per 3D Secure (3DS) erforderlich ist, durchlaufen den folgenden Prozess: 1. Die Bestellung befindet sich im Status `Pending Payment`. 1. Das Client-Geheimnis wird an das Frontend übergeben, um die Authentifizierung durchzuführen. 1. Nach erfolgreicher Authentifizierung wird die Zahlung clientseitig eingezogen und die Kundin/der Kunde wird zur Bestätigungsseite der Bestellung weitergeleitet. 1. Ein Webhook-Ereignis des Typs `charge.succeeded` erreicht Ihre Website auf Serverseite. 1. Das Modul verarbeitet das Ereignis und ändert den Bestellstatus von `Payment Pending` in `processing`. Dieser Ablauf ist der Standard bei GraphQL, nicht bei der REST API. Um denselben Ablauf mit der REST API zu verwenden, gehen Sie zu **Admin > Shops > Konfiguration > Vertrieb > Zahlungsmethoden > Stripe > Erweiterte Konfiguration** (Admin > Shops > Konfiguration) und legen Sie dann **Bestellung zuerst aufgeben (REST API)** auf **Aktiviert** fest. ## Gespeicherte Zahlungsmethoden abrufen Mit dem Parameter `listStripePaymentMethods` können Sie während eines aktiven Bezahlvorgangs eine Liste der kundenseitig gespeicherten Zahlungsmethoden abrufen. ``` mutation { listStripePaymentMethods { id created type fingerprint label icon cvc brand exp_month exp_year } } ``` ## Zahlungsmethode speichern Über den Parameter `addStripePaymentMethod` können Sie Zahlungsmethoden in einem Kundenkonto hinterlegen. Bei dem Parameter `payment_method` handelt es sich um die tokenisierte Zahlungsmethoden-ID. Die Tokenisierung läuft ähnlich wie beim Bezahlvorgang ab. ``` mutation { addStripePaymentMethod( input: { payment_method: "PAYMENT_METHOD_ID" } ) { id created type fingerprint label icon cvc brand exp_month exp_year } } ``` ## Gespeicherte Zahlungsmethode löschen Mit dem Parameter `deleteStripePaymentMethod` können Sie es Ihren Kundinnen und Kunden gestatten, gespeicherte Zahlungsmethoden aus ihren Konten zu entfernen. Für die meisten Anwendungsfälle empfehlen wir die Übergabe eines Fingerabdrucks für eine Zahlungsmethode. Dadurch werden alle Zahlungsmethoden gelöscht, die mit dem Fingerabdruck übereinstimmen. Die Mutation `listStripePaymentMethods` entfernt automatisch Duplikate, bevor kürzlich hinzugefügte Zahlungsmethoden zurückgegeben werden, die mit einem bestimmten Fingerabdruck übereinstimmen. Wenn Sie jedoch eine Zahlungsmethode nur hinsichtlich ihrer ID löschen, enthalten die Ergebnisse von `listStripePaymentMethods` möglicherweise eine ältere gespeicherte Zahlungsmethode mit demselben Fingerabdruck. ``` mutation { deleteStripePaymentMethod( input: { payment_method: "paste a payment method ID here" fingerprint: null } ) } ``` ## See also - [SetupIntents API](https://docs.stripe.com/payments/setup-intents.md) - [Das Admin-Panel von Adobe Commerce verwenden](https://docs.stripe.com/use-stripe-apps/adobe-commerce/payments/admin.md) - [Fehlerbehebung](https://docs.stripe.com/use-stripe-apps/adobe-commerce/payments/troubleshooting.md)