From 61c8955b2acb563dfa532fa2a6f7e4f39d4229da Mon Sep 17 00:00:00 2001 From: david-fiaty-cko <david.fiaty@checkout.com> Date: Fri, 24 Nov 2017 16:25:48 +0000 Subject: [PATCH 1/3] Embedded to Frames update Updated the extension to use Frames in replacement of Embedded. --- Model/Service/StoreCardService.php | 18 +++++++-- composer.json | 2 +- etc/config.xml | 4 +- view/adminhtml/templates/embedded.phtml | 35 +---------------- view/adminhtml/web/js/collapseForm.js | 25 ++++++------ view/frontend/templates/embedded.phtml | 35 +---------------- view/frontend/web/js/collapseForm.js | 38 +++++++++---------- .../view/payment/method-renderer/embedded.js | 27 ++++++++----- 8 files changed, 66 insertions(+), 118 deletions(-) diff --git a/Model/Service/StoreCardService.php b/Model/Service/StoreCardService.php index e838ee5f9..3eedf503e 100755 --- a/Model/Service/StoreCardService.php +++ b/Model/Service/StoreCardService.php @@ -26,6 +26,7 @@ use Magento\Framework\App\ResponseFactory; use Magento\Framework\App\Config\ScopeConfigInterface; use Magento\Customer\Model\Session; +use CheckoutCom\Magento2\Helper\Watchdog; class StoreCardService { @@ -89,6 +90,11 @@ class StoreCardService { */ protected $responseFactory; + /** + * @var Watchdog + */ + protected $watchdog; + protected $scopeConfig; protected $customerSession; @@ -102,6 +108,7 @@ class StoreCardService { * @param PaymentTokenRepositoryInterface $paymentTokenRepository * @param PaymentTokenManagementInterface $paymentTokenManagement * @param ResponseFactory $responseFactory + * @param Watchdog $watchdog */ public function __construct( Logger $logger, @@ -112,8 +119,8 @@ public function __construct( PaymentTokenManagementInterface $paymentTokenManagement, ResponseFactory $responseFactory, ScopeConfigInterface $scopeConfig, - Session $customerSession - + Session $customerSession, + Watchdog $watchdog ) { $this->logger = $logger; $this->vaultTokenFactory = $vaultTokenFactory; @@ -124,6 +131,7 @@ public function __construct( $this->scopeConfig = $scopeConfig; $this->responseFactory = $responseFactory; $this->customerSession = $customerSession; + $this->watchdog = $watchdog; } /** @@ -133,7 +141,6 @@ public function __construct( * @return StoreCardService */ public function setCustomerId($id = null) { - $this->customerId = (int) $id > 0 ? $id : $this->customerSession->getCustomer()->getId(); return $this; @@ -146,7 +153,6 @@ public function setCustomerId($id = null) { * @return StoreCardService */ public function setCustomerEmail() { - $this->customerEmail = $this->customerSession->getCustomer()->getEmail(); return $this; @@ -276,6 +282,10 @@ private function authorizeTransaction() { $result = json_decode($response->getBody(), true); $log['response'] = $result; + // Outpout the response in debug mode + $this->watchdog->bark($result); + + if( array_key_exists('errorCode', $result) ) { throw new ApiClientException($result['message'], $result['errorCode'], $result['eventId']); } diff --git a/composer.json b/composer.json index 6f00d7d99..7ff54389c 100755 --- a/composer.json +++ b/composer.json @@ -11,7 +11,7 @@ "magento/module-vault": "100.2.*" }, "type": "magento2-module", - "version": "1.0.13", + "version": "1.0.14", "autoload": { "files": [ "registration.php" diff --git a/etc/config.xml b/etc/config.xml index 8bea2c7b6..f963f4369 100755 --- a/etc/config.xml +++ b/etc/config.xml @@ -48,8 +48,8 @@ <private_shared_key backend_model="Magento\Config\Model\Config\Backend\Encrypted" /> <sandbox_api_url><![CDATA[https://sandbox.checkout.com/api2/v2/]]></sandbox_api_url> <live_api_url><![CDATA[https://api2.checkout.com/v2/]]></live_api_url> - <sandbox_embedded_url><![CDATA[https://cdn.checkout.com/v2/sandbox/js/checkout.js]]></sandbox_embedded_url> - <live_embedded_url><![CDATA[https://cdn.checkout.com/v2/js/checkout.js]]></live_embedded_url> + <sandbox_embedded_url><![CDATA[https://cdn.checkout.com/js/frames.js]]></sandbox_embedded_url> + <live_embedded_url><![CDATA[https://cdn.checkout.com/js/frames.js]]></live_embedded_url> <embedded_css><![CDATA[https://cdn.checkout.com/v2/js/css/checkout.js.css]]></embedded_css> <sandbox_hosted_url><![CDATA[https://secure1.checkout.com/sandbox/payment/]]></sandbox_hosted_url> <live_hosted_url><![CDATA[https://secure1.checkout.com/payment/]]></live_hosted_url> diff --git a/view/adminhtml/templates/embedded.phtml b/view/adminhtml/templates/embedded.phtml index 7344aecc4..bf3046815 100755 --- a/view/adminhtml/templates/embedded.phtml +++ b/view/adminhtml/templates/embedded.phtml @@ -20,37 +20,4 @@ if (!$block->hasCustomCss()) { </style> <?php } -?> - -<style> - html { - overflow: -moz-scrollbars-vertical !important; - overflow-y: scroll !important; - } - - #embeddedForm { - z-index: 0 !important; - } - - #embeddedForm, #embeddedForm iframe { - position: relative !important; - } - - @media all and (min-width: 520px) { - #cko-form-holder { - max-width: 60%; - } - } - - @media all and and (min-width: 301px) and (max-width: 519px) { - #cko-form-holder { - max-width: 80%; - } - } - - @media all and (max-width: 300px) { - #cko-form-holder { - max-width: 100%; - } - } -</style> \ No newline at end of file +?> \ No newline at end of file diff --git a/view/adminhtml/web/js/collapseForm.js b/view/adminhtml/web/js/collapseForm.js index 971a23287..14500a657 100755 --- a/view/adminhtml/web/js/collapseForm.js +++ b/view/adminhtml/web/js/collapseForm.js @@ -14,7 +14,7 @@ require([ 'use strict'; // Prepare the required variables - var $form = $('#cko-form-holder form'); + var $form = document.getElementById('embeddedForm'); var $formHolder = $('#cko-form-holder'); var $addFormButton = $('#show-add-cc-form'); var $submitFormButton = $('#add-new-cc-card'); @@ -22,7 +22,6 @@ require([ var ckoTheme = $('#cko-theme').val(); $(document).ready(function() { - // Add card controls $addFormButton.click(function() { $formHolder.show(); @@ -32,28 +31,26 @@ require([ // Submit card form controls $submitFormButton.click(function(e) { e.preventDefault(); - Checkout.submitCardForm(); + Frames.submitCard().then(function(data) { + Frames.addCardToken($form, data.cardToken); + chargeWithCardToken(data); + }) }); // Initialise the embedded form - Checkout.init({ + Frames.init({ publicKey: ckoPublicKey, - value: 1, - currency: "USD", - appMode: 'embedded', - appContainerSelector: '#embeddedForm', - theme: ckoTheme, - cardTokenised: function(event) { - // Perform the charge via ajax - chargeWithCardToken(event.data); + containerSelector: '#embeddedForm', + cardValidationChanged: function() { + //$submitFormButton.prop("disabled", !Frames.isCardValid()); } - }); + }); // Card storage function function chargeWithCardToken(ckoResponse) { // Set the storage controller URL - var storageUrl = url.build('checkout_com/cards/store/cid/2'); + var storageUrl = url.build('checkout_com/cards/store'); // Prepare the request data var requestObject = { "ckoCardToken": ckoResponse.cardToken }; diff --git a/view/frontend/templates/embedded.phtml b/view/frontend/templates/embedded.phtml index 7344aecc4..bf3046815 100755 --- a/view/frontend/templates/embedded.phtml +++ b/view/frontend/templates/embedded.phtml @@ -20,37 +20,4 @@ if (!$block->hasCustomCss()) { </style> <?php } -?> - -<style> - html { - overflow: -moz-scrollbars-vertical !important; - overflow-y: scroll !important; - } - - #embeddedForm { - z-index: 0 !important; - } - - #embeddedForm, #embeddedForm iframe { - position: relative !important; - } - - @media all and (min-width: 520px) { - #cko-form-holder { - max-width: 60%; - } - } - - @media all and and (min-width: 301px) and (max-width: 519px) { - #cko-form-holder { - max-width: 80%; - } - } - - @media all and (max-width: 300px) { - #cko-form-holder { - max-width: 100%; - } - } -</style> \ No newline at end of file +?> \ No newline at end of file diff --git a/view/frontend/web/js/collapseForm.js b/view/frontend/web/js/collapseForm.js index 18e3ac787..dff6829b9 100755 --- a/view/frontend/web/js/collapseForm.js +++ b/view/frontend/web/js/collapseForm.js @@ -9,12 +9,13 @@ require([ 'jquery', - 'mage/url' - ], function($, url) { + 'mage/url', + 'Magento_Checkout/js/model/full-screen-loader' + ], function($, url, fullScreenLoader) { 'use strict'; // Prepare the required variables - var $form = $('#cko-form-holder form'); + var $form = document.getElementById('embeddedForm'); var $formHolder = $('#cko-form-holder'); var $addFormButton = $('#show-add-cc-form'); var $submitFormButton = $('#add-new-cc-card'); @@ -22,7 +23,6 @@ require([ var ckoTheme = $('#cko-theme').val(); $(document).ready(function() { - // Add card controls $addFormButton.click(function () { $formHolder.show(); @@ -30,24 +30,24 @@ require([ }); // Submit card form controls - $submitFormButton.click(function (e) { + $submitFormButton.click(function(e) { e.preventDefault(); - Checkout.submitCardForm(); + fullScreenLoader.startLoader(); + Frames.submitCard(); }); // Initialise the embedded form - Checkout.init({ + Frames.init({ publicKey: ckoPublicKey, - value: 1, - currency: "USD", - appMode: 'embedded', - appContainerSelector: '#embeddedForm', - theme: ckoTheme, + containerSelector: '#cko-form-holder', + cardValidationChanged: function() { + $submitFormButton.prop("disabled", !Frames.isCardValid()); + }, cardTokenised: function(event) { // Perform the charge via ajax chargeWithCardToken(event.data); } - }); + }); // Card storage function function chargeWithCardToken(ckoResponse) { @@ -56,19 +56,19 @@ require([ var storageUrl = url.build('checkout_com/cards/store'); // Prepare the request data - var requestObject = {"ckoCardToken": ckoResponse.cardToken}; + var requestObject = { "ckoCardToken": ckoResponse.cardToken }; // Perform the storage request $.ajax({ type: "POST", url: storageUrl, data: JSON.stringify(requestObject), - success: function(res) { - }, - error: function (request, status, error) { + success: function(res) {}, + error: function(request, status, error) { alert(error); - } - }).done(function (data) { + } + }).done(function(data) { + fullScreenLoader.stopLoader(); window.location.reload(); }); } diff --git a/view/frontend/web/js/view/payment/method-renderer/embedded.js b/view/frontend/web/js/view/payment/method-renderer/embedded.js index 8f94a8f5c..5cbfcbf71 100755 --- a/view/frontend/web/js/view/payment/method-renderer/embedded.js +++ b/view/frontend/web/js/view/payment/method-renderer/embedded.js @@ -157,14 +157,20 @@ define( // Get self var self = this; + // Get the form + var paymentForm = document.getElementById('embeddedForm'); + // Validate before submission if (additionalValidators.validate()) { - if (Checkout.isCardFormValid()) { + if (Frames.isCardValid()) { // Set the save card option in session self.saveSessionData(); // Submit the form - Checkout.submitCardForm(); + Frames.submitCard().then(function(data) { + Frames.addCardToken(paymentForm, data.cardToken); + paymentForm.submit(); + }) } } }, @@ -210,15 +216,16 @@ define( var redirectUrl = self.getRedirectUrl(); var threeds_enabled = CheckoutCom.getPaymentConfig()['three_d_secure']['enabled']; + // Freeze the place order button on initialisation + self.isPlaceOrderActionAllowed(false); + // Initialise the embedded form - Checkout.init({ + Frames.init({ publicKey: self.getPublicKey(), - value: self.getQuoteValue(), - currency: self.getQuoteCurrency(), - appMode: 'embedded', - appContainerSelector: '#embeddedForm', - theme: ckoTheme, - themeOverride: ckoThemeOverride, + containerSelector: '#cko-form-holder', + cardValidationChanged: function() { + self.isPlaceOrderActionAllowed(Frames.isCardValid()); + }, cardTokenised: function(event) { // Set the card token self.setCardTokenId(event.data.cardToken); @@ -230,7 +237,7 @@ define( self.placeOrder(); } }, - }); + }); }, /** From cbbfdd2b51393e32f51b1344e2eabf36e2f0f9d5 Mon Sep 17 00:00:00 2001 From: david-fiaty-cko <david.fiaty@checkout.com> Date: Fri, 24 Nov 2017 16:59:43 +0000 Subject: [PATCH 2/3] Frames.js feature update Added the theme features to the Frames.js integration and updated the readme file. --- Model/Adminhtml/Source/Integration.php | 2 +- README.md | 4 ++-- view/frontend/templates/add-new-card-form.phtml | 4 +++- view/frontend/web/js/collapseForm.js | 5 +++++ .../frontend/web/js/view/payment/method-renderer/embedded.js | 2 ++ 5 files changed, 13 insertions(+), 4 deletions(-) diff --git a/Model/Adminhtml/Source/Integration.php b/Model/Adminhtml/Source/Integration.php index c60be706c..dd120a363 100755 --- a/Model/Adminhtml/Source/Integration.php +++ b/Model/Adminhtml/Source/Integration.php @@ -30,7 +30,7 @@ public function toOptionArray() { ], [ 'value' => self::INTEGRATION_EMBEDDED, - 'label' => 'Embedded' + 'label' => 'Frames' ] ]; } diff --git a/README.md b/README.md index b09f93acd..d40b3b671 100755 --- a/README.md +++ b/README.md @@ -10,10 +10,10 @@ This extension is an integration of [Checkout.js](https://docs.checkout.com "Che * Checkout.js Hosted<br> Shoppers are redirected from your website to Checkout.com servers to complete payments. -* Checkout.js Embedded<br> +* Frames.js<br> The payment form is embedded and shoppers complete payments without leaving your website. -Checkout.js Hosted and Checkout.js Embedded are cross-browser and cross-device compatible, and can accept online payments from all major credit cards. Checkout.js Hosted offers in addition many of the most popular [Alternative Payment methods](https://docs.checkout.com/reference/checkout-js-reference/alternative-payments "Alternative Payment methods") used around the world. +Checkout.js Hosted and Frames.js are cross-browser and cross-device compatible, and can accept online payments from all major credit cards. Checkout.js Hosted offers in addition many of the most popular [Alternative Payment methods](https://docs.checkout.com/reference/checkout-js-reference/alternative-payments "Alternative Payment methods") used around the world. ## Supported payment methods The Checkout.com extension for Magento 2 supports VISA, Mastercard, American Express, Discover, Diners Club, JCB, in addition to the Alternative Payment options described above. diff --git a/view/frontend/templates/add-new-card-form.phtml b/view/frontend/templates/add-new-card-form.phtml index 8ac6d1374..5ccb85f49 100755 --- a/view/frontend/templates/add-new-card-form.phtml +++ b/view/frontend/templates/add-new-card-form.phtml @@ -35,4 +35,6 @@ <input type="hidden" id="customer-currency" name="customer_currency" value="<?php echo $block->getCustomerCurrency(); ?>"> <input type="hidden" id="cko-public-key" value="<?php echo $block->getGatewayConfig()->getPublicKey() ?>"> -<input type="hidden" id="cko-theme" value="<?php echo $block->getGatewayConfig()->getEmbeddedTheme() ?>"> \ No newline at end of file +<input type="hidden" id="cko-theme" value="<?php echo $block->getGatewayConfig()->getEmbeddedTheme() ?>"> +<input type="hidden" id="cko-css-file" value="<?php echo $block->getGatewayConfig()->getCssFile() ?>"> +<input type="hidden" id="cko-custom-css" value="<?php echo $block->getGatewayConfig()->getCustomCss() ?>"> \ No newline at end of file diff --git a/view/frontend/web/js/collapseForm.js b/view/frontend/web/js/collapseForm.js index dff6829b9..ac0fe6e99 100755 --- a/view/frontend/web/js/collapseForm.js +++ b/view/frontend/web/js/collapseForm.js @@ -19,8 +19,11 @@ require([ var $formHolder = $('#cko-form-holder'); var $addFormButton = $('#show-add-cc-form'); var $submitFormButton = $('#add-new-cc-card'); + var css_file = $('#cko-css-file').val(); + var custom_css = $('#cko-custom-css').val(); var ckoPublicKey = $('#cko-public-key').val(); var ckoTheme = $('#cko-theme').val(); + var ckoThemeOverride = ((custom_css) && custom_css !== '' && css_file == 'custom') ? custom_css : undefined; $(document).ready(function() { // Add card controls @@ -40,6 +43,8 @@ require([ Frames.init({ publicKey: ckoPublicKey, containerSelector: '#cko-form-holder', + theme: ckoTheme, + themeOverride: ckoThemeOverride, cardValidationChanged: function() { $submitFormButton.prop("disabled", !Frames.isCardValid()); }, diff --git a/view/frontend/web/js/view/payment/method-renderer/embedded.js b/view/frontend/web/js/view/payment/method-renderer/embedded.js index 5cbfcbf71..85ba62a0f 100755 --- a/view/frontend/web/js/view/payment/method-renderer/embedded.js +++ b/view/frontend/web/js/view/payment/method-renderer/embedded.js @@ -223,6 +223,8 @@ define( Frames.init({ publicKey: self.getPublicKey(), containerSelector: '#cko-form-holder', + theme: ckoTheme, + themeOverride: ckoThemeOverride, cardValidationChanged: function() { self.isPlaceOrderActionAllowed(Frames.isCardValid()); }, From 1fb2387eef6cf725ef1884f1869a2769598f188b Mon Sep 17 00:00:00 2001 From: david-fiaty-cko <david.fiaty@checkout.com> Date: Fri, 24 Nov 2017 17:06:39 +0000 Subject: [PATCH 3/3] Updated the Frames CSS url Updated the Frames CSS url in the module config.xml file. --- etc/config.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/etc/config.xml b/etc/config.xml index f963f4369..dca27f00b 100755 --- a/etc/config.xml +++ b/etc/config.xml @@ -50,7 +50,7 @@ <live_api_url><![CDATA[https://api2.checkout.com/v2/]]></live_api_url> <sandbox_embedded_url><![CDATA[https://cdn.checkout.com/js/frames.js]]></sandbox_embedded_url> <live_embedded_url><![CDATA[https://cdn.checkout.com/js/frames.js]]></live_embedded_url> - <embedded_css><![CDATA[https://cdn.checkout.com/v2/js/css/checkout.js.css]]></embedded_css> + <embedded_css><![CDATA[https://cdn.checkout.com/v2/js/css/theme-template.css]]></embedded_css> <sandbox_hosted_url><![CDATA[https://secure1.checkout.com/sandbox/payment/]]></sandbox_hosted_url> <live_hosted_url><![CDATA[https://secure1.checkout.com/payment/]]></live_hosted_url> <sort_order>1</sort_order>