Merge pull request #34 from david-fiaty-cko/master

Checkout.com Magento 2 Module - v1.0.14
checkout · Nov 24, 2017 · 2cfbe9a · 2cfbe9a
2 parents a626b1f + 1fb2387
commit 2cfbe9a
Show file tree

Hide file tree

Showing 11 changed files with 77 additions and 120 deletions.
diff --git 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/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/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/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
@@ -48,9 +48,9 @@
                 <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>
-                <embedded_css><![CDATA[https://cdn.checkout.com/v2/js/css/checkout.js.css]]></embedded_css>
+                <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/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>

diff --git 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>
+?>
diff --git a/view/adminhtml/web/js/collapseForm.js b/view/adminhtml/web/js/collapseForm.js
@@ -14,15 +14,14 @@ 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');
     var ckoPublicKey = $('#cko-public-key').val();
     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/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() ?>">
+<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() ?>"> 
diff --git 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>
+?>
diff --git a/view/frontend/web/js/collapseForm.js b/view/frontend/web/js/collapseForm.js
@@ -9,45 +9,50 @@
 
 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');
+    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
         $addFormButton.click(function () {
             $formHolder.show();
             $addFormButton.hide();
         });
 
         // 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',
+            containerSelector: '#cko-form-holder',
             theme: ckoTheme,
+            themeOverride: ckoThemeOverride,
+            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 +61,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();
             });
         }
-Original file line number
+Diff line change
@@ Expand Up / @@ -30,7 +30,7 @@ public function toOptionArray() { @@
                 ],
                 [
                     'value' => self::INTEGRATION_EMBEDDED,
-                    'label' => 'Embedded'
+                    'label' => 'Frames'
                 ]
             ];
         }
@@ Expand Down @@