Comment ajouter un paiement personnalisé à Magento 2 Checkout
Publié: 2021-05-11Table des matières
L'une des grandes améliorations de Magento 2.x par rapport à Magento 1.x est que les méthodes de paiement personnalisées peuvent être intégrées à la caisse. Dans ce tutoriel, nous allons vous montrer comment implémenter un rendu de méthode de paiement dans la caisse de Magento 2.
Étape 1 : Créer le fichier de composant .js
Pour commencer, votre moteur de rendu de méthode de paiement doit agir comme un composant d'interface utilisateur qui dépend du module Magento_Checkout et étend le composant de méthode de paiement par défaut (le moteur de rendu de méthode de paiement par défaut est situé dans <Magento_Checkout_module_dir>/view/frontend/web/js/view/payment/default.js ).
Créez le fichier .js du composant (le moteur de rendu du mode de paiement) dans votre répertoire de module personnalisé. Il doit être stocké dans le <your_module_dir>/view/frontend/web/js/view/ .
La vue générale du moteur de rendu du mode de paiement est la suivante :
définir(
['Magento_Checkout/js/vue/paiement/
défaut'
],
fonction (composant) {
'
utiliser strict' ;
return Component.extend({
par défaut : {
template : ' % chemin vers le modèle % '
},
// ajouter la logique requise ici
});
}
); Pour que ce nouveau mode de paiement puisse accéder aux données de configuration du système , il doit implémenter l'interface \Magento\Checkout\Model\ConfigProviderInterface , et la classe qui l'implémente doit être injectée au fournisseur de configuration composite via la configuration frontale DI.
Exemple de fichier .php implémentant \Magento\Checkout\Model\ConfigProviderInterface :
la classe MyCustomPaymentConfigProvider implémente \Magento\Checkout\Model\ConfigProviderInterface
{
...
fonction publique getConfig()
{
revenir [
// 'clé' => paires 'valeur' de configuration
] ;
}
...
} Et si votre nouveau mode de paiement nécessite des informations de carte de crédit , vous devez utiliser le moteur de rendu Magento pour implémenter le formulaire de carte de crédit (situé dans <Magento_Payment_module_dir>/view/frontend/web/js/view/payment/cc-form.js ).
Étape 2 : Créer le composant .js en enregistrant le moteur de rendu
Dans votre répertoire de module personnalisé, créez le composant d'interface utilisateur .js qui enregistre le moteur de rendu du mode de paiement dans la liste des moteurs de rendu. Il doit être situé sous le <your_module_dir>/view/frontend/web/js/view/ .
Le contenu du fichier est comme ci-dessous :
définir(
['uiComponent', 'Magento_Checkout/js/model/payment/renderer - liste'],
fonction(
Composant,
rendererList
) {
'
utiliser strict' ;
rendererList.push({
tapez : ' % payment_method_code % ',
composant : ' % js_renderer_component % '
},
// autres rendus de méthode de paiement si nécessaire
);
/** Ajoutez une logique de vue ici si nécessaire */
return Component.extend({});
}
);Étape 3 : Créer le modèle pour le composant de mode de paiement
Créez un nouveau <your_module_dir>/view/frontend/web/template/<your_template>.html dans votre répertoire de module personnalisé. Le modèle peut utiliser la syntaxe Knockout JS.
Par exemple, le modèle de rendu du mode de paiement PayPal Express :
https://github.com/magento/magento2/blob/2.4/app/code/Magento/Paypal/view/frontend/web/template/payment/paypal-express.html
Etape 4 : Déclarez le moyen de paiement dans layout
- Créez un nouveau
<your_module_dir>/view/frontend/layout/checkout_index_index.xmldans votre répertoire de module personnalisé - Ajoutez le code suivant à ce fichier
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<corps>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="enfants" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="enfants" xsi:type="array">
<item name="billing-step" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="enfants" xsi:type="array">
<item name="paiement" xsi:type="array">
<item name="enfants" xsi:type="array">
<!-- Déclarer des composants supplémentaires avant paiement. DÉMARRER -->
<item name="beforeMethods" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">beforeMethods</item>
<item name="enfants" 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>
<!-- Déclarer des composants supplémentaires avant paiement. FIN -->
<!-- Déclarez le moyen de paiement (le composant qui s'inscrit dans la liste). DÉMARRER -->
<item name="rendu" xsi:type="array">
<item name="enfants" xsi:type="array">
<item name="%nom du groupe des moyens de paiement%" xsi:type="array">
<!-- Exemple de valeur : 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">
<!-- Ajoutez ceci si votre mode de paiement nécessite la saisie d'une adresse de facturation-->
<item name="%payment_method_code%" xsi:type="array">
<item name="isBillingAddressRequired" xsi:type="boolean">true</item>
</item>
</item>
</item>
</item>
</item>
<!-- Déclarez le moyen de paiement (le composant qui s'inscrit dans la liste). FIN -->
<!-- Déclarer des composants supplémentaires après paiement. DÉMARRER -->
<item name="afterMethods" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">afterMethods</item>
<item name="enfants" 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>
<!-- Déclarer des composants supplémentaires après paiement. FIN -->
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</ arguments>
</referenceBlock>
</body>
</page>(Pour le mode production uniquement) Étape 5 : Exécutez les commandes CLI
En mode production, vous devrez exécuter quelques commandes supplémentaires comme ceci :
Configuration de php bin/magento : di : compile Configuration de php bin/magento : contenu statique : déploiement cache bin php/magento:nettoyer
Suite d'extensions de paiement Magento 2
La page de paiement est, de loin, la destination la plus importante de tout site Web en ligne, qui peut soit amener un client vers un consommateur, soit l'éloigner du point de vente.
Heureusement, cette extension de paiement Magento 2 permet d'optimiser votre paiement sans effort.
Découvrez le costume maintenant!
Voir également:
Comment personnaliser le processus de paiement dans Magento 2
Comment ajouter un code de réduction à la caisse dans Magento