rust/hyperswitch
1
0
Fork 0
mirror of https://github.com/juspay/hyperswitch.git synced 2025-10-29 17:19:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(payment_links): Update API contract for dynamic transaction details and upgrade UI (#5849)

Browse Source
This commit is contained in:
Sakil Mostak
2024-09-12 18:58:21 +05:30
committed by GitHub
parent 1929f56e2a
commit a96e9f3e22
10 changed files with 210 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
crates/router/src/core/payment_link.rs
View File

@ -9,7 +9,6 @@ use common_utils::{
DEFAULT_ALLOWED_DOMAINS, DEFAULT_BACKGROUND_COLOR, DEFAULT_DISPLAY_SDK_ONLY,
DEFAULT_ENABLE_SAVED_PAYMENT_METHOD, DEFAULT_LOCALE, DEFAULT_MERCHANT_LOGO,
DEFAULT_PRODUCT_IMG, DEFAULT_SDK_LAYOUT, DEFAULT_SESSION_EXPIRY,
DEFAULT_TRANSACTION_DETAILS,
},
ext_traits::{AsyncExt, OptionExt, ValueExt},
types::{AmountConvertor, MinorUnit, StringMajorUnitForCore},
@ -114,7 +113,7 @@ pub async fn form_payment_link_data(
display_sdk_only: DEFAULT_DISPLAY_SDK_ONLY,
enabled_saved_payment_method: DEFAULT_ENABLE_SAVED_PAYMENT_METHOD,
allowed_domains: DEFAULT_ALLOWED_DOMAINS,
transaction_details: DEFAULT_TRANSACTION_DETAILS,
transaction_details: None,
}
};
@ -616,24 +615,8 @@ pub fn get_payment_link_config_based_on_priority(
display_sdk_only,
enabled_saved_payment_method,
allowed_domains,
transaction_details: payment_create_link_config.and_then(|payment_link_config| {
payment_link_config
.theme_config
.transaction_details
.and_then(|transaction_details| {
match serde_json::to_string(&transaction_details).change_context(
errors::ApiErrorResponse::InvalidDataValue {
field_name: "transaction_details",
},
) {
Ok(details) => Some(details),
Err(err) => {
logger::error!("Failed to serialize transaction details: {:?}", err);
None
}
}
})
}),
transaction_details: payment_create_link_config
.and_then(|payment_link_config| payment_link_config.theme_config.transaction_details),
};
Ok((payment_link_config, domain_name))
@ -721,7 +704,7 @@ pub async fn get_payment_link_status(
display_sdk_only: DEFAULT_DISPLAY_SDK_ONLY,
enabled_saved_payment_method: DEFAULT_ENABLE_SAVED_PAYMENT_METHOD,
allowed_domains: DEFAULT_ALLOWED_DOMAINS,
transaction_details: DEFAULT_TRANSACTION_DETAILS,
transaction_details: None,
}
};

8
crates/router/src/core/payment_link/payment_link_initiate/payment_link.css
View File

@ -96,6 +96,10 @@ body {
#hyper-checkout-payment-merchant-dynamic-details {
margin: 20px 20px 10px 20px;
overflow-y: scroll;
max-width: 35vw;
max-height: 10vh;
min-height: 80px;
}
.hyper-checkout-payment-horizontal-line {
@ -714,6 +718,10 @@ body {
flex-flow: column;
flex-direction: column-reverse;
margin: 0;
max-width: 100%;
overflow-y: scroll;
max-height: 10vh;
min-height: 80px;
}
.hyper-checkout-payment-horizontal-line {

47
crates/router/src/core/payment_link/payment_link_initiate/payment_link.js
View File

@ -617,26 +617,57 @@ function renderDynamicMerchantDetails(paymentDetails) {
}
function appendMerchantDetails(paymentDetails, merchantDynamicDetails) {
if (!(typeof paymentDetails.transaction_details === "string" && paymentDetails.transaction_details.length > 0)) {
if (
!(
typeof paymentDetails.transaction_details === "object" &&
Object.keys(paymentDetails.transaction_details).length > 0
)
) {
return;
}
try {
let merchantDetailsObject = JSON.parse(paymentDetails.transaction_details);
let merchantDetailsObject = paymentDetails.transaction_details;
// sort the merchant details based on the position
// if position is null, then it will be shown at the end
merchantDetailsObject.sort((a, b) => {
if (a.ui_configuration === null || a.ui_configuration.position === null)
return 1;
if (b.ui_configuration === null || b.ui_configuration.position === null)
return -1;
if (Object.keys(merchantDetailsObject).length > 0) {
if (typeof a.ui_configuration.position === "number" && typeof b.ui_configuration.position === "number") {
return a.ui_configuration.position - b.ui_configuration.position;
}
else return 0;
});
if (merchantDetailsObject.length > 0) {
// render a horizontal line above dynamic merchant details
var horizontalLineContainer = document.getElementById("hyper-checkout-payment-horizontal-line-container");
var horizontalLineContainer = document.getElementById(
"hyper-checkout-payment-horizontal-line-container",
);
var horizontalLine = document.createElement("hr");
horizontalLine.className = "hyper-checkout-payment-horizontal-line";
horizontalLineContainer.append(horizontalLine);
// max number of items to show in the merchant details
let maxItemsInDetails = 5;
for (var key in merchantDetailsObject) {
let maxItemsInDetails = 50;
for (var item of merchantDetailsObject) {
var merchantData = document.createElement("div");
merchantData.className = "hyper-checkout-payment-merchant-dynamic-data";
merchantData.innerHTML = key+": "+merchantDetailsObject[key].bold();
// make the key and value bold if specified in the ui_configuration
var key = item.ui_configuration
? item.ui_configuration.is_key_bold
? item.key.bold()
: item.key
: item.key;
var value = item.ui_configuration
? item.ui_configuration.is_value_bold
? item.value.bold()
: item.value
: item.value;
merchantData.innerHTML = key + " : " + value;
merchantDynamicDetails.append(merchantData);
if (--maxItemsInDetails === 0) {
@ -667,7 +698,7 @@ function renderCart(paymentDetails) {
var MAX_ITEMS_VISIBLE_AFTER_COLLAPSE =
paymentDetails.max_items_visible_after_collapse;
var yourCartText = document.createElement("span");
var yourCartText = document.getElementById('your-cart-text');
var yourCartText = document.getElementById("your-cart-text");
if (yourCartText) {
yourCartText.textContent = translations.yourCart;
}