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();
}
},
- });
+ });
},
/**