您可能已经注意到，Magento的结账包括两个步骤，即运输信息和审查和付款信息，这是非常惊人的。此外，在“审核和付款信息”步骤中，将显示已启用的付款方式。
在今天的帖子中，我将为您提供四个简单的步骤来帮助您在结帐步骤中自定义付款方式。
如何在结帐步骤中自定义付款方式
- 第1步：创建.js组件文件
- 第2步：创建.js组件注册的渲染器
- 第3步：为付款方式组件创建模板
- 第4步：在布局中声明付款方式
第1步：创建.js组件文件
在进入第一步之前，您需要记住一些要点，以确保兼容性，可升级性和易维护性。首先，您需要将付款方式渲染器实现为UI组件。其次，请在单独的模块中添加自定义项，而不是编辑默认的Magento代码。第三，为了正确应用结帐步骤中的自定义，您的自定义模块应该依赖于Magento_Checkout模块。在模块的composer.json中，您可以找到模块依赖项。最后，不要Ui将模块的名称设置为%Mageplaza%_Ui，指定路径时需要的符号，可能会导致各种问题。
现在，让我们.js在自定义模块目录中创建一个组件文件，也称为付款方式渲染器。请记住，此文件必须位于<your_module_dir>/view/frontend/web/js/view/目录下。例如，使用Magento模块，您可以将付款方式渲染器存储在目录中<Magento_module_dir>/view/frontend/web/js/view/payment/method-renderer/
通常，<Magento_Checkout_module_dir>/view/frontend/web/js/view/payment/default.js file将扩展在其中发布的默认支付方法组件。下面我将帮助您提供默认组件的方法列表，其中包括所有方法及其描述。
| 方法 | 描述 |
|---|---|
getCode():string | 使用此功能时，将返回付款方式的代码 |
getData():object | 此方法将返回一个对象，该对象具有关于选择付款方式或扩展名的付款数据，以便发送到服务器。该对象必须包括根据的数据\Magento\Quote\Api\Data\PaymentInterface。除了方法代码和采购订单号之外，有关付款的所有信息都将在additional_data现场传递。 |
placeOrder():bool | 如果所有验证都通过，将下订单 |
selectPaymentMethod():bool | 这允许您将有关用户选择的付款方式的信息添加到Quote JS对象 |
isChecked():string | 它将返回所选付款方式的代码 |
isRadioButtonVisible():bool | 如果只有一种付款方式可用，则返回的结果为 true |
getTitle():string | 将返回付款方式的标题 |
validate():bool | 这用于该placeOrder()方法。它允许您覆盖模块中的validate（）。此外，此验证将显示在placeOrder()范围内 |
getBillingAddressFormName():string | 您将能够获得唯一的帐单邮寄地址名称 |
disposeSubscriptions() | 对象的订阅将被终止 |
以下代码是付款方式渲染器的一般视图：
define(
[
'Magento_Checkout/js/view/payment/default'
],
function (Component) {
'use strict';
return Component.extend({
defaults: {
template: '%path to template%'
},
// add required logic here
});
}
);
如果您的付款方式需要信用卡信息，您可能需要使用Magento重定者来实施信用卡表格：[/view/frontend/web/js/view/payment/cc-form.js](https://github.com/magento/magento2/blob/2.1/app/code/Magento/Payment/view/frontend/web/ JS /视图/支付/ CC-form.js）。它还可以使用下面列出的自己的方法扩展默认的付款重定者：https ：// github 。com / magento / magento2 / blob / 2 。1 / app / code / Magento / Payment / view / frontend / web / js / view / payment / cc - form 。js）。它还可以使用下面列出的自己的方法扩展默认的付款重定者：
| 方法 | 描述 |
|---|---|
getData():object | 此方法将返回一个对象，该对象具有关于选择付款方式或扩展名的付款数据，以便发送到服务器。该对象必须包括根据的数据\Magento\Quote\Api\Data\PaymentInterface。除了方法代码和采购订单号之外，有关付款的所有信息都将在additional_data现场传递。将添加信用卡数据，如类型，发行日期，编号，CVV。 |
getCcAvailableTypes():array | 结果将是包含所有可用信用卡类型的列表 |
getIcons():bool | 链接到可用的信用卡类型的图像 |
getCcMonths():object | 将检索信用卡到期日期 |
getCcYears():object | 将检索信用卡到期日的年份 |
hasVerification():bool | 一个标志，显示付款是否需要信用卡的CVV号码 |
hasSsCardType():bool | 如果Solo和Switch（Maestro）卡类型可用，则返回 true |
getCvvImageUrl():string | 将检索CVV工具提示图像URL |
getCvvImageHtml():string | 将检索CVV工具提示图像HTML |
getSsStartYears():object | 返回Solo或Switch（Maestro）卡的开始年份 |
访问系统配置的数据
在某些情况下，您的付款方式可能需要获取无法在布局配置，JS组件甚至模板中直接定义的数据，例如来自Magento系统配置的数据。此数据存储在window.checkoutConfig根签出模板中定义的变量中。
要访问系统配置，付款方法或一组方法需要实现\ Magento \ Checkout \ Model \ ConfigProviderInterface接口。同时，必须通过DI前端配置将实现它的类注入到复合配置提供程序中。在下面的代码中，我将说明这一点：
这是一个.php实现的示例类\Magento\Checkout\Model\ConfigProviderInterface：
class MyCustomPaymentConfigProvider implements \Magento\Checkout\Model\ConfigProviderInterface
{
...
public function getConfig()
{
return [
// 'key' => 'value' pairs of configuration
];
}
...
}
以下是自定义模块的DI配置文件示例<your_module_dir>/etc/frontend/di.xml：
...
<type name="Magento\Checkout\Model\CompositeConfigProvider">
<arguments>
<argument name="configProviders" xsi:type="array">
...
<item name="%Custom_provider_name%" xsi:type="object">MyCustomPaymentConfigProvider</item>
...
</argument>
</arguments>
...
</type>
添加与付款相关的功能
其他与付款相关的功能（如奖励积分，礼品登记）也可以添加到查看和付款信息结帐步骤。但是，它们应该作为UI组件实现。并且可以在付款方式列表之前或之后显示这些功能。您可以在结帐页面布局文件中相应地配置它。
第2步：创建.js组件注册的渲染器
在此步骤中，创建.jsUI组件，该组件在自定义模块目录的渲染器列表中注册付款方法渲染器。记得在目录下找到它<your_module_dir>/view/frontend/web/js/view/。例如，在Magento模块中，付款方式渲染器位于目录中<Magento_module_dir>/view/frontend/web/js/view/payment/。
文件的内容需要与此类似：
define(
[
'uiComponent',
'Magento_Checkout/js/model/payment/renderer-list'
],
function (
Component,
rendererList
) {
'use strict';
rendererList.push(
{
type: '%payment_method_code%',
component: '%js_renderer_component%'
},
// other payment method renderers if required
);
/** Add view logic here if needed */
return Component.extend({});
}
);如果向模块添加了多种付款方式，则可以在一个文件中注册这些方法的所有渲染器。
第3步：为付款方式组件创建模板
完成上述步骤后，现在要在自定义模块目录中创建一个新文件，即<your_module_dir>/view/frontend/web/template/<your_template>.html。Knockout JS语法可用于模板。如果要对示例.html模板进行精细处理，您将在任何实现Magento_Authorizenet模块等付款方式的模块中看到它。
以下是结帐时呈现Authorize.Net付款方式的模板：[/view/frontend/web/template/payment/authorizenet-directpost.html](https://github.com/magento/magento2/blob/2.1/app/code/Magento/Authorizenet/view/frontend/web/template/支付/ authorizenet-directpost.html）https ：// github 。com / magento / magento2 / blob / 2 。1 / app / code / Magento / Authorizenet / view / frontend / web / template / payment / authorizenet - directpost 。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">
<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">
<!-- Declare additional before payment components. START -->
<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>
</item>
</item>
<!-- Declare additional before payment components. END -->
<!-- Declare the payment method (the component that registrates in the list). START -->
<item name="renders" xsi:type="array">
<item name="children" xsi:type="array">
<item name="%group name of the payment methods%" xsi:type="array">
<!-- Example of value: Magento_Authorizenet/js/view/payment/authorizenet-->
<item name="component" xsi:type="string">%component_that_registers_payment_renderer%</item>
<item name="methods" xsi:type="array">
<!-- Add this if your payment method requires entering a billing address-->
<item name="%payment_method_code%" xsi:type="array">
<item name="isBillingAddressRequired" xsi:type="boolean">true</item>
</item>
</item>
</item>
</item>
<!-- Declare the payment method (the component that registrates in the list). END -->
<!-- Declare additional after payment components. START -->
<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>
</item>
</item>
</item>
<!-- Declare additional after payment components. END -->
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page> 要查看checkout_index_index.xml声明新付款方式的插图，请查看app / code / Magento / Authorizenet / view / frontend / layout / checkout_index_index.xml
结论
我刚刚为您提供了四个步骤来帮助您在结帐步骤中自定义新的付款方式，希望此说明对您有所帮助。如果您有任何问题或想法，请随时在下面发表评论。