Change shopperName to personalDetails, add telephone number and email

address to personalDetails in the payments request if open invoice
Move checkout component to version 2.1
Add the new checkout component css
Add klarna and afterpay component

Gateway/Request/CheckoutDataBuilder.php

@@ -105,18 +105,18 @@ class CheckoutDataBuilder implements BuilderInterface
 			$order->setCustomerGender(\Adyen\Payment\Model\Gender::getMagentoGenderFromAdyenGender(
 				$payment->getAdditionalInformation("gender"))
 			);
-			$request['shopperName']['gender'] = $payment->getAdditionalInformation("gender");
+			$request['paymentMethod']['personalDetails']['gender'] = $payment->getAdditionalInformation("gender");
 		}
 
 		if ($payment->getAdditionalInformation("dob")) {
 			$order->setCustomerDob($payment->getAdditionalInformation("dob"));
 
-			$request['dateOfBirth']= $this->adyenHelper->formatDate($payment->getAdditionalInformation("dob"), 'Y-m-d') ;
+			$request['paymentMethod']['personalDetails']['dateOfBirth']= $this->adyenHelper->formatDate($payment->getAdditionalInformation("dob"), 'Y-m-d') ;
 		}
 
 		if ($payment->getAdditionalInformation("telephone")) {
 			$order->getBillingAddress()->setTelephone($payment->getAdditionalInformation("telephone"));
-			$request['telephoneNumber']= $payment->getAdditionalInformation("telephone");
+			$request['paymentMethod']['personalDetails']['telephoneNumber']= $payment->getAdditionalInformation("telephone");
 		}
 
 		// Additional data for sepa direct debit
@@ -130,7 +130,9 @@ class CheckoutDataBuilder implements BuilderInterface
 
 		if ($this->adyenHelper->isPaymentMethodOpenInvoiceMethod(
 			$payment->getAdditionalInformation(AdyenHppDataAssignObserver::BRAND_CODE)
-		)) {
+		) || $this->adyenHelper->isPaymentMethodAfterpayTouchMethod(
+				$payment->getAdditionalInformation(AdyenHppDataAssignObserver::BRAND_CODE)
+			)) {
 			$openInvoiceFields = $this->getOpenInvoiceData($order);
 			$request = array_merge($request, $openInvoiceFields);
 		}

Gateway/Request/CustomerDataBuilder.php

@@ -113,11 +113,6 @@ class CustomerDataBuilder implements BuilderInterface
 			}
 		}
 
-        $result['shopperName']['firstName'] = $order->getBillingAddress()->getFirstname();
-		$result['shopperName']['lastName'] = $order->getBillingAddress()->getLastname();
-
-		$result['countryCode'] = $billingAddress->getCountryId();
-
         return $result;
     }
 }

view/frontend/web/css/styles.css

@@ -247,6 +247,119 @@
     }
 }
 
+.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;
+}
+
+
+/* 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;
@@ -871,6 +984,12 @@
 .adyen-checkout__open-invoice .adyen-checkout__checkbox+.adyen-checkout__open-invoice .adyen-checkout__fieldset{
     padding-top:30px
 }
+.adyen-checkout__open-invoice .adyen-checkout__checkbox--consent-checkbox{
+    max-width:540px
+}
+.adyen-checkout__open-invoice .adyen-checkout__checkbox+.adyen-checkout__open-invoice .adyen-checkout__fieldset{
+    padding-top:30px
+}
 .adyen-checkout__open-invoice .adyen-checkout__checkbox{
     margin:0 0 20px
 }

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

@@ -104,34 +104,17 @@
                     <div afterRender="renderKlarnaComponent()" data-bind="attr: { id: 'klarnaContainer'}"></div>
                 <!--/ko-->
 
-                <!-- ko if: isPaymentMethodAfterPay() -->
 
-                    <!-- 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 if: isPaymentMethodKlarna() -->
+                        <div afterRender="renderKlarnaComponent()" data-bind="attr: { id: 'klarnaContainer'}"></div>
                     <!--/ko-->
 
-                    <div afterRender="renderAfterPayComponent()" data-bind="attr: { id: 'afterPayContainer'}"></div>
-                <!--/ko-->
+                    <!-- ko if: isPaymentMethodAfterPay() -->
+                        <div afterRender="renderAfterPayComponent()" data-bind="attr: { id: 'afterPayContainer'}"></div>
+                    <!--/ko-->
 
-                <!-- ko if: isPaymentMethodOtherOpenInvoiceMethod() -->
+                    <!-- ko if: isPaymentMethodOtherOpenInvoiceMethod() -->
 
                     <div class="field gender required">
                             <label data-bind="attr: {for: getCode() + '_gender_type_' + value}" class="label">