Revert "Revert "[MIT-1911] Whitelabel installment" (#487)" (#491)

This reverts commit d936ae8.
omise · Sep 11, 2024 · 128bfab · 128bfab
1 parent b25e8b6
commit 128bfab
Show file tree

Hide file tree

Showing 7 changed files with 372 additions and 82 deletions.
diff --git a/Gateway/Request/APMBuilder.php b/Gateway/Request/APMBuilder.php
@@ -45,6 +45,11 @@
 
 class APMBuilder implements BuilderInterface
 {
+    /**
+     * @var string
+     */
+    const CARD = 'card';
+
     /**
      * @var string
      */
@@ -187,13 +192,15 @@ public function build(array $buildSubject)
                 ];
                 break;
             case Installment::CODE:
-                $installmentId = $method->getAdditionalInformation(InstallmentDataAssignObserver::OFFSITE);
-                $paymentInfo[self::SOURCE] = [
-                    self::SOURCE_TYPE              => $installmentId,
-                    self::SOURCE_INSTALLMENT_TERMS => $method->getAdditionalInformation(
-                        InstallmentDataAssignObserver::TERMS
-                    )
-                ];
+                $card = $method->getAdditionalInformation(InstallmentDataAssignObserver::CARD);
+                if ($card !== null) {
+                    $paymentInfo[self::CARD] = $card;
+                }
+
+                $source = $method->getAdditionalInformation(InstallmentDataAssignObserver::SOURCE);
+                if ($source !== null) {
+                    $paymentInfo[self::SOURCE] = $source;
+                }
                 break;
             case Truemoney::CODE:
                 $paymentInfo[self::SOURCE] = $this->getTruemoneySourceData($method);

diff --git a/Gateway/Request/PaymentDataBuilder.php b/Gateway/Request/PaymentDataBuilder.php
@@ -115,6 +115,18 @@ public function build(array $buildSubject)
             $requestBody[self::METADATA]['secure_form_enabled'] = $this->ccConfig->getSecureForm();
         }
 
+        if (Installment::CODE === $method->getMethod()) {
+            $card = $method->getAdditionalInformation(InstallmentDataAssignObserver::CARD);
+            if ($card !== null) {
+                $requestBody['card'] = $card;
+            }
+
+            $source = $method->getAdditionalInformation(InstallmentDataAssignObserver::SOURCE);
+            if ($source !== null) {
+                $requestBody['source'] = $source;
+            }
+        }
+
         return $requestBody;
     }
 

diff --git a/Observer/InstallmentDataAssignObserver.php b/Observer/InstallmentDataAssignObserver.php
@@ -16,12 +16,16 @@ class InstallmentDataAssignObserver extends OffsiteDataAssignObserver
      * @var string
      */
     const TERMS   = 'terms';
+    const CARD    = 'card';
+    const SOURCE  = 'source';
 
     /**
      * @var array
      */
     protected $additionalInformationList = [
         self::OFFSITE,
-        self::TERMS
+        self::TERMS,
+        self::CARD,
+        self::SOURCE,
     ];
 }
diff --git a/Test/Unit/Gateway/Request/APMBuilders/InstallmentAPMBuilderTest.php b/Test/Unit/Gateway/Request/APMBuilders/InstallmentAPMBuilderTest.php
@@ -0,0 +1,43 @@
+<?php
+
+namespace Omise\Payment\Test\Unit\Gateway\Request\APMBuilders;
+
+use Magento\Payment\Gateway\Data\PaymentDataObject;
+use Omise\Payment\Gateway\Request\APMBuilder;
+use Omise\Payment\Helper\OmiseMoney;
+use Omise\Payment\Model\Config\Installment;
+use Omise\Payment\Test\Unit\Gateway\Request\APMBuilders\APMBuilderTest;
+
+class InstallmentAPMBuilderTest extends APMBuilderTest
+{
+    /**
+     * @covers Omise\Payment\Gateway\Request\APMBuilder
+     */
+    public function testApmBuilderForInstallment()
+    {
+        $this->infoMock->method('getMethod')->willReturn(Installment::CODE);
+        $this->returnUrlHelper->method('create')->willReturn([
+            'url' => 'https://omise.co/complete',
+            'card' => 'mock_card',
+            'source' => 'mock_source',
+            'token' => 'mock_token'
+        ]);
+        $this->infoMock->method('getAdditionalInformation')->willReturn('mock_source');
+
+        $this->builder = new APMBuilder(
+            $this->returnUrlHelper,
+            $this->config,
+            $this->capabilities,
+            new OmiseMoney(),
+            $this->requestHelper
+        );
+
+        $result = $this->builder->build(['payment' => new PaymentDataObject(
+            $this->orderMock,
+            $this->infoMock
+        )]);
+
+        $this->assertEquals('mock_source', $result['source']);
+        $this->assertEquals('https://omise.co/complete', $result['return_uri']);
+    }
+}
diff --git a/view/frontend/web/js/view/payment/method-renderer/omise-cc-method.js b/view/frontend/web/js/view/payment/method-renderer/omise-cc-method.js
@@ -8,7 +8,9 @@ define(
         'Magento_Payment/js/model/credit-card-validation/validator',
         'Magento_Checkout/js/model/full-screen-loader',
         'Magento_Checkout/js/action/redirect-on-success',
-        'Magento_Checkout/js/model/quote'
+        'Magento_Checkout/js/model/quote',
+        'Magento_Checkout/js/checkout-data',
+        'Magento_Checkout/js/action/select-payment-method'
     ],
     function (
         ko,
@@ -19,7 +21,9 @@ define(
         validator,
         fullScreenLoader,
         redirectOnSuccessAction,
-        quote
+        quote,
+        checkoutData,
+        selectPaymentMethodAction
     ) {
         'use strict'
 
@@ -85,80 +89,98 @@ define(
                 return this
             },
 
+            selectPaymentMethod: function () {
+                this._super();
+                selectPaymentMethodAction(this.getData());
+                checkoutData.setSelectedPaymentMethod(this.item.method);
+                OmiseCard.destroy();
+                setTimeout(() => {
+                    if (this.isSecureForm()) {
+                        const element = document.querySelector('.omise-card-form')
+                        if(element) {
+                            this.applyOmiseJsToElement(this, element)
+                        }
+                    }
+                }, 300);
+
+                return true
+            },
+
             isSecureForm: function () {
                 return window.checkoutConfig.payment.omise_cc.secureForm === 'yes'
             },
 
             openOmiseJs: function () {
-                const self = this
                 ko.bindingHandlers.omiseCardForm = {
-                    init: function (element) {
-                        const hideRememberCard = !self.isCustomerLoggedIn()
-                        const iframeHeightMatching = {
-                            '40px': 258,
-                            '44px': 270,
-                            '48px': 282,
-                            '52px': 295,
-                        }
+                    init: (element) => this.applyOmiseJsToElement(this, element)
+                }
+            },
+
+            applyOmiseJsToElement: function (self, element) {
+                const hideRememberCard = !self.isCustomerLoggedIn()
+                const iframeHeightMatching = {
+                    '40px': 258,
+                    '44px': 270,
+                    '48px': 282,
+                    '52px': 295,
+                }
 
-                        const localeMatching = {
-                            en_US: 'en',
-                            ja_JP: 'ja',
-                            th_TH: 'th'
+                const localeMatching = {
+                    en_US: 'en',
+                    ja_JP: 'ja',
+                    th_TH: 'th'
+                }
+
+                const { theme, locale, formDesign } = window.checkoutConfig.payment.omise_cc
+                const { font, input, checkbox } = formDesign
+                let iframeElementHeight = iframeHeightMatching[input.height]
+                if (hideRememberCard) {
+                    iframeElementHeight = iframeElementHeight - 25
+                }
+                element.style.height = iframeElementHeight + 'px'
+
+                OmiseCard.configure({
+                    publicKey: self.getPublicKey(),
+                    element,
+                    locale: localeMatching[locale] ?? 'en',
+                    customCardForm: true,
+                    customCardFormTheme: theme,
+                    style: {
+                        fontFamily: font.name,
+                        fontSize: font.size,
+                        input: {
+                            height: input.height,
+                            borderRadius: input.border_radius,
+                            border: `1.2px solid ${input.border_color}`,
+                            focusBorder: `1.2px solid ${input.active_border_color}`,
+                            background: input.background_color,
+                            color: input.text_color,
+                            labelColor: input.label_color,
+                            placeholderColor: input.placeholder_color,
+                        },
+                        checkBox: {
+                            textColor: checkbox.text_color,
+                            themeColor: checkbox.theme_color,
+                            border: `1.2px solid ${input.border_color}`,
                         }
+                    },
+                    customCardFormHideRememberCard: hideRememberCard
+                })
 
-                        const { theme, locale, formDesign } = window.checkoutConfig.payment.omise_cc
-                        const { font, input, checkbox } = formDesign
-                        let iframeElementHeight = iframeHeightMatching[input.height]
-                        if (hideRememberCard) {
-                            iframeElementHeight = iframeElementHeight - 25
+                OmiseCard.open({
+                    onCreateTokenSuccess: (payload) => {
+                        self.createOrder(self, payload)
+                    },
+                    onError: (err) => {
+                        if (err.length > 0) {
+                            self.omiseCardError(err.length == 1 ? err[0] : 'Please enter required card information.')
                         }
-                        element.style.height = iframeElementHeight + 'px'
-
-                        OmiseCard.configure({
-                            publicKey: self.getPublicKey(),
-                            element,
-                            locale: localeMatching[locale] ?? 'en',
-                            customCardForm: true,
-                            customCardFormTheme: theme,
-                            style: {
-                                fontFamily: font.name,
-                                fontSize: font.size,
-                                input: {
-                                    height: input.height,
-                                    borderRadius: input.border_radius,
-                                    border: `1.2px solid ${input.border_color}`,
-                                    focusBorder: `1.2px solid ${input.active_border_color}`,
-                                    background: input.background_color,
-                                    color: input.text_color,
-                                    labelColor: input.label_color,
-                                    placeholderColor: input.placeholder_color,
-                                },
-                                checkBox: {
-                                    textColor: checkbox.text_color,
-                                    themeColor: checkbox.theme_color,
-                                    border: `1.2px solid ${input.border_color}`,
-                                }
-                            },
-                            customCardFormHideRememberCard: hideRememberCard
-                        })
-
-                        OmiseCard.open({
-                            onCreateTokenSuccess: (payload) => {
-                                self.createOrder(self, payload)
-                            },
-                            onError: (err) => {
-                                if (err.length > 0) {
-                                    self.omiseCardError(err.length == 1 ? err[0] : 'Please enter required card information.')
-                                }
-                                else {
-                                    self.omiseCardError('Something went wrong. Please refresh the page and try again.')
-                                }
-                                self.stopPerformingPlaceOrderAction()
-                            }
-                        })
+                        else {
+                            self.omiseCardError('Something went wrong. Please refresh the page and try again.')
+                        }
+                        self.stopPerformingPlaceOrderAction()
                     }
-                }
+                })
             },
 
             createOrder: function (self, payload) {