Как добавить пользовательский платеж в кассу Magento 2
Опубликовано: 2021-05-11Оглавление
Одно из больших улучшений Magento 2.x по сравнению с Magento 1.x заключается в том, что пользовательские способы оплаты могут быть интегрированы в кассу. В этом уроке мы покажем вам, как реализовать рендеринг способа оплаты в кассе Magento 2.
Шаг 1. Создайте файл компонента .js
Во-первых, средство визуализации вашего способа оплаты должно действовать как компонент пользовательского интерфейса, который зависит от модуля Magento_Checkout и расширяет компонент способа оплаты по умолчанию (средство визуализации способа оплаты по умолчанию находится в <Magento_Checkout_module_dir>/view/frontend/web/js/view/payment/default.js ).
Создайте файл .js компонента (рендерер способа оплаты) в каталоге вашего пользовательского модуля. Он должен храниться в <your_module_dir>/view/frontend/web/js/view/ .
Общий вид рендерера способа оплаты следующий:
определять(
['Magento_Checkout/js/просмотр/оплата/
дефолт'
],
функция (компонент) {
'
использовать строгий';
вернуть Component.extend({
значения по умолчанию: {
шаблон: '% путь к шаблону %'
},
// добавляем сюда необходимую логику
});
}
); Чтобы этот новый метод оплаты мог получить доступ к данным конфигурации системы , он должен реализовать интерфейс \Magento\Checkout\Model\ConfigProviderInterface , а реализующий его класс должен быть внедрен в поставщик составной конфигурации через конфигурацию внешнего интерфейса внедрения зависимостей.
Пример файла .php , реализующего \Magento\Checkout\Model\ConfigProviderInterface :
класс MyCustomPaymentConfigProvider реализует \Magento\Checkout\Model\ConfigProviderInterface
{
...
публичная функция getConfig()
{
возвращаться [
// 'key' => 'value' пары конфигурации
];
}
...
} И если для вашего нового способа оплаты требуется информация о кредитной карте , вы должны использовать средство визуализации Magento для реализации формы кредитной карты (расположенной в <Magento_Payment_module_dir>/view/frontend/web/js/view/payment/cc-form.js ).
Шаг 2: Создайте компонент .js , регистрирующий средство визуализации
В каталоге вашего пользовательского модуля создайте компонент пользовательского интерфейса .js, который регистрирует средство визуализации способа оплаты в списке средств визуализации. Он должен находиться в <your_module_dir>/view/frontend/web/js/view/ .
Содержимое файла выглядит следующим образом:
определять(
['uiComponent', 'Magento_Checkout/js/model/payment/renderer - список'],
функция(
Составная часть,
рендерерлист
) {
'
использовать строгий';
rendererList.push({
тип: '% payment_method_code%',
компонент: '% js_renderer_component%'
},
// рендереры других способов оплаты, если требуется
);
/** При необходимости добавьте сюда логику представления */
вернуть Component.extend({});
}
);Шаг 3: Создайте шаблон для компонента способа оплаты
Создайте новый <your_module_dir>/view/frontend/web/template/<your_template>.html в каталоге своего пользовательского модуля. Шаблон может использовать синтаксис Knockout JS.
Например, шаблон для отображения способа оплаты PayPal Express:
https://github.com/magento/magento2/blob/2.4/app/code/Magento/Paypal/view/frontend/web/template/payment/paypal-express.html
Шаг 4: Объявите способ оплаты в макете
- Создайте новый файл
<your_module_dir>/view/frontend/layout/checkout_index_index.xmlв каталоге вашего пользовательского модуля. - Добавьте следующий код в этот файл
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<тело>
<referenceBlock name="checkout.root">
<аргументы>
<argument name="jsLayout" xsi:type="массив">
<item name="components" xsi:type="массив">
<item name="checkout" xsi:type="array">
<item name="дети" xsi:type="массив">
<item name="шаги" xsi:type="массив">
<item name="дети" xsi:type="массив">
<item name="billing-step" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="дети" xsi:type="массив">
<item name="платеж" xsi:type="массив">
<item name="дети" xsi:type="массив">
<!-- Объявить дополнительные компоненты до оплаты. СТАРТ -->
<item name="beforeMethods" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">перед методами</item>
<item name="дети" xsi:type="массив">
<item name="%your_feature_name%" xsi:type="массив">
<item name="component" xsi:type="string">%path/to/your/feature_js_component%</item>
</item>
</item>
</item>
<!-- Объявить дополнительные компоненты до оплаты. КОНЕЦ -->
<!-- Объявите способ оплаты (компонент, который регистрируется в списке). СТАРТ -->
<item name="рендеринг" xsi:type="массив">
<item name="дети" xsi:type="массив">
<item name="%название группы способов оплаты%" xsi:type="array">
<!-- Пример значения: Magento_Paypal/view/frontend/web/js/view/payment-->
<item name="component" xsi:type="string">%component_that_registers_payment_renderer%</item>
<item name="методы" xsi:type="массив">
<!-- Добавьте это, если ваш способ оплаты требует ввода платежного адреса-->
<item name="%payment_method_code%" xsi:type="array">
<item name="isBillingAddressRequired" xsi:type="boolean">true</item>
</item>
</item>
</item>
</item>
</item>
<!-- Объявите способ оплаты (компонент, который регистрируется в списке). КОНЕЦ -->
<!-- Объявите дополнительные компоненты после оплаты. СТАРТ -->
<item name="afterMethods" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">afterMethods</item>
<item name="дети" xsi:type="массив">
<item name="%your_feature_name%" xsi:type="массив">
<item name="component" xsi:type="string">%path/to/your/feature_js_component%</item>
</item>
</item>
</item>
<!-- Объявите дополнительные компоненты после оплаты. КОНЕЦ -->
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</аргумент>
</аргументы>
</referenceBlock>
</тело>
</страница>(Только для производственного режима) Шаг 5: Запустите команды CLI
В производственном режиме вам нужно будет запустить еще несколько команд, например:
Установка php bin/magento: di: компиляция Установка php bin/magento: статическое содержимое: развертывание Кэш php bin/magento: очистить
Набор расширений кассы Magento 2
Страница оформления заказа, безусловно, является наиболее важным пунктом назначения любого онлайн-сайта, который может либо привлечь покупателя к потребителю, либо оттолкнуть его от точки продажи.
К счастью, это расширение Magento 2 Checkout помогает оптимизировать процесс оформления заказа без особых усилий.
Проверьте костюм прямо сейчас!
Смотрите также:
Как настроить процесс оформления заказа в Magento 2
Как добавить код скидки в кассу в Magento