5

I have tried to create new payment method in magento2, when i tried to configure it is coming in the backend, but not in the front end. If anyone fixed this issue please let me know the fixes, i am not sure the exact reason.

My block form Quickpay.php

<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
namespace Magento\Quickpay\Block\Form;

/**
 * Block for Quickpay payment method form
 */
class Quickpay extends \Magento\Quickpay\Block\Form\AbstractInstruction
{
    /**
     * Quick pay template
     *
     * @var string
     */
    protected $_template = 'form/quickpay.phtml';
}

AbstractInstuction.php

<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
namespace Magento\Quickpay\Block\Form;

/**
 * Abstract class for Quickpay payment method form
 */
abstract class AbstractInstruction extends \Magento\Payment\Block\Form
{
    /**
     * Instructions text
     *
     * @var string
     */
    protected $_instructions;

    /**
     * Get instructions text from config
     *
     * @return null|string
     */
    public function getInstructions()
    {
        if ($this->_instructions === null) {
            /** @var \Magento\Payment\Model\Method\AbstractMethod $method */
            $method = $this->getMethod();
            $this->_instructions = $method->getConfigData('instructions');
        }
        return $this->_instructions;
    }
}

Model : Quickpay.php

<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
namespace Magento\Quickpay\Model;

/**
 * Quickpay payment method model
 *
 * @method \Magento\Quote\Api\Data\PaymentMethodExtensionInterface getExtensionAttributes()
 */
class Quickpay extends \Magento\Payment\Model\Method\AbstractMethod
{
    const PAYMENT_METHOD_QUICKPAY_CODE = 'quickpay';

    /**
     * Payment method code
     *
     * @var string
     */
    protected $_code = self::PAYMENT_METHOD_QUICKPAY_CODE;

    /**
     * Quickpay payment block paths
     *
     * @var string
     */
    protected $_formBlockType = 'Magento\Quickpay\Block\Form\Quickpay';

    /**
     * Info instructions block path
     *
     * @var string
     */
    protected $_infoBlockType = 'Magento\Payment\Block\Info\Instructions';

    /**
     * Availability option
     *
     * @var bool
     */
    protected $_isOffline = true;

    /**
     * Get instructions text from config
     *
     * @return string
     */
    public function getInstructions()
    {
        return trim($this->getConfigData('instructions'));
    }
}

view : adminhtml/templates/form/quickpay.html

<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

/**
 * @var $block \Magento\Quickpay\Block\Form\Quickpay
 */
$instructions = $block->getInstructions();
?>
<?php if ($instructions): ?>
    <?php $methodCode = $block->escapeHtml($block->getMethodCode());?>
    <ul class="form-list checkout-agreements" id="payment_form_<?php /* @noEscape */ echo $methodCode ?>" style="display:none;">
        <li>
            <div class="<?php /* @noEscape */ echo $methodCode ?>-instructions-content checkout-agreement-item-content">
                <?php /* @noEscape */ echo nl2br($block->escapeHtml($instructions)) ?>
            </div>
        </li>
    </ul>
<?php endif; ?>

view/frontend/layout/checkout_index_index.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<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="billing-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="payment" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="renders" xsi:type="array">
                                                            <!-- merge payment method renders here -->
                                                            <item name="children" xsi:type="array">
                                                                <item name="offline-payments" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Magento_OfflinePayments/js/view/payment/offline-payments</item>
                                                                    <item name="methods" xsi:type="array">
                                                                        <item name="quickpay" xsi:type="array">
                                                                            <item name="isBillingAddressRequired" xsi:type="boolean">true</item>
                                                                        </item>                                                               
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

view/frontend/templates/form/quickpay.phtml

<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

/**
 * @var $block \Magento\Quickpay\Block\Form\Quickpay
 */
$instructions = $block->getInstructions();
?>
<?php if ($instructions): ?>
    <?php $methodCode = $block->escapeHtml($block->getMethodCode());?>
    <div class="items <?php /* @noEscape */ echo $methodCode ?> instructions agreement" id="payment_form_<?php /* @noEscape */ echo $methodCode ?>" style="display: none;">
        <?php /* @noEscape */ echo nl2br($block->escapeHtml($instructions)) ?>
    </div>
<?php endif; ?>

view/frontend/web/template/payment/quickpay.html

<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
    <div class="payment-method-title field choice">
        <input type="radio"
               name="payment[method]"
               class="radio"
               data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>
        <label data-bind="attr: {'for': getCode()}" class="label"><span data-bind="text: getTitle()"></span></label>
    </div>

    <div class="payment-method-content">
        <!-- ko foreach: getRegion('messages') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
        <div class="payment-method-billing-address">
            <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </div>
        <p data-bind="html: getInstructions()"></p>
        <div class="checkout-agreements-block">
            <!-- ko foreach: $parent.getRegion('before-place-order') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </div>
        <div class="actions-toolbar">
            <div class="primary">
                <button class="action primary checkout"
                        type="submit"
                        data-bind="
                        click: placeOrder,
                        attr: {title: $t('Place Order')},
                        enable: (getCode() == isChecked()),
                        css: {disabled: !isPlaceOrderActionAllowed()}
                        "
                        disabled>
                    <span data-bind="i18n: 'Place Order'"></span>
                </button>
            </div>
        </div>

    </div>
</div>

js : Magento/Quickpay/view/frontend/web/js/view/payment/offline-payments.js

/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
/*browser:true*/
/*global define*/
define(
    [
        'uiComponent',
        'Magento_Checkout/js/model/payment/renderer-list'
    ],
    function (
        Component,
        rendererList
    ) {
        'use strict';
        rendererList.push(
            {
                type: 'quickpay',
                component: 'Magento_Quickpay/js/view/payment/method-renderer/quickpay-method'
            }
        );
        /** Add view logic here if needed */
        return Component.extend({});
    }
);

quickpay.js : Magento/Quickpay/view/frontend/web/js/view/payment/method-renderer/quickpay.js

/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
/*browser:true*/
/*global define*/
define(
    [
        'Magento_Checkout/js/view/payment/default'
    ],
    function (Component) {
        'use strict';
        return Component.extend({
            defaults: {
                template: 'Magento_Quickpay/payment/quickpay'
            },

            /** Returns payment method instructions */
            getInstructions: function() {
                return window.checkoutConfig.payment.instructions[this.item.method];
            }
        });
    }
);
4
  • Please update the full path of your js render file? Jun 28, 2016 at 13:25
  • Have you got the solution of this, If yes Please mention it here
    – mjdevloper
    Sep 9, 2016 at 10:28
  • have you done this?
    – Bojjaiah
    Dec 13, 2016 at 10:36
  • @magento two No
    – Naveenbos
    Dec 13, 2016 at 13:16

3 Answers 3

0

In Magento/Quickpay/view/frontend/web/js/view/payment/offline-payments.js You have defined the

rendererList.push(
            {
                type: 'quickpay',
                component: 'Magento_Quickpay/js/view/payment/method-renderer/quickpay-method'
            }
        );

But your renderer file name is quickpay.js

It should be quickpay-method.js So change the quickpay.js to quickpay-method.js

1
  • I have tried this but no luck
    – Naveenbos
    Jul 12, 2016 at 12:03
0

To render custom payment method there is need to check js files.. js/view/payment/quickpay.js and js/view/payment/method-renderer/quickpay-method.js

In etc/config.xml set active to 1
Also check these js are included or not in checkout page using firebug...if it is included then check the permission to pub/static folder. you can also run command php bin/magento setup:static-content:deploy

I hope this help to render the payment method... I was also getting the same issue..but now resolved.try this!

0

I was with this error too. I solved this just changing the component on view/frontend/layout/checkout_index_index.xml on this line:

<item name="component" xsi:type="string">Magento_OfflinePayments/js/view/payment/offline-payments</item>

To

<item name="component" xsi:type="string">Magento_Quickpay/js/view/payment/offline-payments</item>

So I think you should change this line.

Your Answer

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

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