+
@@ -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");
}