Move all alternative payment methods to generic component (frontend)

Remove unnecessary custom function from the frontend
Remove state data observers
Use the component's paymentMethods object to list all the methods

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

@@ -23,14 +23,14 @@
 -->
 
 <!-- ko foreach: getAdyenHppPaymentMethods() -->
-    <div class="payment-method" data-bind="css: {'_active': (value == $parent.isBrandCodeChecked())}">
+    <div class="payment-method" data-bind="css: {'_active': (brandCode == $parent.isBrandCodeChecked())}">
         <div class="payment-method-title field choice">
 
             <input type="radio"
                    name="payment[method]"
                    class="radio"
-                   data-bind="attr: {'id': value}, value: value, checked: $parent.isBrandCodeChecked, click: $parent.selectPaymentMethodBrandCode"/>
-            <label data-bind="attr: {'for': value}" class="label">
+                   data-bind="attr: {'id': 'paymentmethod_' + brandCode}, value: 'paymentmethod_' + brandCode, checked: brandCode == $parent.isBrandCodeChecked, click: $parent.selectPaymentMethodBrandCode"/>
+            <label data-bind="attr: {'for': 'paymentmethod_' + brandCode}" class="label">
 
                 <!-- ko if: name.icon -->
                 <img data-bind="attr: {
@@ -40,7 +40,7 @@
                             }">
                 <!--/ko-->
 
-                <span data-bind="text: name.title"></span>
+                <span data-bind="text: name"></span>
             </label>
         </div>
         <div class="payment-method-content">
@@ -51,9 +51,10 @@
                 <!--/ko-->
             </div>
 
-            <form class="form" data-role="adyen-hpp-form" action="#" method="post" data-bind="mageInit: { 'validation':[]}, attr: {id: 'payment_form_' + $parent.getCode() + '_' + value}">
-                <fieldset class="fieldset" data-bind='attr: {id: "payment_fieldset_" + $parent.getCode() + "_" + value}'>
-                    <div class="adyen-alternative-payment-container"></div>
+            <form class="form" data-role="adyen-hpp-form" action="#" method="post" data-bind="mageInit: { 'validation':[]}, attr: {id: 'payment_form_' + $parent.getCode() + '_' + brandCode}">
+                <fieldset class="fieldset" data-bind='attr: {id: "payment_fieldset_" + $parent.getCode() + "_" + brandCode}'>
+                    <div data-bind='attr: {id: "adyen-alternative-payment-container-" + brandCode}'
+                         afterRender="renderCheckoutComponent()"></div>
                 </fieldset>
 
 
@@ -64,7 +65,7 @@
                 </div>
 
                 <div>
-                    <span class="message message-error error hpp-message" data-bind="attr: {id: 'messages-' + value}"></span>
+                    <span class="message message-error error hpp-message" data-bind="attr: {id: 'messages-' + brandCode}"></span>
                 </div>
 
                 <div class="actions-toolbar">
@@ -73,7 +74,7 @@
                                 type="submit"
                                 data-bind="
                                     click: $parent.continueToAdyenBrandCode,
-                                    enable: placeOrderAllowed() && (value == $parent.isBrandCodeChecked()),
+                                    enable: placeOrderAllowed() && (brandCode == $parent.isBrandCodeChecked()),
                                     css: {disabled: !$parent.isPlaceOrderActionAllowed()}"
                                 disabled>
                             <span data-bind="text: $t('Place Order')"></span>