Resolve issue of payment failing on installment when total amount is …

…updated after selecting payment (#485)

* Resolve issue of failing installment amount when cart is updated changing total amount.

* Resolve installment payment issue in WooCommerce blocks.

assets/javascripts/omise-payment-form-handler.js

@@ -257,7 +257,7 @@
 			showOmiseInstallmentForm({
 				element: omiseInstallmentElement,
 				publicKey: omise_installment_params.key,
-				amount: omise_installment_params.amount,
+				amount: OMISE_UPDATED_CART_AMOUNT,
 				locale: LOCALE,
 				onSuccess: handleCreateOrder,
 				onError: (error) => {

includes/blocks/assets/js/build/omise_installment.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wc-blocks-registry', 'wc-settings', 'wp-element', 'wp-html-entities', 'wp-i18n'), 'version' => 'c95a8877d63c5c3bb2fda93273b0a81a');
+<?php return array('dependencies' => array('react', 'wc-blocks-registry', 'wc-settings', 'wp-element', 'wp-html-entities', 'wp-i18n'), 'version' => 'e2436da6ade36f0dc6835eb771337040');

includes/blocks/assets/js/omise-installment.js

@@ -1,4 +1,4 @@
-import {useEffect, useRef} from '@wordpress/element';
+import {useEffect, useRef, useState} from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import { registerPaymentMethod } from '@woocommerce/blocks-registry';
@@ -11,6 +11,9 @@ const Label = ( props ) => {
     return <PaymentMethodLabel text={ label } />
 }
 
+const {select, subscribe} = window.wp.data;
+const cartStoreKey = window.wc.wcBlocksData.CART_STORE_KEY;
+
 const InstallmentPaymentMethod = (props) => {
     const {eventRegistration, emitResponse} = props;
     const {onPaymentSetup, onCheckoutValidation, onCheckoutFail} = eventRegistration;
@@ -20,17 +23,26 @@ const InstallmentPaymentMethod = (props) => {
     const el = useRef(null);
     const wlbInstallmentRef = useRef(null);
     const cardFormErrors = useRef(null);
+    const totalAmount = useRef(null);
 
     const loadInstallmentForm = () => {
         if (installments_enabled) {
+            // Getting the new total price that might be updated when shipping method
+            // was updated while other payment method was selected
+            const cart = select( cartStoreKey ).getCartData();
+            totalAmount.current = cart.totals.total_price
+
             let locale = settings.locale.toLowerCase();
             let supportedLocales = ['en', 'th', 'ja'];
             locale = supportedLocales.includes(locale) ? locale : 'en';
 
+            // removing previous iframe if there is any
+            el.current.innerHTML = "";
+
             showOmiseInstallmentForm({
                 element: el.current,
                 publicKey: public_key,
-                amount: total_amount,
+                amount: totalAmount.current,
                 locale,
                 onSuccess: (payload) => {
                     wlbInstallmentRef.current = payload;
@@ -42,6 +54,18 @@ const InstallmentPaymentMethod = (props) => {
         }
     }
 
+    // Update total amount on cart update. We need this to send the update amount to the source API
+    const onCartChange = () => {
+        const cart = select( cartStoreKey ).getCartData();
+        totalAmount.current = cart.totals.total_price;
+        loadInstallmentForm()
+    }
+
+    useEffect(() => {
+        const unsubscribe = subscribe( onCartChange, cartStoreKey );
+        return unsubscribe;
+    }, [cartStoreKey])
+
     useEffect(() => {
         loadInstallmentForm();
 	}, [installments_enabled])

includes/class-omise-capabilities.php

@@ -98,7 +98,7 @@ public static function isFromCheckoutPage()
 			return false;
 		}
 
-		$endpoints = ['checkout', 'batch'];
+		$endpoints = ['checkout', 'batch', 'cart/select-shipping-rate'];
 
 		foreach($endpoints as $endpoint) {
 			if (trim($wp->request) !== '') {

templates/payment/form-installment.php

@@ -3,6 +3,7 @@
 if ( ! empty( $viewData['installments_enabled'] ) ) : ?>
 	<div id="omise-installment" style="width:100%; max-width: 400px;"></div>
 	<script>
+		window.OMISE_UPDATED_CART_AMOUNT= `<?php echo $viewData['total_amount']; ?>`;
 		window.LOCALE = `<?php echo get_locale(); ?>`;
 		window.OMISE_CUSTOM_FONT_OTHER = 'Other';
 	</script>