Magento2チェックアウトにカスタム支払いを追加する方法
公開: 2021-05-11目次
Magento1.xに対するMagento2.xの大きな改善点の1つは、カスタム支払い方法をチェックアウトに統合できることです。 このチュートリアルでは、Magento2チェックアウトで支払い方法のレンダリングを実装する方法を示します。
ステップ1： .jsコンポーネントファイルを作成する
まず、支払い方法レンダラーは、 Magento_Checkoutモジュールに依存するUIコンポーネントとして機能し、デフォルトの支払い方法コンポーネントを拡張する必要があります（デフォルトの支払い方法レンダラーは<Magento_Checkout_module_dir>/view/frontend/web/js/view/payment/default.jsにあります） <Magento_Checkout_module_dir>/view/frontend/web/js/view/payment/default.js ）。
カスタムモジュールディレクトリにコンポーネントの.jsファイル（支払い方法レンダラー）を作成します。 <your_module_dir>/view/frontend/web/js/view/ディレクトリに保存する必要があります。
支払い方法レンダラーの一般的なビューは次のとおりです。
定義（
['Magento_Checkout /js/表示/支払い/
デフォルト'
]、
function（Component）{
'
strictを使用する';
Component.extend（{を返す
デフォルト：{
テンプレート：'％テンプレートへのパス％'
}、
//ここに必要なロジックを追加します
}）;
}
）; この新しい支払い方法でシステム構成データにアクセスできるようにするには、 \Magento\Checkout\Model\ConfigProviderInterfaceインターフェイスを実装する必要があり、それを実装するクラスは、DIフロントエンド構成を介して複合構成プロバイダーに注入する必要があります。
\Magento\Checkout\Model\ConfigProviderInterfaceを実装するサンプル.phpファイル：
クラスMyCustomPaymentConfigProviderは\Magento\ Checkout \ Model\ConfigProviderInterfaceを実装します
{{
..。
パブリック関数getConfig（）
{{
戻る [
//'キー'=>'値'構成のペア
];
}
..。
} また、新しい支払い方法でクレジットカード情報が必要な場合は、Magentoレンダラーを使用してクレジットカードフォームを実装する必要があります（ <Magento_Payment_module_dir>/view/frontend/web/js/view/payment/cc-form.jsにあります）。
ステップ2：レンダラーを登録する.jsコンポーネントを作成します
カスタムモジュールディレクトリで、支払い方法レンダラーをレンダラーリストに登録する.jsUIコンポーネントを作成します。 <your_module_dir>/view/frontend/web/js/view/ディレクトリの下に配置する必要があります。
ファイルの内容は次のとおりです。
定義（
['uiComponent'、'Magento_Checkout / js/モデル/支払い/レンダラー-リスト']、
関数（
成分、
rendererList
）{
'
strictを使用する';
rendererList.push（{
タイプ：'％payment_method_code％'、
コンポーネント：'％js_renderer_component％'
}、
//必要に応じて他の支払い方法レンダラー
）;
/**必要に応じてここにビューロジックを追加します*/
Component.extend（{}）;を返します。
}
）;ステップ3：支払い方法コンポーネントのテンプレートを作成する
カスタムモジュールディレクトリに新しい<your_module_dir>/view/frontend/web/template/<your_template>.htmlファイルを作成します。 テンプレートはKnockoutJS構文を使用できます。
たとえば、PayPalExpressの支払い方法をレンダリングするためのテンプレート：
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 = "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">
<！-支払いコンポーネントの前に追加を宣言します。 開始->
<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>
<！-支払いコンポーネントの前に追加を宣言します。 終了->
<！-支払い方法（リストに登録するコンポーネント）を宣言します。 開始->
<item name = "renders" xsi：type = "array">
<item name = "children" xsi：type = "array">
<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 = "methods" xsi：type = "array">
<！-お支払い方法で請求先住所の入力が必要な場合は、これを追加してください->
<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 = "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>
<！-支払い後の追加コンポーネントを宣言します。 終了->
</ item>
</ item>
</ item>
</ item>
</ item>
</ item>
</ item>
</ item>
</ item>
</引数>
</引数>
</ referenceBlock>
</ body>
</ page>（本番モードの場合のみ）ステップ5：CLIコマンドを実行します
本番モードでは、次のようなコマンドをさらにいくつか実行する必要があります。
php bin / magento setup：di：compile php bin / magento setup：static-content：deploy php bin / magento cache：clean
Magento 2 Checkout Extension Suite
チェックアウトページは、オンラインWebサイトの最も重要な宛先であり、顧客を消費者に引き込むか、POSから遠ざけることができます。
ありがたいことに、このMagento 2 Checkout Extensionは、チェックアウトを簡単に最適化するのに役立ちます。
今すぐスーツをチェックしてください！
参照：
Magento2でチェックアウトプロセスをカスタマイズする方法
Magentoのチェックアウトに割引コードを追加する方法