feat(router): added Payment link new design (#2731)

Co-authored-by: Sahkal Poddar <sahkal.poddar@juspay.in>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Kashif <46213975+kashif-m@users.noreply.github.com>
Co-authored-by: Kashif <kashif@protonmail.com>

crates/api_models/src/admin.rs

@@ -463,9 +463,8 @@ pub struct PaymentLinkConfig {
 #[serde(deny_unknown_fields)]
 
 pub struct PaymentLinkColorSchema {
-    pub primary_color: Option<String>,
-    pub primary_accent_color: Option<String>,
-    pub secondary_color: Option<String>,
+    pub background_primary_color: Option<String>,
+    pub sdk_theme: Option<String>,
 }
 
 #[derive(Clone, Debug, Deserialize, ToSchema, Serialize)]

crates/api_models/src/payments.rs

@@ -3150,6 +3150,7 @@ pub struct PaymentLinkDetails {
     pub merchant_logo: String,
     pub return_url: String,
     pub merchant_name: String,
-    pub order_details: Vec<pii::SecretSerdeValue>,
+    pub order_details: Option<Vec<OrderDetailsWithAmount>>,
     pub max_items_visible_after_collapse: i8,
+    pub sdk_theme: Option<String>,
 }

crates/common_utils/src/consts.rs

@@ -29,3 +29,15 @@ pub const SURCHARGE_PERCENTAGE_PRECISION_LENGTH: u8 = 2;
 
 /// Header Key for application overhead of a request
 pub const X_HS_LATENCY: &str = "x-hs-latency";
+
+/// SDK Default Theme const
+pub const DEFAULT_SDK_THEME: &str = "#7EA8F6";
+
+/// Default Payment Link Background color
+pub const DEFAULT_BACKGROUND_COLOR: &str = "#E5E5E5";
+
+/// Default product Img Link
+pub const DEFAULT_PRODUCT_IMG: &str = "https://i.imgur.com/On3VtKF.png";
+
+/// Default Merchant Logo Link
+pub const DEFAULT_MERCHANT_LOGO: &str = "https://i.imgur.com/RfxPFQo.png";

crates/router/src/core/payment_link.rs

@@ -1,6 +1,12 @@
 use api_models::admin as admin_types;
+use common_utils::{
+    consts::{
+        DEFAULT_BACKGROUND_COLOR, DEFAULT_MERCHANT_LOGO, DEFAULT_PRODUCT_IMG, DEFAULT_SDK_THEME,
+    },
+    ext_traits::ValueExt,
+};
 use error_stack::{IntoReport, ResultExt};
-use masking::PeekInterface;
+use masking::{PeekInterface, Secret};
 
 use super::errors::{self, RouterResult, StorageErrorExt};
 use crate::{
@@ -76,12 +82,7 @@ pub async fn intiate_payment_link_flow(
         })
         .transpose()?;
 
-    let order_details = payment_intent
-        .order_details
-        .get_required_value("order_details")
-        .change_context(errors::ApiErrorResponse::MissingRequiredField {
-            field_name: "order_details",
-        })?;
+    let order_details = validate_order_details(payment_intent.order_details)?;
 
     let return_url = if let Some(payment_create_return_url) = payment_intent.return_url {
         payment_create_return_url
@@ -99,6 +100,9 @@ pub async fn intiate_payment_link_flow(
         payment_intent.client_secret,
     )?;
 
+    let (default_sdk_theme, default_background_color) =
+        (DEFAULT_SDK_THEME, DEFAULT_BACKGROUND_COLOR);
+
     let payment_details = api_models::payments::PaymentLinkDetails {
         amount: payment_intent.amount,
         currency,
@@ -116,13 +120,25 @@ pub async fn intiate_payment_link_flow(
         client_secret,
         merchant_logo: payment_link_config
             .clone()
-            .map(|pl_metadata| pl_metadata.merchant_logo.unwrap_or_default())
+            .map(|pl_config| {
+                pl_config
+                    .merchant_logo
+                    .unwrap_or(DEFAULT_MERCHANT_LOGO.to_string())
+            })
             .unwrap_or_default(),
         max_items_visible_after_collapse: 3,
+        sdk_theme: payment_link_config.clone().and_then(|pl_config| {
+            pl_config
+                .color_scheme
+                .map(|color| color.sdk_theme.unwrap_or(default_sdk_theme.to_string()))
+        }),
     };
 
     let js_script = get_js_script(payment_details)?;
-    let css_script = get_color_scheme_css(payment_link_config.clone());
+    let css_script = get_color_scheme_css(
+        payment_link_config.clone(),
+        default_background_color.to_string(),
+    );
     let payment_link_data = services::PaymentLinkFormData {
         js_script,
         sdk_url: state.conf.payment_link.sdk_url.clone(),
@@ -149,38 +165,21 @@ fn get_js_script(
 
 fn get_color_scheme_css(
     payment_link_config: Option<api_models::admin::PaymentLinkConfig>,
+    default_primary_color: String,
 ) -> String {
-    let (default_primary_color, default_accent_color, default_secondary_color) = (
-        "#C6C7C8".to_string(),
-        "#6A8EF5".to_string(),
-        "#0C48F6".to_string(),
-    );
-
-    let (primary_color, primary_accent_color, secondary_color) = payment_link_config
+    let background_primary_color = payment_link_config
         .and_then(|pl_config| {
             pl_config.color_scheme.map(|color| {
-                (
-                    color.primary_color.unwrap_or(default_primary_color.clone()),
                 color
-                        .primary_accent_color
-                        .unwrap_or(default_accent_color.clone()),
-                    color
-                        .secondary_color
-                        .unwrap_or(default_secondary_color.clone()),
-                )
+                    .background_primary_color
+                    .unwrap_or(default_primary_color.clone())
             })
         })
-        .unwrap_or((
-            default_primary_color,
-            default_accent_color,
-            default_secondary_color,
-        ));
+        .unwrap_or(default_primary_color);
 
     format!(
         ":root {{
-      --primary-color: {primary_color};
-      --primary-accent-color: {primary_accent_color};
-      --secondary-color: {secondary_color};
+      --primary-color: {background_primary_color};
     }}"
     )
 }
@@ -203,3 +202,36 @@ fn validate_sdk_requirements(
     })?;
     Ok((pub_key, currency, client_secret))
 }
+
+fn validate_order_details(
+    order_details: Option<Vec<Secret<serde_json::Value>>>,
+) -> Result<
+    Option<Vec<api_models::payments::OrderDetailsWithAmount>>,
+    error_stack::Report<errors::ApiErrorResponse>,
+> {
+    let order_details = order_details
+        .map(|order_details| {
+            order_details
+                .iter()
+                .map(|data| {
+                    data.to_owned()
+                        .parse_value("OrderDetailsWithAmount")
+                        .change_context(errors::ApiErrorResponse::InvalidDataValue {
+                            field_name: "OrderDetailsWithAmount",
+                        })
+                        .attach_printable("Unable to parse OrderDetailsWithAmount")
+                })
+                .collect::<Result<Vec<api_models::payments::OrderDetailsWithAmount>, _>>()
+        })
+        .transpose()?;
+
+    let updated_order_details = order_details.map(|mut order_details| {
+        for order in order_details.iter_mut() {
+            if order.product_img_link.is_none() {
+                order.product_img_link = Some(DEFAULT_PRODUCT_IMG.to_string());
+            }
+        }
+        order_details
+    });
+    Ok(updated_order_details)
+}

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

@@ -112,8 +112,8 @@
       }
 
       #hyper-checkout-merchant-image > img {
-        height: 48px;
-        width: 48px;
+        height: 40px;
+        width: 40px;
       }
 
       #hyper-checkout-cart-image {
@@ -175,8 +175,8 @@
       }
 
       .hyper-checkout-cart-product-image {
-        height: 72px;
-        width: 72px;
+        height: 56px;
+        width: 56px;
       }
 
       .hyper-checkout-card-item-name {
@@ -234,13 +234,21 @@
         background-color: var(--primary-color);
         box-shadow: 0px 1px 10px #f2f2f2;
         display: flex;
+        flex-flow: column;
         align-items: center;
         justify-content: center;
       }
 
       #payment-form-wrap {
-        min-width: 584px;
-        padding: 50px;
+        min-width: 300px;
+        width: 30vw;
+        padding: 20px;
+        background-color: white;
+        border-radius: 3px;
+      }
+
+      .powered-by-hyper {
+        margin-top: 20px;
       }
 
       #hyper-checkout-sdk-header {
@@ -295,28 +303,13 @@
         margin-top: 10px;
       }
 
-      .checkoutButton {
-        height: 48px;
-        border-radius: 25px;
-        width: 100%;
-        border: transparent;
-        background: var(--secondary-color);
-        color: #ffffff;
-        font-weight: 600;
-        cursor: pointer;
-      }
-
       .page-spinner,
       .page-spinner::before,
-      .page-spinner::after,
-      .spinner,
-      .spinner:before,
-      .spinner:after {
+      .page-spinner::after {
         border-radius: 50%;
       }
 
-      .page-spinner,
-      .spinner {
+      .page-spinner {
         color: #ffffff;
         font-size: 22px;
         text-indent: -99999px;
@@ -331,9 +324,7 @@
       }
 
       .page-spinner::before,
-      .page-spinner::after,
-      .spinner:before,
-      .spinner:after {
+      .page-spinner::after {
         position: absolute;
         content: "";
       }
@@ -405,19 +396,6 @@
         }
       }
 
-      .spinner:before {
-        width: 10.4px;
-        height: 20.4px;
-        background: var(--primary-color);
-        border-radius: 20.4px 0 0 20.4px;
-        top: -0.2px;
-        left: -0.2px;
-        -webkit-transform-origin: 10.4px 10.2px;
-        transform-origin: 10.4px 10.2px;
-        -webkit-animation: loading 2s infinite ease 1.5s;
-        animation: loading 2s infinite ease 1.5s;
-      }
-
       #payment-message {
         font-size: 12px;
         font-weight: 500;
@@ -426,19 +404,6 @@
         font-family: "Montserrat";
       }
 
-      .spinner:after {
-        width: 10.4px;
-        height: 10.2px;
-        background: var(--primary-color);
-        border-radius: 0 10.2px 10.2px 0;
-        top: -0.1px;
-        left: 10.2px;
-        -webkit-transform-origin: 0px 10.2px;
-        transform-origin: 0px 10.2px;
-        -webkit-animation: loading 2s infinite ease;
-        animation: loading 2s infinite ease;
-      }
-
       #payment-form {
         max-width: 560px;
         width: 100%;
@@ -447,11 +412,6 @@
       }
 
       @media only screen and (max-width: 1200px) {
-        .checkoutButton {
-          width: 95%;
-          background-color: var(--primary-color);
-        }
-
         .hyper-checkout {
           flex-flow: column;
           margin: 0;
@@ -700,7 +660,7 @@
       </div>
       <div class="hyper-checkout-sdk" id="hyper-checkout-sdk">
         <div id="payment-form-wrap">
-          <form id="payment-form" onsubmit="handleSubmit(); return false;">
+          <form id="payment-form">
             <div id="unified-checkout">
               <div
                 id="orca-element-unified-checkout"
@@ -714,21 +674,80 @@
                   src="http://localhost:9050/?componentName=payment"
                   allow="payment *"
                   style="
-                    border: 0px none;
+                    border: 0px;
                     transition: height 0.35s ease 0s, opacity 0.4s ease 0.1s;
-                    height: 338px;
+                    height: 368px;
                   "
                   width="100%"
                 ></iframe>
               </div>
             </div>
-            <button id="submit" class="checkoutButton payNow">
-              <div class="spinner hidden" id="spinner"></div>
-              <span id="button-text">Pay now</span>
-            </button>
             <div id="payment-message" class="hidden"></div>
           </form>
         </div>
+
+        <div class="powered-by-hyper">
+          <svg
+            id="powerd-by-hyper"
+            xmlns="http://www.w3.org/2000/svg"
+            width="130"
+            height="13"
+            viewBox="0 0 130 13"
+            fill="none"
+          >
+            <path
+              opacity="0.2"
+              d="M0.791016 11.7578H1.64062V9.16992H1.71875C2.00684 9.73145 2.63672 10.0928 3.35938 10.0928C4.69727 10.0928 5.56641 9.02344 5.56641 7.37305V7.36328C5.56641 5.72266 4.69238 4.64355 3.35938 4.64355C2.62695 4.64355 2.04102 4.99023 1.71875 5.57617H1.64062V4.73633H0.791016V11.7578ZM3.16406 9.34082C2.20703 9.34082 1.62109 8.58887 1.62109 7.37305V7.36328C1.62109 6.14746 2.20703 5.39551 3.16406 5.39551C4.12598 5.39551 4.69727 6.1377 4.69727 7.36328V7.37305C4.69727 8.59863 4.12598 9.34082 3.16406 9.34082ZM8.85762 10.0928C10.3566 10.0928 11.2844 9.05762 11.2844 7.37305V7.36328C11.2844 5.67383 10.3566 4.64355 8.85762 4.64355C7.35859 4.64355 6.43086 5.67383 6.43086 7.36328V7.37305C6.43086 9.05762 7.35859 10.0928 8.85762 10.0928ZM8.85762 9.34082C7.86152 9.34082 7.3 8.61328 7.3 7.37305V7.36328C7.3 6.11816 7.86152 5.39551 8.85762 5.39551C9.85371 5.39551 10.4152 6.11816 10.4152 7.36328V7.37305C10.4152 8.61328 9.85371 9.34082 8.85762 9.34082ZM13.223 10H14.0727L15.2445 5.92773H15.3227L16.4994 10H17.3539L18.8285 4.73633H17.9838L16.9486 8.94531H16.8705L15.6938 4.73633H14.8881L13.7113 8.94531H13.6332L12.598 4.73633H11.7484L13.223 10ZM21.7047 10.0928C22.9449 10.0928 23.6969 9.38965 23.8775 8.67676L23.8873 8.6377H23.0377L23.0182 8.68164C22.8766 8.99902 22.4371 9.33594 21.7242 9.33594C20.7867 9.33594 20.1861 8.70117 20.1617 7.6123H23.9508V7.28027C23.9508 5.70801 23.0816 4.64355 21.651 4.64355C20.2203 4.64355 19.2926 5.75684 19.2926 7.38281V7.3877C19.2926 9.03809 20.2008 10.0928 21.7047 10.0928ZM21.6461 5.40039C22.4225 5.40039 22.9986 5.89355 23.0865 6.93359H20.1764C20.2691 5.93262 20.8648 5.40039 21.6461 5.40039ZM25.0691 10H25.9188V6.73828C25.9188 5.9668 26.4949 5.4541 27.3055 5.4541C27.491 5.4541 27.6521 5.47363 27.8279 5.50293V4.67773C27.7449 4.66309 27.5643 4.64355 27.4031 4.64355C26.6902 4.64355 26.1971 4.96582 25.9969 5.51758H25.9188V4.73633H25.0691V10ZM30.6797 10.0928C31.9199 10.0928 32.6719 9.38965 32.8525 8.67676L32.8623 8.6377H32.0127L31.9932 8.68164C31.8516 8.99902 31.4121 9.33594 30.6992 9.33594C29.7617 9.33594 29.1611 8.70117 29.1367 7.6123H32.9258V7.28027C32.9258 5.70801 32.0566 4.64355 30.626 4.64355C29.1953 4.64355 28.2676 5.75684 28.2676 7.38281V7.3877C28.2676 9.03809 29.1758 10.0928 30.6797 10.0928ZM30.6211 5.40039C31.3975 5.40039 31.9736 5.89355 32.0615 6.93359H29.1514C29.2441 5.93262 29.8398 5.40039 30.6211 5.40039ZM35.9875 10.0928C36.7199 10.0928 37.3059 9.74609 37.6281 9.16016H37.7062V10H38.5559V2.64648H37.7062V5.56641H37.6281C37.34 5.00488 36.7102 4.64355 35.9875 4.64355C34.6496 4.64355 33.7805 5.71289 33.7805 7.36328V7.37305C33.7805 9.01367 34.6545 10.0928 35.9875 10.0928ZM36.1828 9.34082C35.2209 9.34082 34.6496 8.59863 34.6496 7.37305V7.36328C34.6496 6.1377 35.2209 5.39551 36.1828 5.39551C37.1398 5.39551 37.7258 6.14746 37.7258 7.36328V7.37305C37.7258 8.58887 37.1398 9.34082 36.1828 9.34082ZM45.2164 10.0928C46.5494 10.0928 47.4234 9.01367 47.4234 7.37305V7.36328C47.4234 5.71289 46.5543 4.64355 45.2164 4.64355C44.4938 4.64355 43.8639 5.00488 43.5758 5.56641H43.4977V2.64648H42.648V10H43.4977V9.16016H43.5758C43.898 9.74609 44.484 10.0928 45.2164 10.0928ZM45.0211 9.34082C44.0641 9.34082 43.4781 8.58887 43.4781 7.37305V7.36328C43.4781 6.14746 44.0641 5.39551 45.0211 5.39551C45.983 5.39551 46.5543 6.1377 46.5543 7.36328V7.37305C46.5543 8.59863 45.983 9.34082 45.0211 9.34082ZM48.7957 11.8457C49.7283 11.8457 50.1629 11.5039 50.5975 10.3223L52.6531 4.73633H51.7596L50.3191 9.06738H50.241L48.7957 4.73633H47.8875L49.8357 10.0049L49.7381 10.3174C49.5477 10.9229 49.2547 11.1426 48.7713 11.1426C48.6541 11.1426 48.5223 11.1377 48.4197 11.1182V11.8164C48.5369 11.8359 48.6834 11.8457 48.7957 11.8457Z"
+              fill="currentColor"
+            ></path>
+            <g opacity="0.4">
+              <path
+                d="M78.42 6.9958C78.42 9.15638 77.085 10.4444 75.2379 10.4444C74.2164 10.4444 73.3269 10.0276 72.9206 9.33816V12.9166H71.4929V3.65235H72.8018L72.9193 4.66772C73.3256 3.97825 74.189 3.5225 75.2366 3.5225C77.017 3.5225 78.4186 4.75861 78.4186 6.9971L78.42 6.9958ZM76.94 6.9958C76.94 5.62985 76.1288 4.78328 74.9492 4.78328C73.8232 4.77029 72.9598 5.62855 72.9598 7.00878C72.9598 8.38901 73.8246 9.18235 74.9492 9.18235C76.0739 9.18235 76.94 8.36304 76.94 6.9958Z"
+                fill="currentColor"
+              ></path>
+              <path
+                d="M86.0132 7.3736H80.8809C80.9071 8.62268 81.7313 9.2732 82.7789 9.2732C83.564 9.2732 84.2197 8.90834 84.494 8.17992H85.9479C85.5939 9.53288 84.3895 10.4444 82.7528 10.4444C80.749 10.4444 79.4271 9.06545 79.4271 6.96978C79.4271 4.87412 80.749 3.50818 82.7397 3.50818C84.7305 3.50818 86.0132 4.83517 86.0132 6.83994V7.3736ZM80.894 6.38419H84.5594C84.481 5.226 83.709 4.6404 82.7397 4.6404C81.7705 4.6404 80.9985 5.226 80.894 6.38419Z"
+                fill="currentColor"
+              ></path>
+              <path
+                d="M88.5407 3.65204C87.8745 3.65204 87.335 4.18829 87.335 4.85048V10.3156H88.7758V5.22703C88.7758 5.06213 88.9104 4.92709 89.0776 4.92709H91.2773V3.65204H88.5407Z"
+                fill="currentColor"
+              ></path>
+              <path
+                d="M69.1899 3.63908L67.3442 9.17039L65.3535 3.65207H63.8082L66.3606 10.2247C66.439 10.4325 66.4782 10.6026 66.4782 10.7713C66.4782 10.8635 66.469 10.9479 66.4533 11.0258L66.4494 11.0401C66.4403 11.0817 66.4298 11.1206 66.4168 11.1583L66.3201 11.5102C66.2966 11.5971 66.2169 11.6569 66.1268 11.6569H64.0956V12.9189H65.5755C66.5709 12.9189 67.3952 12.6852 67.8667 11.3829L70.6817 3.65207L69.1886 3.63908H69.1899Z"
+                fill="currentColor"
+              ></path>
+              <path
+                d="M57 10.3144H58.4264V6.72299C58.4264 5.60375 59.0417 4.82339 60.1807 4.82339C61.1761 4.81041 61.7913 5.396 61.7913 6.68404V10.3144H63.2191V6.46201C63.2191 4.18457 61.8188 3.50809 60.5478 3.50809C59.5785 3.50809 58.8196 3.88593 58.4264 4.51047V0.919022H57V10.3144Z"
+                fill="currentColor"
+              ></path>
+              <path
+                d="M93.1623 8.29808C93.1753 8.98755 93.8167 9.39136 94.6945 9.39136C95.5723 9.39136 96.0948 9.06545 96.0948 8.47986C96.0948 7.97218 95.8336 7.69951 95.0733 7.58135L93.7253 7.34763C92.4164 7.1269 91.9057 6.44912 91.9057 5.49997C91.9057 4.30282 93.097 3.52246 94.6161 3.52246C96.2529 3.52246 97.4442 4.30282 97.4572 5.63111H96.0439C96.0308 4.95463 95.4417 4.57679 94.6174 4.57679C93.7932 4.57679 93.3347 4.90269 93.3347 5.44933C93.3347 5.93105 93.6756 6.15178 94.4215 6.28162L95.7434 6.51534C96.987 6.73607 97.563 7.34763 97.563 8.35002C97.563 9.72895 96.2803 10.4457 94.722 10.4457C92.9546 10.4457 91.7633 9.60041 91.7372 8.29808H93.1649H93.1623Z"
+                fill="currentColor"
+              ></path>
+              <path
+                d="M100.808 8.75352L102.327 3.652H103.82L105.313 8.75352L106.583 3.652H108.089L106.191 10.3155H104.58L103.061 5.23997L101.529 10.3155H99.9052L97.9941 3.652H99.5002L100.809 8.75352H100.808Z"
+                fill="currentColor"
+              ></path>
+              <path
+                d="M108.926 0.918945H110.511V2.40305H108.926V0.918945ZM109.005 3.65214H110.431V10.3157H109.005V3.65214Z"
+                fill="currentColor"
+              ></path>
+              <path
+                d="M119.504 4.7452C118.391 4.7452 117.632 5.55152 117.632 6.9707C117.632 8.46779 118.417 9.19621 119.465 9.19621C120.302 9.19621 120.919 8.72748 121.193 7.84325H122.712C122.371 9.45719 121.141 10.4466 119.491 10.4466C117.502 10.4466 116.165 9.06767 116.165 6.972C116.165 4.87634 117.5 3.51039 119.504 3.51039C121.141 3.51039 122.358 4.43487 122.712 6.04752H121.167C120.932 5.21523 120.289 4.7465 119.504 4.7465V4.7452Z"
+                fill="currentColor"
+              ></path>
+              <path
+                d="M113.959 9.05208C113.875 9.05208 113.809 8.98456 113.809 8.90276V4.91399H115.367V3.65191H113.809V1.86787H112.382V3.02607C112.382 3.44287 112.252 3.65062 111.833 3.65062H111.256V4.91269H112.382V8.50414C112.382 9.66234 113.024 10.3128 114.189 10.3128H115.354V9.05078H113.96L113.959 9.05208Z"
+                fill="currentColor"
+              ></path>
+              <path
+                d="M127.329 3.50801C126.359 3.50801 125.601 3.88585 125.207 4.5104V0.918945H123.781V10.3144H125.207V6.72292C125.207 5.60367 125.823 4.82332 126.962 4.82332C127.957 4.81033 128.572 5.39592 128.572 6.68397V10.3144H130V6.46193C130 4.18449 128.6 3.50801 127.329 3.50801Z"
+                fill="currentColor"
+              ></path>
+            </g>
+          </svg>
+        </div>
       </div>
     </div>
     <div id="hyper-footer" class="hidden">
@@ -787,7 +806,6 @@
         </g>
       </svg>
     </div>
-  </body>
 
     <script>
       {{ payment_details_js_script }}
@@ -807,7 +825,7 @@
         var client_secret = paymentDetails.client_secret;
         const appearance = {
           variables: {
-          colorPrimary: "rgb(0, 109, 249)",
+            colorPrimary: paymentDetails.sdk_theme,
             fontFamily: "Work Sans, sans-serif",
             fontSizeBase: "16px",
             colorText: "rgb(51, 65, 85)",
@@ -826,6 +844,8 @@
 
         const unifiedCheckoutOptions = {
           layout: "tabs",
+          sdkHandleConfirmPayment: true,
+          branding: "never",
           wallets: {
             walletReturnUrl: paymentDetails.return_url,
             style: {
@@ -836,13 +856,23 @@
           },
         };
 
-      const unifiedCheckout = widgets.create("payment", unifiedCheckoutOptions);
+        const unifiedCheckout = widgets.create(
+          "payment",
+          unifiedCheckoutOptions
+        );
         unifiedCheckout.mount("#unified-checkout");
+
+        // Handle button press callback
+        var paymentElement = widgets.getElement("payment");
+        if (paymentElement) {
+          paymentElement.on("confirmTriggered", function (event) {
+            handleSubmit(event);
+          });
+        }
       }
       initialize();
 
       async function handleSubmit(e) {
-      setLoading(true);
         const paymentDetails = window.__PAYMENT_DETAILS;
         const { error, data, status } = await hyper.confirmPayment({
           widgets,
@@ -872,8 +902,6 @@
             showStatus(paymentIntent);
           }
         }
-
-      setLoading(false);
       }
 
       // Fetches the payment status after payment submission
@@ -889,7 +917,9 @@
           return res;
         }
 
-      const { paymentIntent } = await hyper.retrievePaymentIntent(clientSecret);
+        const { paymentIntent } = await hyper.retrievePaymentIntent(
+          clientSecret
+        );
 
         if (!paymentIntent || !paymentIntent.status) {
           return res;
@@ -909,16 +939,6 @@
         }
       }
 
-    function setLoading(showLoader) {
-      if (showLoader) {
-        show(".spinner");
-        hide("#button-text");
-      } else {
-        hide(".spinner");
-        show("#button-text");
-      }
-    }
-
       function show(id) {
         removeClass(id, "hidden");
       }
@@ -1142,7 +1162,9 @@
           "hyper-checkout-merchant-image"
         );
         merchantImageNode.prepend(merchantLogoNode);
-      var footerNode = document.getElementById("hyper-checkout-payment-footer");
+        var footerNode = document.getElementById(
+          "hyper-checkout-payment-footer"
+        );
         footerNode.append(paymentExpiryNode);
       }
 
@@ -1150,7 +1172,9 @@
         const paymentDetails = window.__PAYMENT_DETAILS;
         const orderDetails = paymentDetails.order_details;
         var cartNode = document.getElementById("hyper-checkout-cart");
-      var cartItemsNode = document.getElementById("hyper-checkout-cart-items");
+        var cartItemsNode = document.getElementById(
+          "hyper-checkout-cart-items"
+        );
 
         const MAX_ITEMS_VISIBLE_AFTER_COLLAPSE =
           paymentDetails.max_items_visible_after_collapse;
@@ -1214,7 +1238,8 @@
         // Product price
         var priceNode = document.createElement("div");
         priceNode.className = "hyper-checkout-card-item-price";
-      priceNode.innerText = paymentDetails.currency + " " + item.amount;
+        priceNode.innerText =
+          paymentDetails.currency + " " + item.amount;
         // Append items
         nameAndQuantityWrapperNode.append(productNameNode, quantityNode);
         itemWrapperNode.append(
@@ -1244,7 +1269,9 @@
         var cartItems = [].slice.call(itemsHTMLCollection);
         var dividerItems = [].slice.call(dividerHTMLCollection);
         var isHidden = cartItems.length < orderDetails.length;
-      var cartItemsNode = document.getElementById("hyper-checkout-cart-items");
+        var cartItemsNode = document.getElementById(
+          "hyper-checkout-cart-items"
+        );
         var cartButtonTextNode = document.getElementById(
           "hyper-checkout-cart-button-text"
         );
@@ -1337,7 +1364,9 @@
         sdkHeaderItemNode.append(sdkHeaderAmountNode);
 
         // Append to SDK header's node
-      var sdkHeaderNode = document.getElementById("hyper-checkout-sdk-header");
+        var sdkHeaderNode = document.getElementById(
+          "hyper-checkout-sdk-header"
+        );
         if (sdkHeaderNode !== null) {
           sdkHeaderNode.append(sdkHeaderLogoNode);
           sdkHeaderNode.append(sdkHeaderItemNode);
@@ -1384,4 +1413,5 @@
         window.state.isMobileView = currentWidth <= 1200;
       });
     </script>
+  </body>
 </html>

openapi/openapi_spec.json

@@ -7809,15 +7809,11 @@
       "PaymentLinkColorSchema": {
         "type": "object",
         "properties": {
-          "primary_color": {
+          "background_primary_color": {
             "type": "string",
             "nullable": true
           },
-          "primary_accent_color": {
-            "type": "string",
-            "nullable": true
-          },
-          "secondary_color": {
+          "sdk_theme": {
             "type": "string",
             "nullable": true
           }