@jupiterdo/sdk 0.1.0

package/README.md

@@ -0,0 +1,3 @@
+# Jupiter SDK
+
+JavaScript SDK for integrating Jupiter payments in your web application.

package/dist/api.d.ts

@@ -0,0 +1,13 @@
+import type { JupiterConfig } from "./types";
+/**
+ * API client for communicating with Jupiter backend
+ */
+export declare class JupiterAPI {
+    private apiKey;
+    private baseUrl;
+    constructor(config: JupiterConfig);
+    createPaymentLink(amount: number, referenceId?: string): Promise<{
+        slug: string;
+        amount: number;
+    }>;
+}

package/dist/constants.d.ts

@@ -0,0 +1,16 @@
+/**
+ * API base URLs for different environments
+ */
+export declare const API_URLS: {
+    readonly production: "https://api.jupiter.do";
+    readonly sandbox: "https://api-sandbox.jupiter.do";
+    readonly localhost: "http://localhost:8000";
+};
+/**
+ * App URLs for different environments
+ */
+export declare const APP_URLS: {
+    readonly production: "https://jupiter.do";
+    readonly sandbox: "https://sandbox.jupiter.do";
+    readonly localhost: "http://localhost:3000";
+};

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Jupiter JavaScript SDK
+ *
+ * @packageDocumentation
+ */
+export { Jupiter } from "./jupiter";
+export { Modal } from "./modal";
+export type { JupiterConfig, JupiterError, AuthorizeOptions, LoanStatus, } from "./types";

package/dist/index.esm.js

@@ -0,0 +1,604 @@
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+/**
+ * API base URLs for different environments
+ */
+const API_URLS = {
+    production: "https://api.jupiter.do",
+    sandbox: "https://api-sandbox.jupiter.do",
+    localhost: "http://localhost:8000",
+};
+/**
+ * App URLs for different environments
+ */
+const APP_URLS = {
+    production: "https://jupiter.do",
+    sandbox: "https://sandbox.jupiter.do",
+    localhost: "http://localhost:3000",
+};
+
+/**
+ * API client for communicating with Jupiter backend
+ */
+class JupiterAPI {
+    constructor(config) {
+        this.apiKey = config.apiKey;
+        this.baseUrl = API_URLS[config.environment || "production"];
+    }
+    createPaymentLink(amount, referenceId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            let response;
+            try {
+                response = yield fetch(`${this.baseUrl}/sdk/link/`, {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                        Authorization: `Bearer ${this.apiKey}`,
+                    },
+                    body: JSON.stringify({
+                        amount,
+                        reference_id: referenceId,
+                    }),
+                });
+            }
+            catch (error) {
+                // Handle network errors
+                throw {
+                    code: "NETWORK_ERROR",
+                    message: error instanceof Error ? error.message : "Unknown error",
+                };
+            }
+            if (!response.ok) {
+                const error = yield response.json().catch(() => ({}));
+                throw {
+                    code: error.code || `HTTP_${response.status}`,
+                    message: error.detail ||
+                        ((_a = error.amount) === null || _a === void 0 ? void 0 : _a[0]) ||
+                        `API error: ${response.status} ${response.statusText}`,
+                    details: error,
+                };
+            }
+            return response.json();
+        });
+    }
+}
+
+const MODAL_STYLES = `
+  /* Animations */
+  @keyframes jupiter-fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes jupiter-fadeOut {
+    from { opacity: 1; }
+    to { opacity: 0; }
+  }
+
+  @keyframes jupiter-fadeInZoom {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -50%) scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+
+  @keyframes jupiter-fadeOutZoom {
+    from {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: translate(-50%, -50%) scale(0.95);
+    }
+  }
+
+  @keyframes jupiter-slideInFromRight {
+    from { transform: translateX(100%); }
+    to { transform: translateX(0); }
+  }
+
+  @keyframes jupiter-slideOutToRight {
+    from { transform: translateX(0); }
+    to { transform: translateX(100%); }
+  }
+
+  /* Overlay */
+  .jupiter-modal-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: none;
+  }
+
+  .jupiter-modal-overlay.open {
+    display: block;
+    animation: jupiter-fadeIn 0.2s ease-out;
+  }
+
+  .jupiter-modal-overlay.closing {
+    animation: jupiter-fadeOut 0.2s ease-out;
+  }
+
+  /* Container */
+  .jupiter-modal-container {
+    display: none;
+    position: relative;
+    border-radius: 0.625rem;
+    overflow: hidden;
+    background-color: oklch(0.145 0 0);
+    
+  }
+
+  .jupiter-modal-container.open {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Container - Mobile */
+  @media (max-width: 767px) {
+    .jupiter-modal-container {
+      border-radius: 0;
+    }
+
+    .jupiter-modal-container.open {
+      position: fixed;
+      inset: 0;
+      z-index: 10000;
+      animation: jupiter-slideInFromRight 0.5s ease-out;
+    }
+
+    .jupiter-modal-container.closing {
+      animation: jupiter-slideOutToRight 0.3s ease-out;
+    }
+
+    .jupiter-modal-overlay {
+      pointer-events: none;
+    }
+  }
+
+  /* Container - Desktop */
+  @media (min-width: 768px) {
+    .jupiter-modal-container.open {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      z-index: 10000;
+      width: calc(100% - 2rem);
+      max-width: 440px;
+      max-height: calc(100vh - 4rem);
+      padding: 18px;
+      animation: jupiter-fadeInZoom 0.2s ease-out;
+    }
+
+    .jupiter-modal-container.closing {
+      animation: jupiter-fadeOutZoom 0.2s ease-out;
+    }
+  }
+
+  /* Close Button */
+  .jupiter-modal-close {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    opacity: 0.7;
+    transition: opacity 0.2s;
+    padding: 0.25rem;
+    border-radius: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10001;
+  }
+
+  .jupiter-modal-close:hover {
+    opacity: 1;
+  }
+
+  /* Iframe - Mobile */
+  @media (max-width: 767px) {
+    .jupiter-modal-iframe {
+      width: 100%;
+      height: 100%;
+      flex: 1;
+      border: none;
+    }
+  }
+
+  /* Iframe - Desktop */
+  @media (min-width: 768px) {
+    .jupiter-modal-iframe {
+      width: 100%;
+      height: 600px;
+      border: none;
+    }
+  }
+
+  /* Loading Skeleton */
+  .jupiter-modal-skeleton {
+    position: absolute;
+    inset: 0;
+    background-color: #1a1a1a;
+    padding: 1.5rem;
+    padding-top: 32px;
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+    z-index: 1;
+  }
+
+  .jupiter-modal-skeleton.hidden {
+    display: none;
+  }
+
+  @media (min-width: 768px) {
+    .jupiter-modal-skeleton {
+      height: 600px;
+    }
+  }
+
+  .jupiter-skeleton-item {
+    background-color: #2a2a2a;
+    border-radius: 0.5rem;
+    animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  @keyframes skeleton-pulse {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+`;
+const SKELETON_HTML = `
+  <div style="display: flex; gap: 12px;">
+    <div class="jupiter-skeleton-item" style="width: 48px; height: 48px; border-radius: 50%;"></div>
+    <div >
+        <p class="jupiter-skeleton-item" style="width: 180px; height: 20px; border-radius: 12px; margin-bottom: 8px"></p>
+        <p class="jupiter-skeleton-item" style="width: 100px; height: 16px; border-radius: 12px"></p>
+    </div>
+  </div>
+  <div style="display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 12px">
+    <p class="jupiter-skeleton-item" style="width: 80px; height: 28px; border-radius: 18px"></p>
+    <p class="jupiter-skeleton-item" style="width: 220px; height: 40px; border-radius: 24px"></p>
+  </div>
+  <div style="height:2px background-color: #e5e7eb;"></div>
+  <div class="jupiter-skeleton-item" style="width: 300px; height: 28px; align-self: center; border-radius: 18px"></div>
+  <div style="display: flex; flex-direction: column; gap: 12px; justify-content: center; align-items: center;">
+    <div class="jupiter-skeleton-item" style="width: 375px; height: 64px; border-radius: calc(infinity * 1px)"></div>
+    <div class="jupiter-skeleton-item" style="width: 375px; height: 64px; border-radius: calc(infinity * 1px)"></div>
+    <div class="jupiter-skeleton-item" style="width: 375px; height: 64px; border-radius: calc(infinity * 1px)"></div>
+  </div>
+`;
+class Modal {
+    constructor() {
+        this.isOpen = false;
+        this.overlay = null;
+        this.container = null;
+        this.closeButton = null;
+        this.iframe = null;
+        this.skeleton = null;
+        this.initialized = false;
+        this.onCloseCallback = null;
+        this.messageHandler = null;
+    }
+    static getInstance() {
+        if (!Modal.instance) {
+            Modal.instance = new Modal();
+        }
+        return Modal.instance;
+    }
+    injectStyles() {
+        if (document.getElementById("jupiter-modal-styles")) {
+            return;
+        }
+        const style = document.createElement("style");
+        style.id = "jupiter-modal-styles";
+        style.textContent = MODAL_STYLES;
+        document.head.appendChild(style);
+    }
+    initializeElements() {
+        if (this.initialized) {
+            return;
+        }
+        this.injectStyles();
+        // Create overlay
+        this.overlay = document.createElement("div");
+        this.overlay.className = "jupiter-modal-overlay";
+        this.overlay.addEventListener("click", (e) => {
+            if (e.target === this.overlay) {
+                this.close();
+            }
+        });
+        document.body.appendChild(this.overlay);
+        // Create container
+        this.container = document.createElement("div");
+        this.container.className = "jupiter-modal-container";
+        // Create close button
+        this.closeButton = document.createElement("button");
+        this.closeButton.className = "jupiter-modal-close";
+        this.closeButton.setAttribute("aria-label", "Close");
+        this.closeButton.innerHTML = `
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M18 6 6 18"></path>
+        <path d="m6 6 12 12"></path>
+      </svg>
+    `;
+        this.closeButton.addEventListener("click", (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.close();
+        });
+        this.container.appendChild(this.closeButton);
+        // Create skeleton
+        this.skeleton = document.createElement("div");
+        this.skeleton.className = "jupiter-modal-skeleton hidden";
+        this.skeleton.innerHTML = SKELETON_HTML;
+        this.container.appendChild(this.skeleton);
+        // Add container to body
+        document.body.appendChild(this.container);
+        this.initialized = true;
+    }
+    showModal(url) {
+        // Show skeleton loader
+        this.skeleton.classList.remove("hidden");
+        // Create iframe (hidden initially)
+        this.iframe = document.createElement("iframe");
+        this.iframe.className = "jupiter-modal-iframe";
+        this.iframe.src = url;
+        this.iframe.setAttribute("allow", "payment");
+        this.iframe.style.opacity = "0";
+        this.container.appendChild(this.iframe);
+        // Show iframe and hide skeleton once loaded
+        this.iframe.addEventListener("load", () => {
+            if (this.iframe && this.skeleton) {
+                this.skeleton.classList.add("hidden");
+                this.iframe.style.opacity = "1";
+                this.iframe.style.transition = "opacity 0.3s ease-out";
+            }
+        }, { once: true });
+        // Show overlay and container
+        this.overlay.classList.add("open");
+        this.container.classList.add("open");
+        // Prevent body scroll when modal is open
+        document.body.style.overflow = "hidden";
+    }
+    hideModal() {
+        var _a, _b, _c, _d;
+        // Remove open class first, then add closing class
+        (_a = this.overlay) === null || _a === void 0 ? void 0 : _a.classList.remove("open");
+        (_b = this.container) === null || _b === void 0 ? void 0 : _b.classList.remove("open");
+        (_c = this.overlay) === null || _c === void 0 ? void 0 : _c.classList.add("closing");
+        (_d = this.container) === null || _d === void 0 ? void 0 : _d.classList.add("closing");
+        // Remove classes and iframe after animation completes
+        setTimeout(() => {
+            var _a, _b;
+            (_a = this.overlay) === null || _a === void 0 ? void 0 : _a.classList.remove("closing");
+            (_b = this.container) === null || _b === void 0 ? void 0 : _b.classList.remove("closing");
+            // Restore body scroll
+            document.body.style.overflow = "";
+            // Remove iframe
+            if (this.iframe) {
+                this.iframe.remove();
+                this.iframe = null;
+            }
+        }, 300);
+    }
+    open(url, onClose, onMessage) {
+        // If already open, do nothing
+        if (this.isOpen) {
+            return;
+        }
+        this.isOpen = true;
+        this.onCloseCallback = onClose || null;
+        // Set up message listener if callback provided
+        if (onMessage) {
+            this.messageHandler = onMessage;
+            window.addEventListener("message", this.messageHandler);
+        }
+        this.initializeElements();
+        this.showModal(url);
+    }
+    close() {
+        if (!this.isOpen) {
+            return;
+        }
+        this.isOpen = false;
+        this.hideModal();
+        // Remove message listener if it exists
+        if (this.messageHandler) {
+            window.removeEventListener("message", this.messageHandler);
+            this.messageHandler = null;
+        }
+        // Call onClose callback if provided
+        if (this.onCloseCallback) {
+            this.onCloseCallback();
+            this.onCloseCallback = null;
+        }
+    }
+    destroy() {
+        this.close();
+        // Wait for close animation to complete before removing elements
+        setTimeout(() => {
+            var _a, _b;
+            (_a = this.overlay) === null || _a === void 0 ? void 0 : _a.remove();
+            (_b = this.container) === null || _b === void 0 ? void 0 : _b.remove();
+            this.overlay = null;
+            this.container = null;
+            this.closeButton = null;
+            this.iframe = null;
+            this.skeleton = null;
+            this.initialized = false;
+            Modal.instance = null;
+        }, 350);
+    }
+    static destroyInstance() {
+        if (Modal.instance) {
+            Modal.instance.destroy();
+        }
+    }
+}
+Modal.instance = null;
+
+/**
+ * Main Jupiter SDK class
+ */
+class Jupiter {
+    /**
+     * Initialize the Jupiter SDK
+     *
+     * @param config - Configuration options
+     *
+     * @example
+     * ```js
+     * const jupiter = new Jupiter({
+     *   apiKey: 'jup_prod-xxxxx',
+     *   environment: 'production'
+     * });
+     * ```
+     */
+    constructor(config) {
+        this.isInUse = false;
+        // Validate API key
+        if (!config.apiKey) {
+            throw {
+                code: "INVALID_CONFIG",
+                message: "apiKey is required",
+            };
+        }
+        // Set configuration
+        this.environment = config.environment || "production";
+        this.api = new JupiterAPI(config);
+    }
+    /**
+     * Authorize a payment amount and open loan application flow
+     *
+     * @example
+     * ```js
+     * jupiter.authorize({
+     *   amount: 100000, // $1,000.00 in cents
+     *   referenceId: "order_12345",
+     *   onComplete: ({ loanId, status, referenceId }) => {
+     *     console.log('Loan', loanId, 'is', status);
+     *   },
+     *   onCancel: () => console.log('User cancelled'),
+     *   onError: (error) => console.error(error)
+     * });
+     * ```
+     */
+    authorize({ amount, referenceId, onComplete, onCancel, onError, modalTimeout, }) {
+        // Prevent multiple concurrent authorizations
+        if (this.isInUse) {
+            return;
+        }
+        // Validate inputs (throw immediately, don't call onError)
+        if (typeof amount !== "number" || amount <= 0) {
+            throw {
+                code: "INVALID_AMOUNT",
+                message: "Amount must be a positive number in cents",
+            };
+        }
+        if (referenceId && referenceId.length > 255) {
+            throw {
+                code: "INVALID_REFERENCE_ID",
+                message: "Reference ID must be 255 characters or less",
+            };
+        }
+        this.isInUse = true;
+        // Handle API call asynchronously internally
+        this.api
+            .createPaymentLink(amount, referenceId)
+            .then((paymentLink) => {
+            const paymentUrl = `${APP_URLS[this.environment]}/pay/${paymentLink.slug}`;
+            // Track if authorization was completed via message
+            let wasCompleted = false;
+            const modal = Modal.getInstance();
+            modal.open(paymentUrl, 
+            // onClose
+            () => {
+                this.isInUse = false;
+                // If modal closes without completion message, treat as cancel
+                if (!wasCompleted) {
+                    onCancel();
+                }
+            }, 
+            // onMessage
+            (event) => {
+                if (event.origin !== new URL(APP_URLS[this.environment]).origin) {
+                    return;
+                }
+                if (event.data.type === "jupiter_loan_status") {
+                    wasCompleted = true;
+                    setTimeout(() => {
+                        modal.close();
+                    }, modalTimeout !== null && modalTimeout !== void 0 ? modalTimeout : 5000);
+                    this.isInUse = false;
+                    onComplete({
+                        loanId: event.data.loanId,
+                        status: event.data.status,
+                    });
+                }
+            });
+        })
+            .catch((error) => {
+            this.isInUse = false;
+            onError(error);
+        });
+    }
+}
+
+/**
+ * Jupiter JavaScript SDK
+ *
+ * @packageDocumentation
+ */
+// For UMD build - expose on window object
+if (typeof window !== "undefined") {
+    window.Jupiter = Jupiter;
+    window.JupiterModal = Modal;
+}
+
+export { Jupiter, Modal };
+//# sourceMappingURL=index.esm.js.map