@mopay/node-sdk 0.1.3 → 0.1.5

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.5";
 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,8 +138,20 @@ function openDialog(paymentUrl, options, controller) {
     closeButton.addEventListener("click", () => dialog.close());
     loader.className = "mopay-checkout-loader";
     loader.setAttribute("aria-hidden", "true");
+    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);
-    dialog.append(shell);
+    dialog.append(shell, footer);
     document.body.append(dialog);
     controller.setSource(frame.contentWindow);
     dialog.addEventListener("close", () => {
@@ -163,6 +179,8 @@ function injectDialogStyles() {
     style.id = CHECKOUT_STYLE_ID;
     style.textContent = `
 .mopay-checkout-dialog {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) 30px;
   width: min(var(--mopay-checkout-width), var(--mopay-checkout-max-width));
   height: min(var(--mopay-checkout-height), var(--mopay-checkout-max-height));
   min-width: min(var(--mopay-checkout-min-width), calc(100vw - 32px));
@@ -211,6 +229,24 @@ function injectDialogStyles() {
   opacity: 1;
 }
 
+.mopay-checkout-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 30px;
+  background: transparent;
+  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.5",
   "description": "Official TypeScript SDK for the MoPay payment API.",
   "type": "module",
   "source": "src/index.ts",