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, 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 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 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.

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:

Die Bestellung befindet sich im Status Pending Payment.
Das Client-Geheimnis wird an das Frontend übergeben, um die Authentifizierung durchzuführen.
Nach erfolgreicher Authentifizierung wird die Zahlung clientseitig eingezogen und die Kundin/der Kunde wird zur Bestätigungsseite der Bestellung weitergeleitet.
Ein Webhook-Ereignis des Typs charge.succeeded erreicht Ihre Website auf Serverseite.
Das Modul verarbeitet das Ereignis und ändert den Bestellstatus von Payment Pending in processing.

Dies ist das Standardverfahren für GraphQL, aber nicht für die REST API. Wenn bei der REST-API eine Kundenauthentifizierung erforderlich ist, schlägt die Auftragserteilung mit dem Fehler Authentication Required: client_secret fehl. Sie müssen die Zahlung mit dem client_secret authentifizieren und nach erfolgreicher Authentifizierung muss erneut versucht werden, die Bestellung aufzugeben. Der Vorteil dieses Ansatzes besteht darin, dass das Produkt nicht zurückgehalten wird, bis die Zahlung erfolgreich ausgeführt wurde. Um dieses Verfahren mit GraphQL anzuwenden, bearbeiten Sie die Datei etc/config.xml des Moduls, indem Sie card und link unter dem Knoten <graphql_api> hinzufügen:

<manual_authentication>
     <rest_api>card,link</rest_api>
     <graphql_api>card,link</graphql_api>
</manual_authentication>

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
    }
  )
}