feat(payment_link): added display_sdk_only option for displaying only sdk without payment details (#4363)

Author: sahkal

crates/api_models/src/admin.rs

@@ -1065,6 +1065,9 @@ pub struct PaymentLinkConfigRequest {
     /// Custom layout for sdk
     #[schema(value_type = Option<String>, max_length = 255, example = "accordion")]
     pub sdk_layout: Option<String>,
+    /// Display only the sdk for payment link
+    #[schema(default = false, example = true)]
+    pub display_sdk_only: Option<bool>,
 }
 
 #[derive(Clone, Debug, serde::Serialize, serde::Deserialize, PartialEq, ToSchema)]
@@ -1077,4 +1080,6 @@ pub struct PaymentLinkConfig {
     pub seller_name: String,
     /// Custom layout for sdk
     pub sdk_layout: String,
+    /// Display only the sdk for payment link
+    pub display_sdk_only: bool,
 }

crates/api_models/src/payments.rs

@@ -4489,6 +4489,7 @@ pub struct PaymentLinkDetails {
     pub theme: String,
     pub merchant_description: Option<String>,
     pub sdk_layout: String,
+    pub display_sdk_only: bool,
 }
 
 #[derive(Debug, serde::Serialize)]

crates/common_utils/src/consts.rs

@@ -68,3 +68,6 @@ pub const DEFAULT_SDK_LAYOUT: &str = "tabs";
 
 /// Payment intent default client secret expiry (in seconds)
 pub const DEFAULT_SESSION_EXPIRY: i64 = 15 * 60;
+
+/// Default bool for Display sdk only
+pub const DEFAULT_DISPLAY_SDK_ONLY: bool = false;

crates/router/src/core/payment_link.rs

@@ -1,8 +1,8 @@
 use api_models::{admin as admin_types, payments::PaymentLinkStatusWrap};
 use common_utils::{
     consts::{
-        DEFAULT_BACKGROUND_COLOR, DEFAULT_MERCHANT_LOGO, DEFAULT_PRODUCT_IMG, DEFAULT_SDK_LAYOUT,
-        DEFAULT_SESSION_EXPIRY,
+        DEFAULT_BACKGROUND_COLOR, DEFAULT_DISPLAY_SDK_ONLY, DEFAULT_MERCHANT_LOGO,
+        DEFAULT_PRODUCT_IMG, DEFAULT_SDK_LAYOUT, DEFAULT_SESSION_EXPIRY,
     },
     ext_traits::{OptionExt, ValueExt},
 };
@@ -86,6 +86,7 @@ pub async fn initiate_payment_link_flow(
             logo: DEFAULT_MERCHANT_LOGO.to_string(),
             seller_name: merchant_name_from_merchant_account,
             sdk_layout: DEFAULT_SDK_LAYOUT.to_owned(),
+            display_sdk_only: DEFAULT_DISPLAY_SDK_ONLY,
         }
     };
 
@@ -213,6 +214,7 @@ pub async fn initiate_payment_link_flow(
         theme: payment_link_config.theme.clone(),
         merchant_description: payment_intent.description,
         sdk_layout: payment_link_config.sdk_layout.clone(),
+        display_sdk_only: payment_link_config.display_sdk_only,
     };
 
     let js_script = get_js_script(&api_models::payments::PaymentLinkData::PaymentLinkDetails(
@@ -440,11 +442,23 @@ pub fn get_payment_link_config_based_on_priority(
         })
         .unwrap_or(DEFAULT_SDK_LAYOUT.to_owned());
 
+    let display_sdk_only = payment_create_link_config
+        .as_ref()
+        .and_then(|pc_config| {
+            pc_config.config.display_sdk_only.or_else(|| {
+                business_config
+                    .as_ref()
+                    .and_then(|business_config| business_config.display_sdk_only)
+            })
+        })
+        .unwrap_or(DEFAULT_DISPLAY_SDK_ONLY);
+
     let payment_link_config = admin_types::PaymentLinkConfig {
         theme,
         logo,
         seller_name,
         sdk_layout,
+        display_sdk_only,
     };
 
     Ok((payment_link_config, domain_name))
@@ -521,6 +535,7 @@ pub async fn get_payment_link_status(
             logo: DEFAULT_MERCHANT_LOGO.to_string(),
             seller_name: merchant_name_from_merchant_account,
             sdk_layout: DEFAULT_SDK_LAYOUT.to_owned(),
+            display_sdk_only: DEFAULT_DISPLAY_SDK_ONLY,
         }
     };
 

crates/router/src/core/payment_link/payment_link_initiate/payment_link.html

@@ -193,7 +193,7 @@
         </div>
         <div id="hyper-checkout-status-redirect-message"></div>
       </div>
-      <div class="main" id="hyper-checkout-details">
+      <div class="main checkout-page" id="hyper-checkout-details">
         <div id="hyper-checkout-payment" class="hyper-checkout-payment">
           <div class="hyper-checkout-payment-content-details">
             <div class="content-details-wrap">

crates/router/src/core/payment_link/payment_link_initiate/payment_link.js

@@ -194,38 +194,52 @@ function boot() {
 
   // @ts-ignore
   var paymentDetails = window.__PAYMENT_DETAILS;
-  var orderDetails = paymentDetails.order_details;
-  if (orderDetails!==null) {
-    var charges = 0;
 
-    for (var i = 0; i < orderDetails.length; i++) {
-      charges += parseFloat(orderDetails[i].amount * orderDetails[i].quantity);
-    }
-    orderDetails.push({
-      "amount": (paymentDetails.amount - charges).toFixed(2),
-      "product_img_link": "https://live.hyperswitch.io/payment-link-assets/cart_placeholder.png",
-      "product_name": "Miscellaneous charges\n" +
-                      "(includes taxes, shipping, discounts, offers etc.)",
-      "quantity": null
-    });
+  if (paymentDetails.display_sdk_only) {
+    hide(".checkout-page")
+    var sdkDisplayWidth = document.querySelector('.hyper-checkout-sdk');
+    sdkDisplayWidth.style.width = '100vw';
   }
+  else {
+    var orderDetails = paymentDetails.order_details;
+    if (orderDetails!==null) {
+      var charges = 0;
+
+      for (var i = 0; i < orderDetails.length; i++) {
+        charges += parseFloat(orderDetails[i].amount * orderDetails[i].quantity);
+      }
+      orderDetails.push({
+        "amount": (paymentDetails.amount - charges).toFixed(2),
+        "product_img_link": "https://live.hyperswitch.io/payment-link-assets/cart_placeholder.png",
+        "product_name": "Miscellaneous charges\n" +
+                        "(includes taxes, shipping, discounts, offers etc.)",
+        "quantity": null
+      });
+    }
 
-  if (paymentDetails.merchant_name) {
-    document.title = "Payment requested by " + paymentDetails.merchant_name;
+    if (paymentDetails.merchant_name) {
+      document.title = "Payment requested by " + paymentDetails.merchant_name;
+    }
+
+    if (paymentDetails.merchant_logo) {
+      var link = document.createElement("link");
+      link.rel = "icon";
+      link.href = paymentDetails.merchant_logo;
+      link.type = "image/x-icon";
+      document.head.appendChild(link);
+    }
   }
+  // Render UI
 
-  if (paymentDetails.merchant_logo) {
-    var link = document.createElement("link");
-    link.rel = "icon";
-    link.href = paymentDetails.merchant_logo;
-    link.type = "image/x-icon";
-    document.head.appendChild(link);
+  if (paymentDetails.display_sdk_only){
+    renderSDKHeader(paymentDetails);
+  }
+  else{
+    renderPaymentDetails(paymentDetails);
+    renderCart(paymentDetails);
+    renderSDKHeader(paymentDetails);
   }
 
-  // Render UI
-  renderPaymentDetails(paymentDetails);
-  renderSDKHeader(paymentDetails);
-  renderCart(paymentDetails);
 
   // Deal w loaders
   show("#sdk-spinner");
@@ -355,9 +369,11 @@ function initializeEventListeners(paymentDetails) {
  * Trigger - post mounting SDK
  * Use - set relevant classes to elements in the doc for showing SDK
  **/
-function showSDK() {
+function showSDK(display_sdk_only) {
+  if (!display_sdk_only) {
+    show("#hyper-checkout-details");
+  }
   show("#hyper-checkout-sdk");
-  show("#hyper-checkout-details");
   show("#submit");
   show("#unified-checkout");
   hide("#sdk-spinner");
@@ -420,7 +436,7 @@ function initializeSDK() {
   };
   unifiedCheckout = widgets.create("payment", unifiedCheckoutOptions);
   mountUnifiedCheckout("#unified-checkout");
-  showSDK();
+  showSDK(paymentDetails.display_sdk_only);
 
   let shimmer = document.getElementById("payment-details-shimmer");
   shimmer.classList.add("reduce-opacity")

openapi/openapi_spec.json

@@ -12137,7 +12137,8 @@
           "theme",
           "logo",
           "seller_name",
-          "sdk_layout"
+          "sdk_layout",
+          "display_sdk_only"
         ],
         "properties": {
           "theme": {
@@ -12155,6 +12156,10 @@
           "sdk_layout": {
             "type": "string",
             "description": "Custom layout for sdk"
+          },
+          "display_sdk_only": {
+            "type": "boolean",
+            "description": "Display only the sdk for payment link"
           }
         }
       },
@@ -12188,6 +12193,13 @@
             "example": "accordion",
             "nullable": true,
             "maxLength": 255
+          },
+          "display_sdk_only": {
+            "type": "boolean",
+            "description": "Display only the sdk for payment link",
+            "default": false,
+            "example": true,
+            "nullable": true
           }
         }
       },