Magento 2.4<\/a> enables store owners to accept payments using built-in PayPal\/Braintree payment solutions. You can also add new payment options by implementing third-party extensions from the Magento Marketplace<\/a>.<\/p>\n\n\n\n However, adding a custom payment method allows merchants to:<\/p>\n\n\n\n In this article, learn how to add a custom payment method to Magento 2<\/strong> and maximize your store\u2019s conversion rates.<\/p>\n\n\n To add a new payment option in Magento 2, you need to build a custom payment module, render the payment method during checkout, and configure the module to processes payment data in conjunction with Magento\u2019s systems.<\/p>\n\n\n\n Magento is a flexible, open-source platform, and it is not necessary to modify the native Magento code. Create the custom payment method as a separate module dependent on the existing Magento checkout module.<\/p>\n\n\n\n Note<\/strong>: Choosing the right payment gateway<\/a> that delivers a smooth payment flow when building a Magento website<\/a> is important for the growth and development of your ecommerce business.<\/p>\n\n\n\n Create a registration.php<\/em> file in the payment module\u2019s root directory. In this example, the file path is app\/code\/CCBill\/CustomPaymentOption\/registration.php.<\/em><\/p>\n\n\n\n Add the following code to register the module (component) in Magento\u2019s system:<\/p>\n\n\n\n Edit the vendor (CCBill) and module name <\/em>(CustomPaymentOption) to match your module\u2019s name.<\/p>\n\n\n\n Note<\/strong>: For easy integration with Magento, CCBill maintains a GitHub repository<\/a> for its public-facing API. For any additional information, reach out to CCBill Support<\/a>.<\/p>\n\n\n\n Access the custom module\u2019s app\/code\/CCBill\/CustomPaymentOption\/etc\/<\/em> directory and create a module.xml<\/em> file. Define the module name within the module.xml<\/em> file:<\/p>\n\n\n\n The Configure and display the payment method in the Magento Admin by using a system.xml <\/em>file.<\/em> Create the system.xml<\/em> file in the app\/code\/CCBill\/CustomPaymentOption\/etc\/adminhtml\/ <\/em>directory and add the following code:<\/p>\n\n\n\n Activate the module using the Define default values for the system.xml<\/em> file by creating a config.xml<\/em> file. Create the config.xml<\/em> file in the app\/code\/CCBill\/CustomPaymentOption\/etc\/ <\/em>directory and add the following code:<\/p>\n\n\n\n Use the Access the app\/code\/CCBill\/CustomPaymentOption\/Model\/ <\/em>directory and create a custompaymentoption.php<\/em> file.<\/em> Copy the following code to establish a payment method model class in the .php<\/em> file:<\/p>\n\n\n\n To check if the new payment method is available, access the Magento Admin and go to Stores>Configuration<\/strong>.<\/p>\n\n\n\n Expand the Sales<\/strong> drop down and open the Payment Methods<\/strong> menu.<\/p>\n\n\n Confirm that the settings correspond with the values defined in the config.xml<\/em> and system.xml<\/em> files.<\/p>\n\n\n\n To inject the custom payment method into the existing Magento After configuring the payment method module, the system needs to render the user interface in the store\u2019s frontend.<\/p>\n\n\n\n Create a custompayments.js<\/em> file within the app\/code\/CCBill\/CustomPaymentOption\/view\/frontend\/web\/js\/view\/payment\/<\/em> directory. Add the following code:<\/p>\n\n\n\n The primary function of the .js<\/em> file in this example is to add a payment method renderer. <\/p>\n\n\n\n Create a .js<\/em> file in the app\/code\/CCBill\/CustomPaymentOption\/view\/frontend\/web\/js\/view\/payment\/method-renderer\/ <\/em>directory. Use the following code to control the frontend logic of the new payment method:<\/p>\n\n\n\n If the custom module has several payment methods, register the renderers in the same .js<\/em> file.<\/p>\n\n\n\n The system renders the UI Component using the Knockout JavaScript framework. Build a template that contains a title, billing address, and radio button for the payment method. <\/p>\n\n\n\n Create the .html<\/em> file in the app\/code\/CCBill\/CustomPaymentOption\/view\/frontend\/web\/js\/view\/payment\/ <\/em>directory.<\/p>\n\n\n\n For convenience, use templates from existing Magento payment modules. The .html<\/em> templates are located in the <random_module >\/frontend\/web\/template\/payment\/<\/em> payment module directories.<\/p>\n\n\n\n To display the payment method on the checkout page, create the checkout_index_index.xml<\/em> file within the app\/code\/CCBill\/CustomPaymentOption\/view\/frontend\/layout\/<\/em> directory.<\/p>\n\n\n\n If Magento is in production mode, deploy static content and flush the Magento cache before testing the functionality of the new payment method.<\/p>\n\n\n\n To flush Magento cache, use:<\/p>\n\n\n\n Conclusion<\/p>\n\n\n You have successfully added a custom payment method to your Magento 2 store. Use the same approach to implement new payment options and enable customers to pay using their preferred method. <\/p>\n\n\n\n The number of devices and methods customers use to make online payments is increasing rapidly. It is challenging to maintain a satisfying customer experience with a traditional web-based model. <\/p>\n\n\n\n\n
![\"Adding](\"https:\/\/ccbill.com\/kb\/wp-content\/uploads\/2021\/05\/add-payment-method-magento-2.png\")
<\/figure><\/div>\n\n\nAdd a Custom Payment Method in Magento 2<\/h2>\n\n\n\n
\n\n\n\n
\n\n\n\nStep 1: Register Payment Module in Magento<\/h3>\n\n\n\n
<?php\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\n \\Magento\\Framework\\Component\\ComponentRegistrar::MODULE,\n 'CCBill_CustomPaymentOption',\n __DIR__\n);<\/code><\/pre>\n\n\n\n
\n\n\n\n
\n\n\n\nStep 2: Declare Payment Module Name<\/h3>\n\n\n\n
<?xml version="1.0"?>\n<config xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module\/etc\/module.xsd">\n <module name="CCBill_ CustomPaymentOption" setup_version="2.2.0">\n<sequence>\n <module name="Magento_Sales"\/>\n <module name="Magento_Payment"\/>\n <module name="Magento_Checkout"\/>\n<\/sequence>\n <\/module>\n<\/config><\/code><\/pre>\n\n\n\n<strong><sequence><\/strong><\/code> tag controls the load order and ensures that the system loads the listed components before the custom payment module.<\/p>\n\n\n\nStep 3: Add Payment Method Configuration Settings<\/h3>\n\n\n\n
<config xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc\/system_file.xsd">\n <system>\n <section id="payment">\n <group id="ccbill_custompaymentoption" translate="label comment" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">\n <label>Custom Payment Option<\/label>\n <field id="active" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="0">\n <label>Enabled<\/label>\n <source_model>Magento\\Config\\Model\\Config\\Source\\Yesno<\/source_model>\n <\/field>\n <field id="title" translate="label" type="text" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">\n <label>Title<\/label>\n <\/field>\n <field id="cctypes" translate="label" type="multiselect" sortOrder="75" showInDefault="1" showInWebsite="1" showInStore="0">\n <label>Credit Card Types<\/label>\n <source_model>Magento\\Payment\\Model\\Source\\Cctype<\/source_model>\n <\/field>\n <\/group>\n <\/section>\n <\/system>\n<\/config><\/code><\/pre>\n\n\n\n<strong>Enabled<\/strong><\/code> label, display its <strong>Title<\/strong><\/code>, and add a preferred payment option, such as <strong>Credit Card Types<\/strong><\/code>.<\/p>\n\n\n\nStep 4: Add Default System Configuration Values<\/h3>\n\n\n\n
<?xml version="1.0" ?>\n<config xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance"\n xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc\/config.xsd">\n <default>\n <payment>\n <ccbill_custompaymentoption>\n <title>Custom Payment Option<\/title>\n <active>1<\/active>\n <payment_action>preferred_method<\/payment_action>\n <model>CCBill\\CustomPaymentOption\\Model\\PaymenMethod<\/model>\n <order_status>pending_payment<\/order_status>\n <\/ccbill_custompaymentoption>\n <\/payment>\n <\/default>\n<\/config><\/code><\/pre>\n\n\n\n<strong>payment_action<\/strong><\/code> tag to set preferred payment methods as the default value.<\/p>\n\n\n\nStep 5: Create Payment Method Model<\/h3>\n\n\n\n
<?php\nnamespace CCBill\\CustomPaymentOption\\Model;\n\nclass CustomPaymentOption extends \\Magento\\Payment\\Model\\Method\\Cc \n{\n const METHOD_CODE = 'ccbill_custompaymentoption';\n \n protected $_code = self::METHOD_CODE;\n \n protected $_custompayments;\n \n protected $_isGateway = true;\n protected $_canCapture = true;\n protected $_canCapturePartial = true;\n protected $_canRefund = true;\n protected $_minOrderTotal = 0;\n protected $_supportedCurrencyCodes = array('USD','GBP','EUR');\n \n public function __construct(\n \\Magento\\Framework\\Model\\Context $context,\n \\Magento\\Framework\\Registry $registry,\n \\Magento\\Framework\\Api\\ExtensionAttributesFactory $extensionFactory,\n \\Magento\\Framework\\Api\\AttributeValueFactory $customAttributeFactory,\n \\Magento\\Payment\\Helper\\Data $paymentData,\n \\Magento\\Framework\\App\\Config\\ScopeConfigInterface $scopeConfig,\n \\Magento\\Payment\\Model\\Method\\Logger $logger,\n \\Magento\\Framework\\Module\\ModuleListInterface $moduleList,\n \\Magento\\Framework\\Stdlib\\DateTime\\TimezoneInterface $localeDate,\n \\Extension\\Extension $Extension,\n array $data = array()\n ) {\n parent::__construct(\n $context,\n $registry,\n $extensionFactory,\n $customAttributeFactory,\n $paymentData,\n $scopeConfig,\n $logger,\n $moduleList,\n $localeDate,\n null,\n null,\n $data\n );\n \n $this->_code = 'Extension';\n $this->_Extension = $Extension;\n $this->_Extension->setApiKey($this->getConfigData('api_key'));\n \n $this->_minOrderTotal = $this->getConfigData('min_order_total');\n \n }\n \n public function canUseForCurrency($currencyCode)\n {\n if (!in_array($currencyCode, $this->_supportedCurrencyCodes)) {\n return false;\n }\n return true;\n }\n \n public function capture(\\Magento\\Payment\\Model\\InfoInterface $payment, $amount)\n {\n $order = $payment->getOrder();\n $billing = $order->getBillingAddress();\n try{\n $charge = \\Extension\\Charge::create(array(\n 'amount' => $amount*100,\n 'currency' => strtolower($order->getBaseCurrencyCode()),\n 'card' => array(\n 'number' => $payment->getCcNumber(),\n 'exp_month' => sprintf('%02d',$payment->getCcExpMonth()),\n 'exp_year' => $payment->getCcExpYear(),\n 'cvc' => $payment->getCcCid(),\n 'name' => $billing->getName(),\n 'address_line1' => $billing->getStreet(1),\n 'address_line2' => $billing->getStreet(2),\n 'address_zip' => $billing->getPostcode(),\n 'address_state' => $billing->getRegion(),\n 'address_country' => $billing->getCountry(),\n ),\n 'description' => sprintf('#%s, %s', $order->getIncrementId(), $order->getCustomerEmail())\n ));\n $payment->setTransactionId($charge->id)->setIsTransactionClosed(0);\n \n return $this;\n \n }catch (\\Exception $e){\n $this->debugData(['exception' => $e->getMessage()]);\n throw new \\Magento\\Framework\\Validator\\Exception(__('Payment capturing error.'));\n }\n }\n \n public function refund(\\Magento\\Payment\\Model\\InfoInterface $payment, $amount)\n {\n $transactionId = $payment->getParentTransactionId();\n \n try {\n \\Extension\\Charge::retrieve($transactionId)->refund();\n } catch (\\Exception $e) {\n $this->debugData(['exception' => $e->getMessage()]);\n throw new \\Magento\\Framework\\Validator\\Exception(__('Payment refunding error.'));\n }\n \n $payment\n ->setTransactionId($transactionId . '-' . \\Magento\\Sales\\Model\\Order\\Payment\\Transaction::TYPE_REFUND)\n ->setParentTransactionId($transactionId)\n ->setIsTransactionClosed(1)\n ->setShouldCloseParentTransaction(1);\n \n return $this;\n }\n \n public function isAvailable(\\Magento\\Quote\\Api\\Data\\CartInterface $quote = null){\n $this->_minOrderTotal = $this->getConfigData('min_order_total');\n if($quote && $quote->getBaseGrandTotal() < $this->_minOrderTotal) {\n return false;\n }\n return $this->getConfigData('api_key', ($quote ? $quote->getStoreId() : null))\n && parent::isAvailable($quote);\n }\n}<\/code><\/pre>\n\n\n\n![\"Access](\"https:\/\/ccbill.com\/kb\/wp-content\/uploads\/2021\/05\/check-custom-payment-method-magento-admin.png\")
<\/figure>\n\n\n\n![\"Custom](\"https:\/\/ccbill.com\/kb\/wp-content\/uploads\/2021\/05\/custom-payment-option-magento-admin.png\")
<\/figure><\/div>\n\n\nStep 6: Configure Dependency Injection<\/h3>\n\n\n\n
<strong>CcGenericConfigProvider <\/strong><\/code>create a new <em>di.xml<\/em> file<em>.<\/em><\/code> Place the di.xml<\/em> file within the app\/code\/CCBill\/CustomPaymentOption\/etc\/frontend\/<\/em> directory and add the payment method code as an argument:<\/p>\n\n\n\n<?xml version="1.0"?>\n<config xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager\/etc\/config.xsd">\n <type name="Magento\\Payment\\Model\\CcGenericConfigProvider">\n <arguments>\n <argument name="methodCodes" xsi:type="array">\n <item name="CustomPaymentOption" xsi:type="const">CCBill\\CustomPaymentOption\\Model\\Payment::METHOD_CODE<\/item>\n <\/argument>\n <\/arguments>\n <\/type>\n<\/config><\/code><\/pre>\n\n\n\nStep 7: Add Payment Method Renderer<\/h3>\n\n\n\n
define(\n [\n 'uiComponent',\n 'Magento_Checkout\/js\/model\/payment\/renderer-list'\n ],\n function (\n Component,\n rendererList\n ) {\n 'use strict';\n rendererList.push(\n {\n type: 'ccbill_custompaymentopyion',\n component: 'CCBill_CustomPaymentOption\/js\/view\/payment\/method-renderer\/custompayments'\n }\n );<\/code><\/pre>\n\n\n\nStep 8: Declare Payment Method Renderer<\/h3>\n\n\n\n
define(\n [\n 'Magento_Payment\/js\/view\/payment\/cc-form',\n 'jquery',\n 'Magento_Checkout\/js\/action\/place-order',\n 'Magento_Checkout\/js\/model\/full-screen-loader',\n 'Magento_Checkout\/js\/model\/payment\/additional-validators',\n 'Magento_Payment\/js\/model\/credit-card-validation\/validator'\n ],\n function (Component, $) {\n 'use strict';\n \n return Component.extend({\n defaults: {\n template: 'CCBill_CustomPaymentOption\/payment\/custompayments'\n },\n \n getCode: function() {\n return 'ccbill_custompaymentoption';\n },\n \n isActive: function() {\n return true;\n },\n \n validate: function() {\n var $form = $('#' + this.getCode() + '-form');\n return $form.validation() && $form.validation('isValid');\n }\n });\n }\n);<\/code><\/pre>\n\n\n\nStep 9: Create Payment Method Template<\/h3>\n\n\n\n
<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">\n <div class="payment-method-title field choice">\n <input type="radio"\n name="payment[method]"\n class="radio"\n data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"\/>\n <label data-bind="attr: {'for': getCode()}" class="label"><span data-bind="text: getTitle()"><\/span><\/label>\n <\/div>\n <div class="payment-method-content">\n <!-- ko foreach: getRegion('messages') -->\n <!-- ko template: getTemplate() --><!-- \/ko -->\n <!--\/ko-->\n <div class="payment-method-billing-address">\n <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->\n <!-- ko template: getTemplate() --><!-- \/ko -->\n <!--\/ko-->\n <\/div>\n \n <form class="form" data-bind="attr: {'id': getCode() + '-form'}">\n <!-- ko template: 'Magento_Payment\/payment\/cc-form' --><!-- \/ko -->\n <\/form>\n \n <div class="checkout-agreements-block">\n <!-- ko foreach: $parent.getRegion('before-place-order') -->\n <!-- ko template: getTemplate() --><!-- \/ko -->\n <!--\/ko-->\n <\/div>\n <div class="actions-toolbar">\n <div class="primary">\n <button class="action primary checkout"\n type="submit"\n data-bind="\n click: placeOrder,\n attr: {title: $t('Place Order')},\n css: {disabled: !isPlaceOrderActionAllowed()},\n enable: (getCode() == isChecked())\n "\n disabled>\n <span data-bind="text: $t('Place Order')"><\/span>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n<\/div<\/code><\/pre>\n\n\n\nStep 10: Show Payment Method in Checkout<\/h3>\n\n\n\n
<?xml version="1.0"?>\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n <body>\n <referenceBlock name="checkout.root">\n <arguments>\n <argument name="jsLayout" xsi:type="array">\n <item name="components" xsi:type="array">\n <item name="checkout" xsi:type="array">\n <item name="children" xsi:type="array">\n <item name="steps" xsi:type="array">\n <item name="children" xsi:type="array">\n <item name="billing-step" xsi:type="array">\n <item name="component" xsi:type="string">uiComponent<\/item>\n <item name="children" xsi:type="array">\n <item name="payment" xsi:type="array">\n <item name="children" xsi:type="array">\n <item name="renders" xsi:type="array">\n <!-- merge payment method renders here -->\n <item name="children" xsi:type="array">\n <item name="paymentoptions-payments" xsi:type="array">\n <item name="component" xsi:type="string">CCBill_CustomPaymentOption\/js\/view\/payment\/paymentoptions<\/item>\n <item name="methods" xsi:type="array">\n <item name="CustomPaymentOptions" xsi:type="array">\n <item name="isBillingAddressRequired" xsi:type="boolean">true<\/item>\n <\/item>\n <\/item>\n <\/item>\n <\/item>\n <\/item>\n <\/item>\n <\/item>\n <\/item>\n <\/item>\n <\/item>\n <\/item>\n <\/item>\n <\/item>\n <\/item>\n <\/argument>\n <\/arguments>\n <\/referenceBlock>\n <\/body>\n <\/page><\/code><\/pre>\n\n\n\nphp bin\/magento cache:flush<\/code><\/pre>\n\n\n