É necessário adicionar um campo de texto na forma de pagamento personalizada

A ACL é meu método de pagamento personalizado agora. Quero adicionar um campo personalizado abaixo da Opção ACL na página de checkout.

PFA

Para responder sua pergunta, existem três partes:

1. Criar atributo do pedido
2. Inserir atributo ao fazer o pedido
3. Leia o atributo do pedido no módulo de pagamento

Criar atributo do pedido

Para criar atributo de pedido, você DEVE usar o script de instalação com o seguinte código:

<?php


namespace Vendor\Module\Setup;

use Magento\Eav\Setup\EavSetupFactory;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;
use Magento\Framework\Setup\UpgradeDataInterface;
use Magento\Quote\Setup\QuoteSetupFactory;
use Magento\Sales\Setup\SalesSetupFactory;

class UpgradeData implements UpgradeDataInterface
{
    /**
     * @var QuoteSetupFactory
     */
    protected $quoteSetupFactory;

    /**
     * @var SalesSetupFactory
     */
    protected $salesSetupFactory;

    /**
     * @var EavSetupFactory
     */
    protected $eavSetupFactory;

    /**
     * Constructor
     */
    public function __construct(
        QuoteSetupFactory $quoteSetupFactory,
        SalesSetupFactory $salesSetupFactory,
        EavSetupFactory $eavSetupFactory
    ) {
        $this->quoteSetupFactory = $quoteSetupFactory;
        $this->salesSetupFactory = $salesSetupFactory;
        $this->eavSetupFactory = $eavSetupFactory;
    }

    /**
     * {@inheritdoc}
     */
    public function upgrade(
        ModuleDataSetupInterface $setup,
        ModuleContextInterface $context
    ) {
        $setup->startSetup();

        if (version_compare($context->getVersion(), '1.0.1', '<')) {

            /** @var \Magento\Quote\Setup\QuoteSetup $quoteInstaller */
            $quoteInstaller = $this->quoteSetupFactory->create(['resourceName' => 'quote_setup', 'setup' => $setup]);

            /** @var \Magento\Sales\Setup\SalesSetup $salesInstaller */
            $salesInstaller = $this->salesSetupFactory->create(['resourceName' => 'sales_setup', 'setup' => $setup]);

            //Add attributes to quote
            $entityAttributesCodes = [
                'bank_name' => \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
            ];

            foreach ($entityAttributesCodes as $code => $type) {
                $quoteInstaller->addAttribute('quote', $code, ['type' => $type, 'length' => 255, 'visible' => true, 'nullable' => true,]);
                $salesInstaller->addAttribute('order', $code, ['type' => $type, 'length' => 255, 'visible' => true, 'nullable' => true,]);
        }
        $setup->endSetup();
    }
}

Usei o script de atualização como exemplo, mas você também pode usar o inscript para executar a mesma função.

Inserir atributo ao fazer o pedido

Esse processo é um pouco complicado, mas acho que ainda está bom para você.

• Crie um novo arquivo app/code/Vendor/Module/etc/extension_attributes.xmlcom o seguinte código:

  <?xml version="1.0" ?>
  <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Api/etc/extension_attributes.xsd">
      <extension_attributes for="Magento\Quote\Api\Data\AddressInterface">
          <attribute code="bank_name" type="string"/>
      </extension_attributes>
  </config>

• Crie um arquivo app/code/Vendor/Module/view/frontend/requirejs-config.jscom o seguinte código:

  var config = {
      config: {
          mixins: {
              'Magento_Checkout/js/action/set-shipping-information': {
                  'Vendor_Module/js/order/set-shipping-information-mixin': true
              }
          }
      }
  };

• Crie um novo arquivo app/code/Vendor/Module/view/frontend/web/js/order/set-shipping-information-mixin.jscom o seguinte código:

  define([
      'jquery',
      'mage/utils/wrapper',
      'Magento_Checkout/js/model/quote'
  ], function ($, wrapper, quote) {
      'use strict';
  
      return function (setShippingInformationAction) {
  
          return wrapper.wrap(setShippingInformationAction, function (originalAction) {
              var shippingAddress = quote.shippingAddress();
              if (shippingAddress['extension_attributes'] === undefined) {
                  shippingAddress['extension_attributes'] = {};
              }
  
              // you can extract value of extension attribute from any place (in this example I use customAttributes approach)
              shippingAddress['extension_attributes']['bank_name'] = jQuery('input[name="bank_name"]').val();
              // pass execution to original action ('Magento_Checkout/js/action/set-shipping-information')
              return originalAction();
          });
      };
  });

• Criar arquivo app/code/Vendor/Module/view/frontend/layout/checkout_index_index.xml

  <?xml version="1.0" encoding="UTF-8"?>
  <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
      <body>
          <referenceBlock name="checkout.root">
              <arguments>
                  <argument name="jsLayout" xsi:type="array">
                      <item name="components" xsi:type="array">
                          <item name="checkout" xsi:type="array">
                              <item name="children" xsi:type="array">
                                  <item name="steps" xsi:type="array">
                                      <item name="children" xsi:type="array">
                                          <item name="shipping-step" xsi:type="array">
                                              <item name="children" xsi:type="array">
                                                  <item name="shippingAddress" xsi:type="array">
                                                      <item name="children" xsi:type="array">
                                                          <item name="before-form" xsi:type="array">
                                                              <item name="children" xsi:type="array">
                                                                  <!-- Your form declaration here -->
                                                                  <item name="custom-checkout-form-container" xsi:type="array">
                                                                      <item name="component" xsi:type="string">Vendor_Module/js/view/order_attr</item>
                                                                      <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                      <item name="config" xsi:type="array">
                                                                          <item name="template" xsi:type="string">Vendor_Module/order_attr</item>
                                                                      </item>
                                                                      <item name="children" xsi:type="array">
                                                                          <item name="custom-checkout-form-fieldset" xsi:type="array">
                                                                              <!-- uiComponent is used as a wrapper for form fields (its template will render all children as a list) -->
                                                                              <item name="component" xsi:type="string">uiComponent</item>
                                                                              <!-- the following display area is used in template (see below) -->
                                                                              <item name="displayArea" xsi:type="string">custom-checkout-form-fields</item>
                                                                              <item name="children" xsi:type="array">
                                                                                  <item name="bank_name" xsi:type="array">
                                                                                      <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
                                                                                      <item name="config" xsi:type="array">
                                                                                          <!-- customScope is used to group elements within a single form (e.g. they can be validated separately) -->
                                                                                          <item name="customScope" xsi:type="string">customCheckoutForm</item>
                                                                                          <item name="template" xsi:type="string">ui/form/field</item>
                                                                                          <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
                                                                                      </item>
                                                                                      <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                                      <item name="dataScope" xsi:type="string">customCheckoutForm.bank_name</item>
                                                                                      <item name="label" xsi:type="string">Clearance Full Name</item>
                                                                                      <item name="sortOrder" xsi:type="string">1</item>
                                                                                      <item name="validation" xsi:type="array">
                                                                                          <item name="required-entry" xsi:type="string">true</item>
                                                                                      </item>
                                                                                  </item>
                                                                              </item>
                                                                          </item>
                                                                      </item>
                                                                  </item>
                                                              </item>
                                                          </item>
                                                      </item>
                                                  </item>
                                              </item>
                                          </item>
                                      </item>
                                  </item>
                              </item>
                          </item>
                      </item>
                  </argument>
              </arguments>
          </referenceBlock>
      </body>
  </page>

• Crie um arquivo app/code/Vendor/Module/view/frontend/web/template/order_attr.htmlcom o seguinte código:

  <div>
      <form id="custom-checkout-form" class="form" data-bind="attr: {'data-hasrequired': $t('* Required Fields')}">
          <fieldset class="fieldset">
              <legend data-bind="i18n: 'Clearance Info'"></legend>
              <div><!-- ko i18n: 'This is clearance description' --><!-- /ko --></div>
              <!-- ko foreach: getRegion('custom-checkout-form-fields') -->
              <!-- ko template: getTemplate() --><!-- /ko -->
              <!--/ko-->
          </fieldset>
      </form>
  </div>

• Crie um arquivo app/code/Vendor/Module/view/frontend/web/js/view/order_attr.jscom o seguinte código:

  define([
      'Magento_Ui/js/form/form'
  ], function(Component) {
      'use strict';
      return Component.extend({
          initialize: function () {
              this._super();
              // component initialization logic
              return this;
          },
  
          /**
           * Form submit handler
           *
           * This method can have any name.
           */
          onSubmit: function() {
              // trigger form validation
              this.source.set('params.invalid', false);
              this.source.trigger('customCheckoutForm.data.validate');
  
              // verify that form data is valid
              if (!this.source.get('params.invalid')) {
                  // data is retrieved from data provider by value of the customScope property
                  var formData = this.source.get('customCheckoutForm');
                  // do something with form data
                  console.dir(formData);
              }
          }
      });
  });

• Crie um arquivo app/code/Vendor/Module/etc/di.xmlcom o seguinte código:

  <?xml version="1.0" encoding="UTF-8"?>
  <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
      <type name="Magento\Checkout\Model\ShippingInformationManagement">
          <plugin name="save-in-quote" type="Vendor\Module\Plugin\AddOrderAttrToQuote" sortOrder="10"/>
      </type>
  </config>

• Crie um novo arquivo app/code/Vendor/Module/Plugin/AddOrderAttrToQuote.phpcom o seguinte código:

  <?php
  
  namespace Vendor\Module\Plugin;
  
  
  class AddOrderAttrToQuote
  {
      protected $quoteRepository;
  
      public function __construct(
          \Magento\Quote\Model\QuoteRepository $quoteRepository
      ) {
          $this->quoteRepository = $quoteRepository;
      }
  
      /**
       * @param \Magento\Checkout\Model\ShippingInformationManagement $subject
       * @param $cartId
       * @param \Magento\Checkout\Api\Data\ShippingInformationInterface $addressInformation
       */
      public function beforeSaveAddressInformation(
          \Magento\Checkout\Model\ShippingInformationManagement $subject,
          $cartId,
          \Magento\Checkout\Api\Data\ShippingInformationInterface $addressInformation
      ) {
          $extAttributes = $addressInformation->getShippingAddress()->getExtensionAttributes();
          $bank_name = $extAttributes->getBankName();
          $quote = $this->quoteRepository->getActive($cartId);
          $quote->setBankName($bank_name);
          $extAttributes->setBankName("");
      }
  }

• Criar novo arquivo app/code/Cleargo/NewAttributes/etc/events.xml

  <?xml version="1.0" encoding="UTF-8"?>
  <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
      <event name="sales_model_service_quote_submit_before">
          <observer name="handle_order_attrs" instance="Vendor\Module\Observer\HandleOrderAttrs" />
      </event>
  </config>

• Crie um novo arquivo app/code/Vendor/Module/Observer/HandleOrderAttrs.phpcom o seguinte código:

  <?php        
  namespace Vendor\Module\Observer;
  
  use \Magento\Framework\Event\ObserverInterface;
  use \Magento\Framework\Event\Observer;
  
  class HandleOrderAttrs implements ObserverInterface
  {
      public function execute(Observer $observer)
      {
          $order = $observer->getOrder();
          $quote = $observer->getQuote();
          //Load the values
          $bank_name = $quote->getData("bank_name");
          $order->setData('bank_name', $bank_name)
              ->save();
      }
  }

Leia o atributo do pedido no módulo de pagamento

Para o caso 3, parece que é do módulo de terceiros. De qualquer forma, se você deseja obter o valor bank_namedo pedido, pode usar o seguinte código:

$order->getData('bank_name')

Conslusão

É muito trabalhoso fazer para um atributo de pedido, mas depois que você obtém o ponto principal, tudo corra bem.