{"id":106144,"date":"2017-12-26T09:49:25","date_gmt":"2017-12-26T09:49:25","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=106144"},"modified":"2024-07-09T10:56:11","modified_gmt":"2024-07-09T10:56:11","slug":"add-cc-form-custom-payment-method-magento2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/","title":{"rendered":"How to add cc form in custom payment method in magento2"},"content":{"rendered":"\n

Here, I am explaining that how to add cc form in custom payment method in magento2. For this you have to read this block Create custom payment method in magento2<\/a>. In this block explain how to create  custom payment method.<\/p>\n\n\n\n

After creating custom payment method you have to add following file for adding cc form in payment method.<\/p>\n\n\n\n

1 – Update\u00a0app\/code\/Test\/Testpayment\/view\/frontend\/web\/template\/payment\/testpayment.html In this file call cc form html.<\/p>\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        <div class="payment-method-billing-address">\n            <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->\n            <!-- ko template: getTemplate() --><!-- \/ko -->\n            <!--\/ko-->\n        <\/div>\n        <form class="form" id="pay" action="#" name="pay" method="post" >\n            <!-- ko template: 'Test_Testpayment\/payment\/testpayment-form' --><!-- \/ko -->\n        <\/form>\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="i18n: 'Place Order'"><\/span>\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div><\/pre>\n\n\n\n
2 – add app\/code\/Test\/Testpayment\/view\/frontend\/web\/template\/payment\/testpayment-form.html . In this file create cc form.<\/p>\n\n\n\n
<fieldset data-bind="attr: {class: 'fieldset payment items ccard ' + getCode(), id: 'payment_form_' + getCode()}">\n    <legend class="legend">\n        <span><!-- ko i18n: 'Credit Card Information'--><!-- \/ko --><\/span>\n    <\/legend><br \/>\n    <div class="field type">\n        <div class="control">\n            <ul class="credit-card-types">\n                <!-- ko foreach: {data: getCcAvailableTypesValues(), as: 'item'} -->\n                <li class="item" data-bind="css: {\n                                                 _active: $parent.selectedCardType() == item.value,\n                                                 _inactive: $parent.selectedCardType() != null && $parent.selectedCardType() != item.value\n                                                 } ">\n                <\/li>\n                <!--\/ko-->\n            <\/ul>\n            <input type="hidden"\n                   name="payment[cc_type]"\n                   class="input-text"\n                   value=""\n                   data-bind="attr: {id: getCode() + '_cc_type', 'data-container': getCode() + '-cc-type'},\n                   value: creditCardType\n                   ">\n        <\/div>\n    <\/div>\n    <div class="field number required">\n        <label data-bind="attr: {for: getCode() + '_cc_number'}" class="label">\n            <span><!-- ko i18n: 'Credit Card Number'--><!-- \/ko --><\/span>\n        <\/label>\n        <div class="control">\n            <input type="number" name="payment[cc_number]" class="input-text" value=""\n                   data-bind="attr: {\n                                    autocomplete: off,\n                                    id: getCode() + '_cc_number',\n                                    title: $t('Credit Card Number'),\n                                    'data-container': getCode() + '-cc-number',\n                                    'data-validate': JSON.stringify({'required-number':true, 'validate-card-type':getCcAvailableTypesValues(), 'validate-card-number':'#' + getCode() + '_cc_type', 'validate-cc-type':'#' + getCode() + '_cc_type'})},\n                              enable: isActive($parents),\n                              value: creditCardNumber,\n                              valueUpdate: 'keyup' "\/>\n        <\/div>\n    <\/div>\n    <div class="field date required" data-bind="attr: {id: getCode() + '_cc_type_exp_div'}">\n        <label data-bind="attr: {for: getCode() + '_expiration'}" class="label">\n            <span><!-- ko i18n: 'Expiration Date'--><!-- \/ko --><\/span>\n        <\/label>\n        <div class="control">\n            <div class="fields group group-2">\n                <div class="field no-label month">\n                    <div class="control">\n                        <select  name="payment[cc_exp_month]"\n                                 class="select select-month"\n                                 data-bind="attr: {id: getCode() + '_expiration', 'data-container': getCode() + '-cc-month', 'data-validate': JSON.stringify({required:true, 'validate-cc-exp':'#' + getCode() + '_expiration_yr'})},\n                                            enable: isActive($parents),\n                                            options: getCcMonthsValues(),\n                                            optionsValue: 'value',\n                                            optionsText: 'month',\n                                            optionsCaption: $t('Month'),\n                                            value: creditCardExpMonth">\n                        <\/select>\n                    <\/div>\n                <\/div>\n                <div class="field no-label year">\n                    <div class="control">\n                        <select name="payment[cc_exp_year]"\n                                class="select select-year"\n                                data-bind="attr: {id: getCode() + '_expiration_yr', 'data-container': getCode() + '-cc-year', 'data-validate': JSON.stringify({required:true})},\n                                           enable: isActive($parents),\n                                           options: getCcYearsValues(),\n                                           optionsValue: 'value',\n                                           optionsText: 'year',\n                                           optionsCaption: $t('Year'),\n                                           value: creditCardExpYear">\n                        <\/select>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n    <!-- ko if: (hasVerification())-->\n    <div class="field cvv required" data-bind="attr: {id: getCode() + '_cc_type_cvv_div'}">\n        <label data-bind="attr: {for: getCode() + '_cc_cid'}" class="label">\n            <span><!-- ko i18n: 'Card Verification Number'--><!-- \/ko --><\/span>\n        <\/label>\n        <div class="control _with-tooltip">\n            <input type="number"\n                   autocomplete="off"\n                   class="input-text cvv"\n                   name="payment[cc_cid]"\n                   value=""\n                   data-bind="attr: {id: getCode() + '_cc_cid',\n                        title: $t('Card Verification Number'),\n                        'data-container': getCode() + '-cc-cvv',\n                        'data-validate': JSON.stringify({'required-number':true, 'validate-card-cvv':'#' + getCode() + '_cc_type'})},\n                        enable: isActive($parents),\n                        value: creditCardVerificationNumber" \/>\n            <div class="field-tooltip toggle">\n                <span class="field-tooltip-action action-cvv"\n                      tabindex="0"\n                      data-toggle="dropdown"\n                      data-bind="attr: {title: $t('What is this?')}, mageInit: {'dropdown':{'activeClass': '_active'}}">\n                    <span><!-- ko i18n: 'What is this?'--><!-- \/ko --><\/span>\n                <\/span>\n            <\/div>\n        <\/div>\n    <\/div>\n    <!-- \/ko -->\n<\/fieldset><\/pre>\n\n\n\n
3 – Update\u00a0app\/code\/Test\/Testpayment\/view\/frontend\/web\/js\/view\/payment\/method-renderer\/testpayment.js add some method related cc form.Which file using to get data from config provider.<\/p>\n\n\n\n
define(\n    [\n        'underscore',\n        'Magento_Checkout\/js\/view\/payment\/default',\n        'Magento_Payment\/js\/model\/credit-card-validation\/credit-card-data',\n        'Magento_Payment\/js\/model\/credit-card-validation\/credit-card-number-validator',\n        'mage\/translate'\n    ],\n    function (_, Component, creditCardData, cardNumberValidator, $t) {\n        'use strict';\n\n        return Component.extend({\n            defaults: {\n                template: 'Test_Testpayment\/payment\/testpayment',\n                creditCardType: '',\n                creditCardExpYear: '',\n                creditCardExpMonth: '',\n                creditCardNumber: '',\n                creditCardSsStartMonth: '',\n                creditCardSsStartYear: '',\n                creditCardVerificationNumber: '',\n                selectedCardType: null\n            },\n            initObservable: function () {\n                this._super()\n                    .observe([\n                        'creditCardType',\n                        'creditCardExpYear',\n                        'creditCardExpMonth',\n                        'creditCardNumber',\n                        'creditCardVerificationNumber',\n                        'creditCardSsStartMonth',\n                        'creditCardSsStartYear',\n                        'selectedCardType'\n                    ]);\n                return this;\n            },\n\n            initialize: function() {\n                var self = this;\n                this._super();\n\n                \/\/Set credit card number to credit card data object\n                this.creditCardNumber.subscribe(function(value) {\n                    var result;\n                    self.selectedCardType(null);\n\n                    if (value == '' || value == null) {\n                        return false;\n                    }\n                    result = cardNumberValidator(value);\n\n                    if (!result.isPotentiallyValid && !result.isValid) {\n                        return false;\n                    }\n                    if (result.card !== null) {\n                        self.selectedCardType(result.card.type);\n                        creditCardData.creditCard = result.card;\n                    }\n\n                    if (result.isValid) {\n                        creditCardData.creditCardNumber = value;\n                        self.creditCardType(result.card.type);\n                    }\n                });\n\n                \/\/Set expiration year to credit card data object\n                this.creditCardExpYear.subscribe(function(value) {\n                    creditCardData.expirationYear = value;\n                });\n\n                \/\/Set expiration month to credit card data object\n                this.creditCardExpMonth.subscribe(function(value) {\n                    creditCardData.expirationYear = value;\n                });\n\n                \/\/Set cvv code to credit card data object\n                this.creditCardVerificationNumber.subscribe(function(value) {\n                    creditCardData.cvvCode = value;\n                });\n            },\n\n            isActive: function () {\n                return true;\n            },\n\n            getCcAvailableTypes: function() {\n                return window.checkoutConfig.payment.testpayment.availableTypes['testpayment'];\n            },\n\n            getCcMonths: function() {\n                return window.checkoutConfig.payment.testpayment.months['testpayment'];\n            },\n\n            getCcYears: function() {\n                return window.checkoutConfig.payment.testpayment.years['testpayment'];\n            },\n\n            hasVerification: function() {\n                return window.checkoutConfig.payment.testpayment.hasVerification['testpayment'];\n            },\n\n            getCcAvailableTypesValues: function() {\n                return _.map(this.getCcAvailableTypes(), function(value, key) {\n                    return {\n                        'value': key,\n                        'type': value\n                    }\n                });\n            },\n            getCcMonthsValues: function() {\n                return _.map(this.getCcMonths(), function(value, key) {\n                    return {\n                        'value': key,\n                        'month': value\n                    }\n                });\n            },\n            getCcYearsValues: function() {\n                return _.map(this.getCcYears(), function(value, key) {\n                    return {\n                        'value': key,\n                        'year': value\n                    }\n                });\n            }\n        });\n    }\n);<\/pre>\n\n\n\n
4 – Add\u00a0app\/code\/Test\/Testpayment\/etc\/frontend\/di.xml.Using this map with config provider.<\/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\\Checkout\\Model\\CompositeConfigProvider">\n        <arguments>\n            <argument name="configProviders" xsi:type="array">\n                <item name="test_testpayment_configprovider" xsi:type="object">Test\\Testpayment\\Model\\TestpaymentConfigProvider<\/item>\n            <\/argument>\n        <\/arguments>\n    <\/type>\n<\/config><\/pre>\n\n\n\n
5 – Add\u00a0app\/code\/Test\/Testpayment\/Model\/TestpaymentConfigProvider.php.Using getConfig method set data for checkout config.<\/p>\n\n\n\n
<?php\n\nnamespace Test\\Testpayment\\Model;\n\nuse Magento\\Checkout\\Model\\ConfigProviderInterface;\nuse Magento\\Framework\\View\\Asset\\Source;\n\nclass TestpaymentConfigProvider implements ConfigProviderInterface\n{\n    \/**\n    * @param CcConfig $ccConfig\n    * @param Source $assetSource\n    *\/\n    public function __construct(\n        public \\Magento\\Payment\\Model\\CcConfig $ccConfig,\n        public Source $assetSource\n    ) {\n        $this->ccConfig = $ccConfig;\n        $this->assetSource = $assetSource;\n    }\n\n    \/**\n    * @var string[]\n    *\/\n    protected $_methodCode = 'testpayment';\n\n    \/**\n    * {@inheritdoc}\n    *\/\n    public function getConfig()\n    {\n        return [\n            'payment' => [\n                'testpayment' => [\n                    'availableTypes' => [$this->_methodCode => $this->ccConfig->getCcAvailableTypes()],\n                    'months' => [$this->_methodCode => $this->ccConfig->getCcMonths()],\n                    'years' => [$this->_methodCode => $this->ccConfig->getCcYears()],\n                    'hasVerification' => $this->ccConfig->hasVerification(),\n                ]\n            ]\n        ];\n    }\n}<\/pre>\n\n\n\n
After adding above file.flush cache and check checkout page.<\/p>\n\n\n\n
\"cc<\/figure>\n\n\n\n
Using above approach we can add cc form in custom payment method.
I hope this blog will help you.<\/p>\n","protected":false},"excerpt":{"rendered":"
Here, I am explaining that how to add cc form in custom payment method in magento2. For this you have to read this block Create custom payment method in magento2. In this block explain how to create  custom payment method. After creating custom payment method you have to add following file for adding cc form […]<\/a><\/p>\n","protected":false},"author":115,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[302],"tags":[5966,3656,2070],"class_list":["post-106144","post","type-post","status-publish","format-standard","hentry","category-magento2","tag-add-cc-form-in-magento-2","tag-custom-payment-method","tag-magento2"],"yoast_head":"\nadd cc form custom payment method magento2<\/title>\n<meta name=\"description\" content=\"add cc form custom payment method in magento2.Using this you can create custom payment method in magento2.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"add cc form custom payment method magento2\" \/>\n<meta property=\"og:description\" content=\"add cc form custom payment method in magento2.Using this you can create custom payment method in magento2.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-26T09:49:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-09T10:56:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot_85.png\" \/>\n<meta name=\"author\" content=\"Shubham Sharma\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Shubham Sharma\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/\"},\"author\":{\"name\":\"Shubham Sharma\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/ae41bc19a6783d2f09c6b9b3a0fbddfd\"},\"headline\":\"How to add cc form in custom payment method in magento2\",\"datePublished\":\"2017-12-26T09:49:25+00:00\",\"dateModified\":\"2024-07-09T10:56:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/\"},\"wordCount\":201,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot_85.png\",\"keywords\":[\"add cc form in magento 2\",\"custom payment method\",\"Magento2\"],\"articleSection\":[\"Magento2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/\",\"url\":\"https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/\",\"name\":\"add cc form custom payment method magento2\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot_85.png\",\"datePublished\":\"2017-12-26T09:49:25+00:00\",\"dateModified\":\"2024-07-09T10:56:11+00:00\",\"description\":\"add cc form custom payment method in magento2.Using this you can create custom payment method in magento2.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot_85.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot_85.png\",\"width\":1276,\"height\":650},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to add cc form in custom payment method in magento2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/ae41bc19a6783d2f09c6b9b3a0fbddfd\",\"name\":\"Shubham Sharma\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cdf13545eee5ced4cecd7bd6cb94c1d842ec000d359f91dd900e0feec6242c3b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cdf13545eee5ced4cecd7bd6cb94c1d842ec000d359f91dd900e0feec6242c3b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Shubham Sharma\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/shubham-sharma967\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"add cc form custom payment method magento2","description":"add cc form custom payment method in magento2.Using this you can create custom payment method in magento2.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/","og_locale":"en_US","og_type":"article","og_title":"add cc form custom payment method magento2","og_description":"add cc form custom payment method in magento2.Using this you can create custom payment method in magento2.","og_url":"https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2017-12-26T09:49:25+00:00","article_modified_time":"2024-07-09T10:56:11+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot_85.png","type":"","width":"","height":""}],"author":"Shubham Sharma","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Shubham Sharma","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/"},"author":{"name":"Shubham Sharma","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/ae41bc19a6783d2f09c6b9b3a0fbddfd"},"headline":"How to add cc form in custom payment method in magento2","datePublished":"2017-12-26T09:49:25+00:00","dateModified":"2024-07-09T10:56:11+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/"},"wordCount":201,"commentCount":3,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot_85.png","keywords":["add cc form in magento 2","custom payment method","Magento2"],"articleSection":["Magento2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/","url":"https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/","name":"add cc form custom payment method magento2","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot_85.png","datePublished":"2017-12-26T09:49:25+00:00","dateModified":"2024-07-09T10:56:11+00:00","description":"add cc form custom payment method in magento2.Using this you can create custom payment method in magento2.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot_85.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot_85.png","width":1276,"height":650},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/add-cc-form-custom-payment-method-magento2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to add cc form in custom payment method in magento2"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/ae41bc19a6783d2f09c6b9b3a0fbddfd","name":"Shubham Sharma","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cdf13545eee5ced4cecd7bd6cb94c1d842ec000d359f91dd900e0feec6242c3b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cdf13545eee5ced4cecd7bd6cb94c1d842ec000d359f91dd900e0feec6242c3b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Shubham Sharma"},"url":"https:\/\/webkul.com\/blog\/author\/shubham-sharma967\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/106144","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/115"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=106144"}],"version-history":[{"count":6,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/106144\/revisions"}],"predecessor-version":[{"id":452073,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/106144\/revisions\/452073"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=106144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=106144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=106144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}