Cum să adăugați o plată personalizată la Magento 2 Checkout
Publicat: 2021-05-11Cuprins
Una dintre marile îmbunătățiri ale Magento 2.x față de Magento 1.x este că metodele de plată personalizate pot fi integrate în finalizarea comenzii. În acest tutorial, vă vom arăta cum să implementați redarea unei metode de plată în Magento 2 checkout.
Pasul 1: Creați fișierul component .js
Pentru început, redarea metodei de plată ar trebui să acționeze ca o componentă a interfeței de utilizare care depinde de modulul Magento_Checkout și extinde componenta implicită a metodei de plată (modul de redare implicit al metodei de plată se află în <Magento_Checkout_module_dir>/view/frontend/web/js/view/payment/default.js ).
Creați fișierul .js al componentei (redarea metodei de plată) în directorul modulului personalizat. Acesta trebuie să fie stocat în directorul <your_module_dir>/view/frontend/web/js/view/ .
Vederea generală a modului de redare a metodei de plată este următoarea:
defini(
['Magento_Checkout / js / view / payment /
Mod implicit'
],
function(component) {
'
folosiți strict';
returnează Component.extend({
valori implicite: {
șablon: „ % cale către șablon % ”
},
// adăugați aici logica necesară
});
}
); Pentru ca această nouă metodă de plată să poată accesa datele de configurare a sistemului , trebuie să implementeze interfața \Magento\Checkout\Model\ConfigProviderInterface , iar clasa care o implementează trebuie să fie injectată furnizorului de configurare compozită prin configurația frontend DI.
Exemplu de fișier .php care implementează \Magento\Checkout\Model\ConfigProviderInterface :
clasa MyCustomPaymentConfigProvider implementează \Magento\Checkout\Model\ConfigProviderInterface
{
...
funcția publică getConfig()
{
întoarcere [
// 'key' => 'valoare' perechi de configurare
];
}
...
} Și în cazul în care noua dvs. metodă de plată necesită informații despre cardul de credit , ar trebui să utilizați instrumentul de redare Magento pentru a implementa formularul cardului de credit (situat în <Magento_Payment_module_dir>/view/frontend/web/js/view/payment/cc-form.js ).
Pasul 2: Creați componenta .js înregistrând redarea
În directorul modulului personalizat, creați componenta .js UI care înregistrează redarea metodei de plată în lista de redare. Acesta trebuie să fie situat în directorul <your_module_dir>/view/frontend/web/js/view/ .
Conținutul fișierului este după cum urmează:
defini(
['uiComponent', 'Magento_Checkout / js / model / payment / renderer - list'],
funcţie(
componentă,
rendererList
) {
'
folosiți strict';
rendererList.push({
tip: ' % payment_method_code % ',
componentă: „ % js_renderer_component % ”
},
// alte mijloace de redare a metodelor de plată, dacă este necesar
);
/** Adăugați aici logica de vizualizare dacă este necesar */
returnează Component.extend({});
}
);Pasul 3: Creați șablonul pentru componenta metodă de plată
Creați un nou <your_module_dir>/view/frontend/web/template/<your_template>.html în directorul modul personalizat. Șablonul poate folosi sintaxa Knockout JS.
De exemplu, șablonul pentru redarea metodei de plată PayPal Express:
https://github.com/magento/magento2/blob/2.4/app/code/Magento/Paypal/view/frontend/web/template/payment/paypal-express.html
Pasul 4: Declarați metoda de plată în aspect
- Creați un nou
<your_module_dir>/view/frontend/layout/checkout_index_index.xmlîn directorul modul personalizat - Adăugați următorul cod la acel fișier
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<corp>
<referenceBlock name="checkout.root">
<argumente>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="billing-step" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="children" xsi:type="array">
<item name="payment" xsi:type="array">
<item name="children" xsi:type="array">
<!-- Declarați componente suplimentare înainte de plată. START -->
<item name="beforeMethods" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">beforeMethods</item>
<item name="children" 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>
<!-- Declarați componente suplimentare înainte de plată. SFÂRȘIT -->
<!-- Declarați modalitatea de plată (componenta care se înregistrează în listă). START -->
<item name="renders" xsi:type="array">
<item name="children" xsi:type="array">
<item name="%numele grupului metodelor de plată%" xsi:type="array">
<!-- Exemplu de valoare: 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">
<!-- Adăugați acest lucru dacă metoda dvs. de plată necesită introducerea unei adrese de facturare-->
<item name="%payment_method_code%" xsi:type="array">
<item name="isBillingAddressRequired" xsi:type="boolean">true</item>
</item>
</item>
</item>
</item>
</item>
<!-- Declarați modalitatea de plată (componenta care se înregistrează în listă). SFÂRȘIT -->
<!-- Declarați componente suplimentare după plată. START -->
<item name="afterMethods" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">afterMethods</item>
<item name="children" 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>
<!-- Declarați componente suplimentare după plată. SFÂRȘIT -->
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</argumente>
</referenceBlock>
</corp>
</pagina>(Numai pentru modul producție) Pasul 5: Rulați comenzile CLI
În modul producție, va trebui să rulați mai multe comenzi, astfel:
php bin/magento setup:di:compile php bin/magento setup:static-content:deploy php bin/magento cache:clean
Magento 2 Checkout Extension Suite
Pagina de checkout este, de departe, cea mai importantă destinație a oricărui site online, care fie poate aduce un client într-un consumator, fie îl poate îndepărta de punctul de vânzare.
Din fericire, această extensie Magento 2 Checkout vă ajută să vă optimizați fără efort procesul de plată.
Verificați costumul acum!
Vezi si:
Cum să personalizați procesul de plată în Magento 2
Cum să adăugați un cod de reducere la Checkout în Magento