2

I am unable to use Authorize.net or PayPal in the country my store is working. I'm migrating from magento 1.9 to magento 2.1; and I manually process all my payments from credit cards using the Save CC in magento 1.9.

How can I create a custom payment method in magento 2.1 that will allow me to save CC information.

2

For example, your Payment model, we need to declare the form block $_formBlockType.

app/code/Vendor/Payment/Model/PaymentMethod.php

class PaymentMethod extends \Magento\Payment\Model\Method\Cc
{
     /**
     * @var string
     */
    protected $_formBlockType = 'Vendor\Payment\Block\Form\Cc';

}

We can use the default form or set our new template.

app/code/Vendor/Payment/Block/Form/Cc.php

class Cc extends \Magento\Payment\Block\Form\Cc
{
     /**
    * Internal constructor. Set template
    *
    * @return void
    */
    protected function _construct()
    {
        parent::_construct();
        $this->setTemplate('payment/form/cc.phtml');
    }
}

We should create app/code/Vendor/Payment/view/frontend/templates/payment/form/cc.phtml. See more: vendor/magento/module-payment/view/frontend/templates/form/cc.phtml

This is for multi shipping addresses.

For one page checkout page, we need to build the html template and js.

app/code/Vendor/Payment/view/frontend/layout/checkout_index_index.xml

<?xml version="1.0"?>

<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="vendor_payments" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Vendor_Payment/js/view/payment/vendor_payments</item>
                                                                    <item name="methods" xsi:type="array">
                                                                        <item name="vendor_payment" 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>

app/code/Vendor/Payment/view/frontend/web/js/view/payment/vendor_payments.js

define(
    [
        'ko',
        'jquery',
        'uiComponent',
        'Magento_Checkout/js/model/payment/renderer-list'
    ],
    function (
        ko,
        $,
        Component,
        rendererList
    ) {
        'use strict';
        rendererList.push(
            {
                type: 'vendor_payments',
                component: 'Vendor_Payments/js/view/payment/method-renderer/cc-form'
            }
        );


        /** Add view logic here if needed */
        return Component.extend({});
    }
);

app/code/Vendor/Paymnet/view/frontend/web/js/view/payment/method-renderer/cc-form.js

/*browser:true*/
/*global define*/
define(
    [
        'Magento_Payment/js/view/payment/cc-form',
        'underscore'
    ],
    function (Component, _) {
        'use strict';
        var configPaymentCc = window.checkoutConfig.payment.vendor_payment;

        return Component.extend({
            defaults: {
                template: 'Vendor_Payment/payment/cc_form',
                isCcFormShown: true,
                availableCardTypes: configPaymentCc.availableCardTypes
            },
            ......
        });
    }
);

app/code/Vendor/Payment/view/frontend/web/template/payment/cc_form.html

....Your code.

We should take a look at Braintree payment module: vendor/magento/module-braintree

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.