Jak dodać niestandardową płatność do Magento 2 Checkout
Opublikowany: 2021-05-11Spis treści
Jednym z największych ulepszeń Magento 2.x w stosunku do Magento 1.x jest możliwość zintegrowania niestandardowych metod płatności z kasą. W tym samouczku pokażemy Ci, jak zaimplementować renderowanie metody płatności w kasie Magento 2.
Krok 1: Utwórz plik komponentu .js
Na początek renderer metody płatności powinien działać jako komponent interfejsu użytkownika, który zależy od modułu Magento_Checkout i rozszerza domyślny komponent metody płatności (domyślny renderer metody płatności znajduje się w <Magento_Checkout_module_dir>/view/frontend/web/js/view/payment/default.js ).
Utwórz plik .js komponentu (program renderujący metodę płatności) w katalogu niestandardowego modułu. Musi być przechowywany w katalogu <your_module_dir>/view/frontend/web/js/view/ .
Ogólny widok modułu renderującego metodę płatności jest następujący:
definiować(
['Magento_Checkout / js / widok / płatność /
domyślna'
],
funkcja(Składnik) {
'
użyj ścisłego';
return Component.extend({
wartości domyślne: {
szablon: ' % ścieżka do szablonu % '
},
// dodaj tutaj wymaganą logikę
});
}
); Aby ta nowa metoda płatności mogła uzyskać dostęp do danych konfiguracji systemu , musi zaimplementować interfejs \Magento\Checkout\Model\ConfigProviderInterface , a implementująca ją klasa musi zostać wstrzyknięta do dostawcy konfiguracji złożonej za pośrednictwem konfiguracji interfejsu DI.
Przykładowy plik .php implementujący \Magento\Checkout\Model\ConfigProviderInterface :
klasa MyCustomPaymentConfigProvider implementuje \Magento\Checkout\Model\ConfigProviderInterface
{
...
funkcja publiczna getConfig()
{
zwrócić [
// 'klucz' => 'wartość' par konfiguracji
];
}
...
} A jeśli Twoja nowa metoda płatności wymaga informacji o karcie kredytowej , powinieneś użyć renderera Magento, aby zaimplementować formularz karty kredytowej (znajdujący się w <Magento_Payment_module_dir>/view/frontend/web/js/view/payment/cc-form.js ).
Krok 2: Utwórz komponent .js rejestrujący renderer
W katalogu modułów niestandardowych utwórz komponent .js UI, który rejestruje renderer metody płatności na liście rendererów. Musi znajdować się w katalogu <your_module_dir>/view/frontend/web/js/view/ .
Zawartość pliku jest jak poniżej:
definiować(
['uiComponent', 'Magento_Checkout / js / model / payment / renderer - lista'],
funkcjonować(
Składnik,
lista rendererów
) {
'
użyj ścisłego';
rendererList.push({
wpisz: ' % payment_method_code % ',
składnik: ' % js_renderer_component % '
},
// inne renderery metod płatności, jeśli są wymagane
);
/** W razie potrzeby dodaj logikę widoku */
return Component.extend({});
}
);Krok 3: Utwórz szablon dla składnika metody płatności
Utwórz nowy <your_module_dir>/view/frontend/web/template/<your_template>.html w swoim katalogu modułów. Szablon może używać składni Knockout JS.
Np. szablon do renderowania metody płatności PayPal Express:
https://github.com/magento/magento2/blob/2.4/app/code/Magento/Paypal/view/frontend/web/template/payment/paypal-express.html
Krok 4: Zadeklaruj metodę płatności w układzie
- Utwórz nowy
<your_module_dir>/view/frontend/layout/checkout_index_index.xmlw swoim katalogu modułów - Dodaj następujący kod do tego pliku
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<ciało>
<referenceBlock name="checkout.root">
<argumenty>
<argument name="jsLayout" xsi:type="array">
<item name="komponenty" xsi:type="array">
<item name="do kasy" xsi:type="array">
<item name="dzieci" xsi:type="array">
<item name="kroki" xsi:type="array">
<item name="dzieci" xsi:type="array">
<item name="krok rozliczeniowy" xsi:type="array">
<item name="komponent" xsi:type="string">komponent ui</item>
<item name="dzieci" xsi:type="array">
<item name="płatność" xsi:type="array">
<item name="dzieci" xsi:type="array">
<!-- Zadeklaruj dodatkowe składniki przed płatnością. START -->
<item name="beforeMethods" xsi:type="array">
<item name="komponent" xsi:type="string">komponent ui</item>
<item name="displayArea" xsi:type="string">przedMetodami</item>
<item name="dzieci" xsi:type="array">
<item name="%your_feature_name%" xsi:type="array">
<item name="komponent" xsi:type="string">%ścieżka/do/twojego/feature_js_komponent%</item>
</item>
</item>
</item>
<!-- Zadeklaruj dodatkowe składniki przed płatnością. KONIEC -->
<!-- Zadeklaruj metodę płatności (składnik, który rejestruje się na liście). START -->
<item name="renders" xsi:type="array">
<item name="dzieci" xsi:type="array">
<item name="%nazwa grupy metod płatności%" xsi:type="array">
<!-- Przykład wartości: Magento_Paypal/view/frontend/web/js/view/payment-->
<item name="component" xsi:type="string">%component_that_registers_payment_renderer%</item>
<item name="metody" xsi:type="array">
<!-- Dodaj to, jeśli metoda płatności wymaga podania adresu rozliczeniowego-->
<item name="%payment_method_code%" xsi:type="array">
<item name="isBillingAddressRequired" xsi:type="boolean">prawda</item>
</item>
</item>
</item>
</item>
</item>
<!-- Zadeklaruj metodę płatności (składnik, który rejestruje się na liście). KONIEC -->
<!-- Zadeklaruj dodatkowe składniki po dokonaniu płatności. START -->
<item name="afterMethods" xsi:type="array">
<item name="komponent" xsi:type="string">komponent ui</item>
<item name="displayArea" xsi:type="string">afterMethods</item>
<item name="dzieci" xsi:type="array">
<item name="%your_feature_name%" xsi:type="array">
<item name="komponent" xsi:type="string">%ścieżka/do/twojego/feature_js_komponent%</item>
</item>
</item>
</item>
<!-- Zadeklaruj dodatkowe składniki po dokonaniu płatności. KONIEC -->
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>(Tylko dla trybu produkcyjnego) Krok 5: Uruchom polecenia CLI
W trybie produkcyjnym musisz uruchomić kilka dodatkowych poleceń, takich jak:
php bin/magento setup:di:kompilacja php bin/magento setup:static-content:deploy php bin/magento cache: czyste
Pakiet rozszerzeń Magento 2 do kasy
Strona kasy jest zdecydowanie najważniejszym miejscem docelowym każdej witryny internetowej, która może albo przyciągnąć klienta do konsumenta, albo odepchnąć go od punktu sprzedaży.
Na szczęście to rozszerzenie Magento 2 Checkout pomaga bez wysiłku zoptymalizować kasę.
Sprawdź garnitur już teraz!
Zobacz też:
Jak dostosować proces realizacji transakcji w Magento 2?
Jak dodać kod rabatowy do kasy w Magento?