Cómo agregar un pago personalizado al pago de Magento 2
Publicado: 2021-05-11Tabla de contenido
Una de las grandes mejoras de Magento 2.x sobre Magento 1.x es que se pueden integrar métodos de pago personalizados en el proceso de pago. En este tutorial, le mostraremos cómo implementar una representación de método de pago en el proceso de pago de Magento 2.
Paso 1: Cree el archivo de componente .js
Para empezar, el procesador de su método de pago debe actuar como un componente de la interfaz de usuario que depende del módulo Magento_Checkout y amplía el componente del método de pago predeterminado (el procesador de método de pago predeterminado se encuentra en <Magento_Checkout_module_dir>/view/frontend/web/js/view/payment/default.js ).
Cree el archivo .js del componente (el procesador de métodos de pago) en su directorio de módulos personalizados. Debe almacenarse en el <your_module_dir>/view/frontend/web/js/view/ .
La vista general del renderizador de métodos de pago es la siguiente:
definir(
['Magento_Checkout/js/ver/pago/
defecto'
],
función (componente) {
'
uso estricto';
devolver Componente.extender({
predeterminados: {
plantilla: ' % ruta a la plantilla % '
},
// agregue la lógica requerida aquí
});
}
); Para que este nuevo método de pago pueda acceder a los datos de configuración del sistema , debe implementar la interfaz \Magento\Checkout\Model\ConfigProviderInterface , y la clase que la implementa debe inyectarse en el proveedor de configuración compuesto a través de la configuración de frontend DI.
Ejemplo de archivo .php que implementa \Magento\Checkout\Model\ConfigProviderInterface :
clase MyCustomPaymentConfigProvider implementa \Magento\Checkout\Model\ConfigProviderInterface
{
...
función pública getConfig()
{
devolver [
// 'clave' => 'valor' pares de configuración
];
}
...
} Y en caso de que su nuevo método de pago requiera información de tarjeta de crédito , debe usar el renderizador de Magento para implementar el formulario de tarjeta de crédito (ubicado en <Magento_Payment_module_dir>/view/frontend/web/js/view/payment/cc-form.js ).
Paso 2: Cree el componente .js registrando el renderizador
En su directorio de módulos personalizados, cree el componente de interfaz de usuario .js que registra el procesador de métodos de pago en la lista de procesadores. Debe estar ubicado en el <your_module_dir>/view/frontend/web/js/view/ .
El contenido del archivo es el siguiente:
definir(
['uiComponent', 'Magento_Checkout/js/modelo/pago/renderizador - lista'],
función(
Componente,
rendererList
) {
'
uso estricto';
rendererList.push({
tipo: ' % código_método_pago % ',
componente: ' % js_renderer_component % '
},
// otros renderizadores de métodos de pago si es necesario
);
/** Añadir lógica de vista aquí si es necesario */
devuelve Componente.extender({});
}
);Paso 3: Cree la plantilla para el componente de método de pago
Cree un nuevo <your_module_dir>/view/frontend/web/template/<your_template>.html en su directorio de módulo personalizado. La plantilla puede usar la sintaxis de Knockout JS.
Por ejemplo, la plantilla para representar el método de pago de PayPal Express:
https://github.com/magento/magento2/blob/2.4/app/code/Magento/Paypal/view/frontend/web/template/payment/paypal-express.html
Paso 4: Declarar el método de pago en el diseño
- Cree un nuevo
<your_module_dir>/view/frontend/layout/checkout_index_index.xmlen su directorio de módulo personalizado - Agregue el siguiente código a ese archivo
<página xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<cuerpo>
<referenceBlock name="checkout.root">
<argumentos>
<argumento nombre="jsLayout" xsi:tipo="matriz">
<elemento nombre="componentes" xsi:tipo="matriz">
<nombre del artículo="pago" xsi:tipo="matriz">
<elemento nombre="hijos" xsi:tipo="matriz">
<elemento nombre="pasos" xsi:tipo="matriz">
<elemento nombre="hijos" xsi:tipo="matriz">
<item name="paso-de-facturación" xsi:type="matriz">
<elemento nombre="componente" xsi:tipo="cadena">uiComponent</elemento>
<elemento nombre="hijos" xsi:tipo="matriz">
<elemento nombre="pago" xsi:tipo="matriz">
<elemento nombre="hijos" xsi:tipo="matriz">
<!-- Declarar componentes adicionales antes del pago. INICIO -->
<item name="beforeMethods" xsi:type="array">
<elemento nombre="componente" xsi:tipo="cadena">uiComponent</elemento>
<item name="displayArea" xsi:type="string">beforeMethods</item>
<elemento nombre="hijos" xsi:tipo="matriz">
<item name="%your_feature_name%" xsi:type="array">
<item name="component" xsi:type="string">%path/to/your/feature_js_component%</item>
</elemento>
</elemento>
</elemento>
<!-- Declarar componentes adicionales antes del pago. FIN -->
<!-- Declarar el método de pago (el componente que se registra en la lista). INICIO -->
<item name="renders" xsi:type="array">
<elemento nombre="hijos" xsi:tipo="matriz">
<item name="%nombre de grupo de los métodos de pago%" xsi:type="array">
<!-- Ejemplo de valor: Magento_Paypal/view/frontend/web/js/view/pago-->
<item name="componente" xsi:type="string">%component_that_registers_payment_renderer%</item>
<elemento nombre="métodos" xsi:tipo="matriz">
<!-- Agregue esto si su método de pago requiere ingresar una dirección de facturación-->
<nombre del artículo="%código_método_de_pago%" xsi:tipo="matriz">
<item name="isBillingAddressRequired" xsi:type="boolean">true</item>
</elemento>
</elemento>
</elemento>
</elemento>
</elemento>
<!-- Declarar el método de pago (el componente que se registra en la lista). FIN -->
<!-- Declarar componentes adicionales después del pago. INICIO -->
<item name="afterMethods" xsi:type="array">
<elemento nombre="componente" xsi:tipo="cadena">uiComponent</elemento>
<item name="área de visualización" xsi:type="string">métodos posteriores</item>
<elemento nombre="hijos" xsi:tipo="matriz">
<item name="%your_feature_name%" xsi:type="array">
<item name="component" xsi:type="string">%path/to/your/feature_js_component%</item>
</elemento>
</elemento>
</elemento>
<!-- Declarar componentes adicionales después del pago. FIN -->
</elemento>
</elemento>
</elemento>
</elemento>
</elemento>
</elemento>
</elemento>
</elemento>
</elemento>
</argumento>
</argumentos>
</bloque de referencia>
</cuerpo>
</página>(Solo para el modo de producción) Paso 5: Ejecute los comandos CLI
En el modo de producción, deberá ejecutar algunos comandos más como este:
Configuración de php bin/magento: di: compilar Configuración de php bin/magento: contenido estático: implementación php bin/caché de magento: limpiar
Suite de extensión de pago de Magento 2
La página de pago es, con mucho, el destino más importante de cualquier sitio web en línea, que puede llevar a un cliente a un consumidor o alejarlo del punto de venta.
Afortunadamente, esta extensión de pago de Magento 2 ayuda a optimizar su pago sin esfuerzo.
¡Mira el traje ahora!
Ver también:
Cómo personalizar el proceso de pago en Magento 2
Cómo agregar un código de descuento al pago en Magento