Add social security number support for openinvoice pm-s

Adjust ssn for checkout api
fix styling

Gateway/Request/CheckoutDataBuilder.php

@@ -121,6 +121,10 @@ class CheckoutDataBuilder implements BuilderInterface
 			$request['paymentMethod']['personalDetails']['telephoneNumber']= $payment->getAdditionalInformation("telephone");
 		}
 
+        if ($payment->getAdditionalInformation("ssn")) {
+            $request['paymentMethod']['personalDetails']['socialSecurityNumber']= $payment->getAdditionalInformation("ssn");
+        }
+
         // Additional data for sepa direct debit
         if ($payment->getAdditionalInformation("ownerName")) {
             $request['paymentMethod']['sepa.ownerName'] = $payment->getAdditionalInformation("ownerName");

view/frontend/web/css/styles.css

@@ -247,124 +247,6 @@
     }
 }
 
-.adyen-checkout__pay-button{
-    background:#001b2b;
-    border:0;
-    border-radius:3px;
-    box-shadow:0 3px 4px rgba(0,15,45,.2);
-    color:#fff;
-    cursor:pointer;
-    font-size:1em;
-    font-weight:700;
-    height:48px;
-    padding:15px;
-    transition:background .3s ease-out;
-    width:100%
-}
-.adyen-checkout__pay-button:disabled{
-    -moz-user-select:all;
-    -ms-user-select:all;
-    -webkit-user-select:all;
-    background:#e6e9eb;
-    box-shadow:none;
-    cursor:not-allowed;
-    user-select:all
-}
-.adyen-checkout__pay-button--loading{
-    -moz-user-select:none;
-    -ms-user-select:none;
-    -webkit-user-select:none;
-    background:#4c5f6b;
-    box-shadow:none;
-    outline:0;
-    pointer-events:none;
-    user-select:none
-}
-.adyen-checkout__pay-button .adyen-checkout__spinner{
-    border-color:transparent #fff #fff;
-    border-width:3px
-}
-.adyen-checkout__pay-button__content{
-    align-items:center;
-    display:flex;
-    justify-content:center
-}
-.adyen-checkout__payment-method{
-    background:#fff;
-    border:1px solid #edf0f3;
-    cursor:pointer;
-    margin-top:-1px;
-    position:relative;
-    transition:opacity .3s ease-out;
-    width:100%
-#iDealContainer .adyen-checkout__dropdown--large{
-    margin-left: 21px;
-}
-
-#iDealContainer .adyen-checkout__dropdown__element{
-    margin-bottom: 0;
-}
-
-.message.error.hpp-message{
-    margin-top: 10px;
-    display: none;
-}
-
-
-/* Checkout component Adyen styling start */
-.adyen-checkout__spinner__wrapper{
-    align-items:center;
-    display:flex;
-    height:100%;
-    justify-content:center
-}
-.adyen-checkout__spinner__wrapper--inline{
-    display:inline-block;
-    height:auto;
-    margin-right:8px
-}
-.adyen-checkout__spinner{
-    -webkit-animation:rotateSpinner 2s infinite linear;
-    animation:rotateSpinner 2s infinite linear;
-    border:2px solid #00a3ff;
-    border-radius:50%;
-    border-top-color:transparent;
-    height:43px;
-    width:43px
-}
-.adyen-checkout__spinner--large{
-    height:43px;
-    width:43px
-}
-.adyen-checkout__spinner--small{
-    height:16px;
-    width:16px
-}
-.adyen-checkout__spinner--medium{
-    height:28px;
-    width:28px
-}
-@-webkit-keyframes rotateSpinner{
-    0%{
-        -webkit-transform:rotate(0deg);
-        transform:rotate(0deg)
-    }
-    to{
-        -webkit-transform:rotate(1turn);
-        transform:rotate(1turn)
-    }
-}
-@keyframes rotateSpinner{
-    0%{
-        -webkit-transform:rotate(0deg);
-        transform:rotate(0deg)
-    }
-    to{
-        -webkit-transform:rotate(1turn);
-        transform:rotate(1turn)
-    }
-}
-
 .adyen-checkout__pay-button{
     background:#001b2b;
     border:0;

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

@@ -104,13 +104,30 @@
                         <div afterRender="renderKlarnaComponent()" data-bind="attr: { id: 'klarnaContainer'}"></div>
                     <!--/ko-->
 
+                    <!-- ko if: isPaymentMethodAfterPay() -->
 
-
-                    <!-- ko if: isPaymentMethodKlarna() -->
-                        <div afterRender="renderKlarnaComponent()" data-bind="attr: { id: 'klarnaContainer'}"></div>
+                        <!-- ko if: showSsn() -->
+                        <div class="field ssn type required">
+                            <label data-bind="attr: {for: getCode() + '_ssn_' + value}" class="adyen-checkout__label__text">
+                                <span><!-- ko text: $t('Personal number')--><!-- /ko --></span>
+                            </label>
+                            <div class="control">
+                                <input type="text" class="input-text"
+                                       name="payment[ssn]"
+                                       data-bind="
+                                                   attr: {
+                                                        id: getCode() + '_ssn_' + value,
+                                                        title: $t('Social Security Number'),
+                                                        'data-container': getCode() + '-ssn',
+                                                        maxlength : getSsnLength()
+                                                    },
+                                                    value: ssn"
+                                       data-validate="{required:true}"
+                                />
+                            </div>
+                        </div>
                         <!--/ko-->
 
-                    <!-- ko if: isPaymentMethodAfterPay() -->
                         <div afterRender="renderAfterPayComponent()" data-bind="attr: { id: 'afterPayContainer'}"></div>
                     <!--/ko-->