如何将自定义付款添加到 Magento 2 结帐
已发表: 2021-05-11目录
Magento 2.x 相对于 Magento 1.x 的一大改进是可以将自定义付款方式集成到结帐中。 在本教程中，我们将向您展示如何在 Magento 2 结帐中实现付款方式呈现。
第 1 步：创建.js组件文件
首先，您的付款方式渲染器应该充当依赖于Magento_Checkout模块并扩展默认付款方式组件的 UI 组件（默认付款方式渲染器位于<Magento_Checkout_module_dir>/view/frontend/web/js/view/payment/default.js ）。
在您的自定义模块目录中创建组件的.js文件（付款方式渲染器）。 它必须存储在<your_module_dir>/view/frontend/web/js/view/目录中。
支付方式渲染器的总体视图如下：
定义（
['Magento_Checkout/js/查看/支付/
默认'
],
功能（组件）{
'
使用严格';
返回组件。扩展（{
默认值：{
模板：' % 模板路径 % '
},
// 在此处添加所需的逻辑
});
}
); 为了让这种新的支付方式能够访问系统配置数据，它必须实现\Magento\Checkout\Model\ConfigProviderInterface接口，并且实现它的类必须通过 DI 前端配置注入到复合配置提供程序中。
示例.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 UI 组件，该组件在渲染器列表中注册付款方式渲染器。 它必须位于<your_module_dir>/view/frontend/web/js/view/目录下。
文件内容如下：
定义（
['uiComponent', 'Magento_Checkout/js/模型/支付/渲染器-列表'],
功能（
零件，
渲染器列表
) {
'
使用严格';
渲染器列表.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="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="计费步骤" 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="beforeMethods" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">beforeMethods</item>
<item name="children" 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 name="renders" xsi:type="array">
<item name="children" xsi:type="array">
<item name="%group name of the payment methods%" 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="methods" xsi:type="array">
<!-- 如果您的付款方式需要输入帐单地址，请添加此项-->
<item name="%payment_method_code%" xsi:type="array">
<item name="isBillingAddressRequired" xsi:type="boolean">true</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="children" xsi:type="array">
<item name="%your_feature_name%" xsi:type="array">
<item name="component" xsi:type="string">%path/to/your/feature_js_component%</item>
</项目>
</项目>
</项目>
<!-- 声明附加后付款组件。 结束 -->
</项目>
</项目>
</项目>
</项目>
</项目>
</项目>
</项目>
</项目>
</项目>
</参数>
</参数>
</参考块>
</正文>
</页面>（仅适用于生产模式）第 5 步：运行 CLI 命令
在生产模式下，您需要运行更多命令，如下所示：
php bin/magento setup:di:compile php bin/magento 设置：静态内容：部署 php bin/magento 缓存：干净
Magento 2 结帐扩展套件
到目前为止，结帐页面是任何在线网站最重要的目的地，它既可以将客户带入消费者，也可以将他们推离销售点。
值得庆幸的是，这个 Magento 2 Checkout Extension 有助于轻松优化您的结帐。
立即查看西装！
也可以看看：
如何在 Magento 2 中自定义结帐流程
如何在 Magento 结账时添加折扣码