Introducción
Los clientes quieren usar métodos de pago preferidos reconocen y confían. Para cumplir con las expectativas de los clientes, las tiendas de comercio electrónico deben ofrecer tantas opciones de pago como sea posible.
Magento 2.4 permite a los propietarios de tiendas aceptar pagos mediante las soluciones de pago integradas de PayPal / Braintree. También puede agregar nuevas opciones de pago implementando extensiones de terceros desde el Magento Marketplace.
Sin embargo, agregar un método de pago personalizado permite a los comerciantes:
- Integre Magento 2 con un procesador de pagos de comercio electrónico.
- Personalice el proceso de pago de Magento para que se ajuste a un modelo de negocio en particular.
- Ofrezca a los clientes opciones de pago específicas de la región.
En este artículo, aprenda cómo agregar un método de pago personalizado a Magento 2 y maximice las tasas de conversión de su tienda.
Agregar un método de pago personalizado en Magento 2
Para agregar una nueva opción de pago en Magento 2, debe crear un módulo de pago personalizado, representar el método de pago durante el pago y configurar el módulo para procesar los datos de pago junto con los sistemas de Magento.
Magento es una plataforma flexible de código abierto y no es necesario modificar el código nativo de Magento. Cree el método de pago personalizado como un módulo separado que dependa del módulo de pago de Magento existente.
Note: Elegir el derecho pasarela de pago que ofrece un flujo de pago fluido cuando construyendo un sitio web de Magento es importante para el crecimiento y desarrollo de su negocio de comercio electrónico.
Paso 1: Registre el módulo de pago en Magento
Créar un registration.php archivo en el directorio raíz del módulo de pago. En este ejemplo, la ruta del archivo es app / code / CCBill / CustomPaymentOption / registration.php.
Agregue el siguiente código para registrar el módulo (componente) en el sistema de Magento:
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'CCBill_CustomPaymentOption',
__DIR__
);Edite el proveedor (CCBill) y el nombre del módulo (CustomPaymentOption) para que coincida con el nombre de su módulo.
Note: Para una fácil integración con Magento, CCBill mantiene un Repositorio GitHub para su API de cara al público. Para obtener información adicional, comuníquese con Soporte CCBill.
Paso 2: Declare el nombre del módulo de pago
Accede al módulo personalizado app / code / CCBill / CustomPaymentOption / etc / directorio y crear un módulo.xml expediente. Defina el nombre del módulo dentro del módulo.xml archivo:
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="CCBill_ CustomPaymentOption" setup_version="2.2.0">
<sequence>
<module name="Magento_Sales"/>
<module name="Magento_Payment"/>
<module name="Magento_Checkout"/>
</sequence>
</module>
</config>El <strong><sequence></strong> La etiqueta controla el orden de carga y garantiza que el sistema cargue los componentes enumerados antes del módulo de pago personalizado.
Paso 3: agregue las opciones de configuración del método de pago
Configure y muestre el método de pago en el administrador de Magento usando un sistema.xml presentar. Crea el sistema.xml presentar en el app / code / CCBill / CustomPaymentOption / etc / adminhtml / directorio y agregue el siguiente código:
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
<system>
<section id="payment">
<group id="ccbill_custompaymentoption" translate="label comment" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Custom Payment Option</label>
<field id="active" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="0">
<label>Enabled</label>
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
</field>
<field id="title" translate="label" type="text" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Title</label>
</field>
<field id="cctypes" translate="label" type="multiselect" sortOrder="75" showInDefault="1" showInWebsite="1" showInStore="0">
<label>Credit Card Types</label>
<source_model>Magento\Payment\Model\Source\Cctype</source_model>
</field>
</group>
</section>
</system>
</config>Activar el módulo usando el <strong>Enabled</strong> etiqueta, muestra su <strong>Title</strong>y agregue una opción de pago preferida, como <strong>Credit Card Types</strong>.
Paso 4: agregar valores de configuración del sistema predeterminados
Definir valores predeterminados para el sistema.xml archivo creando un config.xml expediente. Crea el config.xml presentar en el app / code / CCBill / CustomPaymentOption / etc / directorio y agregue el siguiente código:
<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
<default>
<payment>
<ccbill_custompaymentoption>
<title>Custom Payment Option</title>
<active>1</active>
<payment_action>preferred_method</payment_action>
<model>CCBill\CustomPaymentOption\Model\PaymenMethod</model>
<order_status>pending_payment</order_status>
</ccbill_custompaymentoption>
</payment>
</default>
</config>Ingrese al <strong>payment_action</strong> etiqueta para establecer los métodos de pago preferidos como valor predeterminado.
Paso 5: Crear modelo de método de pago
Acceder al app / code / CCBill / CustomPaymentOption / Model / directorio y crear un opciónpagopersonalizado.php presentar. Copie el siguiente código para establecer una clase de modelo de método de pago en el . Php archivo:
<?php
namespace CCBill\CustomPaymentOption\Model;
class CustomPaymentOption extends \Magento\Payment\Model\Method\Cc
{
const METHOD_CODE = 'ccbill_custompaymentoption';
protected $_code = self::METHOD_CODE;
protected $_custompayments;
protected $_isGateway = true;
protected $_canCapture = true;
protected $_canCapturePartial = true;
protected $_canRefund = true;
protected $_minOrderTotal = 0;
protected $_supportedCurrencyCodes = array('USD','GBP','EUR');
public function __construct(
\Magento\Framework\Model\Context $context,
\Magento\Framework\Registry $registry,
\Magento\Framework\Api\ExtensionAttributesFactory $extensionFactory,
\Magento\Framework\Api\AttributeValueFactory $customAttributeFactory,
\Magento\Payment\Helper\Data $paymentData,
\Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig,
\Magento\Payment\Model\Method\Logger $logger,
\Magento\Framework\Module\ModuleListInterface $moduleList,
\Magento\Framework\Stdlib\DateTime\TimezoneInterface $localeDate,
\Extension\Extension $Extension,
array $data = array()
) {
parent::__construct(
$context,
$registry,
$extensionFactory,
$customAttributeFactory,
$paymentData,
$scopeConfig,
$logger,
$moduleList,
$localeDate,
null,
null,
$data
);
$this->_code = 'Extension';
$this->_Extension = $Extension;
$this->_Extension->setApiKey($this->getConfigData('api_key'));
$this->_minOrderTotal = $this->getConfigData('min_order_total');
}
public function canUseForCurrency($currencyCode)
{
if (!in_array($currencyCode, $this->_supportedCurrencyCodes)) {
return false;
}
return true;
}
public function capture(\Magento\Payment\Model\InfoInterface $payment, $amount)
{
$order = $payment->getOrder();
$billing = $order->getBillingAddress();
try{
$charge = \Extension\Charge::create(array(
'amount' => $amount*100,
'currency' => strtolower($order->getBaseCurrencyCode()),
'card' => array(
'number' => $payment->getCcNumber(),
'exp_month' => sprintf('%02d',$payment->getCcExpMonth()),
'exp_year' => $payment->getCcExpYear(),
'cvc' => $payment->getCcCid(),
'name' => $billing->getName(),
'address_line1' => $billing->getStreet(1),
'address_line2' => $billing->getStreet(2),
'address_zip' => $billing->getPostcode(),
'address_state' => $billing->getRegion(),
'address_country' => $billing->getCountry(),
),
'description' => sprintf('#%s, %s', $order->getIncrementId(), $order->getCustomerEmail())
));
$payment->setTransactionId($charge->id)->setIsTransactionClosed(0);
return $this;
}catch (\Exception $e){
$this->debugData(['exception' => $e->getMessage()]);
throw new \Magento\Framework\Validator\Exception(__('Payment capturing error.'));
}
}
public function refund(\Magento\Payment\Model\InfoInterface $payment, $amount)
{
$transactionId = $payment->getParentTransactionId();
try {
\Extension\Charge::retrieve($transactionId)->refund();
} catch (\Exception $e) {
$this->debugData(['exception' => $e->getMessage()]);
throw new \Magento\Framework\Validator\Exception(__('Payment refunding error.'));
}
$payment
->setTransactionId($transactionId . '-' . \Magento\Sales\Model\Order\Payment\Transaction::TYPE_REFUND)
->setParentTransactionId($transactionId)
->setIsTransactionClosed(1)
->setShouldCloseParentTransaction(1);
return $this;
}
public function isAvailable(\Magento\Quote\Api\Data\CartInterface $quote = null){
$this->_minOrderTotal = $this->getConfigData('min_order_total');
if($quote && $quote->getBaseGrandTotal() < $this->_minOrderTotal) {
return false;
}
return $this->getConfigData('api_key', ($quote ? $quote->getStoreId() : null))
&& parent::isAvailable($quote);
}
}Para verificar si el nuevo método de pago está disponible, acceda al Administrador de Magento y vaya a Tiendas> Configuración.
Ampliar la opción Ventas desplácese hacia abajo y abra el Métodos De Pago .
Confirme que la configuración se corresponde con los valores definidos en el config.xml y sistema.xml archivos.
Paso 6: configurar la inyección de dependencia
Para inyectar el método de pago personalizado en el Magento existente <strong>CcGenericConfigProvider </strong>crear un nuevo <em>di.xml</em> file<em>.</em> Coloque el di.xml archivo dentro del app / code / CCBill / CustomPaymentOption / etc / frontend / directorio y agregue el código del método de pago como argumento:
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Payment\Model\CcGenericConfigProvider">
<arguments>
<argument name="methodCodes" xsi:type="array">
<item name="CustomPaymentOption" xsi:type="const">CCBill\CustomPaymentOption\Model\Payment::METHOD_CODE</item>
</argument>
</arguments>
</type>
</config>Después de configurar el módulo de método de pago, el sistema necesita representar la interfaz de usuario en la interfaz de la tienda.
Paso 7: agregar un renderizador de método de pago
Créar un pagos personalizados.js archivo dentro del app / code / CCBill / CustomPaymentOption / view / frontend / web / js / view / payment / directorio. Agrega el siguiente código:
define(
[
'uiComponent',
'Magento_Checkout/js/model/payment/renderer-list'
],
function (
Component,
rendererList
) {
'use strict';
rendererList.push(
{
type: 'ccbill_custompaymentopyion',
component: 'CCBill_CustomPaymentOption/js/view/payment/method-renderer/custompayments'
}
);La función principal del . Js El archivo en este ejemplo es agregar un renderizador de método de pago.
Paso 8: declarar el renderizador del método de pago
Créar un . Js presentar en el app / code / CCBill / CustomPaymentOption / view / frontend / web / js / view / payment / method-renderer / directorio. Utilice el siguiente código para controlar la lógica de la interfaz del nuevo método de pago:
define(
[
'Magento_Payment/js/view/payment/cc-form',
'jquery',
'Magento_Checkout/js/action/place-order',
'Magento_Checkout/js/model/full-screen-loader',
'Magento_Checkout/js/model/payment/additional-validators',
'Magento_Payment/js/model/credit-card-validation/validator'
],
function (Component, $) {
'use strict';
return Component.extend({
defaults: {
template: 'CCBill_CustomPaymentOption/payment/custompayments'
},
getCode: function() {
return 'ccbill_custompaymentoption';
},
isActive: function() {
return true;
},
validate: function() {
var $form = $('#' + this.getCode() + '-form');
return $form.validation() && $form.validation('isValid');
}
});
}
);Si el módulo personalizado tiene varios métodos de pago, registre los renderizadores en el mismo . Js archivo.
Paso 9: Cree una plantilla de método de pago
El sistema procesa el componente de la interfaz de usuario utilizando el marco de Knockout JavaScript. Cree una plantilla que contenga un título, una dirección de facturación y un botón de opción para el método de pago.
Crea el . Html presentar en el app / code / CCBill / CustomPaymentOption / view / frontend / web / js / view / payment / directorio.
<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
<div class="payment-method-title field choice">
<input type="radio"
name="payment[method]"
class="radio"
data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>
<label data-bind="attr: {'for': getCode()}" class="label"><span data-bind="text: getTitle()"></span></label>
</div>
<div class="payment-method-content">
<!-- ko foreach: getRegion('messages') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<div class="payment-method-billing-address">
<!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</div>
<form class="form" data-bind="attr: {'id': getCode() + '-form'}">
<!-- ko template: 'Magento_Payment/payment/cc-form' --><!-- /ko -->
</form>
<div class="checkout-agreements-block">
<!-- ko foreach: $parent.getRegion('before-place-order') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</div>
<div class="actions-toolbar">
<div class="primary">
<button class="action primary checkout"
type="submit"
data-bind="
click: placeOrder,
attr: {title: $t('Place Order')},
css: {disabled: !isPlaceOrderActionAllowed()},
enable: (getCode() == isChecked())
"
disabled>
<span data-bind="text: $t('Place Order')"></span>
</button>
</div>
</div>
</div>
</divPara mayor comodidad, use plantillas de los módulos de pago de Magento existentes. La . Html las plantillas se encuentran en el / frontend / web / template / payment / directorios del módulo de pago.
Paso 10: muestra el método de pago en el proceso de pago
Para mostrar el método de pago en la página de pago, cree el checkout_index_index.xml archivo dentro del app / code / CCBill / CustomPaymentOption / view / frontend / layout / directorio.
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<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="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">
<item name="renders" xsi:type="array">
<!-- merge payment method renders here -->
<item name="children" xsi:type="array">
<item name="paymentoptions-payments" xsi:type="array">
<item name="component" xsi:type="string">CCBill_CustomPaymentOption/js/view/payment/paymentoptions</item>
<item name="methods" xsi:type="array">
<item name="CustomPaymentOptions" xsi:type="array">
<item name="isBillingAddressRequired" xsi:type="boolean">true</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>Si Magento está en modo de producción, implemente contenido estático y vacíe el caché de Magento antes de probar la funcionalidad del nuevo método de pago.
Para vaciar la caché de Magento, use:
php bin/magento cache:flushConclusión
Ha agregado con éxito un método de pago personalizado a su tienda Magento 2. Utilice el mismo enfoque para implementar nuevas opciones de pago y permitir que los clientes paguen con su método preferido.
La cantidad de dispositivos y métodos que utilizan los clientes para realizar pagos en línea está aumentando rápidamente. Es un desafío mantener una experiencia de cliente satisfactoria con un modelo tradicional basado en la web.
Para ayudar a los comerciantes a llegar a sus clientes de manera más efectiva, plataformas como Magento están introduciendo comercio sin cabeza y funciones impulsadas por API.
