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/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/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
Shoppers are redirected from your website to Checkout.com servers to complete payments. -* Checkout.js Embedded
+* Frames.js
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 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..dca27f00b 100755 --- a/etc/config.xml +++ b/etc/config.xml @@ -48,9 +48,9 @@ - - - + + + 1 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()) { - - \ 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/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 @@ - \ No newline at end of file + + + \ No newline at end of file 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()) { - - \ 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..ac0fe6e99 100755 --- a/view/frontend/web/js/collapseForm.js +++ b/view/frontend/web/js/collapseForm.js @@ -9,20 +9,23 @@ 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(); @@ -30,24 +33,26 @@ 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', + 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(); }); } 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..85ba62a0f 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,18 @@ 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', + containerSelector: '#cko-form-holder', theme: ckoTheme, themeOverride: ckoThemeOverride, + cardValidationChanged: function() { + self.isPlaceOrderActionAllowed(Frames.isCardValid()); + }, cardTokenised: function(event) { // Set the card token self.setCardTokenId(event.data.cardToken); @@ -230,7 +239,7 @@ define( self.placeOrder(); } }, - }); + }); }, /**