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>