Express-Checkout-Optionen in Magento 2 einbinden

1. Warum Express-Checkout-Optionen die Abbruchrate senken

Der klassische Magento-Checkout mit Adresseingabe, Versandauswahl und Zahlungsdaten ist für Erstkäufer notwendig, für wiederkehrende Kunden oder mobile Nutzer mit gespeicherten Wallets aber unnötig langsam. Express-Checkout-Optionen überspringen genau diese wiederholte Dateneingabe, indem sie bereits vorhandene Informationen aus Apple Pay, Google Pay oder einem gespeicherten Magento-Kundenkonto direkt in eine fertige Bestellung überführen, oft mit nur einem einzigen Tap auf dem Smartphone.

Der Effekt auf die Conversion ist in der Praxis erheblich, besonders auf mobilen Geräten, wo lange Formulare mit virtueller Tastatur die größte Quelle für Kaufabbrüche sind. Eine Express-Checkout-Option wie Apple Pay füllt Adresse, Zahlungsmethode und teilweise sogar Rechnungsdaten aus dem Betriebssystem-Wallet, ohne dass der Kunde ein einziges Textfeld berührt.

Dieser Artikel behandelt die drei zentralen Express-Checkout-Optionen für Magento 2: das native Instant-Purchase-Modul für wiederkehrende, eingeloggte Kunden, Express-Payment-Buttons für Apple Pay und Google Pay auf Produkt- und Warenkorbseite, sowie die technische Integration beider Ansätze in ein Hyvä-Frontend, inklusive Sicherheitsaspekten und Conversion-Messung.

2. Die drei Bausteine von Express-Checkout-Optionen

Der erste Baustein ist Instant Purchase, ein natives Magento-Modul, das eingeloggten Kunden mit gespeicherter Standardadresse und Standardzahlungsmethode einen einzigen Bestell-Button direkt auf der Produktseite anbietet. Der zweite Baustein sind Express-Payment-Buttons, die Wallet-APIs wie die Apple Pay JS API oder die Google Pay API nutzen, um auch Erstkäufern ohne Magento-Konto eine schnelle Zahlung mit im Betriebssystem hinterlegten Daten zu ermöglichen. Der dritte Baustein ist die konsistente Adress- und Zahlungsdaten-Übernahme aus diesen Quellen in die Magento-Quote, ohne den reduzierten Checkout-Umfang zu verlieren.

Alle drei Bausteine haben gemeinsam, dass sie den regulären Checkout-Prozess nicht ersetzen, sondern eine schnellere Abkürzung parallel dazu anbieten. Eine solide Express-Checkout-Option muss deshalb dieselben serverseitigen Validierungsregeln durchlaufen wie der normale Checkout, nur ohne dass der Kunde diese Schritte manuell im Frontend durchklickt.

Für Hyvä-Projekte bedeutet das konkret: Die Express-Buttons selbst sind kleine, in sich geschlossene Alpine.js-Komponenten mit einer schmalen Magewire-Anbindung, die im Hintergrund dieselben Service Contracts aufrufen wie der reguläre Checkout, insbesondere CartManagementInterface und PaymentInformationManagementInterface.

3. Magento Instant Purchase aktivieren und anpassen

Instant Purchase ist Teil des Kern-Moduls Magento_InstantPurchase und für eingeloggte Kunden verfügbar, sobald mindestens eine gespeicherte Adresse und eine gespeicherte, tokenisierte Zahlungsmethode vorliegen. Die Eligibility-Prüfung, ob ein Kunde den Instant-Purchase-Button überhaupt sehen darf, läuft über eine Kette von EligibilityCheckerInterface-Implementierungen, die unter anderem prüfen, ob die gespeicherte Zahlungsmethode noch gültig ist und ob das Produkt überhaupt ohne weitere Konfiguration bestellbar ist, etwa keine Pflichtoptionen ohne Vorauswahl hat.

Für projektspezifische Anforderungen lässt sich diese Eligibility-Kette um einen eigenen Checker erweitern, ohne die native Logik zu ersetzen. Ein typischer Anwendungsfall: Instant Purchase soll für Produkte mit eingeschränkter Verfügbarkeit oder für Kunden ohne bestätigte E-Mail-Adresse nicht angeboten werden, obwohl die native Eligibility-Prüfung dafür keinen Grund sieht.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\InstantPurchase\Model\EligibilityChecker\CompositeEligibilityChecker">
        <arguments>
            <argument name="checkers" xsi:type="array">
                <item name="mironsoft_verified_email" xsi:type="object">Mironsoft\ExpressCheckout\Model\EligibilityChecker\VerifiedEmailChecker</item>
            </argument>
        </arguments>
    </type>
</config>

<?php

declare(strict_types=1);

namespace Mironsoft\ExpressCheckout\Model\EligibilityChecker;

use Magento\Customer\Model\Customer;
use Magento\Framework\Exception\LocalizedException;
use Magento\InstantPurchase\Model\EligibilityChecker\EligibilityCheckerInterface;

/**
 * Excludes customers without a verified email address from the native
 * Instant Purchase eligibility chain, without replacing any native check.
 */
class VerifiedEmailChecker implements EligibilityCheckerInterface
{
    /**
     * @param Customer $customer
     * @return bool
     * @throws LocalizedException
     */
    public function isEligible(Customer $customer): bool
    {
        return (bool) $customer->getData('is_email_verified');
    }
}

Der eigene Checker implementiert EligibilityCheckerInterface mit einer einzigen Methode isEligible(), die neben dem Kunden auch das aktuelle Produkt erhält. Diese Express-Checkout-Option bleibt so additiv erweiterbar, ohne dass ein Preference auf die native Eligibility-Kette nötig wird, was Magento-Updates unproblematisch macht.

4. Express-Payment-Buttons auf Produkt- und Warenkorbseite

Während Instant Purchase ausschließlich eingeloggte Kunden mit gespeicherten Daten bedient, richten sich Express-Payment-Buttons für Apple Pay und Google Pay an alle Besucher, auch ohne Magento-Konto. Diese Buttons nutzen die jeweilige Wallet-API des Betriebssystems, um Adresse und Zahlungsdaten direkt vom Gerät abzufragen, verschlüsselt an den Payment-Gateway-Anbieter zu übertragen und erst danach eine Bestellung in Magento anzulegen.

Technisch entsteht dabei ein Kompromiss: Die eigentliche Wallet-Kommunikation läuft clientseitig über JavaScript-APIs, die außerhalb der Kontrolle des Magento-Backends liegen. Die Express-Checkout-Option muss deshalb serverseitig genauso behandelt werden wie jede andere Zahlungsart, inklusive vollständiger Validierung über die im vorherigen Artikel beschriebenen Service-Contract-Plugins, bevor die Bestellung tatsächlich angelegt wird.

5. Express-Buttons als Magewire-Komponente ins Hyvä-Frontend einbinden

Für ein Hyvä-Projekt wird der Express-Payment-Button als eigenständige Alpine.js-Komponente implementiert, die beim Laden der Produktseite die jeweilige Wallet-API initialisiert und bei Verfügbarkeit den Button anzeigt, andernfalls unsichtbar bleibt. Diese Verfügbarkeitsprüfung ist wichtig: Apple Pay ist nur in Safari auf unterstützten Geräten verfügbar, Google Pay nur bei entsprechend konfiguriertem Browser und Gerät, eine Express-Checkout-Option ohne diese Prüfung würde nicht funktionsfähige Buttons anzeigen.

<div x-data="expressPayment()" x-init="checkAvailability()" x-show="isAvailable" class="mt-4">
    <button type="button" @click="startExpressPayment()"
            class="w-full bg-black text-white rounded-lg py-3 font-semibold flex items-center justify-center gap-2">
        <span x-text="walletLabel"></span>
    </button>
    <p x-show="errorMessage" x-text="errorMessage" class="text-red-600 text-sm mt-2"></p>
</div>

<script>
function expressPayment() {
    return {
        isAvailable: false,
        walletLabel: '',
        errorMessage: '',
        checkAvailability() {
            // Feature detection runs entirely client side, no server call needed
            if (window.ApplePaySession && ApplePaySession.canMakePayments()) {
                this.isAvailable = true;
                this.walletLabel = 'Mit Apple Pay bezahlen';
            } else if (window.google && window.google.payments) {
                this.isAvailable = true;
                this.walletLabel = 'Mit Google Pay bezahlen';
            }
        },
        startExpressPayment() {
            this.$wire.initiateExpressPayment(this.walletLabel).then((result) => {
                if (!result.success) {
                    this.errorMessage = result.message;
                }
            });
        }
    };
}
</script>

Der Klick auf den Button löst clientseitig die Wallet-Auswahl des Betriebssystems aus, das Ergebnis wird anschließend per Magewire-Aufruf an eine serverseitige Komponente übergeben, die aus dem verschlüsselten Wallet-Token eine Bestellung anlegt. Diese Express-Checkout-Option bleibt dadurch konsistent mit der übrigen Magewire-Architektur des restlichen Checkouts.

6. Adress- und Zahlungsdaten aus Wallets übernehmen

Ein zentraler Vorteil jeder Express-Checkout-Option ist die automatische Übernahme von Adress- und Kontaktdaten aus dem Wallet, ohne dass der Kunde etwas eintippen muss. Die Wallet-APIs liefern diese Daten in einem herstellerspezifischen JSON-Format zurück, das serverseitig in das Magento-Adressformat übersetzt werden muss, inklusive Ländercode-Mapping und der Zerlegung eines einzelnen Namensfelds in Vor- und Nachname.

{
  "shippingContact": {
    "givenName": "Anna",
    "familyName": "Schmidt",
    "addressLines": ["Musterstraße 12"],
    "locality": "Berlin",
    "postalCode": "10115",
    "countryCode": "DE",
    "emailAddress": "anna.schmidt@example.com"
  },
  "paymentToken": {
    "provider": "apple_pay",
    "encryptedData": "base64-encoded-payload-not-a-real-token"
  }
}

Der folgende Service übernimmt genau diese Übersetzung. Wichtig dabei: Der verschlüsselte paymentToken wird niemals selbst geparst oder gespeichert, sondern unverändert an den Payment-Gateway-Command weitergereicht, der ihn beim externen Zahlungsdienstleister entschlüsseln lässt.

<?php

declare(strict_types=1);

namespace Mironsoft\ExpressCheckout\Model;

use Magento\Quote\Api\Data\AddressInterface;
use Magento\Quote\Api\Data\AddressInterfaceFactory;

/**
 * Translates wallet API shipping contact payloads into Magento quote
 * address objects, without touching the encrypted payment token.
 */
class WalletAddressMapper
{
    /**
     * @param AddressInterfaceFactory $addressFactory
     */
    public function __construct(
        private readonly AddressInterfaceFactory $addressFactory
    ) {
    }

    /**
     * @param array{
     *     givenName: string,
     *     familyName: string,
     *     addressLines: string[],
     *     locality: string,
     *     postalCode: string,
     *     countryCode: string
     * } $shippingContact
     * @return AddressInterface
     */
    public function mapToQuoteAddress(array $shippingContact): AddressInterface
    {
        $address = $this->addressFactory->create();
        $address->setFirstname($shippingContact['givenName']);
        $address->setLastname($shippingContact['familyName']);
        $address->setStreet($shippingContact['addressLines']);
        $address->setCity($shippingContact['locality']);
        $address->setPostcode($shippingContact['postalCode']);
        $address->setCountryId($shippingContact['countryCode']);

        return $address;
    }
}

7. Sicherheitsaspekte bei Express-Checkout-Optionen

Eine Express-Checkout-Option reduziert Reibung, darf dabei aber keine Sicherheitsstufe gegenüber dem regulären Checkout einbüßen. Der wichtigste Grundsatz: Zahlungsdaten aus Apple Pay oder Google Pay kommen bereits tokenisiert und verschlüsselt beim Merchant an, das Klartext-Kartenformat verlässt das Betriebssystem-Wallet nie. Magento selbst verarbeitet ausschließlich den verschlüsselten Token und reicht ihn an den Payment-Gateway-Command weiter, wie im vorherigen Artikel zur Zahlungsart-Integration beschrieben.

Zusätzlich sollte jede Express-Checkout-Option dieselbe Betrugsprüfung durchlaufen wie eine reguläre Bestellung. Eine verkürzte Checkout-Strecke darf niemals bedeuten, dass Fraud-Regeln, Adressvalidierung oder Bestandsprüfung übersprungen werden, nur weil der Kunde weniger Formularfelder ausgefüllt hat. Serverseitig laufen dieselben Plugins auf CartManagementInterface::placeOrder, die auch der reguläre Checkout durchläuft, unabhängig davon, ob die Bestellung über einen Express-Button oder das klassische Formular ausgelöst wurde.

8. Conversion-Messung und A/B-Tests

Ob eine Express-Checkout-Option tatsächlich die Conversion verbessert, lässt sich nur mit sauberem Tracking beurteilen. Jeder Express-Button sollte ein eigenes Analytics-Event auslösen, das zwischen Klick, erfolgreichem Wallet-Dialog und tatsächlich abgeschlossener Bestellung unterscheidet. Ohne diese Granularität lässt sich nicht erkennen, ob Kunden den Button zwar anklicken, den Wallet-Dialog aber abbrechen, was auf ein technisches Problem statt auf mangelndes Interesse hindeuten würde.

Ein A/B-Test, der die Position und Sichtbarkeit der Express-Checkout-Option auf der Produktseite variiert, etwa oberhalb versus unterhalb des regulären Warenkorb-Buttons, liefert oft überraschend klare Unterschiede in der Klickrate. Wichtig ist, bei solchen Tests konsequent zwischen mobilen und Desktop-Nutzern zu unterscheiden, da Wallet-Buttons auf mobilen Geräten in aller Regel deutlich stärker angenommen werden als am Desktop.

9. Express-Checkout-Ansätze im Vergleich

Die folgende Tabelle vergleicht die drei behandelten Ansätze entlang der für ein Projekt relevanten Kriterien.

In der Praxis schließen sich die Ansätze nicht gegenseitig aus. Ein gut aufgestellter Shop bietet Instant Purchase für Stammkunden, Express-Payment-Buttons für alle mobilen Besucher und den klassischen Checkout als vollständigen Fallback, wobei alle drei Wege serverseitig auf dieselbe validierte Bestelllogik zurückgreifen.

10. Zusammenfassung

Effektive Express-Checkout-Optionen in Magento 2 bestehen aus drei sich ergänzenden Bausteinen: Instant Purchase für eingeloggte Stammkunden mit gespeicherten Daten, Wallet-Buttons wie Apple Pay und Google Pay für alle mobilen Besucher, und der klassische Checkout als vollständiger Fallback. Jede Express-Variante muss dieselben serverseitigen Validierungs- und Fraud-Regeln durchlaufen wie der reguläre Checkout, nur ohne dass der Kunde die einzelnen Schritte manuell durchklickt.

Der größte Hebel für die Conversion liegt in der sauberen technischen Integration der Wallet-APIs ins Hyvä-Frontend als eigenständige Alpine.js- und Magewire-Komponenten, kombiniert mit granularem Conversion-Tracking, das zwischen Klick, Wallet-Dialog und abgeschlossener Bestellung unterscheidet. Wer diese Express-Checkout-Optionen konsequent implementiert und misst, reduziert Kaufabbrüche gerade auf mobilen Geräten spürbar.

11. FAQ: Express-Checkout-Optionen in Magento 2