From 856c7af77e17599ca0d4d119744ac582e9c3c971 Mon Sep 17 00:00:00 2001 From: Kashif <46213975+kashif-m@users.noreply.github.com> Date: Tue, 14 Nov 2023 15:22:50 +0530 Subject: [PATCH] feat: Payment link status page UI (#2740) Co-authored-by: Kashif Co-authored-by: Sahkal Poddar Co-authored-by: Sahkal Poddar --- .../src/core/payment_link/payment_link.html | 685 ++++++++++-------- 1 file changed, 364 insertions(+), 321 deletions(-) diff --git a/crates/router/src/core/payment_link/payment_link.html b/crates/router/src/core/payment_link/payment_link.html index 67410cac8418..e02bc16e7197 100644 --- a/crates/router/src/core/payment_link/payment_link.html +++ b/crates/router/src/core/payment_link/payment_link.html @@ -1,6 +1,8 @@ + + {{ hyperloader_sdk_link }} @@ -545,22 +599,144 @@ rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800" /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-
+ - -
+ @@ -817,15 +870,22 @@ }; var widgets = null; + var unifiedCheckout = null; const pub_key = window.__PAYMENT_DETAILS.pub_key; const hyper = Hyper(pub_key); + function mountUnifiedCheckout(id) { + if (unifiedCheckout !== null) { + unifiedCheckout.mount(id); + } + } + async function initialize() { const paymentDetails = window.__PAYMENT_DETAILS; var client_secret = paymentDetails.client_secret; const appearance = { variables: { - colorPrimary: paymentDetails.sdk_theme, + colorPrimary: paymentDetails.sdk_theme || "rgb(0, 109, 249)", fontFamily: "Work Sans, sans-serif", fontSizeBase: "16px", colorText: "rgb(51, 65, 85)", @@ -856,11 +916,8 @@ }, }; - const unifiedCheckout = widgets.create( - "payment", - unifiedCheckoutOptions - ); - unifiedCheckout.mount("#unified-checkout"); + unifiedCheckout = widgets.create("payment", unifiedCheckoutOptions); + mountUnifiedCheckout("#unified-checkout"); // Handle button press callback var paymentElement = widgets.getElement("payment"); @@ -890,6 +947,9 @@ } else { showMessage("An unexpected error occurred."); } + + // Re-initialize SDK + mountUnifiedCheckout("#unified-checkout"); } else { const { paymentIntent } = await hyper.retrievePaymentIntent( paymentDetails.client_secret @@ -906,13 +966,19 @@ // Fetches the payment status after payment submission async function checkStatus() { - const clientSecret = new URLSearchParams(window.location.search).get( - "payment_intent_client_secret" - ); + const paymentDetails = window.__PAYMENT_DETAILS; const res = { showSdk: true, }; + let clientSecret = new URLSearchParams(window.location.search).get( + "payment_intent_client_secret" + ); + + if (!clientSecret) { + clientSecret = paymentDetails.client_secret; + } + if (!clientSecret) { return res; } @@ -921,7 +987,10 @@ clientSecret ); - if (!paymentIntent || !paymentIntent.status) { + if ( + !paymentIntent || + paymentIntent.status === "requires_confirmation" + ) { return res; } @@ -950,101 +1019,68 @@ show("#payment-message"); addText("#payment-message", msg); } + function showStatus(paymentDetails) { const status = paymentDetails.status; let statusDetails = { imageSource: "", - message: "", + message: null, status: status, amountText: "", items: [], }; + // Payment details + var paymentId = createItem("Ref Id", paymentDetails.payment_id); + // @ts-ignore + statusDetails.items.push(paymentId); + + // Status specific information switch (status) { case "succeeded": - statusDetails.imageSource = - "http://www.clipartbest.com/cliparts/4ib/oRa/4iboRa7RT.png"; - statusDetails.message = "Payment successful"; - statusDetails.status = "Succeeded"; + statusDetails.imageSource = "https://i.imgur.com/5BOmYVl.img"; + statusDetails.message = + "We have successfully received your payment"; + statusDetails.status = "Paid successfully"; statusDetails.amountText = new Date( paymentDetails.created ).toTimeString(); - - // Payment details - var amountNode = createItem( - "AMOUNT PAID", - paymentDetails.currency + " " + paymentDetails.amount - ); - var paymentId = createItem("PAYMENT ID", paymentDetails.payment_id); - // @ts-ignore - statusDetails.items.push(amountNode, paymentId); break; case "processing": - statusDetails.imageSource = - "http://www.clipartbest.com/cliparts/4ib/oRa/4iboRa7RT.png"; - statusDetails.message = "Payment in progress"; - statusDetails.status = "Processing"; - // Payment details - var amountNode = createItem( - "AMOUNT PAID", - paymentDetails.currency + " " + paymentDetails.amount - ); - var paymentId = createItem("PAYMENT ID", paymentDetails.payment_id); - // @ts-ignore - statusDetails.items.push(amountNode, paymentId); + statusDetails.imageSource = "https://i.imgur.com/Yb79Qt4.png"; + statusDetails.message = + "Sorry! Your payment is taking longer than expected. Please check back again in sometime."; + statusDetails.status = "Payment Pending"; break; case "failed": - statusDetails.imageSource = ""; - statusDetails.message = "Payment failed"; - statusDetails.status = "Failed"; - // Payment details - var amountNode = createItem( - "AMOUNT PAID", - paymentDetails.currency + " " + paymentDetails.amount + statusDetails.imageSource = "https://i.imgur.com/UD8CEuY.png"; + statusDetails.status = "Payment Failed!"; + var errorCodeNode = createItem( + "Error code", + paymentDetails.error_code + ); + var errorMessageNode = createItem( + "Error message", + paymentDetails.error_message ); - var paymentId = createItem("PAYMENT ID", paymentDetails.payment_id); // @ts-ignore - statusDetails.items.push(amountNode, paymentId); + statusDetails.items.push(errorMessageNode, errorCodeNode); break; case "cancelled": - statusDetails.imageSource = ""; - statusDetails.message = "Payment cancelled"; - statusDetails.status = "Cancelled"; - // Payment details - var amountNode = createItem( - "AMOUNT PAID", - paymentDetails.currency + " " + paymentDetails.amount - ); - var paymentId = createItem("PAYMENT ID", paymentDetails.payment_id); - // @ts-ignore - statusDetails.items.push(amountNode, paymentId); + statusDetails.imageSource = "https://i.imgur.com/UD8CEuY.png"; + statusDetails.status = "Payment Cancelled"; break; case "requires_merchant_action": - statusDetails.imageSource = ""; - statusDetails.message = "Payment under review"; - statusDetails.status = "Under review"; - // Payment details - var amountNode = createItem( - "AMOUNT PAID", - paymentDetails.currency + " " + paymentDetails.amount - ); - var paymentId = createItem("PAYMENT ID", paymentDetails.payment_id); - var paymentId = createItem( - "MESSAGE", - "Your payment is under review by the merchant." - ); - // @ts-ignore - statusDetails.items.push(amountNode, paymentId); + statusDetails.imageSource = "https://i.imgur.com/Yb79Qt4.png"; + statusDetails.status = "Payment under review"; break; default: - statusDetails.imageSource = - "http://www.clipartbest.com/cliparts/4ib/oRa/4iboRa7RT.png"; - statusDetails.message = "Something went wrong"; + statusDetails.imageSource = "https://i.imgur.com/UD8CEuY.png"; statusDetails.status = "Something went wrong"; // Error details if (typeof paymentDetails.error === "object") { @@ -1062,36 +1098,52 @@ break; } - // Append status - var statusTextNode = document.getElementById("status-text"); - if (statusTextNode !== null) { - statusTextNode.innerText = statusDetails.message; - } - - // Append image - var statusImageNode = document.getElementById("status-img"); - if (statusImageNode !== null) { - statusImageNode.src = statusDetails.imageSource; - } - - // Append status details - var statusDateNode = document.getElementById("status-date"); - if (statusDateNode !== null) { - statusDateNode.innerText = statusDetails.amountText; - } + // Form header items + var amountNode = document.createElement("div"); + amountNode.className = "hyper-checkout-status-amount"; + amountNode.innerText = + paymentDetails.currency + " " + paymentDetails.amount; + var merchantLogoNode = document.createElement("img"); + merchantLogoNode.className = "hyper-checkout-status-merchant-logo"; + merchantLogoNode.src = ""; + merchantLogoNode.alt = ""; + + // Form content items + var statusImageNode = document.createElement("img"); + statusImageNode.className = "hyper-checkout-status-image"; + statusImageNode.src = statusDetails.imageSource; + var statusTextNode = document.createElement("div"); + statusTextNode.className = "hyper-checkout-status-text"; + statusTextNode.innerText = statusDetails.status; + var statusMessageNode = document.createElement("div"); + statusMessageNode.className = "hyper-checkout-status-message"; + statusMessageNode.innerText = statusDetails.message; + var statusDetailsNode = document.createElement("div"); + statusDetailsNode.className = "hyper-checkout-status-details"; // Append items - var statusItemNode = document.getElementById( - "hyper-checkout-status-items" + statusDetails.items.map((item) => statusDetailsNode?.append(item)); + const statusHeaderNode = document.getElementById( + "hyper-checkout-status-header" ); - if (statusItemNode !== null) { - statusDetails.items.map((item) => statusItemNode?.append(item)); + if (statusHeaderNode !== null) { + statusHeaderNode.append(amountNode, merchantLogoNode); + } + const statusContentNode = document.getElementById( + "hyper-checkout-status-content" + ); + if (statusContentNode !== null) { + statusContentNode.append(statusImageNode, statusTextNode); + if (statusDetails.message !== null) { + statusContentNode.append(statusMessageNode); + } + statusContentNode.append(statusDetailsNode); } } function createItem(heading, value) { var itemNode = document.createElement("div"); - itemNode.className = "hyper-checkout-item"; + itemNode.className = "hyper-checkout-status-item"; var headerNode = document.createElement("div"); headerNode.className = "hyper-checkout-item-header"; headerNode.innerText = heading; @@ -1238,8 +1290,7 @@ // 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( @@ -1336,16 +1387,6 @@ show("#hyper-checkout-cart"); } - function hideCartInMobileView() { - window.history.back(); - hide("#hyper-checkout-cart"); - } - - function viewCartInMobileView() { - show("#hyper-checkout-cart"); - window.history.pushState("view-cart", ""); - } - function renderSDKHeader() { const paymentDetails = window.__PAYMENT_DETAILS; @@ -1389,6 +1430,8 @@ show("#hyper-checkout-sdk"); show("#hyper-checkout-details"); } else { + hide("#hyper-checkout-sdk"); + hide("#hyper-checkout-details"); show("#hyper-checkout-status"); show("#hyper-footer"); }