Add credit card form in checkout page in Magento 2

<!--
/**
 * Copyright © 2015 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>
        <form class="form" data-bind="attr: {'id': getCode() + '-form'}">
             <!-- ko template: 'Magento_Payment/payment/cc-form' --><!-- /ko -->         
             

        </form>
        <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')},
                        css: {disabled: !isPlaceOrderActionAllowed()},
                        enable: (getCode() == isChecked())
                        "
                        disabled>
                    <span data-bind="i18n: 'Place Order'"></span>
                </button>
            </div>
        </div>
    </div>
</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

<!--

/**

* See COPYING.txt for license details.

*/

-->

<input type="radio"

name="payment[method]"

class="radio"

data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>

</div>

</div>

</form>

</div>

<button class="action primary checkout"

type="submit"

data-bind="

click: placeOrder,

attr: {title: $t('Place Order')},

css: {disabled: !isPlaceOrderActionAllowed()},

enable: (getCode() == isChecked())

"

disabled>

</button>

</div>

/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
/*browser:true*/
/*global define*/
define(
    [
        'jquery',
        'Magento_Payment/js/view/payment/cc-form'
    ],
    function (
        $,
        Component
        )  {
        'use strict';

        return Component.extend({
            defaults: {
                template: 'Magemonkey_Chargeanywhere/payment/chargeanywhere'
            },
            context: function() {
                return this;
            },

            getCode: function() {
                return 'chargeanywhere';
            },

            isActive: function() {
                return true;
            }

           
        });
    }
);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

/**

* See COPYING.txt for license details.

*/

/*browser:true*/

/*global define*/

define(

[

'jquery',

'Magento_Payment/js/view/payment/cc-form'

],

function (

$,

Component

) {

'use strict';

return Component.extend({

defaults: {

template: 'Magemonkey_Chargeanywhere/payment/chargeanywhere'

},

context: function() {

return this;

},

getCode: function() {

return 'chargeanywhere';

},

isActive: function() {

return true;

}

});

}

);

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
	<type name="Magento\Payment\Model\CcGenericConfigProvider">
        <arguments>
            <argument name="methodCodes" xsi:type="array">
                <item name="chargeanywhere" xsi:type="const">Magemonkey\Chargeanywhere\Model\Chargeanywhere::CODE</item>
            </argument>
        </arguments>
    </type>
</config>

1

2

3

4

5

6

7

8

9

10

<?xml version="1.0"?>

<item name="chargeanywhere" xsi:type="const">Magemonkey\Chargeanywhere\Model\Chargeanywhere::CODE</item>

</argument>

</arguments>

</type>

</config>

<?php
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
namespace Magemonkey\Chargeanywhere\Model;
use Magento\Framework\Simplexml\Element;
use Magento\Sales\Model\Order\Payment\Transaction;


/**
 * Pay In Store payment method model
 */
class Chargeanywhere extends \Magento\Payment\Model\Method\Cc
{
    const CODE = 'chargeanywhere';
    /**
     * Payment code
     *
     * @var string
     */
    protected $_code = self::CODE;

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

    protected $_canAuthorize = true;
    protected $_canCapture = true;

    public function __construct(
        \Magento\Framework\Model\Context $context,
        \Magento\Framework\Registry $registry,
        \Magento\Framework\Api\ExtensionAttributesFactory $extensionFactory,
        \Magento\Framework\Api\AttributeValueFactory $customAttributeFactory,
        \Magento\Payment\Helper\Data $paymentData,
        \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig,
        \Magento\Payment\Model\Method\Logger $logger,
        \Magento\Framework\Module\ModuleListInterface $moduleList,
        \Magento\Framework\Stdlib\DateTime\TimezoneInterface $localeDate,
        \Magento\Directory\Model\CountryFactory $countryFactory,
        \Magento\Checkout\Model\Cart $cart,
        \Magento\Quote\Model\QuoteFactory $quote,
        \Magento\Backend\Model\Session\Quote $quoteSession,
        \Magento\Framework\App\ResourceConnection $resource,
        \Magento\Framework\App\State $state,
        \Magento\Customer\Model\Session $customerSession,
        \Magento\Framework\Session\SessionManager $sessionManager,
        \Magento\Directory\Model\Region $regionList,
        \Magento\Framework\App\Request\Http $request,
        \Magento\Sales\Model\Order\Payment\Transaction\BuilderInterface $transactionBuilder,
        \Magemonkey\Chargeanywhere\Helper\Data $helperData,
        \Magento\Checkout\Model\Session $checkoutSession,
        array $data = array()
    ) {
        $this->quote = $quote;
        $this->_session = $quoteSession;
        $this->_appState = $state;
        $this->_customerSession = $customerSession;
        $this->_regionList = $regionList;
        $this->request = $request;
        $this->_sessionId = $sessionManager->getSessionId();
        $this->_sessionManager = $sessionManager;
        $this->transactionBuilder = $transactionBuilder;
        $this->helper = $helperData;
        $this->_checkoutSession = $checkoutSession;
        parent::__construct(
            $context,
            $registry,
            $extensionFactory,
            $customAttributeFactory,
            $paymentData,
            $scopeConfig,
            $logger,
            $moduleList,
            $localeDate,
            null,
            null,
            $data
            
        );
        
        $this->cart = $cart;
        $this->_countryFactory = $countryFactory;
        $this->_scopeConfig = $scopeConfig;
    }

    /**
     * Validate payment method information object
     *
     * @return $this
     * @throws \Magento\Framework\Exception\LocalizedException
     * @SuppressWarnings(PHPMD.CyclomaticComplexity)
     * @SuppressWarnings(PHPMD.NPathComplexity)
     */
    public function validate() {
         parent::validate();
        return true;
    }
    public function authorize(\Magento\Payment\Model\InfoInterface $payment, $amount) {
        $chargedata = $this->_checkoutSession->getChargeData();
        $payment->setTransactionId($chargedata['ReferenceNumber']);
        $payment->setParentTransactionId($chargedata['ReferenceNumber']);
        $payment->setIsTransactionClosed(0);
        return $this;
    }
    public function capture(\Magento\Payment\Model\InfoInterface $payment, $amount)
    {   $chargedata = $this->_checkoutSession->getChargeData();
        $payment->setLastTransId($chargedata['ReferenceNumber']);
        $payment->setTransactionId($chargedata['ReferenceNumber']);
        return $this;
    }

    public function getConfigPaymentAction()
    {
       return $this->getConfigData('payment_action');
    }   
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

<?php

/**

* See COPYING.txt for license details.

*/

namespace Magemonkey\Chargeanywhere\Model;

use Magento\Framework\Simplexml\Element;

use Magento\Sales\Model\Order\Payment\Transaction;

/**

* Pay In Store payment method model

*/

class Chargeanywhere extends \Magento\Payment\Model\Method\Cc

{

const CODE = 'chargeanywhere';

/**

* Payment code

*

* @var string

*/

protected $_code = self::CODE;

/**

* Availability option

*

* @var bool

*/

// protected $_isOffline = true;

protected $_canAuthorize = true;

protected $_canCapture = true;

public function __construct(

\Magento\Framework\Model\Context $context,

\Magento\Framework\Registry $registry,

\Magento\Framework\Api\ExtensionAttributesFactory $extensionFactory,

\Magento\Framework\Api\AttributeValueFactory $customAttributeFactory,

\Magento\Payment\Helper\Data $paymentData,

\Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig,

\Magento\Payment\Model\Method\Logger $logger,

\Magento\Framework\Module\ModuleListInterface $moduleList,

\Magento\Framework\Stdlib\DateTime\TimezoneInterface $localeDate,

\Magento\Directory\Model\CountryFactory $countryFactory,

\Magento\Checkout\Model\Cart $cart,

\Magento\Quote\Model\QuoteFactory $quote,

\Magento\Backend\Model\Session\Quote $quoteSession,

\Magento\Framework\App\ResourceConnection $resource,

\Magento\Framework\App\State $state,

\Magento\Customer\Model\Session $customerSession,

\Magento\Framework\Session\SessionManager $sessionManager,

\Magento\Directory\Model\Region $regionList,

\Magento\Framework\App\Request\Http $request,

\Magento\Sales\Model\Order\Payment\Transaction\BuilderInterface $transactionBuilder,

\Magemonkey\Chargeanywhere\Helper\Data $helperData,

\Magento\Checkout\Model\Session $checkoutSession,

array $data = array()

) {

$this->quote = $quote;

$this->_session = $quoteSession;

$this->_appState = $state;

$this->_customerSession = $customerSession;

$this->_regionList = $regionList;

$this->request = $request;

$this->_sessionId = $sessionManager->getSessionId();

$this->_sessionManager = $sessionManager;

$this->transactionBuilder = $transactionBuilder;

$this->helper = $helperData;

$this->_checkoutSession = $checkoutSession;

parent::__construct(

$context,

$registry,

$extensionFactory,

$customAttributeFactory,

$paymentData,

$scopeConfig,

$logger,

$moduleList,

$localeDate,

null,

$data

);

$this->cart = $cart;

$this->_countryFactory = $countryFactory;

$this->_scopeConfig = $scopeConfig;

}

/**

* Validate payment method information object

*

* @return $this

* @throws \Magento\Framework\Exception\LocalizedException

* @SuppressWarnings(PHPMD.CyclomaticComplexity)

* @SuppressWarnings(PHPMD.NPathComplexity)

*/

public function validate() {

parent::validate();

return true;

}

public function authorize(\Magento\Payment\Model\InfoInterface $payment, $amount) {

$chargedata = $this->_checkoutSession->getChargeData();

$payment->setTransactionId($chargedata['ReferenceNumber']);

$payment->setParentTransactionId($chargedata['ReferenceNumber']);

$payment->setIsTransactionClosed(0);

return $this;

}

public function capture(\Magento\Payment\Model\InfoInterface $payment, $amount)

{ $chargedata = $this->_checkoutSession->getChargeData();

$payment->setLastTransId($chargedata['ReferenceNumber']);

$payment->setTransactionId($chargedata['ReferenceNumber']);

return $this;

}

public function getConfigPaymentAction()

{

return $this->getConfigData('payment_action');

}

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/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">
                                                            <item name="children" xsi:type="array">
                                                            <!-- merge payment method renders here -->
                                                                <item name="chargeanywhere-chargeanywhere" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Magemonkey_Chargeanywhere/js/view/payment/chargeanywhere</item>
                                                                    <item name="methods" xsi:type="array">
                                                                  
																		 <item name="chargeanywhere" xsi:type="array">
                                                                            <item name="isBillingAddressRequired" xsi:type="boolean">true</item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            <!-- item-renderer -->
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

<?xml version="1.0"?>

<!--

/**

* See COPYING.txt for license details.

*/

-->

<body>

<item name="component" xsi:type="string">Magemonkey_Chargeanywhere/js/view/payment/chargeanywhere</item>

</item>

</item>

</argument>

</arguments>

</referenceBlock>

</body>

</page>

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../Config/etc/system_file.xsd">
    <system>
        <section id="payment">
            <group id="chargeanywhere" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Charge Anywhere</label>
                <field id="active" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="0">
                    <label>Enabled</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="title" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Title</label>
                </field>
                <field id="order_status" translate="label" type="select" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="0">
                    <label>New Order Status</label>
                    <source_model>Magemonkey\Chargeanywhere\Model\Config\Source\Order\Status\Pendingpayment</source_model>
                </field>
                <field id="api_key" translate="label" type="obscure" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>API Secret Key</label>
                    <!-- <backend_model>Magento\Config\Model\Config\Backend\Encrypted</backend_model> -->
                    <comment>Test/Live Secret Key</comment>
                </field>
                <field id="marchant_id" translate="label" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Marchant Id</label>
                </field>
                <field id="terminal_id" translate="label" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Terminal Id</label>
                </field>
                <field id="mode_type" translate="label" type="select" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="0">
                    <label>Test/Live</label>
                    <source_model>Magemonkey\Chargeanywhere\Model\Source\Modetype</source_model>
                </field>
                 <field id="payment_action" translate="label" type="select" sortOrder="12" showInDefault="1" showInWebsite="1" showInStore="0">
                    <label>Payment Action</label>
                    <source_model>Magemonkey\Chargeanywhere\Model\Config\Source\Order\Action\Paymentaction</source_model>
                </field>
                <field id="cctypes" translate="label" type="multiselect" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="0">
                    <label>Credit Card Types</label>
                    <source_model>Magento\Payment\Model\Source\Cctype</source_model>
                </field>
                <field id="instructions" translate="label" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Instructions</label>
                </field>
            </group>
            <!-- payment-group -->
        </section>
    </system>
</config>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

<?xml version="1.0"?>

<!--

/**

* See COPYING.txt for license details.

*/

-->

<label>Charge Anywhere</label>

<label>Enabled</label>

<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>

</field>

<label>Title</label>

</field>

<label>New Order Status</label>

<source_model>Magemonkey\Chargeanywhere\Model\Config\Source\Order\Status\Pendingpayment</source_model>

</field>

<label>API Secret Key</label>

<comment>Test/Live Secret Key</comment>

</field>

<label>Marchant Id</label>

</field>

<label>Terminal Id</label>

</field>

<source_model>Magemonkey\Chargeanywhere\Model\Source\Modetype</source_model>

</field>

<label>Payment Action</label>

<source_model>Magemonkey\Chargeanywhere\Model\Config\Source\Order\Action\Paymentaction</source_model>

</field>

<label>Credit Card Types</label>

<source_model>Magento\Payment\Model\Source\Cctype</source_model>

</field>

<label>Instructions</label>

</field>

</group>

</section>

</system>

</config>

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../Store/etc/config.xsd">
    <default>
        <payment>
            <chargeanywhere>
                <active>1</active>
                <title>Chargeanywhere</title>
                <order_status>pending_payment</order_status>
                <instructions>Instruction.</instructions>
                <payment_action>authorize</payment_action>
                <model>Magemonkey\Chargeanywhere\Model\Chargeanywhere</model>
                <group>offline</group>
            </chargeanywhere>
            <!-- payment-config -->
        </payment>
    </default>
</config>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<?xml version="1.0"?>

<!--

/**

* See COPYING.txt for license details.

*/

-->

<title>Chargeanywhere</title>

<order_status>pending_payment</order_status>

<instructions>Instruction.</instructions>

<payment_action>authorize</payment_action>

<model>Magemonkey\Chargeanywhere\Model\Chargeanywhere</model>

<group>offline</group>

</chargeanywhere>

</payment>

</default>

</config>

<?php
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
namespace Magemonkey\Chargeanywhere\Model\Config\Source\Order\Action;
/**
 * Order Status source model
 */
class Paymentaction  
{
    /**
     * @var string[]
     */
    public function toOptionArray(){
        return [
            ['value' => 'authorize', 'label' => __('Authorize Only')],
            ['value' => 'authorize_capture', 'label' => __('Sale')],
        ];
    }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<?php

/**

* See COPYING.txt for license details.

*/

namespace Magemonkey\Chargeanywhere\Model\Config\Source\Order\Action;

/**

* Order Status source model

*/

class Paymentaction

{

/**

* @var string[]

*/

public function toOptionArray(){

return [

['value' => 'authorize', 'label' => __('Authorize Only')],

['value' => 'authorize_capture', 'label' => __('Sale')],

];

}

<?php
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
namespace Magemonkey\Chargeanywhere\Model\Config\Source\Order\Status;

use Magento\Sales\Model\Order;
use Magento\Sales\Model\Config\Source\Order\Status;

/**
 * Order Status source model
 */
class Pendingpayment extends Status
{
    /**
     * @var string[]
     */
    protected $_stateStatuses = [Order::STATE_PENDING_PAYMENT];
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<?php

/**

* See COPYING.txt for license details.

*/

namespace Magemonkey\Chargeanywhere\Model\Config\Source\Order\Status;

use Magento\Sales\Model\Order;

use Magento\Sales\Model\Config\Source\Order\Status;

/**

* Order Status source model

*/

class Pendingpayment extends Status

{

/**

* @var string[]

*/

protected $_stateStatuses = [Order::STATE_PENDING_PAYMENT];

}

Let’s have a call

Fill the form & Get Installation Support

Any Question or Concerns?
Let's discuss

Add credit card form in checkout page in Magento 2

Related articles

Contact us for scientific strategies to increase your site conversions

Connect With Us

Let’s have a call

Fill the form & Get Installation Support

Any Question or Concerns?Let's discuss

Add credit card form in checkout page in Magento 2

Related articles

Contact us for scientific strategies to increase your site conversions

Connect With Us

Any Question or Concerns?
Let's discuss