Magento – Magento 2 custom payment method not showing in front end

magento2paymentpayment-gatewaypayment-methods

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];
            }
        });
    }
);

Best Answer

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

Related Topic