如何將自定義付款添加到 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 結賬時添加折扣碼