Add support for Checkout Design v2.

CHANGELOG.md

@@ -5,6 +5,10 @@ PrestaShop 1.6.x, 1.7.x and 8.x
 
 # Changelog
 
+## [4.0.2]
+### Added
+- Add support for Checkout Design v2.
+
 ## [4.0.1]
 ### Fixed
 - Triggered order update when saving missing transaction data.

altapay.php

@@ -32,7 +32,7 @@ public function __construct()
     {
         $this->name = 'altapay';
         $this->tab = 'payments_gateways';
-        $this->version = '4.0.1';
+        $this->version = '4.0.2';
         $this->author = 'AltaPay A/S';
         $this->is_eu_compatible = 1;
         $this->ps_versions_compliancy = ['min' => '1.6.0.1', 'max' => '8.2.3'];
@@ -1747,6 +1747,10 @@ public function renderForm()
                                     'id_option' => 'checkout-cc',
                                     'name' => 'Checkout',
                                 ],
+                                [
+                                    'id_option' => 'checkout-v2',
+                                    'name' => 'Checkout v2',
+                                ],
                                 [
                                     'id_option' => 'custom-cc',
                                     'name' => 'Custom',
@@ -3202,6 +3206,12 @@ public function createTransaction($savecard,
 
             if (!$isReservation) {
                 $request->setConfig($config)->setLanguage($cgConf['language']);
+                if (!$terminal->applepay) {
+                    $formTemplate = getFormTemplate();
+                    if (!empty($formTemplate)) {
+                        $request->setFormTemplate($formTemplate);
+                    }
+                }
             }
             try {
                 $response = $request->call();

config.xml

@@ -10,7 +10,7 @@
 <module>
 	<name>altapay</name>
 	<displayName><![CDATA[AltaPay for PrestaShop]]></displayName>
-	<version><![CDATA[4.0.1]]></version>
+	<version><![CDATA[4.0.2]]></version>
 	<description><![CDATA[AltaPay: Payments less complicated]]></description>
 	<author><![CDATA[AltaPay A/S]]></author>
 	<tab><![CDATA[payments_gateways]]></tab>

controllers/front/callbackform.php

@@ -46,10 +46,16 @@ public function postProcess()
         $this->context->smarty->assign('theme_name', $themeName);
         $this->context->smarty->assign('cssClass', $terminalRemoteName);
         $payment_style = Configuration::get('enable_cc_style');
+        $payment_style_id = $payment_style;
         if (empty($payment_style)) {
             $payment_style = 'legacy-cc';
+            $payment_style_id = 'legacy-cc';
+        } elseif ($payment_style == 'checkout-v2') {
+            $payment_style .= ' checkout-cc';
+            $payment_style_id = 'checkout-cc';
         }
         $this->context->smarty->assign('stylingclass', $payment_style);
+        $this->context->smarty->assign('stylingid', $payment_style_id);
         $this->context->smarty->assign('summarydetails', $cart->getSummaryDetails());
         if (strpos($postData['shop_orderid'], '_') !== false) {
             $this->context->smarty->assign('amount', $postData['amount']);

helpers.php

@@ -24,7 +24,7 @@
 function transactionInfo($transactionInfo = [])
 {
     $pluginName = 'altapay';
-    $pluginVersion = '4.0.1';
+    $pluginVersion = '4.0.2';
 
     // Transaction info
     $transactionInfo['ecomPlatform'] = 'PrestaShop';
@@ -1628,3 +1628,25 @@ function getTerminal($terminal_id = false, $currency = false)
 
     return $terminal;
 }
+
+/**
+ * Return matching form template value
+ *
+ * @return string|null
+ */
+function getFormTemplate()
+{
+    $form_templates = [
+        'legacy-cc' => 'form_dynamic_div',
+        'checkout-cc' => 'form_checkout_div',
+        'checkout-v2' => 'form_checkout',
+    ];
+
+    $style = Configuration::get('enable_cc_style');
+
+    if (empty($style)) {
+        return null;
+    }
+
+    return $form_templates[$style] ?? null;
+}

views/css/payment.css

@@ -139,18 +139,23 @@ div#payment_error {
       margin-bottom: 25px;
 }
 
+.checkout-v2 {
+      display: flex;
+}
+
 #checkout-cc #card_info {
       max-width: 500px;
       text-align: left;
       margin-left: auto;
       margin-right: auto;
       background-color: white;
       border: 1px solid rgba(0, 0, 0, 0.16);
-      padding: 20px 25px 25px 25px;
+      padding: 30px 25px 25px 25px;
       box-sizing: border-box;
       border-radius: 10px;
       position: relative;
       box-shadow: rgba(50, 50, 93, 0.25) 0 2px 5px -1px;
+      flex: 1;
 }
 
 #checkout-cc .pensio_payment_form_card-number {
@@ -392,7 +397,10 @@ div#payment_error {
 #checkout-cc .pensio_required_field_indicator,
 #checkout-cc #invalid_amex_cvc,
 #checkout-cc #invalid_cvc,
-#checkout-cc #invalid_cardholdername {
+#checkout-cc #invalid_cardholdername,
+#invalid_cardholdername,
+#invalid_expire_month,
+#invalid_expire_year {
       color: red;
       font-size: 12px;
       line-height: normal;
@@ -574,6 +582,147 @@ div#payment_error {
       text-align: center;
 }
 
+.checkout-v2#checkout-cc .pensio_payment_form_row {
+      margin-bottom: 0;
+}
+
+.checkout-v2#checkout-cc .pensio_payment_form-date {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      font-family: monospace !important;
+      border: 1px solid rgba(0, 0, 0, 0.16);
+      border-top: 0;
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 0px;
+}
+
+.checkout-v2#checkout-cc .separator {
+      color: #a9a9ac;
+}
+
+.checkout-v2#checkout-cc .pensio_payment_form_year {
+      width: 25%;
+}
+
+.checkout-v2#checkout-cc .pensio_payment_form_card-number input {
+      padding: 16px 14px;
+      width: 100%;
+      cursor: pointer;
+      font-size: 16px;
+      box-sizing: border-box;
+      color: #666;
+      border-radius: 4px;
+      border: 1px solid rgba(0, 0, 0, 0.16);
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      outline: none;
+      height: 51px;
+      box-shadow: none;
+}
+
+.checkout-v2#checkout-cc .pensio_payment_form_card-number,
+.checkout-v2#checkout-cc .pensio_payment_form_cardholder,
+.checkout-v2#checkout-cc .pensio_payment_form-cvc-input {
+      margin-top: 0 !important;
+}
+
+.checkout-v2#checkout-cc .pensio_payment_form_cardholder input {
+      color: #666;
+      outline: none;
+      height: 51px;
+      box-shadow: none;
+}
+
+.checkout-v2#checkout-cc .pensio_payment_form-cvc-input input {
+      padding: 16px 14px;
+      height: 52px;
+      box-sizing: border-box;
+      width: 100%;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.16) !important;
+      border-right: 1px solid rgba(0, 0, 0, 0.16) !important;
+      border-radius: 4px;
+      border-top: 0;
+      cursor: pointer;
+      font-size: 16px;
+      border-left: none;
+      border-bottom-left-radius: 0;
+      border-top-right-radius: 0;
+      outline: none;
+      color: #666;
+      box-shadow: none;
+}
+
+.checkout-v2#checkout-cc .expire-month, .checkout-v2#checkout-cc #emonth {
+      height: 51px;
+      padding-top: 16px;
+      padding-bottom: 16px;
+      padding-left: 2px !important;
+      margin: auto 4px auto 14px;
+      font-family: monospace !important;
+      width: 100%;
+      border: none;
+      outline: none;
+      cursor: pointer;
+      font-size: 16px;
+      box-shadow: none !important;
+      box-sizing: border-box;
+      color: #666;
+}
+
+.checkout-v2#checkout-cc .expiry-year {
+      padding: 16px 4px;
+      height: 51px;
+      width: 100%;
+      border: none;
+      outline: none;
+      font-family: monospace !important;
+      cursor: pointer;
+      font-size: 16px;
+      box-sizing: border-box;
+      color: #666;
+}
+
+.checkout-v2#checkout-cc .pensio_payment_form_month {
+      width: 20%;
+      max-width: 40px;
+}
+
+.checkout-v2#checkout-cc .pensio_payment_form_cvc {
+      width: 50%;
+}
+.checkout-v2#checkout-cc .pensio_payment_form_row.expiry_row {
+      float: none;
+      margin-top: 0;
+      gap: 0;
+      justify-content: space-between;
+      margin-bottom: 15px;
+}
+.checkout-v2#checkout-cc .secure-payments-text {
+      width: 100%;
+      position: relative;
+      float: left;
+      text-align: right;
+      font-size: 10px;
+      padding-top: 5px;
+}
+.checkout-v2#checkout-cc div.payment-form-wrapper {
+      padding: 25px 25px 25px 25px !important;
+      display: inline-block;
+      width: 100%;
+}
+
+.altapay-payment-form-cnt.altapay_content.checkout-v2#checkout-cc {
+      padding: 30px 25px 25px 25px;
+      width: 100%;
+      display: inline-block;
+}
+
+.checkout-v2#checkout-cc .pensio_payment_form_cvc,
+.checkout-v2#checkout-cc .pensio_payment_form_date-container{
+      width: 50%;
+}
+
 @media only screen and (max-width: 768px) {
       .pensio_payment_form_outer {
             width: 100%;

views/templates/front/cart_info17.tpl

@@ -51,6 +51,7 @@
 
                         {/if}
                     </ul>
+                    {$currency_sign} {$product.price_wt|round:2}
                 </td>
 
                 <td class="cart_quantity text-center" data-title="{l s='Quantity' mod='altapay'}">
@@ -102,6 +103,7 @@
                         {if !empty($product.gift)}
                             <span class="gift-icon">{l s='Gift!' mod='altapay'}</span>
                         {else}
+                            {$currency_sign}
                             {if $quantityDisplayed == 0 AND isset($customizedDatas.$productId.$productAttributeId)}
                                 {if !isset($priceDisplay)}{$product.total_customization_wt}{else}{$product.total_customization}{/if}
                             {else}
@@ -288,7 +290,7 @@
                         <span>{l s='Total' mod='altapay'}</span>
                     </td>
                     <td colspan="2" class="price total_price_container" id="total_price_container">
-                        <span id="total_price" data-selenium-total-price="{$total_price_without_tax}">{$currency_sign}{$total_price_without_tax}</span>
+                        <span id="total_price" data-selenium-total-price="{$total_price_without_tax}">{$currency_sign} {$cart_summary.total_price}</span>
                     </td>
                 </tr>
             {/if}

views/templates/front/payment_form.tpl

@@ -11,9 +11,9 @@
 {assign currency_code Currency::getDefaultCurrency()->sign}
 <link rel="stylesheet" href="{$css_dir}/theme.css" type="text/css" />
 </header>
-<div id="{$stylingclass}" {if ($theme_name) == "Niara"} class="niara" {/if}>
+<div id="{$stylingid}" class="{$stylingclass}{if $theme_name == 'Niara'} niara{/if}">
 <div id="card_info" {if ($cssClass)} class = "cvv_less" {/if}>
-    {if ($stylingclass) != "checkout-cc"}
+    {if strpos($stylingclass, "checkout-cc") === false}
         <p class="payment_msg">{l s="Please enter your details below" mod="altapay"}</p>
     {/if}
     <form id="PensioPaymentForm" ></form>