Let the component render the holder name and remove loadingContext as this is not needed

view/frontend/web/js/view/payment/method-renderer/adyen-cc-method.js

@@ -85,8 +85,9 @@ define(
 
                 var card = checkout.create('card', {
                     originKey: self.getOriginKey(),
-                    loadingContext: self.getLoadingContext(),
                     type: 'card',
+                    hasHolderName: true,
+                    holderNameRequired: true,
                     groupTypes: self.getAvailableCardTypeAltCodes(),
 
                     onChange: function(state) {
@@ -141,6 +142,7 @@ define(
                         self.expiryMonth(state.data.encryptedExpiryMonth);
                         self.expiryYear(state.data.encryptedExpiryYear);
                         self.securityCode(state.data.encryptedSecurityCode);
+                        self.creditCardOwner(state.data.holderName);
                         self.creditCardDetailsValid(true);
                         self.placeOrderAllowed(true);
                     },
@@ -232,9 +234,7 @@ define(
 
                 var validate = $(form).validation() && $(form).validation('isValid');
 
-                var owner = Boolean($(form + ' #creditCardHolderName').valid());
-
-                if (!validate || !owner) {
+                if (!validate) {
                     return false;
                 }
 

view/frontend/web/js/view/payment/method-renderer/adyen-oneclick-method.js

@@ -216,7 +216,6 @@ define(
                             var oneClickCard = checkout
                                 .create('card', {
                                     originKey: self.getOriginKey(),
-                                    loadingContext: self.getLoadingContext(),
                                     type: self.agreement_data.variant,
                                     oneClick: true,
                                     hideCVC: hideCVC,

view/frontend/web/template/payment/cc-form.html

@@ -100,29 +100,6 @@
                     </div>
                 </div>
 
-                <div class="field holdername type">
-                    <label data-bind="attr: {for: 'creditCardHolderName'}" class="label">
-                        <span><!-- ko text: $t('Credit Card Owner')--><!-- /ko --></span>
-                    </label>
-                    <div class="control">
-                        <input type="text"
-                               class="input-text required-entry"
-                               data-encrypted-name="holderName"
-                               value=""
-                               data-bind="attr: {
-                                                id: 'creditCardHolderName',
-                                                title: $t('Credit Card Owner'),
-                                                placeholder: $t('Credit Card Owner'),
-                                                'data-container': getCode() + '-cc-owner'
-                                                },
-                                            enable: isActive($parents),
-                                            value: creditCardOwner,
-                                            valueUpdate: 'keyup' "
-                               data-validate="{required:true}"
-                        />
-                    </div>
-                </div>
-
                 <div class="field number cardContainerField">
                     <div afterRender="renderSecureFields()" data-bind="attr: { id: 'cardContainer'}"></div>
                 </div>