diff --git a/app/code/Magento/Payment/Model/ConfigProvider.php b/app/code/Magento/Payment/Model/ConfigProvider.php
new file mode 100644
index 0000000000000000000000000000000000000000..1556f621a969d9e9620a3d6471ad14a09b5c1c96
--- /dev/null
+++ b/app/code/Magento/Payment/Model/ConfigProvider.php
@@ -0,0 +1,52 @@
+<?php
+/**
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+namespace Magento\Payment\Model;
+
+use Magento\Checkout\Model\ConfigProviderInterface;
+
+class ConfigProvider implements ConfigProviderInterface
+{
+ /** @var Config */
+ protected $config;
+
+ public function __construct(Config $config)
+ {
+ $this->config = $config;
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function getConfig()
+ {
+ return [
+ 'cc_available_types' => $this->config->getCcTypes(),
+ 'cc_months' => $this->config->getMonths(),
+ 'cc_years' => $this->config->getYears(),
+ 'cc_has_verification' => true,
+ 'cc_has_ss_card_type' => false,
+ 'cc_ss_start_years' => $this->getSsStartYears(),
+ ];
+ }
+
+ /**
+ * Solo/switch card start years
+ *
+ * @return array
+ */
+ protected function getSsStartYears()
+ {
+ $years = [];
+ $first = date("Y");
+
+ for ($index = 5; $index >= 0; $index--) {
+ $year = $first - $index;
+ $years[$year] = $year;
+ }
+ $years = [0 => __('Year')] + $years;
+ return $years;
+ }
+}
diff --git a/app/code/Magento/Payment/etc/di.xml b/app/code/Magento/Payment/etc/di.xml
index d25b560a5b318c54f38b41c20d9ebed68d904445..84a648dde190239b7746cc12549c8cd8f2f062de 100644
--- a/app/code/Magento/Payment/etc/di.xml
+++ b/app/code/Magento/Payment/etc/di.xml
@@ -24,4 +24,11 @@
<argument name="dataStorage" xsi:type="object">Magento\Payment\Model\Config\Data</argument>
</arguments>
</type>
+ <type name="Magento\Checkout\Model\CompositeConfigProvider">
+ <arguments>
+ <argument name="configProviders" xsi:type="array">
+ <item name="payment_config_provider" xsi:type="object">Magento\Payment\Model\ConfigProvider</item>
+ </argument>
+ </arguments>
+ </type>
</config>
diff --git a/app/code/Magento/Payment/view/frontend/web/js/view/payment/cc-method.js b/app/code/Magento/Payment/view/frontend/web/js/view/payment/cc-method.js
new file mode 100644
index 0000000000000000000000000000000000000000..257dbe7d88445c4018948cecc605eff8ab91838c
--- /dev/null
+++ b/app/code/Magento/Payment/view/frontend/web/js/view/payment/cc-method.js
@@ -0,0 +1,40 @@
+/**
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+/*browser:true*/
+/*global define*/
+define(
+ [
+ 'jquery',
+ "mage/translate",
+ 'Magento_Checkout/js/view/payment/method-info'
+ ],
+ function ($, $t, methodInfo) {
+ return methodInfo.extend({
+ defaults: {
+ creditCardType: '',
+ creditCardExpYear: '',
+ creditCardExpMonth: '',
+ creditCardNumber: ''
+ },
+ initObservable: function () {
+ this._super()
+ .observe(['creditCardType', 'creditCardExpYear', 'creditCardExpMonth', 'creditCardNumber']);
+ return this;
+ },
+ getData: function() {
+ return {
+ 'cc_type': this.creditCardType(),
+ 'cc_exp_year': this.creditCardExpYear(),
+ 'cc_exp_month': this.creditCardExpMonth(),
+ 'cc_number': this.creditCardNumber()
+ };
+ },
+ getCcAvailableTypes: function() {
+ return window.checkoutConfig.ccAvailableTypes;
+ },
+
+ });
+ }
+);
diff --git a/app/code/Magento/Payment/view/frontend/web/template/payment/cc-form.html b/app/code/Magento/Payment/view/frontend/web/template/payment/cc-form.html
new file mode 100644
index 0000000000000000000000000000000000000000..850c52b8469bfc046c18c47f3eca18f3691fb8a1
--- /dev/null
+++ b/app/code/Magento/Payment/view/frontend/web/template/payment/cc-form.html
@@ -0,0 +1,54 @@
+<!--
+/**
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<fieldset data-bind='attr: {class: "fieldset payment items ccard " + getCode(), id: "payment_form_" + getCode()}'>
+ <div class="field type required">
+ <label data-bind='attr: {for: getCode() + "_cc_type"}' class="label">
+ <span><!-- ko text: $t('Credit Card Type')--><!-- /ko --></span>
+ </label>
+ <div class="control">
+ <select name="payment[cc_type]" class="select" data-bind="
+ attr: {id: getCode() + '_cc_type', 'data-validate': {required:true, 'validate-cc-type-select':'#' + getCode() + '_cc_number'}},
+ mageInit: {creditCardType:{creditCardTypeContainer:'#' + getCode() + '_cc_type_ss_div'},
+ enable: isActive($parent), options: getCcAvailableTypes(), optionsCaption: $t('--Please Select--'), value: creditCardType}">
+ </select>
+ </div>
+ </div>
+ <div class="field number required">
+ <label data-bind="attr: {for: getCode() + '_cc_number'}" class="label">
+ <span><!-- ko text: $t('Credit Card Number')--><!-- /ko --></span>
+ </label>
+ <div class="control">
+ <input type="number" name="payment[cc_number]" class="input-text" value=""
+ data-bind="attr: {id: getCode() + '_cc_number', title: $t('Credit Card Number'), 'data-validate': {'required-number':true, 'validate-cc-number':'#' + getCode() + '_cc_type', 'validate-cc-type':'#' + getCode() + '_cc_type'}}"/>
+ </div>
+ </div>
+ <div class="field date required" data-bind="attr: {id: getCode() + '_cc_type_exp_div'}">
+ <label data-bind="attr: {for: getCode() + '_expiration'}" class="label">
+ <span><!-- ko text: $t('Expiration Date')--><!-- /ko --></span>
+ </label>
+ <div class="control">
+ <div class="fields group group-2">
+ <div class="field no-label month">
+ <div class="control">
+ <select name="payment[cc_exp_month]" class="select month"
+ data-bind="attr: {id: getCode() + '_expiration', 'data-validate': {required:true, 'validate-cc-exp':'#' + getCode() + '_expiration_yr'}},
+ enable: isActive($parent), options: getCcMonth(), optionsCaption: $t('Month'), value: creditCardExpMonth}">
+ </select>
+ </div>
+ </div>
+ <div class="field no-label year">
+ <div class="control">
+ <select name="payment[cc_exp_year]" class="select year"
+ data-bind="attr: {id: getCode() + '_expiration_yr', 'data-validate': {required:true}},
+ enable: isActive($parent), options: getCcYears(), optionsCaption: $t('Year'), value: creditCardExpYear}">
+ </select>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</fieldset>