Nutzerdefinierte Storefront erstellen

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.

query {
getStripeConfiguration {
	apiKey
		locale
		appInfo
		options {
			betas
			apiVersion
		}
	elementsOptions
	}
}

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

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

mutation {
  placeOrder(input: {cart_id: "CART_ID"}) {
    order {
      order_number
      client_secret
    }
  }
}

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.
2. Das Client-Geheimnis wird an das Frontend übergeben, um die Authentifizierung durchzuführen.
3. Nach erfolgreicher Authentifizierung wird die Zahlung clientseitig eingezogen und die Kundin/der Kunde wird zur Bestätigungsseite der Bestellung weitergeleitet.
4. Ein Webhook-Ereignis des Typs charge.succeeded erreicht Ihre Website auf Serverseite.
5. 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
    }
  )
}