From 042f4f8bea1965dcf4e2ded84f8729bdf1c68988 Mon Sep 17 00:00:00 2001 From: Josh Hinton Date: Tue, 14 Mar 2017 05:25:35 +0000 Subject: [PATCH] Update checkout form as details are updated Changed the hidden form from being generated on the server side to be generated on the client side instead. Added event listeners to update the form as user details are modified. Added scope settings to allow branding configuration to be changed at the store level. Updated front end code to request data in the correct scope. Changes should fix issues #10, #17, #18 and #22. --- .../OxipayPaymentGateway/Block/Formoxipay.php | 117 ---------- .../Controller/Checkout/RequestDetails.php | 83 +++++++ .../OxipayPaymentGateway/Model/Checkout.php | 2 +- .../Model/Ui/ConfigProvider.php | 8 +- .../etc/adminhtml/system.xml | 9 +- .../frontend/layout/checkout_index_index.xml | 3 - .../view/frontend/templates/formoxipay.phtml | 7 - .../payment/method-renderer/oxipay_gateway.js | 203 +++++++++++++++--- .../frontend/web/template/payment/form.html | 51 ++++- 9 files changed, 307 insertions(+), 176 deletions(-) delete mode 100644 Oxipay/OxipayPaymentGateway/Block/Formoxipay.php create mode 100644 Oxipay/OxipayPaymentGateway/Controller/Checkout/RequestDetails.php delete mode 100644 Oxipay/OxipayPaymentGateway/view/frontend/templates/formoxipay.phtml diff --git a/Oxipay/OxipayPaymentGateway/Block/Formoxipay.php b/Oxipay/OxipayPaymentGateway/Block/Formoxipay.php deleted file mode 100644 index d7adc27..0000000 --- a/Oxipay/OxipayPaymentGateway/Block/Formoxipay.php +++ /dev/null @@ -1,117 +0,0 @@ -_scopeConfigInterface = $configInterface; - $this->customerSession = $customerSession; - $this->sessionQuote = $sessionQuote; - $this->_urlBuilder = $context->getUrlBuilder(); - } - - public function getPaymentForm() - { - $om = \Magento\Framework\App\ObjectManager::getInstance(); - $customerSession = $om->get('Magento\Customer\Model\Session'); - $cart = $om->get('\Magento\Checkout\Model\Cart'); - $store = $om->get('Magento\Store\Model\StoreManagerInterface'); - $checkout = $om->get('Oxipay\OxipayPaymentGateway\Model\Checkout'); - $billingAddress = $cart->getQuote()->getBillingAddress(); - $shippingAddress= $cart->getQuote()->getShippingAddress(); - $CustomerID= $customerSession->getCustomer()->getId(); - $firstname=$customerSession->getCustomer()->getFirstname(); - $lastname= $customerSession->getCustomer()->getLastname(); - $email = $customerSession->getCustomer()->getEmail(); - $query =Array - ( - 'x_reference' => $cart->getQuote()->getId(), - 'x_account_id' => $checkout->getConfigData('payment/oxipay_gateway/merchant_number'), - 'x_amount' => (float)$cart->getQuote()->getGrandTotal(), - 'x_currency' => $store->getStore()->getCurrentCurrencyCode(), - 'x_url_callback' =>$this->_urlBuilder->getUrl("oxipay/checkout/saveorder",['quoteId' => $cart->getQuote()->getId()]), - 'x_url_complete' => $this->_urlBuilder->getUrl("oxipay/checkout/success",['quoteId' => $cart->getQuote()->getId()]), - 'x_url_cancel' => $this->_urlBuilder->getUrl("checkout"), - 'x_test' => $this->_scopeConfigInterface->getValue('payment/oxipay_gateway/test_mode') ? 'true' : 'false', - 'x_shop_country' => 'AU', - 'x_shop_name' =>$store->getStore()->getName(), - 'x_customer_first_name' => $firstname, - 'x_customer_last_name' => $lastname, - 'x_customer_email' => $email, - 'x_customer_phone' => $billingAddress->getTelephone(), - 'x_customer_billing_country' => $billingAddress->getCountryId(), - 'x_customer_billing_city' => $billingAddress->getCity(), - 'x_customer_billing_address1' => $billingAddress->getStreetLine(1), - 'x_customer_billing_address2' => $billingAddress->getStreetLine(2), - 'x_customer_billing_state' => 'ACT', - 'x_customer_billing_zip' => $billingAddress->getPostcode(), - 'x_customer_shipping_country' => $shippingAddress->getCountryId(), - 'x_customer_shipping_city' => $shippingAddress->getCity(), - 'x_customer_shipping_address1' => $shippingAddress->getStreetLine(1), - 'x_customer_shipping_address2'=> $shippingAddress->getStreetLine(2), - 'x_customer_shipping_state' => '', - 'x_customer_shipping_zip' => $shippingAddress->getPostcode(), - 'gateway_url' => $this->getUrlGateway(), - ); - $signature = $this->oxipay_sign($query, $this->_scopeConfigInterface->getValue('payment/oxipay_gateway/api_key')); - $query['x_signature'] = $signature; - return $this->generate_processing_form($query); - } - public function getConfigDataETS($key) - { - return $key; - return Mage::getStoreConfig('payment/oxipay_gateway/' . $key); - } - function generate_processing_form($query) { - $url = $query["gateway_url"]; - - $html =""; - return $html; - } - public function getUrlGateway() - { - return $this->_scopeConfigInterface->getValue('payment/oxipay_gateway/gateway_url'); - } - public function oxipay_sign($query, $api_key ) - { - $clear_text = ''; - ksort($query); - foreach ($query as $key => $value) { - if (substr($key, 0, 2) === "x_") { - $clear_text .= $key . $value; - } - } - $hash = hash_hmac( "sha256", $clear_text, $api_key); - return str_replace('-', '', $hash); - } - public function displayErrors() - { - $om = \Magento\Framework\App\ObjectManager::getInstance(); - $store = $om->get('Magento\Store\Model\StoreManagerInterface'); - $cart = $om->get('\Magento\Checkout\Model\Cart'); - $error_oxipay= $this->getRequest()->getParam('error_oixpay'); - if($error_oxipay) - return true; - else - return false; - - } -} \ No newline at end of file diff --git a/Oxipay/OxipayPaymentGateway/Controller/Checkout/RequestDetails.php b/Oxipay/OxipayPaymentGateway/Controller/Checkout/RequestDetails.php new file mode 100644 index 0000000..ab55d2d --- /dev/null +++ b/Oxipay/OxipayPaymentGateway/Controller/Checkout/RequestDetails.php @@ -0,0 +1,83 @@ +_scopeConfigInterface = $configInterface; + $this->_checkoutSession = $checkoutSession; + $this->_urlBuilder = $urlBuilder; + $this->_oxipayCrypto = $oxipayCrypto; + } + + public function execute() + { + $request = $this->getRequest(); + $response = $this->resultFactory->create(ResultFactory::TYPE_JSON); + + $quote = $this->_checkoutSession->getQuote(); + $store = $quote->getStore(); + + $storeCountry = $this->_scopeConfigInterface->getValue('general/store_information/country_id', \Magento\Store\Model\ScopeInterface::SCOPE_STORE); + //default to Australia if not set + if(strlen($storeCountry) == 0){ + $storeCountry = 'AU'; + } + + //data to be sent to Oxipay + $data = [ + 'x_reference' => $quote->getId(), + 'x_account_id' => $this->_scopeConfigInterface->getValue('payment/oxipay_gateway/merchant_number', \Magento\Store\Model\ScopeInterface::SCOPE_WEBSITE), + 'x_amount' => $request->getParam('amount'), + 'x_currency' => $request->getParam('currency'), + 'x_url_callback' => $this->_urlBuilder->getUrl("oxipay/checkout/saveorder", ['quoteId' => $quote->getId()]), + 'x_url_complete' => $this->_urlBuilder->getUrl("oxipay/checkout/success", ['quoteId' => $quote->getId()]), + 'x_url_cancel' => $this->_urlBuilder->getUrl("checkout"), + 'x_test' => $this->_scopeConfigInterface->getValue('payment/oxipay_gateway/test_mode', \Magento\Store\Model\ScopeInterface::SCOPE_WEBSITE) ? 'true' : 'false', + 'x_shop_country' => $storeCountry, + 'x_shop_name' => $this->_scopeConfigInterface->getValue('general/store_information/name', \Magento\Store\Model\ScopeInterface::SCOPE_STORE), + 'x_customer_first_name' => $request->getParam('customer_first_name'), + 'x_customer_last_name' => $request->getParam('customer_last_name'), + 'x_customer_email' => $request->getParam('customer_email'), + 'x_customer_phone' => $request->getParam('customer_phone'), + 'x_customer_billing_country' => $request->getParam('customer_billing_country'), + 'x_customer_billing_city' => $request->getParam('customer_billing_city'), + 'x_customer_billing_address1' => $request->getParam('customer_billing_address1'), + 'x_customer_billing_address2' => $request->getParam('customer_billing_address2'), + 'x_customer_billing_state' => $request->getParam('customer_billing_state'), + 'x_customer_billing_zip' => $request->getParam('customer_billing_zip'), + 'x_customer_shipping_country' => $request->getParam('customer_shipping_country'), + 'x_customer_shipping_city' => $request->getParam('customer_shipping_city'), + 'x_customer_shipping_address1' => $request->getParam('customer_shipping_address1'), + 'x_customer_shipping_address2'=> $request->getParam('customer_shipping_address2'), + 'x_customer_shipping_state' => $request->getParam('customer_shipping_state'), + 'x_customer_shipping_zip' => $request->getParam('customer_shipping_zip'), + ]; + + //sign the data + $data = $this->_oxipayCrypto->sign($data, $this->_scopeConfigInterface->getValue('payment/oxipay_gateway/api_key', \Magento\Store\Model\ScopeInterface::SCOPE_WEBSITE)); + + //return it to the front end + $response->setData($data); + + return $response; + } +} \ No newline at end of file diff --git a/Oxipay/OxipayPaymentGateway/Model/Checkout.php b/Oxipay/OxipayPaymentGateway/Model/Checkout.php index ed29f51..394f4a9 100644 --- a/Oxipay/OxipayPaymentGateway/Model/Checkout.php +++ b/Oxipay/OxipayPaymentGateway/Model/Checkout.php @@ -85,7 +85,7 @@ private function getCheckoutMethod($quote) } public function getConfigData($key) { - return $this->_scopeConfigInterface->getValue($key); + return $this->_scopeConfigInterface->getValue($key, \Magento\Store\Model\ScopeInterface::SCOPE_STORE); } } ?> \ No newline at end of file diff --git a/Oxipay/OxipayPaymentGateway/Model/Ui/ConfigProvider.php b/Oxipay/OxipayPaymentGateway/Model/Ui/ConfigProvider.php index 6e1c5f8..1b23903 100644 --- a/Oxipay/OxipayPaymentGateway/Model/Ui/ConfigProvider.php +++ b/Oxipay/OxipayPaymentGateway/Model/Ui/ConfigProvider.php @@ -52,14 +52,16 @@ public function getConfig() OxipayClient::FAILURE => __('Failure') ], 'errors' => $this->action->getRequest()->getParams('error_oxipay')?'The Payment provider rejected the transaction. Please try again.':'', - 'description' => $this->_scopeConfigInterface->getValue('payment/oxipay_gateway/description'), + 'title' => $this->_scopeConfigInterface->getValue('payment/oxipay_gateway/title', \Magento\Store\Model\ScopeInterface::SCOPE_STORE), + 'description' => $this->_scopeConfigInterface->getValue('payment/oxipay_gateway/description', \Magento\Store\Model\ScopeInterface::SCOPE_STORE), + 'gateway_url' => $this->_scopeConfigInterface->getValue('payment/oxipay_gateway/gateway_url', \Magento\Store\Model\ScopeInterface::SCOPE_WEBSITE), ] ] ]; - $logoFile = $this->_scopeConfigInterface->getValue('payment/oxipay_gateway/gateway_logo'); + $logoFile = $this->_scopeConfigInterface->getValue('payment/oxipay_gateway/gateway_logo', \Magento\Store\Model\ScopeInterface::SCOPE_STORE); if(strlen($logoFile) > 0){ - $logo = '../pub/media/sales/store/logo/' . $this->_scopeConfigInterface->getValue('payment/oxipay_gateway/gateway_logo'); + $logo = '../pub/media/sales/store/logo/' . $logoFile; } else{ $params = ['_secure' => $this->action->getRequest()->isSecure()]; diff --git a/Oxipay/OxipayPaymentGateway/etc/adminhtml/system.xml b/Oxipay/OxipayPaymentGateway/etc/adminhtml/system.xml index f8fce72..5db8ab9 100644 --- a/Oxipay/OxipayPaymentGateway/etc/adminhtml/system.xml +++ b/Oxipay/OxipayPaymentGateway/etc/adminhtml/system.xml @@ -3,16 +3,16 @@
- + Magento\Config\Model\Config\Source\Yesno - + - + - + validate-number diff --git a/Oxipay/OxipayPaymentGateway/view/frontend/layout/checkout_index_index.xml b/Oxipay/OxipayPaymentGateway/view/frontend/layout/checkout_index_index.xml index 8897d3d..560bbd2 100644 --- a/Oxipay/OxipayPaymentGateway/view/frontend/layout/checkout_index_index.xml +++ b/Oxipay/OxipayPaymentGateway/view/frontend/layout/checkout_index_index.xml @@ -46,8 +46,5 @@ - - - \ No newline at end of file diff --git a/Oxipay/OxipayPaymentGateway/view/frontend/templates/formoxipay.phtml b/Oxipay/OxipayPaymentGateway/view/frontend/templates/formoxipay.phtml deleted file mode 100644 index 6f90560..0000000 --- a/Oxipay/OxipayPaymentGateway/view/frontend/templates/formoxipay.phtml +++ /dev/null @@ -1,7 +0,0 @@ -displayErrors()){ ?> -
-

-
- -getPaymentForm(); \ No newline at end of file diff --git a/Oxipay/OxipayPaymentGateway/view/frontend/web/js/view/payment/method-renderer/oxipay_gateway.js b/Oxipay/OxipayPaymentGateway/view/frontend/web/js/view/payment/method-renderer/oxipay_gateway.js index 6d59c2e..83adf82 100644 --- a/Oxipay/OxipayPaymentGateway/view/frontend/web/js/view/payment/method-renderer/oxipay_gateway.js +++ b/Oxipay/OxipayPaymentGateway/view/frontend/web/js/view/payment/method-renderer/oxipay_gateway.js @@ -8,26 +8,185 @@ define( [ 'jquery', 'Magento_Checkout/js/view/payment/default', - 'mage/url' + 'ko', + 'mage/url', + 'Magento_Checkout/js/model/quote', + 'Magento_Ui/js/model/messageList', ], - function ($, Component, url) { + function ($, Component, ko, url, Quote, globalMessageList) { 'use strict'; - return Component.extend({ + var self, C; + + C = Component.extend({ defaults: { template: 'Oxipay_OxipayPaymentGateway/payment/form', transactionResult: '' }, - initObservable: function () { + //"private" vars + _requestTimeout: null, + + //methods + initialize: function() { + this._super(); + self = this; + + self.bindToEvents(); + + self.updateData(); + }, + canSubmit: ko.observable(true), + + data: { + reference: ko.observable(''), + account_id: ko.observable(''), + amount: ko.observable(''), + currency: ko.observable(''), + url_callback: ko.observable(''), + url_complete: ko.observable(''), + url_cancel: ko.observable(''), + test: ko.observable(''), + shop_country: ko.observable(''), + shop_name: ko.observable(''), + customer_first_name: ko.observable(''), + customer_last_name: ko.observable(''), + customer_email: ko.observable(''), + customer_phone: ko.observable(''), + customer_billing_country: ko.observable(''), + customer_billing_city: ko.observable(''), + customer_billing_address1: ko.observable(''), + customer_billing_address2: ko.observable(''), + customer_billing_state: ko.observable(''), + customer_billing_zip: ko.observable(''), + customer_shipping_country: ko.observable(''), + customer_shipping_city: ko.observable(''), + customer_shipping_address1: ko.observable(''), + customer_shipping_address2: ko.observable(''), + customer_shipping_state: ko.observable(''), + customer_shipping_zip: ko.observable(''), + signature: ko.observable('') + }, + + bindToEvents: function() { + Quote.paymentMethod.subscribe(self.updateData, null, 'change'); + Quote.billingAddress.subscribe(self.updateData, null, 'change'); + Quote.shippingAddress.subscribe(self.updateData, null, 'change'); + Quote.paymentMethod.subscribe(self.updateData, null, 'change'); + Quote.totals.subscribe(self.updateData, null, 'change'); + }, + updateData: function(response) { + var quoteData = {}, + billingAddress, + shippingAddress; + + self.canSubmit(false); + + //using the timeout prevents multiple events spamming the server for oxipay detail updats + if (self._requestTimeout != null) { + window.clearTimeout(self._requestTimeout); + } + + window.setTimeout(function() { + billingAddress = Quote.billingAddress(); + shippingAddress = Quote.shippingAddress(); + + quoteData.amount = Quote.totals().base_grand_total; + quoteData.currency = Quote.totals().base_currency_code; + quoteData.customer_email = (Quote.guestEmail) ? Quote.guestEmail : window.checkoutConfig.customerData.email; + if(billingAddress){ + quoteData.customer_first_name = billingAddress.firstname; + quoteData.customer_last_name = billingAddress.lastname; + quoteData.customer_phone = billingAddress.telephone; + quoteData.customer_billing_country = billingAddress.countryId; + quoteData.customer_billing_city = billingAddress.city; + if(billingAddress.street){ + quoteData.customer_billing_address1 = billingAddress.street[0]; + quoteData.customer_billing_address2 = billingAddress.street[1]; + } + quoteData.customer_billing_state = billingAddress.regionCode; + quoteData.customer_billing_zip = billingAddress.postcode; + } + if(shippingAddress){ + quoteData.customer_shipping_country = shippingAddress.countryId; + quoteData.customer_shipping_city = shippingAddress.city; + if(shippingAddress.street){ + quoteData.customer_shipping_address1 = shippingAddress.street[0]; + quoteData.customer_shipping_address2 = shippingAddress.street[1]; + } + quoteData.customer_shipping_state = shippingAddress.regionCode; + quoteData.customer_shipping_zip = shippingAddress.postcode; + } + //make ajax request + $.post('/oxipay/Checkout/RequestDetails', quoteData) + .complete(function(response) { + var responseData = response.responseJSON; + + self.data.reference(responseData.x_reference); + self.data.account_id(responseData.x_account_id); + self.data.amount(responseData.x_amount); + self.data.currency(responseData.x_currency); + self.data.url_callback(responseData.x_url_callback); + self.data.url_complete(responseData.x_url_complete); + self.data.url_cancel(responseData.x_url_cancel); + self.data.test(responseData.x_test); + self.data.shop_country(responseData.x_shop_country); + self.data.shop_name(responseData.x_shop_name); + self.data.customer_first_name(responseData.x_customer_first_name); + self.data.customer_last_name(responseData.x_customer_last_name); + self.data.customer_email(responseData.x_customer_email); + self.data.customer_phone(responseData.x_customer_phone); + self.data.customer_billing_country(responseData.x_customer_billing_country); + self.data.customer_billing_city(responseData.x_customer_billing_city); + self.data.customer_billing_address1(responseData.x_customer_billing_address1); + self.data.customer_billing_address2(responseData.x_customer_billing_address2); + self.data.customer_billing_state(responseData.x_customer_billing_state); + self.data.customer_billing_zip(responseData.x_customer_billing_zip); + self.data.customer_shipping_country(responseData.x_customer_shipping_country); + self.data.customer_shipping_city(responseData.x_customer_shipping_city); + self.data.customer_shipping_address1(responseData.x_customer_shipping_address1); + self.data.customer_shipping_address2(responseData.x_customer_shipping_address2); + self.data.customer_shipping_state(responseData.x_customer_shipping_state); + self.data.customer_shipping_zip(responseData.x_customer_shipping_zip); + self.data.signature(responseData.x_signature); + + if(!responseData.x_customer_email + || responseData.x_customer_email.length == 0 + ){ + globalMessageList.addErrorMessage({'message': 'Please enter your email address'}); + self.canSubmit(false); + } + else if(!responseData.x_customer_first_name + || responseData.x_customer_first_name.length == 0 + || !responseData.x_customer_last_name + || responseData.x_customer_last_name.length == 0 + || !responseData.x_customer_billing_address1 + || responseData.x_customer_billing_address1.length == 0 + || !responseData.x_customer_billing_city + || responseData.x_customer_billing_city.length == 0 + || !responseData.x_customer_billing_state + || responseData.x_customer_billing_state.length == 0 + || !responseData.x_customer_billing_zip + || responseData.x_customer_billing_zip.length == 0 + ){ + globalMessageList.addErrorMessage({'message': 'Please enter your billing details'}); + self.canSubmit(false); + } + else{ + self.canSubmit(true); + } + }); + }, 300); + }, + + initObservable: function () { this._super() .observe([ 'transactionResult' ]); return this; }, - getCode: function() { return 'oxipay_gateway'; }, @@ -39,7 +198,6 @@ define( } }; }, - getTransactionResults: function() { return _.map(window.checkoutConfig.payment.oxipay_gateway.transactionResults, function(value, key) { return { @@ -48,26 +206,23 @@ define( }; }); }, - - continueToOxipay: function () { - $('#oxipayredirectform').submit(); - //this.placeOrder(); - - return false; - }, getFromOxipay: function() { return window.checkoutConfig.payment.oxipay_gateway.form_oxipay; }, + getTitle: function() { + return window.checkoutConfig.payment.oxipay_gateway.title; + }, getDescription: function() { return window.checkoutConfig.payment.oxipay_gateway.description; }, getOxipayLogo:function(){ var logo = window.checkoutConfig.payment.oxipay_gateway.logo; - console.log(logo); - console.log(window.checkoutConfig.payment.oxipay_gateway.defaultLogo); return logo; }, + getGatewayUrl: function() { + return window.checkoutConfig.payment.oxipay_gateway.gateway_url; + }, getErrors: function() { if(window.checkoutConfig.payment.oxipay_gateway.errors) @@ -75,23 +230,9 @@ define( else $('#payment-method-content .error-msg').hide(); return window.checkoutConfig.payment.oxipay_gateway.errors; - - }, - afterPlaceOrder: function() { - - var geturl = url.build('oxipay/Outbound/Redirect') - $.ajax({ - url: geturl, - method: "GET", - }).done(function (data) { - var payload = data; - document.getElementById('oxipayredirectform').action = payload['url']; - $.each(payload['payload'], function(itemkey, itemvalue) { - document.getElementById(itemkey).value = itemvalue; - }); - document.getElementById('oxipayredirectform').submit(); - }); } }); + + return C; } ); \ No newline at end of file diff --git a/Oxipay/OxipayPaymentGateway/view/frontend/web/template/payment/form.html b/Oxipay/OxipayPaymentGateway/view/frontend/web/template/payment/form.html index e1e80fd..6abbcfb 100644 --- a/Oxipay/OxipayPaymentGateway/view/frontend/web/template/payment/form.html +++ b/Oxipay/OxipayPaymentGateway/view/frontend/web/template/payment/form.html @@ -27,17 +27,50 @@ - +
+ + + +
- +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +