@mopay/node-sdk 0.1.3 → 0.1.4

package/dist/base.js

@@ -2,7 +2,7 @@ import { MoPayAPIError } from "./errors.js";
 const DEFAULT_BASE_URL = "https://mopay.co.ls";
 const DEFAULT_TIMEOUT_MS = 30000;
 const SDK_NAME = "@mopay/node-sdk";
-const SDK_VERSION = "0.1.3";
+const SDK_VERSION = "0.1.4";
 export class Base {
     apiKey;
     baseUrl;

package/dist/checkout.js

@@ -108,6 +108,10 @@ function openDialog(paymentUrl, options, controller) {
     const closeLineA = document.createElement("span");
     const closeLineB = document.createElement("span");
     const loader = document.createElement("div");
+    const footer = document.createElement("div");
+    const shield = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    const shieldPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    const footerText = document.createElement("span");
     dialog.setAttribute("aria-label", "MoPay checkout");
     dialog.className = `mopay-checkout-dialog${options.resizable ? " is-resizable" : ""}`;
     dialog.style.setProperty("--mopay-checkout-width", toPixels(options.width || DEFAULT_DIALOG_WIDTH));
@@ -134,7 +138,19 @@ function openDialog(paymentUrl, options, controller) {
     closeButton.addEventListener("click", () => dialog.close());
     loader.className = "mopay-checkout-loader";
     loader.setAttribute("aria-hidden", "true");
-    shell.append(loader, closeButton, frame);
+    shield.setAttribute("viewBox", "0 0 24 24");
+    shield.setAttribute("fill", "none");
+    shield.setAttribute("stroke", "currentColor");
+    shield.setAttribute("stroke-width", "2");
+    shield.setAttribute("stroke-linecap", "round");
+    shield.setAttribute("stroke-linejoin", "round");
+    shield.setAttribute("aria-hidden", "true");
+    shieldPath.setAttribute("d", "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z");
+    shield.append(shieldPath);
+    footer.className = "mopay-checkout-footer";
+    footerText.textContent = "powered by MoPay";
+    footer.append(shield, footerText);
+    shell.append(loader, closeButton, frame, footer);
     dialog.append(shell);
     document.body.append(dialog);
     controller.setSource(frame.contentWindow);
@@ -189,6 +205,8 @@ function injectDialogStyles() {
 
 .mopay-checkout-shell {
   position: relative;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) 34px;
   width: 100%;
   height: 100%;
   border: 1px solid rgb(255 255 255 / 82%);
@@ -201,6 +219,7 @@ function injectDialogStyles() {
   display: block;
   width: 100%;
   height: 100%;
+  min-height: 0;
   border: 0;
   background: #ffffff;
   opacity: 0;
@@ -211,6 +230,25 @@ function injectDialogStyles() {
   opacity: 1;
 }
 
+.mopay-checkout-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 34px;
+  border-top: 1px solid #eef2f6;
+  background: #ffffff;
+  color: #667085;
+  font: 600 12px/1.2 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+.mopay-checkout-footer svg {
+  width: 14px;
+  height: 14px;
+  color: #10b981;
+  flex: 0 0 auto;
+}
+
 .mopay-checkout-close {
   position: absolute;
   top: 6px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mopay/node-sdk",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Official TypeScript SDK for the MoPay payment API.",
   "type": "module",
   "source": "src/index.ts",