Magento 2 – How to Pass Payment Method Configuration to HTML Template

magento2modulepayment-gatewaypayment-methods

I have deploy a payment gateway module based on the sample from github https://github.com/magento/magento2-samples/tree/master/sample-module-payment-gateway.

At this point, I'm trying to show additional information that were set on the admin configuration on the /view/frontend/web/template/payment/form.html. However, there only few methods that I can try to get the data from: getCode(), getTitle(), etc. What I'm trying to get is another field (let's say FieldA, which is defined as field_a on the admin xml config file under etc folder.

I checked on the variable window.checkoutConfig, but it did not seem to show much information that were set from the payment configuration on the admin.

Am I missing a step before I can pass the config data into the block file?

Thank you,

Best Answer

First of all, it's hard to check the json if we don't use a format tool.

We can use this website to render json: http://www.jsoneditoronline.org/

enter image description here

Second:

I'm going to add and get the new field - fixed fee amount to our payment.

--Get fixed amount in config provider.

sample-module-payment-gateway/Model/Ui/ConfigProvider.php

final class ConfigProvider implements ConfigProviderInterface
{


    const CODE = 'sample_gateway';

    protected $method;

    /**
     * Payment ConfigProvider constructor.
     * @param \Magento\Payment\Helper\Data $paymentHelper
     */
    public function __construct(
        \Magento\Payment\Helper\Data $paymentHelper
    ) {
        $this->method = $paymentHelper->getMethodInstance(self::CODE);
    }
    /**
     * Retrieve assoc array of checkout configuration
     *
     * @return array
     */

    public function getConfig()
    {
        return [
            'payment' => [
                self::CODE => [
                    'transactionResults' => [
                        ClientMock::SUCCESS => __('Success'),
                        ClientMock::FAILURE => __('Fraud')
                    ],
                    'fixedamount' => $this->getFixedAmount(),
                ]
            ]
        ];
    }
    //Get fixed amount
    protected function getFixedAmount()
    {
        return $this->method->getFixedAmount();
    }
}

--Get fixed amount from payment js

sample-module-payment-gateway/view/frontend/web/js/view/payment/method-renderer/sample_gateway.js

        getFixedAmount: function() {
            return window.checkoutConfig.payment.sample_gateway.fixedamount;
        },

--Add to the payment template

sample-module-payment-gateway/view/frontend/web/template/payment/form.html

<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
     ......
     <div class="fixed-amount">
        <span data-bind="text: getFixedAmount()"></span>
     </div>
     ......
</div>

--Add to our admin config:

sample-module-payment-gateway/etc/adminhtml/system.xml

<field id="fixedamount" translate="label" type="text" sortOrder="53" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Fixed Amount</label>
                    <frontend_class>validate-number validate-zero-or-greater</frontend_class>
</field>

--Last but not least, remember to run static content deploy again.

Related Topic