fix(payment_link): Payment link render issue when `transaction_detail…

…s` not passed (#5948)
juspay · Sep 23, 2024 · 035906e · 035906e
1 parent 19e52b4
commit 035906e
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/crates/router/src/core/payment_link/payment_link_initiate/payment_link.css b/crates/router/src/core/payment_link/payment_link_initiate/payment_link.css
@@ -99,7 +99,6 @@ body {
   overflow-y: scroll;
   max-width: 35vw;
   max-height: 10vh;
-  min-height: 80px;
 }
 
 .hyper-checkout-payment-horizontal-line {
@@ -721,7 +720,6 @@ body {
     max-width: 100%;
     overflow-y: scroll;
     max-height: 10vh;
-    min-height: 80px;
   }
 
   .hyper-checkout-payment-horizontal-line {

diff --git a/crates/router/src/core/payment_link/payment_link_initiate/payment_link.html b/crates/router/src/core/payment_link/payment_link_initiate/payment_link.html
@@ -226,7 +226,7 @@
               </div>
             </div>
             <div id="hyper-checkout-payment-horizontal-line-container"></div>
-            <div id="hyper-checkout-payment-merchant-dynamic-details"></div>
+            <div id="hyper-checkout-payment-merchant-dynamic-details" class="hidden"></div>
             <div id="hyper-checkout-payment-footer"></div>
           </div>
         </div>

diff --git a/crates/router/src/core/payment_link/payment_link_initiate/payment_link.js b/crates/router/src/core/payment_link/payment_link_initiate/payment_link.js
@@ -619,8 +619,8 @@ function renderDynamicMerchantDetails(paymentDetails) {
 function appendMerchantDetails(paymentDetails, merchantDynamicDetails) {
   if (
     !(
-      typeof paymentDetails.transaction_details === "object" &&
-      Object.keys(paymentDetails.transaction_details).length > 0
+      Array.isArray(paymentDetails.transaction_details) &&
+      paymentDetails.transaction_details.length > 0
     )
   ) {
     return;
@@ -643,6 +643,10 @@ function appendMerchantDetails(paymentDetails, merchantDynamicDetails) {
     });
 
     if (merchantDetailsObject.length > 0) {
+      // show the dynamic merchant details container
+      show("#hyper-checkout-payment-merchant-dynamic-details");
+      // set min-height for the dynamic merchant details container
+      merchantDynamicDetails.style.minHeight = "80px";
       // render a horizontal line above dynamic merchant details
       var horizontalLineContainer = document.getElementById(
         "hyper-checkout-payment-horizontal-line-container",