MAGETWO-36154: Implement PayPal Payflow Pro checkout UI rendering

app/code/Magento/Payment/Model/ConfigProvider.php

+<?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;
+    }
+}

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>

app/code/Magento/Payment/view/frontend/web/js/view/payment/cc-method.js

+/**
+ * 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;
+            },
+
+        });
+    }
+);

app/code/Magento/Payment/view/frontend/web/template/payment/cc-form.html

+<!--
+/**
+ * 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>