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,


1 Answer 1


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


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

--Get fixed amount in config provider.


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


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

--Add to the payment template


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

--Add to our admin config:


<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>

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

  • 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
    Commented Aug 24, 2016 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
    Commented Aug 24, 2016 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 Commented Aug 24, 2016 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
    Commented Aug 24, 2016 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. Commented Aug 26, 2016 at 14:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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