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/ ディレクトリに格納する必要があります。
ペイメントメソッドレンダラーの一般的な見方は以下の通りです。
define(
['Magento_Checkout / js / view / payment /
default'
],
function(Component) {
'
use strict';
return Component.extend({
defaults: {
template: ' % path to template % '
},
// add required logic here
});
}
);この新しい支払い方法でシステム構成データにアクセスできるようにするには、\ Magento \ Checkout \ Model \ ConfigProviderInterfaceインターフェイスを実装する必要があり、それを実装するクラスは、DIフロントエンド構成を介して複合構成プロバイダーに挿入する必要があります。
\ Magento \ Checkout \ Model \ ConfigProviderInterfaceを実装するサンプル「.php」ファイル：
class MyCustomPaymentConfigProvider implements \Magento\Checkout\Model\ConfigProviderInterface
{
...
public function getConfig()
{
return [
// 'key' => 'value' pairs of configuration
];
}
...
}また、新しい支払い方法でクレジットカード情報が必要な場合は、Magento のレンダラーを使ってクレジットカードフォームを実装する必要があります (/view/frontend/web/js/view/payment/cc-form.js にあります)。
ステップ2： レンダラを登録する「.js」コンポーネントの作成
カスタムモジュールのディレクトリで、支払い方法のレンダラーをレンダラーリストに登録する「.js」 UIコンポーネントを作成します。このコンポーネントは、/view/frontend/web/js/view/ディレクトリの下に置かなければなりません。
ファイルの内容は以下の通りです。
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: 支払い方法コンポーネントのテンプレートの作成
カスタムモジュールのディレクトリに、新しい/view/frontend/web/template/.htmlファイルを作成します。テンプレートには「Knockout JS」の構文を使用できます。
例：PayPal Expressの支払い方法をレンダリングするためのテンプレートです。
ステップ 4: レイアウトで支払い方法宣言
- カスタムモジュールのディレクトリに、/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_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">
<!-- 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>
</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>
</argument>
</arguments>
</referenceBlock>
</body>
</page>(プロダクションモードのみ) ステップ 5 : CLIコマンドの実行
本番モードでは、以下のようにさらにいくつかのコマンドを実行する必要があります。
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento cache:clean
