Magento – How to create a Magento 2.1 custom payment to save credit card information

magento-2.1paymentpayment-methodspaypalsave

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.

Best Answer

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

Related Topic