Add publishable key in config and fix rendering issue

degica · Jul 3, 2024 · 8e8214f · 8e8214f
1 parent c65b9e0
commit 8e8214f
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 34 deletions.
diff --git a/src/app/code/Komoju/Payments/Controller/KomojuField/ProcessToken.php b/src/app/code/Komoju/Payments/Controller/KomojuField/ProcessToken.php
@@ -10,6 +10,7 @@
 use Magento\Sales\Model\Order;
 
 use Komoju\Payments\Api\KomojuApi;
+use Komoju\Payments\Gateway\Config\Config;
 use Komoju\Payments\Model\ExternalPaymentFactory;
 use Komoju\Payments\Model\ExternalPayment;
 
@@ -20,6 +21,7 @@ class ProcessToken extends Action
     protected JsonFactory $jsonResultFactory;
     protected KomojuApi $komojuApi;
     protected Session $checkoutSession;
+    protected Config $config;
     protected LoggerInterface $logger;
     protected Order $order;
     protected ExternalPaymentFactory $externalPaymentFactory;
@@ -32,12 +34,14 @@ public function __construct(
         ExternalPaymentFactory $externalPaymentFactory,
         ExternalPayment $externalPayment,
         KomojuApi $komojuApi,
+        Config $config,
         LoggerInterface $logger
     ) {
         $this->jsonResultFactory = $jsonResultFactory;
         $this->checkoutSession = $checkoutSession;
         $this->externalPayment = $externalPaymentFactory->create();
         $this->komojuApi = $komojuApi;
+        $this->config = $config;
         $this->logger = $logger;
         parent::__construct($context);
     }
@@ -67,7 +71,7 @@ public function execute()
             $session = $this->komojuApi->createSession([
                 'amount' => $order->getGrandTotal(),
                 'currency' => $currencyCode,
-                'default_locale' => 'en',
+                'default_locale' => $this->config->getKomojuLocale(),
                 'email' => $order->getCustomerEmail(),
                 'metadata' => ['note' => 'testing'],
                 'payment_data' => [

diff --git a/src/app/code/Komoju/Payments/Gateway/Config/Config.php b/src/app/code/Komoju/Payments/Gateway/Config/Config.php
@@ -80,6 +80,16 @@ public function getSecretKey($storeId = null)
         return $this->getValue('secret_key', $storeId);
     }
 
+    /**
+     * Returns the value of the "Publishable Key"
+     * @param int|null $storeId
+     * @return string
+     */
+    public function getPublishableKey($storeId = null)
+    {
+        return $this->getValue('publishable_key', $storeId);
+    }
+
     /**
      * Returns the value of the "Webhook Secret Token" on the field on the admin
      * page.

diff --git a/src/app/code/Komoju/Payments/Model/Ui/ConfigProvider.php b/src/app/code/Komoju/Payments/Model/Ui/ConfigProvider.php
@@ -92,6 +92,7 @@ public function getConfig()
                     'available_payment_methods' => $this->createPaymentMethodOptions(),
                     'merchant_id'  => $this->config->getMerchantId(),
                     'redirect_url' => $this->config->getRedirectUrl(),
+                    'publishable_key' => $this->config->getPublishableKey(),
                     'show_title' => $this->config->showTitle()
                 ]
             ]

diff --git a/src/app/code/Komoju/Payments/Observer/RestoreQuoteFromSession.php b/src/app/code/Komoju/Payments/Observer/RestoreQuoteFromSession.php
@@ -49,6 +49,9 @@ public function execute(Observer $observer)
 
             if ($order && $order->getStatus() == Order::STATE_PENDING_PAYMENT) {
                 $this->checkoutSession->restoreQuote();
+            } else {
+                $this->checkoutSession->clearQuote();
+                $this->checkoutSession->clearStorage();
             }
         }
     }

diff --git a/src/app/code/Komoju/Payments/etc/adminhtml/system.xml b/src/app/code/Komoju/Payments/etc/adminhtml/system.xml
@@ -27,6 +27,11 @@
                         <config_path>payment/komoju_payments/secret_key</config_path>
                         <backend_model>Magento\Config\Model\Config\Backend\Encrypted</backend_model>
                     </field>
+                    <field id="publishable_key" translate="label" type="obscure" showInDefault="1" showInWebsite="1" showInStore="1">
+                        <label>Publishable Key</label>
+                        <config_path>payment/komoju_payments/publishable_key</config_path>
+                        <backend_model>Magento\Config\Model\Config\Backend\Encrypted</backend_model>
+                    </field>
                     <field id="webhook_secret_token" translate="label comment" type="obscure" showInDefault="1" showInWebsite="1" showInStore="1">
                         <label>Webhook Secret</label>
                         <comment>The webhook URL will be at /komoju/hostedpage/webhook of this site</comment>

diff --git a/src/app/code/Komoju/Payments/etc/config.xml b/src/app/code/Komoju/Payments/etc/config.xml
@@ -12,6 +12,7 @@
                 <show_title>0</show_title>
                 <merchant_id />
                 <secret_key backend_model="Magento\Config\Model\Config\Backend\Encrypted" />
+                <publishable_key backend_model="Magento\Config\Model\Config\Backend\Encrypted" />
                 <webhook_secret_token backend_model="Magento\Config\Model\Config\Backend\Encrypted" />
 
                 <can_authorize>1</can_authorize>

diff --git a/src/app/code/Komoju/Payments/view/frontend/web/js/view/payment/method-renderer/form.js b/src/app/code/Komoju/Payments/view/frontend/web/js/view/payment/method-renderer/form.js
@@ -79,25 +79,28 @@ define(
             var redirectUrl = url.build('checkout/onepage/success');
             var message = $t("There was an error obtaining the payment token. Please try again.");
 
-            if (self.komojuToken()) {
-                self.sendToken(self.komojuToken()).done(function(response) {
-                    if (response.success) {
-                        if (response.data && response.data.redirect_url) {
-                            redirectUrl = response.data.redirect_url;
-                        }
-                        $.mage.redirect(redirectUrl);
-                    } else {
-                        messageList.addErrorMessage({ message: response.message });
+            if (!self.komojuFieldEnabledMethods.includes(self.komojuMethod()) || !self.komojuToken()) {
+                redirectUrl = this.redirectUrl() + "?payment_method=" + this.komojuMethod();
+                $.mage.redirect(redirectUrl);
+                return;
+            }
+
+            self.sendToken(self.komojuToken()).done(function(response) {
+                if (response.success) {
+                    if (response.data && response.data.redirect_url) {
+                        redirectUrl = response.data.redirect_url;
                     }
-                }).fail(function() {
-                    message = $t("There was an error processing your payment. Please try again.");
-                    messageList.addErrorMessage({ message: message });
+                    $.mage.redirect(redirectUrl);
+                } else {
+                    messageList.addErrorMessage({ message: response.message });
                     fullScreenLoader.stopLoader();
-                });
-            } else {
+                }
+            }).fail(function(error) {
+                console.error('Error during token submission:', error);
+                message = $t("There was an error processing your payment. Please try again.");
                 messageList.addErrorMessage({ message: message });
                 fullScreenLoader.stopLoader();
-            }
+            });
         },
 
         getData: function() {
@@ -108,29 +111,31 @@ define(
         },
 
         placeOrder: function (data, event) {
-            var boundSuper = this._super.bind(this);
             var self = this;
+            var boundSuper = this._super.bind(this);
+            var message = $t("There was an error processing your payment. Please try again.");
 
             if (!this.validate()) {
                 return false;
             }
 
             fullScreenLoader.startLoader();
 
-            if (self.komojuFieldEnabledMethods.includes(self.komojuMethod())) {
-                self.submitPayment().then(function (token) {
-                    self.komojuToken(token);
-                    boundSuper(data, event);
-                }).catch(function () {
-                    var message = $t("There was an error processing your payment. Please try again.");
-
-                    messageList.addErrorMessage({ message: message });
-                    fullScreenLoader.stopLoader();
-                });
-            } else {
+            if (!self.komojuFieldEnabledMethods.includes(self.komojuMethod())) {
                 self.komojuToken(null);
                 boundSuper(data, event);
+                return;
             }
+
+            self.submitPayment().then(function (token) {
+                self.komojuToken(token);
+                boundSuper(data, event);
+            }).catch(function (error) {
+                console.error('Error during token submission:', JSON.stringify(error));
+
+                messageList.addErrorMessage({ message: message });
+                fullScreenLoader.stopLoader();
+            });
         },
 
         sendToken: function (token) {
@@ -196,6 +201,12 @@ define(
             return config.title;
         },
 
+        getPublishableKey: function () {
+            var config = this.getConfig();
+
+            return config.publishable_key;
+        },
+
         getSession: function () {
             return JSON.stringify(this.komojuSession());
         },

diff --git a/src/app/code/Komoju/Payments/view/frontend/web/template/payment/form.html b/src/app/code/Komoju/Payments/view/frontend/web/template/payment/form.html
@@ -8,7 +8,6 @@
   <h3 data-bind="text: getTitle()"></h3>
 <!-- /ko -->
 
-<!-- ko if: isDataLoaded() -->
 <!-- ko foreach: { data: getEnabledPaymentTypes(), as: 'method' } -->
 <div class="payment-method"
     data-bind="
@@ -33,18 +32,19 @@ <h3 data-bind="text: getTitle()"></h3>
     <!-- ko if: $parent.komojuFieldEnabledMethods.includes(method.value) -->
     <div data-bind="visible: $parent.komojuMethod() === method.value">
         <komoju-fields
-            data-bind="attr: { 'session': $parent.getSession(), 'payment-type': method.value }"
+            data-bind="attr: { 'session': $parent.getSession(),
+                'payment-type': method.value,
+                'publishable-key': $parent.getPublishableKey(),
+                'locale': $parent.komojuSession().default_locale,
+            }"
             token = ""
             name="komoju_payment_token"
-            locale="ja"
-            komoju-api="https://komoju.com"
-            publishable-key="pk_test_lgva3j8ims1p3nhk3ut1f88t">
+            komoju-api="https://komoju.com">
         </komoju-fields>
     </div>
     <!-- /ko -->
 </div>
 <!--/ko-->
-<!--/ko-->
 
 <div class="payment-method-content komoju_payment_billing">
     <!-- ko foreach: getRegion('messages') -->