{"id":7767,"date":"2026-01-28T07:24:56","date_gmt":"2026-01-28T07:24:56","guid":{"rendered":"https:\/\/ecommerce.folio3.com\/blog\/?p=7767"},"modified":"2026-02-20T10:45:44","modified_gmt":"2026-02-20T10:45:44","slug":"magento-2-payment-module","status":"publish","type":"post","link":"https:\/\/ecommerce.folio3.com\/blog\/magento-2-payment-module\/","title":{"rendered":"How To Create Magento 2 Payment Module?"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Most merchants hit a wall when their payment gateway isn&#8217;t supported by an existing Magento extension. Whether you&#8217;re working with a regional processor, a B2B invoicing system, or a proprietary payment flow, the only real solution is to build a custom Magento 2 payment module yourself.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This guide covers exactly how to do that \u2014 from file structure and configuration to the JavaScript renderer and checkout template. By the end, you&#8217;ll have a working module and a clear understanding of where most developers go wrong.<\/span><\/p>\n<h2><strong>Summary<\/strong><\/h2>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">What a Magento 2 payment module is and why building a custom one matters<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The core file structure you need before writing a single line of code<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A step-by-step walkthrough to create a Magento 2 payment module from scratch<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">How to configure the payment model, renderer, and checkout template<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Common implementation mistakes and how to avoid them<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">How to test and validate your module before going live<\/span><\/li>\n<\/ul>\n<h2><strong>What Is a Magento 2 Payment Module?<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Custom payment requirements are one of the most common reasons merchants need to extend their <a href=\"https:\/\/ecommerce.folio3.com\/blog\/magento-gdpr\/\">Magento stores<\/a> beyond off-the-shelf options. Whether you&#8217;re integrating a regional gateway, a B2B invoicing system, or a proprietary processor, the built-in payment options rarely cover every use case.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A Magento 2 payment module is the mechanism that connects your storefront to a payment service provider. It handles the full transaction lifecycle \u2014 from authorizing a charge to capturing funds, issuing refunds, and voiding orders. This guide walks through exactly how to create a Magento 2 payment module, covering every key file, configuration step, and common pitfall.<\/span><\/p>\n<h2><strong>Understanding Payment Operations in Magento 2<\/strong><\/h2>\n<h3><strong>What a Payment Module Controls<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Before you start building, it helps to understand what operations a Magento 2 payment module can support.<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><b>Operation<\/b><\/td>\n<td><b>What It Does<\/b><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Authorization<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Blocks funds on the <a href=\"https:\/\/ecommerce.folio3.com\/blog\/merge-guest-orders-to-customer-accounts\/\">customer&#8217;s account<\/a> without withdrawing<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Capture<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Withdraws the previously authorized amount<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Sale (Auth + Capture)<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Authorizes and captures in a single step<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Refund<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Returns funds to the customer&#8217;s account<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Void<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Cancels a pending authorization before capture<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><span style=\"font-weight: 400;\">Not every module needs to support all five. For example, a simple offline payment method like bank transfer only needs to handle order placement \u2014 no real-time gateway calls required.<\/span><\/p>\n<h3><strong>When to Build Custom vs. Use an Extension<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Most merchants can rely on Magento&#8217;s built-in gateways (Braintree, PayPal) or Marketplace extensions (Stripe, Authorize.Net). You need a <a href=\"https:\/\/ecommerce.folio3.com\/blog\/magento-2-rest-api-to-create-custom-api-module\/\">custom Magento 2 payment module<\/a> when your gateway has no existing extension, you need proprietary checkout logic, or you&#8217;re building for a region with local payment rails not covered by existing options.<\/span><\/p>\n<h2><strong>Required File Structure to Create a Magento 2 Payment Module<\/strong><\/h2>\n<h3><strong>Module Registration Files<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Every Magento 2 module starts with two files. Without them, Magento won&#8217;t recognize the module at all.<\/span><\/p>\n<p><b>app\/code\/Vendor\/Payment\/registration.php<\/b><\/p>\n<h4><span style=\"font-weight: 400;\">php<\/span><\/h4>\n<pre><b>&lt;?php<\/b><\/pre>\n<p><span style=\"font-weight: 400;\">\\Magento\\Framework\\Component\\ComponentRegistrar<\/span><span style=\"font-weight: 400;\">::<\/span><span style=\"font-weight: 400;\">register<\/span><span style=\"font-weight: 400;\">(<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">\\Magento\\Framework\\Component\\ComponentRegistrar<\/span><span style=\"font-weight: 400;\">::<\/span><span style=\"font-weight: 400;\">MODULE<\/span><span style=\"font-weight: 400;\">,<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&#8216;Vendor_Payment&#8217;<\/span><span style=\"font-weight: 400;\">,<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">__DIR__<\/span><\/p>\n<p><span style=\"font-weight: 400;\">);<\/span><\/p>\n<p><b>app\/code\/Vendor\/Payment\/etc\/module.xml<\/b><\/p>\n<h4><span style=\"font-weight: 400;\">xml<\/span><\/h4>\n<pre><span style=\"font-weight: 400;\">&lt;?xml version=\"1.0\"?&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">config <\/span><span style=\"font-weight: 400;\">xmlns:<\/span><span style=\"font-weight: 400;\">xsi<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">http:\/\/www.w3.org\/2001\/XMLSchema-instance<\/span><span style=\"font-weight: 400;\">&#8220;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">xsi:<\/span><span style=\"font-weight: 400;\">noNamespaceSchemaLocation<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">urn:magento:framework:Module\/etc\/module.xsd<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">module <\/span><span style=\"font-weight: 400;\">name<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">Vendor_Payment<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">setup_version<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">1.0.0<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">sequence<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">module <\/span><span style=\"font-weight: 400;\">name<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">Magento_Sales<\/span><span style=\"font-weight: 400;\">&#8220;\/&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">module <\/span><span style=\"font-weight: 400;\">name<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">Magento_Payment<\/span><span style=\"font-weight: 400;\">&#8220;\/&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">module <\/span><span style=\"font-weight: 400;\">name<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">Magento_Checkout<\/span><span style=\"font-weight: 400;\">&#8220;\/&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">sequence<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">module<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">config<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The <\/span><span style=\"font-weight: 400;\">sequence<\/span><span style=\"font-weight: 400;\"> block ensures your module loads after Magento&#8217;s core payment and checkout modules \u2014 a step many developers skip that causes hard-to-debug errors.<\/span><\/p>\n<h2><strong>Step-by-Step: How to Create a Magento 2 Payment Module<\/strong><\/h2>\n<h3><strong>Step 1 \u2014 Configure Payment Settings in payment.xml<\/strong><\/h3>\n<p><strong>Create app\/code\/Vendor\/Payment\/etc\/config.xml to define your method&#8217;s default configuration values:<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">xml<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;?xml version=\"1.0\"?&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">config <\/span><span style=\"font-weight: 400;\">xmlns:<\/span><span style=\"font-weight: 400;\">xsi<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">http:\/\/www.w3.org\/2001\/XMLSchema-instance<\/span><span style=\"font-weight: 400;\">&#8220;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">xsi:<\/span><span style=\"font-weight: 400;\">noNamespaceSchemaLocation<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">urn:magento:module:Magento_Store:etc\/config.xsd<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">default<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">payment<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">vendor_simple<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">active<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\">1<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">active<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">model<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\">Vendor\\Payment\\Model\\Payment\\Simple<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">model<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">title<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\">Simple Payment<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">title<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">payment_action<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\">authorize<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">payment_action<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">order_status<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\">pending<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">order_status<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">vendor_simple<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">payment<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">default<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">config<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Next, add the method to <\/span><span style=\"font-weight: 400;\">etc\/payment.xml<\/span><span style=\"font-weight: 400;\"> so Magento&#8217;s payment system recognizes it:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">xml<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&lt;?xml version=&#8221;1.0&#8243;?&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">payment <\/span><span style=\"font-weight: 400;\">xmlns:<\/span><span style=\"font-weight: 400;\">xsi<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">http:\/\/www.w3.org\/2001\/XMLSchema-instance<\/span><span style=\"font-weight: 400;\">&#8220;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">xsi:<\/span><span style=\"font-weight: 400;\">noNamespaceSchemaLocation<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">urn:magento:module:Magento_Payment:etc\/payment.xsd<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">groups<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">group <\/span><span style=\"font-weight: 400;\">id<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">offline<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">method <\/span><span style=\"font-weight: 400;\">name<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">vendor_simple<\/span><span style=\"font-weight: 400;\">&#8220;\/&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">group<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">groups<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">payment<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<h3><b>Step 2 \u2014 Build the Payment Model<\/b><\/h3>\n<p><strong>The payment model is the core of your <a href=\"https:\/\/ecommerce.folio3.com\/blog\/create-a-magento-2-module\/\">Magento payment module. Create<\/a> Model\/Payment\/Simple.php:<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">php<\/span><\/p>\n<pre><b>&lt;?php<\/b><\/pre>\n<p><span style=\"font-weight: 400;\">namespace<\/span><span style=\"font-weight: 400;\"> Vendor<\/span><span style=\"font-weight: 400;\">\\<\/span><span style=\"font-weight: 400;\">Payment<\/span><span style=\"font-weight: 400;\">\\<\/span><span style=\"font-weight: 400;\">Model<\/span><span style=\"font-weight: 400;\">\\<\/span><span style=\"font-weight: 400;\">Payment<\/span><span style=\"font-weight: 400;\">;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">use<\/span><span style=\"font-weight: 400;\"> Magento<\/span><span style=\"font-weight: 400;\">\\<\/span><span style=\"font-weight: 400;\">Payment<\/span><span style=\"font-weight: 400;\">\\<\/span><span style=\"font-weight: 400;\">Model<\/span><span style=\"font-weight: 400;\">\\<\/span><span style=\"font-weight: 400;\">Method<\/span><span style=\"font-weight: 400;\">\\<\/span><span style=\"font-weight: 400;\">AbstractMethod<\/span><span style=\"font-weight: 400;\">;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">class<\/span> <span style=\"font-weight: 400;\">Simple<\/span> <span style=\"font-weight: 400;\">extends<\/span> <span style=\"font-weight: 400;\">AbstractMethod<\/span><\/p>\n<p><span style=\"font-weight: 400;\">{<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">protected<\/span> <span style=\"font-weight: 400;\">$_code<\/span><span style=\"font-weight: 400;\"> = <\/span><span style=\"font-weight: 400;\">&#8216;vendor_simple&#8217;<\/span><span style=\"font-weight: 400;\">;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">protected<\/span> <span style=\"font-weight: 400;\">$_isOffline<\/span><span style=\"font-weight: 400;\"> = <\/span><span style=\"font-weight: 400;\">true<\/span><span style=\"font-weight: 400;\">;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">protected<\/span> <span style=\"font-weight: 400;\">$_canAuthorize<\/span><span style=\"font-weight: 400;\"> = <\/span><span style=\"font-weight: 400;\">true<\/span><span style=\"font-weight: 400;\">;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">protected<\/span> <span style=\"font-weight: 400;\">$_canCapture<\/span><span style=\"font-weight: 400;\"> = <\/span><span style=\"font-weight: 400;\">true<\/span><span style=\"font-weight: 400;\">;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">protected<\/span> <span style=\"font-weight: 400;\">$_canRefund<\/span><span style=\"font-weight: 400;\"> = <\/span><span style=\"font-weight: 400;\">false<\/span><span style=\"font-weight: 400;\">;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">protected<\/span> <span style=\"font-weight: 400;\">$_canVoid<\/span><span style=\"font-weight: 400;\"> = <\/span><span style=\"font-weight: 400;\">false<\/span><span style=\"font-weight: 400;\">;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For gateway-based methods that make live API calls, you&#8217;ll extend <\/span><span style=\"font-weight: 400;\">\\Magento\\Payment\\Model\\Method\\Cc<\/span><span style=\"font-weight: 400;\"> or use the newer <\/span><span style=\"font-weight: 400;\">GatewayCommand<\/span><span style=\"font-weight: 400;\"> infrastructure instead.<\/span><\/p>\n<h3><b>Step 3 \u2014 Configure Dependency Injection<\/b><\/h3>\n<p><strong><a href=\"https:\/\/ecommerce.folio3.com\/blog\/dependency-injection-in-magento\/\">Magento 2 uses dependency injection<\/a> extensively. Create etc\/di.xml to wire your model into the payment adapter pool:<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">xml<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;?xml version=\"1.0\"?&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">config <\/span><span style=\"font-weight: 400;\">xmlns:<\/span><span style=\"font-weight: 400;\">xsi<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">http:\/\/www.w3.org\/2001\/XMLSchema-instance<\/span><span style=\"font-weight: 400;\">&#8220;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">xsi:<\/span><span style=\"font-weight: 400;\">noNamespaceSchemaLocation<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">urn:magento:framework:ObjectManager\/etc\/config.xsd<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">type <\/span><span style=\"font-weight: 400;\">name<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">Magento\\Payment\\Model\\Method\\Factory<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">arguments<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">argument <\/span><span style=\"font-weight: 400;\">name<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">classMap<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">xsi:<\/span><span style=\"font-weight: 400;\">type<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">array<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">item <\/span><span style=\"font-weight: 400;\">name<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">vendor_simple<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">xsi:<\/span><span style=\"font-weight: 400;\">type<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">string<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><span style=\"font-weight: 400;\">Vendor\\Payment\\Model\\Payment\\Simple<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">item<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">argument<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">arguments<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">type<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">config<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<h3><strong>Step 4 \u2014 Add the Frontend Layout Declaration<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Magento 2 checkout is built on Knockout.js UI components. You need to inject your renderer into the checkout layout. Create <\/span><span style=\"font-weight: 400;\">view\/frontend\/layout\/checkout_index_index.xml<\/span><span style=\"font-weight: 400;\">:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">xml<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;?xml version=\"1.0\"?&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">page <\/span><span style=\"font-weight: 400;\">xmlns:<\/span><span style=\"font-weight: 400;\">xsi<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">http:\/\/www.w3.org\/2001\/XMLSchema-instance<\/span><span style=\"font-weight: 400;\">&#8220;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">xsi:<\/span><span style=\"font-weight: 400;\">noNamespaceSchemaLocation<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">body<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">referenceBlock <\/span><span style=\"font-weight: 400;\">name<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">checkout.root<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">arguments<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">argument <\/span><span style=\"font-weight: 400;\">name<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">jsLayout<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">xsi:<\/span><span style=\"font-weight: 400;\">type<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">array<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">item <\/span><span style=\"font-weight: 400;\">name<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">components<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">xsi:<\/span><span style=\"font-weight: 400;\">type<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">array<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">item <\/span><span style=\"font-weight: 400;\">name<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">checkout<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">xsi:<\/span><span style=\"font-weight: 400;\">type<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">array<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">item <\/span><span style=\"font-weight: 400;\">name<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">children<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">xsi:<\/span><span style=\"font-weight: 400;\">type<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">array<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">item <\/span><span style=\"font-weight: 400;\">name<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">steps<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">xsi:<\/span><span style=\"font-weight: 400;\">type<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">array<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">item <\/span><span style=\"font-weight: 400;\">name<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">children<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">xsi:<\/span><span style=\"font-weight: 400;\">type<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">array<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">item <\/span><span style=\"font-weight: 400;\">name<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">billing-step<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">xsi:<\/span><span style=\"font-weight: 400;\">type<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">array<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">item <\/span><span style=\"font-weight: 400;\">name<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">children<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">xsi:<\/span><span style=\"font-weight: 400;\">type<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">array<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">item <\/span><span style=\"font-weight: 400;\">name<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">payment<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">xsi:<\/span><span style=\"font-weight: 400;\">type<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">array<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">item <\/span><span style=\"font-weight: 400;\">name<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">children<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">xsi:<\/span><span style=\"font-weight: 400;\">type<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">array<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">item <\/span><span style=\"font-weight: 400;\">name<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">renders<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">xsi:<\/span><span style=\"font-weight: 400;\">type<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">array<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">item <\/span><span style=\"font-weight: 400;\">name<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">children<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">xsi:<\/span><span style=\"font-weight: 400;\">type<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">array<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">item <\/span><span style=\"font-weight: 400;\">name<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">vendor-payment<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">xsi:<\/span><span style=\"font-weight: 400;\">type<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">array<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">item <\/span><span style=\"font-weight: 400;\">name<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">component<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">xsi:<\/span><span style=\"font-weight: 400;\">type<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">string<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><span style=\"font-weight: 400;\">Vendor_Payment\/js\/view\/payment\/simple<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">item<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">item <\/span><span style=\"font-weight: 400;\">name<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">methods<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">xsi:<\/span><span style=\"font-weight: 400;\">type<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">array<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">item <\/span><span style=\"font-weight: 400;\">name<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">vendor_simple<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">xsi:<\/span><span style=\"font-weight: 400;\">type<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">array<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">item <\/span><span style=\"font-weight: 400;\">name<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">isBillingAddressRequired<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">xsi:<\/span><span style=\"font-weight: 400;\">type<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">boolean<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><span style=\"font-weight: 400;\">true<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">item<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">item<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">item<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">item<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">item<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">item<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">item<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">item<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">item<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">item<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">item<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">item<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">item<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">item<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">item<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">argument<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">arguments<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">referenceBlock<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">body<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">page<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<h3><strong>Step 5 \u2014 Create the JavaScript View and Renderer<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Create the parent JS view at <\/span><span style=\"font-weight: 400;\">view\/frontend\/web\/js\/view\/payment\/simple.js<\/span><span style=\"font-weight: 400;\">:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">javascript<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">define<\/span><span style=\"font-weight: 400;\">([<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&#8216;uiComponent&#8217;<\/span><span style=\"font-weight: 400;\">,<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&#8216;Magento_Checkout\/js\/model\/payment\/renderer-list&#8217;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">],<\/span> <span style=\"font-weight: 400;\">function<\/span> <span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400;\">Component<\/span><span style=\"font-weight: 400;\">,<\/span><span style=\"font-weight: 400;\"> rendererList<\/span><span style=\"font-weight: 400;\">)<\/span> <span style=\"font-weight: 400;\">{<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&#8216;use strict&#8217;<\/span><span style=\"font-weight: 400;\">;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0rendererList<\/span><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">push<\/span><span style=\"font-weight: 400;\">({<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">type<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400;\">&#8216;vendor_simple&#8217;<\/span><span style=\"font-weight: 400;\">,<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">component<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400;\">&#8216;Vendor_Payment\/js\/view\/payment\/method-renderer\/simple-method&#8217;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">});<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">return<\/span> <span style=\"font-weight: 400;\">Component<\/span><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">extend<\/span><span style=\"font-weight: 400;\">({});<\/span><\/p>\n<p><span style=\"font-weight: 400;\">});<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Then create the renderer at <\/span><span style=\"font-weight: 400;\">view\/frontend\/web\/js\/view\/payment\/method-renderer\/simple-method.js<\/span><span style=\"font-weight: 400;\">:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">javascript<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">define<\/span><span style=\"font-weight: 400;\">([<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&#8216;Magento_Checkout\/js\/view\/payment\/default&#8217;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">],<\/span> <span style=\"font-weight: 400;\">function<\/span> <span style=\"font-weight: 400;\">(<\/span><span style=\"font-weight: 400;\">Component<\/span><span style=\"font-weight: 400;\">)<\/span> <span style=\"font-weight: 400;\">{<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&#8216;use strict&#8217;<\/span><span style=\"font-weight: 400;\">;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">return<\/span> <span style=\"font-weight: 400;\">Component<\/span><span style=\"font-weight: 400;\">.<\/span><span style=\"font-weight: 400;\">extend<\/span><span style=\"font-weight: 400;\">({<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">defaults<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400;\">{<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">template<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400;\">&#8216;Vendor_Payment\/payment\/simple&#8217;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">},<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">getCode<\/span><span style=\"font-weight: 400;\">: <\/span><span style=\"font-weight: 400;\">function<\/span> <span style=\"font-weight: 400;\">()<\/span> <span style=\"font-weight: 400;\">{<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">return<\/span> <span style=\"font-weight: 400;\">&#8216;vendor_simple&#8217;<\/span><span style=\"font-weight: 400;\">;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">});<\/span><\/p>\n<p><span style=\"font-weight: 400;\">});<\/span><\/p>\n<h3><strong>Step 6 \u2014 Create the Checkout Template<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">The HTML template controls what the customer sees on the payment step. Create <\/span><span style=\"font-weight: 400;\">view\/frontend\/web\/template\/payment\/simple.html<\/span><span style=\"font-weight: 400;\">:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">html<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">div <\/span><span style=\"font-weight: 400;\">class<\/span><span style=\"font-weight: 400;\">=\"<\/span><span style=\"font-weight: 400;\">payment-method<\/span><span style=\"font-weight: 400;\">\"<\/span> <span style=\"font-weight: 400;\">data-bind<\/span><span style=\"font-weight: 400;\">=\"<\/span><span style=\"font-weight: 400;\">css: {<\/span><span style=\"font-weight: 400;\">'<\/span><span style=\"font-weight: 400;\">_active<\/span><span style=\"font-weight: 400;\">'<\/span><span style=\"font-weight: 400;\">: (getCode() == isChecked())}<\/span><span style=\"font-weight: 400;\">\"&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">div <\/span><span style=\"font-weight: 400;\">class<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">payment-method-title field choice<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">input <\/span><span style=\"font-weight: 400;\">type<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">radio<\/span><span style=\"font-weight: 400;\">&#8220;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">name<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">paymentMethod<\/span><span style=\"font-weight: 400;\">&#8220;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">class<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">radio<\/span><span style=\"font-weight: 400;\">&#8220;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">data-bind<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">attr: {<\/span><span style=\"font-weight: 400;\">&#8216;<\/span><span style=\"font-weight: 400;\">id<\/span><span style=\"font-weight: 400;\">&#8216;<\/span><span style=\"font-weight: 400;\">: getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">\/&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">label <\/span><span style=\"font-weight: 400;\">data-bind<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">attr: {<\/span><span style=\"font-weight: 400;\">&#8216;<\/span><span style=\"font-weight: 400;\">for<\/span><span style=\"font-weight: 400;\">&#8216;<\/span><span style=\"font-weight: 400;\">: getCode()}<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">class<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">label<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span <\/span><span style=\"font-weight: 400;\">data-bind<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">text: getTitle()<\/span><span style=\"font-weight: 400;\">&#8220;&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">label<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">div <\/span><span style=\"font-weight: 400;\">class<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">payment-method-content<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">div <\/span><span style=\"font-weight: 400;\">class<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">payment-method-billing-address<\/span><span style=\"font-weight: 400;\">&#8220;&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">div <\/span><span style=\"font-weight: 400;\">class<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">checkout-agreements-block<\/span><span style=\"font-weight: 400;\">&#8220;&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">div <\/span><span style=\"font-weight: 400;\">class<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">actions-toolbar<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">div <\/span><span style=\"font-weight: 400;\">class<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">primary<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">button <\/span><span style=\"font-weight: 400;\">class<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">action primary checkout<\/span><span style=\"font-weight: 400;\">&#8220;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">type<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">submit<\/span><span style=\"font-weight: 400;\">&#8220;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">data-bind<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">click: placeOrder, attr: {title: $t(<\/span><span style=\"font-weight: 400;\">&#8216;<\/span><span style=\"font-weight: 400;\">Place Order<\/span><span style=\"font-weight: 400;\">&#8216;<\/span><span style=\"font-weight: 400;\">)}<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">span <\/span><span style=\"font-weight: 400;\">data-bind<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">text: $t(<\/span><span style=\"font-weight: 400;\">&#8216;<\/span><span style=\"font-weight: 400;\">Place Order<\/span><span style=\"font-weight: 400;\">&#8216;<\/span><span style=\"font-weight: 400;\">)<\/span><span style=\"font-weight: 400;\">&#8220;&gt;&lt;\/<\/span><span style=\"font-weight: 400;\">span<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">button<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">div<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<h2><strong>Enabling and Testing Your Module<\/strong><\/h2>\n<h3><strong>Module Activation Commands<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Run these commands after creating all files:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">bash<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">php bin\/magento module:enable Vendor_Payment<\/span><\/p>\n<p><span style=\"font-weight: 400;\">php bin\/magento setup:upgrade<\/span><\/p>\n<p><span style=\"font-weight: 400;\">php bin\/magento setup:di:compile<\/span><\/p>\n<p><span style=\"font-weight: 400;\">php bin\/magento cache:clean<\/span><\/p>\n<h4><strong>Common Errors and Fixes<\/strong><\/h4>\n<table>\n<tbody>\n<tr>\n<td><b>Error<\/b><\/td>\n<td><b>Likely Cause<\/b><\/td>\n<td><b>Fix<\/b><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Payment method doesn&#8217;t appear at checkout<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Missing layout XML or JS renderer<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Check <\/span><span style=\"font-weight: 400;\">checkout_index_index.xml<\/span><span style=\"font-weight: 400;\"> and clear cache<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Module not recognized<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Missing <\/span><span style=\"font-weight: 400;\">registration.php<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Verify file path and namespace<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">DI compilation fails<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Incorrect class references in <\/span><span style=\"font-weight: 400;\">di.xml<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Check namespaces match actual file paths<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">JS errors in browser console<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Template path mismatch<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Confirm template path in <\/span><span style=\"font-weight: 400;\">simple-method.js<\/span><span style=\"font-weight: 400;\"> matches actual file<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3><strong>Cache Management During Development<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">A critical workflow tip: always disable the Full Page Cache and Block HTML Output caches during development. You can do this from Admin &gt; System &gt; Cache Management. Also delete the <\/span><span style=\"font-weight: 400;\">var\/cache<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">var\/page_cache<\/span><span style=\"font-weight: 400;\">, and <\/span><span style=\"font-weight: 400;\">pub\/static\/frontend<\/span><span style=\"font-weight: 400;\"> directories when JS or layout changes aren&#8217;t reflecting.<\/span><\/p>\n<h2><strong>Implementation Tips to Avoid Common Mistakes<\/strong><\/h2>\n<h3><strong>What Developers Get Wrong<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Most problems when you create a Magento 2 payment module come from three areas: module sequencing, UI component inheritance, and cache issues.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Your module must declare <\/span><span style=\"font-weight: 400;\">Magento_Checkout<\/span><span style=\"font-weight: 400;\"> in its sequence in <\/span><span style=\"font-weight: 400;\">module.xml<\/span><span style=\"font-weight: 400;\">. Skipping this causes intermittent checkout failures that are difficult to trace.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Payment renderers must extend <\/span><span style=\"font-weight: 400;\">Magento_Checkout\/js\/view\/payment\/default<\/span><span style=\"font-weight: 400;\">, not be written from scratch. This base component handles order placement, validation, and communication with the checkout model.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Never disable cache globally while working with Magento classes. Instead, selectively disable only Layout, Block HTML Output, and Full Page Cache. Keep the Config and DI caches active to ensure your dependency injection and model configurations load correctly.<\/span><\/p>\n<h3><strong>Developer Mode vs. Production<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Always build and test a custom Magento payment module in developer mode (<\/span><span style=\"font-weight: 400;\">php bin\/magento deploy:mode:set developer<\/span><span style=\"font-weight: 400;\">). This disables caching of static files and enables detailed error reporting \u2014 both essential for catching JS and PHP errors during development.<\/span><\/p>\n<h2><strong>Payment Module Configuration in the Admin Panel<\/strong><\/h2>\n<h3><strong>System Configuration Setup<\/strong><\/h3>\n<p><strong>For your payment method to appear in Admin &gt; Stores &gt; Configuration &gt; Sales &gt; Payment Methods, add etc\/adminhtml\/system.xml:<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">xml<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;?xml version=\"1.0\"?&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">config <\/span><span style=\"font-weight: 400;\">xmlns:<\/span><span style=\"font-weight: 400;\">xsi<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">http:\/\/www.w3.org\/2001\/XMLSchema-instance<\/span><span style=\"font-weight: 400;\">&#8220;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">xsi:<\/span><span style=\"font-weight: 400;\">noNamespaceSchemaLocation<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">urn:magento:module:Magento_Config:etc\/system_file.xsd<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">system<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">section <\/span><span style=\"font-weight: 400;\">id<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">payment<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">group <\/span><span style=\"font-weight: 400;\">id<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">vendor_simple<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">translate<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">label<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">type<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">text<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">sortOrder<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">100<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">showInDefault<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">1<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">showInWebsite<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">1<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">showInStore<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">1<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">label<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\">Simple Payment Method<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">label<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">field <\/span><span style=\"font-weight: 400;\">id<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">active<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">translate<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">label<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">type<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">select<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">sortOrder<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">1<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">showInDefault<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">1<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">showInWebsite<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">1<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">showInStore<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">0<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">label<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\">Enabled<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">label<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">source_model<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\">Magento\\Config\\Model\\Config\\Source\\Yesno<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">source_model<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">field<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">field <\/span><span style=\"font-weight: 400;\">id<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">title<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">translate<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">label<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">type<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">text<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">sortOrder<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">2<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">showInDefault<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">1<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">showInWebsite<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">1<\/span><span style=\"font-weight: 400;\">&#8220;<\/span> <span style=\"font-weight: 400;\">showInStore<\/span><span style=\"font-weight: 400;\">=&#8221;<\/span><span style=\"font-weight: 400;\">1<\/span><span style=\"font-weight: 400;\">&#8220;&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;<\/span><span style=\"font-weight: 400;\">label<\/span><span style=\"font-weight: 400;\">&gt;<\/span><span style=\"font-weight: 400;\">Title<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">label<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">field<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">group<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">section<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">system<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&lt;\/<\/span><span style=\"font-weight: 400;\">config<\/span><span style=\"font-weight: 400;\">&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This gives merchants control over enabling the method and setting a display title without touching code.<\/span><\/p>\n<h3><strong>File Structure Overview<\/strong><\/h3>\n<table>\n<tbody>\n<tr>\n<td><b>File Path<\/b><\/td>\n<td><b>Purpose<\/b><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">etc\/module.xml<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Declares module name and dependencies<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">etc\/config.xml<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Sets default configuration values<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">etc\/payment.xml<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Registers method with Magento&#8217;s payment system<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">etc\/di.xml<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Wires model into the dependency injection container<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Model\/Payment\/Simple.php<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Defines payment logic and supported operations<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">view\/frontend\/layout\/checkout_index_index.xml<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Injects renderer into checkout layout<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">view\/frontend\/web\/js\/view\/payment\/simple.js<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Registers renderer with Magento&#8217;s renderer list<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">view\/frontend\/web\/js\/view\/payment\/method-renderer\/simple-method.js<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Handles payment selection and order placement<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">view\/frontend\/web\/template\/payment\/simple.html<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Renders the payment option at checkout<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">etc\/adminhtml\/system.xml<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Adds admin configuration fields<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2><strong>Key Takeaways<\/strong><\/h2>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A Magento 2 payment module requires both backend (PHP model) and frontend (JS renderer + HTML template) components working together.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Module sequencing in <\/span><span style=\"font-weight: 400;\">module.xml<\/span><span style=\"font-weight: 400;\"> must include <\/span><span style=\"font-weight: 400;\">Magento_Checkout<\/span><span style=\"font-weight: 400;\"> \u2014 missing this is one of the most common causes of checkout failures.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Always extend <\/span><span style=\"font-weight: 400;\">Magento_Checkout\/js\/view\/payment\/default<\/span><span style=\"font-weight: 400;\"> for your JS renderer; writing a renderer from scratch breaks core checkout functionality.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Disable only selective caches during development, not all caches \u2014 full cache disabling can mask real dependency injection issues.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Test each operation your module claims to support (authorize, capture, refund) in a staging environment before deploying.<\/span><\/li>\n<\/ul>\n<h2><strong>Conclusion<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Building a Magento 2 payment module from scratch takes careful attention to both the PHP backend and the Knockout.js frontend \u2014 but the structure is consistent and repeatable once you understand it. The most common failures come from skipped sequencing, incorrect renderer inheritance, and poor cache management during development, not from the payment logic itself.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If your team needs support building or integrating a custom Magento payment module,<\/span><a href=\"https:\/\/ecommerce.folio3.com\/magento-development-services\/\"> <span style=\"font-weight: 400;\">Folio3&#8217;s Magento development team<\/span><\/a><span style=\"font-weight: 400;\"> can help you get it done right.<\/span><a href=\"https:\/\/ecommerce.folio3.com\/contact-us\/\"> <span style=\"font-weight: 400;\">Talk to our experts<\/span><\/a><span style=\"font-weight: 400;\"> to scope your project.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For related reading, check out our guides on<\/span><a href=\"https:\/\/ecommerce.folio3.com\/blog\/magento-pos-integration\/\"> <span style=\"font-weight: 400;\">Magento POS integration<\/span><\/a><span style=\"font-weight: 400;\"> and how<\/span><a href=\"https:\/\/ecommerce.folio3.com\/blog\/magento-vs-salesforce\/\"> <span style=\"font-weight: 400;\">Magento compares to other enterprise platforms<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h2><strong>FAQs<\/strong><\/h2>\n<h3><strong>What Files Do I Need to Create a Magento 2 Payment Module?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">At minimum: <\/span><span style=\"font-weight: 400;\">registration.php<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">module.xml<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">config.xml<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">payment.xml<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">di.xml<\/span><span style=\"font-weight: 400;\">, a PHP payment model, a layout XML file, two JavaScript files, and an HTML template. Admin configuration requires <\/span><span style=\"font-weight: 400;\">system.xml<\/span><span style=\"font-weight: 400;\"> as well.<\/span><\/p>\n<h3><strong>How Do I Add a Custom Payment Method to Magento 2 Checkout?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Register the method in <\/span><span style=\"font-weight: 400;\">payment.xml<\/span><span style=\"font-weight: 400;\">, create a JS view and renderer that extend Magento&#8217;s default checkout components, and inject them via <\/span><span style=\"font-weight: 400;\">checkout_index_index.xml<\/span><span style=\"font-weight: 400;\">. Run setup:upgrade and clear cache after changes.<\/span><\/p>\n<h3><strong>Can I Create a Magento 2 Payment Module Without Gateway API Calls?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Yes. Extend <\/span><span style=\"font-weight: 400;\">AbstractMethod<\/span><span style=\"font-weight: 400;\"> with <\/span><span style=\"font-weight: 400;\">$_isOffline = true<\/span><span style=\"font-weight: 400;\"> to create an offline payment method (like bank transfer or purchase order) that doesn&#8217;t make live API requests. This is simpler to build and test.<\/span><\/p>\n<h3><strong>How Long Does It Take to Build a Custom Magento Payment Module?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">A basic offline module can be built in a few hours. A fully integrated gateway module with authorization, capture, refund, and admin configuration typically takes 2\u20135 days depending on the gateway&#8217;s API complexity.<\/span><\/p>\n<h3><strong>What Is the Difference Between Authorize and Capture in Magento 2?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Authorization blocks funds on the customer&#8217;s account without withdrawing them. Capture withdraws the previously authorized amount. Most <a href=\"https:\/\/ecommerce.folio3.com\/blog\/magento-pricing\/\">online stores<\/a> use &#8220;Authorize and Capture&#8221; (Sale) simultaneously, while B2B stores often separate them to authorize on order and capture on shipment.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Most merchants hit a wall when their payment gateway isn&#8217;t supported by an existing Magento extension. Whether you&#8217;re working with a regional processor, a B2B invoicing system, or a proprietary payment flow, the only real solution is to build a custom Magento 2 payment module yourself. This guide covers exactly how to do that \u2014<\/p>\n","protected":false},"author":40,"featured_media":19842,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[27],"tags":[60],"class_list":{"0":"post-7767","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-magento","8":"tag-magento-management"},"acf":[],"featured_image_data":{"src":"https:\/\/ecommerce.folio3.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Create-Magento-2-Payment-Module_.jpg","alt":"Magento 2 Payment Module","caption":""},"_links":{"self":[{"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/posts\/7767"}],"collection":[{"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/comments?post=7767"}],"version-history":[{"count":3,"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/posts\/7767\/revisions"}],"predecessor-version":[{"id":30682,"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/posts\/7767\/revisions\/30682"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/media\/19842"}],"wp:attachment":[{"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/media?parent=7767"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/categories?post=7767"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ecommerce.folio3.com\/blog\/wp-json\/wp\/v2\/tags?post=7767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}