Come aggiungere un pagamento personalizzato alla cassa di Magento 2
Pubblicato: 2021-05-11Sommario
Uno dei grandi miglioramenti di Magento 2.x rispetto a Magento 1.x è che i metodi di pagamento personalizzati possono essere integrati nel checkout. In questo tutorial, ti mostreremo come implementare il rendering di un metodo di pagamento nel checkout di Magento 2.
Passaggio 1: crea il file del componente .js
Per iniziare, il renderer del metodo di pagamento dovrebbe fungere da componente dell'interfaccia utente che dipende dal modulo Magento_Checkout ed estende il componente del metodo di pagamento predefinito (il renderer del metodo di pagamento predefinito si trova in <Magento_Checkout_module_dir>/view/frontend/web/js/view/payment/default.js ).
Crea il file .js del componente (il renderer del metodo di pagamento) nella directory del modulo personalizzato. Deve essere archiviato nella <your_module_dir>/view/frontend/web/js/view/ .
La vista generale del renderer del metodo di pagamento è la seguente:
definire(
['Magento_Checkout/js/visualizza/pagamento/
predefinito'
],
funzione(Componente) {
'
usare rigoroso';
return Component.extend({
valori predefiniti: {
modello: ' % percorso al modello % '
},
// aggiungi qui la logica richiesta
});
}
); Affinché questo nuovo metodo di pagamento possa accedere ai dati di configurazione del sistema , deve implementare l'interfaccia \Magento\Checkout\Model\ConfigProviderInterface e la classe che lo implementa deve essere iniettata nel provider di configurazione composito tramite la configurazione del frontend DI.
Esempio di file .php che implementa \Magento\Checkout\Model\ConfigProviderInterface :
classe MyCustomPaymentConfigProvider implementa \Magento\Checkout\Model\ConfigProviderInterface
{
...
funzione pubblica getConfig()
{
Restituzione [
// 'chiave' => 'valore' coppie di configurazione
];
}
...
} E nel caso in cui il tuo nuovo metodo di pagamento richieda i dati della carta di credito , dovresti utilizzare il renderer Magento per implementare il modulo della carta di credito (che si trova in <Magento_Payment_module_dir>/view/frontend/web/js/view/payment/cc-form.js ).
Passaggio 2: crea il componente .js che registra il renderer
Nella directory del modulo personalizzato, crea il componente .js UI che registra il renderer del metodo di pagamento nell'elenco dei renderer. Deve trovarsi nella <your_module_dir>/view/frontend/web/js/view/ .
Il contenuto del file è il seguente:
definire(
['uiComponent', 'Magento_Checkout/js/modello/pagamento/renderer - elenco'],
funzione(
Componente,
rendererList
) {
'
usare rigoroso';
rendererList.push({
digitare: ' % payment_method_code % ',
componente: ' % js_renderer_component % '
},
// altri renderer di metodi di pagamento, se necessario
);
/** Aggiungi qui la logica di visualizzazione se necessario */
restituisce Component.extend({});
}
);Passaggio 3: crea il modello per il componente del metodo di pagamento
Crea un nuovo <your_module_dir>/view/frontend/web/template/<your_template>.html nella directory del modulo personalizzato. Il modello può utilizzare la sintassi Knockout JS.
Ad esempio, il modello per il rendering del metodo di pagamento PayPal Express:
https://github.com/magento/magento2/blob/2.4/app/code/Magento/Paypal/view/frontend/web/template/payment/paypal-express.html
Passaggio 4: dichiarare il metodo di pagamento nel layout
- Crea un nuovo file
<your_module_dir>/view/frontend/layout/checkout_index_index.xmlnella directory del modulo personalizzato - Aggiungi il codice seguente a quel file
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<corpo>
<referenceBlock name="checkout.root">
<argomenti>
<nome argomento="jsLayout" xsi:type="array">
<nome oggetto="componenti" xsi:type="array">
<item name="checkout" xsi:type="array">
<nome oggetto="bambini" xsi:type="array">
<nome oggetto="passi" xsi:type="array">
<nome oggetto="bambini" xsi:type="array">
<item name="billing-step" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<nome oggetto="bambini" xsi:type="array">
<nome oggetto="pagamento" xsi:type="array">
<nome oggetto="bambini" xsi:type="array">
<!-- Dichiara ulteriori componenti prima del pagamento. INIZIA -->
<item name="beforeMethods" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">beforeMethods</item>
<nome oggetto="bambini" 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>
<!-- Dichiara ulteriori componenti prima del pagamento. FINE -->
<!-- Dichiara il metodo di pagamento (il componente che si registra nell'elenco). INIZIA -->
<nome oggetto="rendering" xsi:type="array">
<nome oggetto="bambini" xsi:type="array">
<item name="%nome gruppo dei metodi di pagamento%" xsi:type="array">
<!-- Esempio di valore: Magento_Paypal/view/frontend/web/js/view/payment-->
<item name="component" xsi:type="string">%component_that_registers_payment_renderer%</item>
<nome oggetto="metodi" xsi:type="array">
<!-- Aggiungilo se il tuo metodo di pagamento richiede l'inserimento di un indirizzo di fatturazione-->
<item name="%payment_method_code%" xsi:type="array">
<item name="isBillingAddressRequired" xsi:type="boolean">true</item>
</item>
</item>
</item>
</item>
</item>
<!-- Dichiara il metodo di pagamento (il componente che si registra nell'elenco). FINE -->
<!-- Dichiara ulteriori componenti dopo il pagamento. INIZIA -->
<item name="afterMethods" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">afterMethods</item>
<nome oggetto="bambini" 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>
<!-- Dichiara ulteriori componenti dopo il pagamento. FINE -->
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argomento>
</argomenti>
</referenceBlock>
</corpo>
</pagina>(Solo per la modalità di produzione) Passaggio 5: eseguire i comandi CLI
In modalità di produzione, dovrai eseguire alcuni altri comandi in questo modo:
php bin/magento setup: di: compila php bin/magento setup:static-content:deploy php bin/magento cache: clean
Suite di estensione per cassa Magento 2
La pagina di pagamento è, di gran lunga, la destinazione più importante di qualsiasi sito Web online, che può portare un cliente in un consumatore o allontanarlo dal punto vendita.
Per fortuna, questa estensione per il checkout di Magento 2 aiuta a ottimizzare il tuo checkout senza sforzo.
Dai un'occhiata alla tuta ora!
Guarda anche:
Come personalizzare il processo di pagamento in Magento 2
Come aggiungere un codice sconto alla cassa in Magento