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.

This flow is the default with GraphQL, not with the REST API. To use the same flow with the REST API, go to Admin > Stores > Configuration > Sales > Payment Methods > Stripe > Advanced Configuration, then set Place order first (REST API) to Enabled.

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