2

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,

3

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.

|improve this answer|||||
  • Hi there.. I ran into some issue. I defined getFixedAmount: function() in "sample_gateway.js" file with some arbitrary value instead of function call. On the checkout page, it threw an error that getFixedAmount from <span data-bind="text: getFixedAmount()"></span> as: knockout.js:3012 Uncaught ReferenceError: Unable to process binding "text: function (){return getReferralCode() }" Message: getReferralCode is not defined Any idea? – frostshoxx Aug 24 '16 at 15:03
  • I have tried to deploy the static content, but that didn't seem to help either. Note that this site is not in the production mode. – frostshoxx Aug 24 '16 at 15:06
  • 1
    Go to Admin > STORES > Configuration, try to add a value. You can check the current checkout config in checkout page with jsoneditoronline.org – Khoa TruongDinh Aug 24 '16 at 15:15
  • So at this point adding the field system.xml works. I was able to enter the data and save it. When I refresh the page does load. Now I take a step back to ConfigProvider.php and notice that the checkout page would not even load if the code try to do $this->getFixedAmount(), which essentially call $this->method->getFixedAmount(). Do we need any extra file outside the demo sample project to be able to access to the configuration? Thank you very much for your help so far. – frostshoxx Aug 24 '16 at 16:41
  • 1
    @Frostshoxx's comment: For whatever reason getFixedAmount() will get function undefined error. So I try the more primitive way with getConfigData("fixedamount"). Every thing including the js and template part also works. – Khoa TruongDinh Aug 26 '16 at 14:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.