diff --git a/CHANGELOG.md b/CHANGELOG.md index 663a8a84..76bb97f2 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/Docs/Configuration/checkout_styling_form_v2.png b/Docs/Configuration/checkout_styling_form_v2.png new file mode 100644 index 00000000..e1cf4465 Binary files /dev/null and b/Docs/Configuration/checkout_styling_form_v2.png differ diff --git a/altapay.php b/altapay.php index 1ce095bc..89bf0107 100644 --- a/altapay.php +++ b/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(); diff --git a/composer.lock b/composer.lock index ed38ba98..464f7326 100644 --- a/composer.lock +++ b/composer.lock @@ -8,16 +8,16 @@ "packages": [ { "name": "altapay/api-php", - "version": "3.4.1", + "version": "3.5.4", "source": { "type": "git", "url": "https://github.com/AltaPay/api-php.git", - "reference": "19dc981a5ff66644217d2d6967aeb71c1dbf20bf" + "reference": "6fd4457ebb66a83c0995ad86764db40207ad5f53" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/AltaPay/api-php/zipball/19dc981a5ff66644217d2d6967aeb71c1dbf20bf", - "reference": "19dc981a5ff66644217d2d6967aeb71c1dbf20bf", + "url": "https://api.github.com/repos/AltaPay/api-php/zipball/6fd4457ebb66a83c0995ad86764db40207ad5f53", + "reference": "6fd4457ebb66a83c0995ad86764db40207ad5f53", "shasum": "" }, "require": { @@ -29,14 +29,14 @@ "ext-simplexml": "*", "ext-spl": "*", "guzzlehttp/guzzle": "^6.0 || ^7.0", - "php": "^5.6 || ^7.0 || ^8.0", - "symfony/event-dispatcher": "^2.1 || ^3.0 || ^4.0 || ^5.0 || ^6.0", - "symfony/options-resolver": "^2.6 || ^3.0 || ^4.0 || ^5.0 || ^6.0" + "php": "^7.0 || ^8.0", + "symfony/event-dispatcher": "^2.1 || ^3.0 || ^4.0 || ^5.0 || ^6.0 || ^7.0", + "symfony/options-resolver": "^2.6 || ^3.0 || ^4.0 || ^5.0 || ^6.0 || ^7.0" }, "require-dev": { "friendsofphp/php-cs-fixer": "^3.0", "fzaninotto/faker": "^1.6", - "phpstan/phpstan": "^1.8", + "phpstan/phpstan": "^2.1", "phpstan/phpstan-phpunit": "*", "phpstan/phpstan-strict-rules": "*", "phpunit/phpunit": "^7.0 || ^8.0 || ^9.0" @@ -56,7 +56,11 @@ "altapay", "payment" ], - "time": "2024-07-09T09:31:13+00:00" + "support": { + "issues": "https://github.com/AltaPay/api-php/issues", + "source": "https://github.com/AltaPay/api-php/tree/3.5.4" + }, + "time": "2025-09-15T05:02:36+00:00" }, { "name": "composer/package-versions-deprecated", @@ -2897,6 +2901,6 @@ "platform": { "php": "^7.0" }, - "platform-dev": [], - "plugin-api-version": "1.1.0" + "platform-dev": {}, + "plugin-api-version": "2.6.0" } diff --git a/config.xml b/config.xml index 485bd50a..95a41bec 100644 --- a/config.xml +++ b/config.xml @@ -10,7 +10,7 @@ altapay - + diff --git a/controllers/front/callbackform.php b/controllers/front/callbackform.php index 1274ae7a..58964ee6 100644 --- a/controllers/front/callbackform.php +++ b/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']); diff --git a/helpers.php b/helpers.php index ca0559ee..fb61eb59 100644 --- a/helpers.php +++ b/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; +} diff --git a/views/css/payment.css b/views/css/payment.css index e5fe753b..5ecebfe6 100644 --- a/views/css/payment.css +++ b/views/css/payment.css @@ -139,6 +139,10 @@ div#payment_error { margin-bottom: 25px; } +.checkout-v2 { + display: flex; +} + #checkout-cc #card_info { max-width: 500px; text-align: left; @@ -146,11 +150,12 @@ div#payment_error { 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%; diff --git a/views/templates/front/cart_info17.tpl b/views/templates/front/cart_info17.tpl index 670a9552..77a80cd5 100644 --- a/views/templates/front/cart_info17.tpl +++ b/views/templates/front/cart_info17.tpl @@ -51,6 +51,7 @@ {/if} + {$currency_sign} {$product.price_wt|round:2} @@ -102,6 +103,7 @@ {if !empty($product.gift)} {l s='Gift!' mod='altapay'} {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 @@ {l s='Total' mod='altapay'} - {$currency_sign}{$total_price_without_tax} + {$currency_sign} {$cart_summary.total_price} {/if} diff --git a/views/templates/front/payment_form.tpl b/views/templates/front/payment_form.tpl index b33c6319..217c05a9 100644 --- a/views/templates/front/payment_form.tpl +++ b/views/templates/front/payment_form.tpl @@ -11,9 +11,9 @@ {assign currency_code Currency::getDefaultCurrency()->sign} -
+
- {if ($stylingclass) != "checkout-cc"} + {if strpos($stylingclass, "checkout-cc") === false}

{l s="Please enter your details below" mod="altapay"}

{/if}
diff --git a/views/templates/front/payment_form17.tpl b/views/templates/front/payment_form17.tpl index f59a80ab..993d2950 100644 --- a/views/templates/front/payment_form17.tpl +++ b/views/templates/front/payment_form17.tpl @@ -22,9 +22,9 @@
{block name='checkout_process'} -
+
- {if ($stylingclass) != "checkout-cc"} + {if strpos($stylingclass, "checkout-cc") === false}

{l s="Please enter your details below" mod="altapay"}

{/if}
diff --git a/views/templates/front/paymentform_atmovic.tpl b/views/templates/front/paymentform_atmovic.tpl index e9615a57..d0d1d2fd 100644 --- a/views/templates/front/paymentform_atmovic.tpl +++ b/views/templates/front/paymentform_atmovic.tpl @@ -67,9 +67,9 @@
{block name='checkout_process'} -
+
- {if ($stylingclass) != "checkout-cc"} + {if strpos($stylingclass, "checkout-cc") === false}

{l s='Du er ved at betale' mod='altapay'} {$cart_summary.total_price} {$currency_code}

{/if}
diff --git a/wiki.md b/wiki.md index 6739e01e..ce3dce7c 100644 --- a/wiki.md +++ b/wiki.md @@ -161,14 +161,18 @@ In order to reconcile payments please follow the steps below: ![prestashop_configure_styling](Docs/Configuration/prestashop_configure_styling.png) - - `Legacy` Choose this option if legacy form is enabled from the gateway side. + - `Legacy` Legacy design with basic form styling. ![altapay_cc_legacy_form.png](Docs/Configuration/prestashop_legacy_styling_form.png) - - `Checkout` Select the option to show the Credit Card form in a modern look. Make sure the checkout form is enabled from the gateway side. + - `Checkout` Select the option to show the Credit Card form in a modern look. ![altapay_cc_checkout_form.png](Docs/Configuration/prestashop_checkout_styling_form.png) + - `Checkout v2` Select this option to display the credit card form with a sleek design, showing the expiry date in two-digit month and year format, and the payment amount on the pay button. + + ![checkout_styling_form_v2.png](Docs/Configuration/checkout_styling_form_v2.png) + - `Custom` This option can be selected to implement custom styling on the payment page. Selecting this option will remove all the styling from the payment page. ### Customize Payment Form Page: