So fügen Sie eine benutzerdefinierte Zahlung zu Magento 2 Checkout hinzu
Veröffentlicht: 2021-05-11Inhaltsverzeichnis
Eine der großen Verbesserungen von Magento 2.x gegenüber Magento 1.x ist, dass benutzerdefinierte Zahlungsmethoden in den Checkout integriert werden können. In diesem Tutorial zeigen wir Ihnen, wie Sie ein Zahlungsmethoden-Rendering in Magento 2 Checkout implementieren.
Schritt 1: Erstellen Sie die .js Komponentendatei
Zu Beginn sollte Ihr Zahlungsmethoden-Renderer als UI-Komponente fungieren, die vom Magento_Checkout -Modul abhängt und die Standard-Zahlungsmethode-Komponente erweitert (der Standard-Zahlungsmethode-Renderer befindet sich in <Magento_Checkout_module_dir>/view/frontend/web/js/view/payment/default.js ).
Erstellen Sie die .js -Datei der Komponente (den Zahlungsmethode-Renderer) in Ihrem benutzerdefinierten Modulverzeichnis. Es muss im <your_module_dir>/view/frontend/web/js/view/ werden.
Die allgemeine Ansicht des Zahlungsmethoden-Renderers ist die folgende:
definieren(
['Magento_Checkout /js/view/payment/
Ursprünglich'
],
Funktion (Komponente) {
'
benutze strikt';
return Component.extend({
Voreinstellungen: {
Vorlage: ' % Pfad zur Vorlage % '
},
// Fügen Sie hier die erforderliche Logik hinzu
});
}
); Damit diese neue Zahlungsmethode auf Systemkonfigurationsdaten zugreifen kann , muss sie die Schnittstelle \Magento\Checkout\Model\ConfigProviderInterface implementieren, und die Klasse, die sie implementiert, muss dem zusammengesetzten Konfigurationsanbieter über die DI-Frontend-Konfiguration injiziert werden.
Beispiel .php -Datei, die \Magento\Checkout\Model\ConfigProviderInterface :
Klasse MyCustomPaymentConfigProvider implementiert \Magento\Checkout\Model\ConfigProviderInterface
{
...
öffentliche Funktion getConfig()
{
Rückkehr [
// 'key' => 'value' Konfigurationspaare
];
}
...
} Und falls Ihre neue Zahlungsmethode Kreditkarteninformationen erfordert, sollten Sie den Magento-Renderer verwenden, um das Kreditkartenformular zu implementieren (zu finden unter <Magento_Payment_module_dir>/view/frontend/web/js/view/payment/cc-form.js ).
Schritt 2: Erstellen Sie die .js Komponente, die den Renderer registriert
Erstellen Sie in Ihrem benutzerdefinierten Modulverzeichnis die .js-UI-Komponente, die den Zahlungsmethode-Renderer in der Renderer-Liste registriert. Es muss sich im <your_module_dir>/view/frontend/web/js/view/ .
Der Dateiinhalt ist wie folgt:
definieren(
['uiComponent', 'Magento_Checkout / js / model / payment / renderer - list'],
Funktion(
Komponente,
rendererList
) {
'
benutze strikt';
rendererList.push({
Typ: ' % Zahlungsmethodencode % ',
Komponente: ' % js_renderer_component % '
},
// andere Zahlungsmethode-Renderer, falls erforderlich
);
/** Ansichtslogik hier hinzufügen, falls erforderlich */
Rückgabe Component.extend({});
}
);Schritt 3: Erstellen Sie die Vorlage für die Komponente Zahlungsmethode
Erstellen Sie eine neue <your_module_dir>/view/frontend/web/template/<your_template>.html in Ihrem benutzerdefinierten Modulverzeichnis. Die Vorlage kann Knockout JS-Syntax verwenden.
ZB die Vorlage zum Rendern der Zahlungsmethode PayPal Express:
https://github.com/magento/magento2/blob/2.4/app/code/Magento/Paypal/view/frontend/web/template/payment/paypal-express.html
Schritt 4: Deklarieren Sie die Zahlungsmethode im Layout
- Erstellen Sie eine neue Datei
<your_module_dir>/view/frontend/layout/checkout_index_index.xmlin Ihrem benutzerdefinierten Modulverzeichnis - Fügen Sie dieser Datei den folgenden Code hinzu
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<Körper>
<referenceBlock name="checkout.root">
<Argumente>
<argument name="jsLayout" xsi:type="array">
<item name="komponenten" xsi:type="array">
<item name="checkout" xsi:type="array">
<Elementname="Kinder" xsi:type="array">
<item name="steps" xsi:type="array">
<Elementname="Kinder" xsi:type="array">
<item name="billing-step" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<Elementname="Kinder" xsi:type="array">
<item name="payment" xsi:type="array">
<Elementname="Kinder" xsi:type="array">
<!-- Deklarieren Sie zusätzliche Komponenten vor der Zahlung. STARTEN -->
<item name="beforeMethods" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">beforeMethods</item>
<Elementname="Kinder" xsi:type="array">
<item name="%your_feature_name%" xsi:type="array">
<item name="component" xsi:type="string">%path/to/your/feature_js_component%</item>
</item>
</item>
</item>
<!-- Deklarieren Sie zusätzliche Komponenten vor der Zahlung. ENDE -->
<!-- Deklarieren Sie die Zahlungsmethode (die Komponente, die sich in der Liste anmeldet). STARTEN -->
<item name="rendert" xsi:type="array">
<Elementname="Kinder" xsi:type="array">
<item name="%Gruppenname der Zahlungsmethoden%" xsi:type="array">
<!-- Beispielwert: Magento_Paypal/view/frontend/web/js/view/payment-->
<item name="component" xsi:type="string">%component_that_registers_payment_renderer%</item>
<item name="methods" xsi:type="array">
<!-- Fügen Sie dies hinzu, wenn Ihre Zahlungsmethode die Eingabe einer Rechnungsadresse erfordert-->
<item name="%payment_method_code%" xsi:type="array">
<item name="isBillingAddressRequired" xsi:type="boolean">true</item>
</item>
</item>
</item>
</item>
</item>
<!-- Deklarieren Sie die Zahlungsmethode (die Komponente, die sich in der Liste anmeldet). ENDE -->
<!-- Deklarieren Sie zusätzliche Nachzahlungskomponenten. STARTEN -->
<item name="afterMethods" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">afterMethods</item>
<Elementname="Kinder" xsi:type="array">
<item name="%your_feature_name%" xsi:type="array">
<item name="component" xsi:type="string">%path/to/your/feature_js_component%</item>
</item>
</item>
</item>
<!-- Deklarieren Sie zusätzliche Nachzahlungskomponenten. ENDE -->
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</Argument>
</argumente>
</ReferenzBlock>
</body>
</Seite>(Nur für den Produktionsmodus) Schritt 5: Führen Sie CLI-Befehle aus
Im Produktionsmodus müssen Sie einige weitere Befehle wie folgt ausführen:
php bin/magento setup:di:compile php bin/magento setup:statischer-inhalt:bereitstellen php bin/magento cache:clean
Magento 2 Checkout-Erweiterungssuite
Die Checkout-Seite ist bei weitem das wichtigste Ziel jeder Online-Website, die einen Kunden entweder zum Verbraucher bringen oder ihn vom Point of Sale wegdrängen kann.
Glücklicherweise hilft diese Magento 2 Checkout-Erweiterung dabei, Ihren Checkout mühelos zu optimieren.
Schauen Sie sich den Anzug jetzt an!
Siehe auch:
So passen Sie den Checkout-Prozess in Magento 2 an
So fügen Sie einen Rabattcode zur Kasse in Magento hinzu