Magento 2 – Show and Hide Field in Custom Payment Method

htmlknockoutjsmagento2payment

In my custom payment method there is 1 checkbox as seen below:

enter image description here

In the Admin Settings, if I set it to disable then I don't want to show it.

Following div is for that field.

form.html

<div class="payfull_form-group use-3d-wrapper" style="">
    <div class="custom-input">
      <div class="custom-checkbox">
        <label class="custom-label empty-payfull_label"></label>
        <label class="custom-label_checkbox">
          <input name="use3d" id="use3d" value="1" type="checkbox">
          Use 3D secure Payments System
        </label>
      </div>
    </div>
  </div>

How can I achieve that?

Best Answer

If you have already the payment, you can follow the same logic:

In your Payment Config Provider, you add the 3D Secure config:

/**
 * {@inheritdoc}
 */
public function getConfig()
{
    return $this->method->isAvailable() ? [
        'payment' => [
            'your_payment_code' => [
                ......
                '3DSecure' => $this->get3DSecure()
            ],
        ],
    ] : [];
}
/**
* Get config from admin
*/
public function get3DSecure()
{
    //Data from system.xml fields
    return $this->getConfigData('3dsecure');
}

Navigate to the Js payment method render, we can get from checkout global variable:

/*browser:true*/
/*global define*/
define(
    [
        'Magento_Checkout/js/view/payment/default'
    ],
    function (Component) {
        'use strict';

        return Component.extend({
            defaults: {
                template: 'YourModule_Payment/payment/custompayment'
            },

            get3DSecure: function() {
                return window.checkoutConfig.payment.paymentcustom.3DSecure;
            },

            isEnable3DSecure: function() {
              if(this.get3DSecure()) {
                return true;
              }
              return false;
            }

        });
    }
);

In your html template, we can check:

      <!-- ko if: isEnable3DSecure() -->
            <div class="payfull_form-group use-3d-wrapper" style="">
                <div class="custom-input">
                    <div class="custom-checkbox">
                        <label class="custom-label empty-payfull_label"></label>
                        <label class="custom-label_checkbox">
                        <input name="use3d" id="use3d" value="1" type="checkbox">
                        Use 3D secure Payments System
                        </label>
                    </div>
                </div>
            </div>
      <!-- /ko -->

Read more: http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_payment.html

Related Topic