@spot-flow/checkout-inline-js 0.0.1

package/dist/data.d.ts

@@ -0,0 +1,13 @@
+export declare const tabOptions: {
+    label: string;
+    icon: string;
+    key: string;
+}[];
+export declare const banks: {
+    name: string;
+    code: string;
+}[];
+export declare const cardTypes: {
+    name: string;
+    icon: string;
+}[];

package/dist/index.d.ts

@@ -0,0 +1,30 @@
+import { default as Card } from './modules/Card';
+import { default as Transfer } from './modules/Transfer';
+import { default as Ussd } from './modules/Ussd';
+
+declare class CheckoutForm {
+    modalContainer: HTMLDivElement;
+    currentPaymentMethod: number;
+    currentStep: number;
+    container: HTMLDivElement;
+    card: Card;
+    transfer: Transfer;
+    ussd: Ussd;
+    merchantKey: string;
+    email: string;
+    amount: number;
+    isMobile: boolean;
+    constructor(merchantKey: string, email: string, amount: number);
+    attachInputListeners(): void;
+    displayTabLayout(): void;
+    private updatePaymentMethodView;
+    renderPaymentMethodContent(): void | "";
+    setCurrentPaymentMethod(index: number): void;
+    private cleanup;
+    closeModal(): void;
+    setup(): void;
+    private mobileContainerContent;
+    private viewMobileOptions;
+    private displayPaymentWarningText;
+}
+export default CheckoutForm;

package/dist/modules/Card.d.ts

@@ -0,0 +1,35 @@
+import { PaymentResponseData } from '../types/types';
+
+declare class Card {
+    private cardDetailsValues;
+    private cardPin;
+    private cardOtp;
+    private contents;
+    private container;
+    private closeModal;
+    private email;
+    private token;
+    private amount;
+    private _currentStep;
+    private activeRef;
+    private creditCardTypes;
+    constructor(container: HTMLElement, closeModal: () => void, token: string, email: string, amount: number);
+    private displayCardTypes;
+    get currentStep(): number;
+    set currentStep(step: number);
+    attachInputListeners(): void;
+    handleInputChange(event: Event, button: HTMLButtonElement | null): void;
+    private handlePinRequest;
+    handlePinInputChange(event: Event, index: number, pinInputs: HTMLInputElement[]): void;
+    showLoader(): void;
+    handlePinPaste(event: ClipboardEvent, pinInputs: HTMLInputElement[]): void;
+    handleOtpInput(event: Event, button: HTMLButtonElement | null): void;
+    submitOtp(e: Event): void;
+    handleSubmit(e: Event): Promise<void>;
+    private redirectTo3DS;
+    verifyPayment(onSuccess: (data: PaymentResponseData) => void, onError: (error: Error) => void): Promise<void>;
+    private getCardStepContent;
+    private filterCreditCardType;
+    renderCardContent(): void;
+}
+export default Card;

package/dist/modules/Transfer.d.ts

@@ -0,0 +1,34 @@
+import { PaymentResponseData } from '../types/types';
+
+declare class Transfer {
+    private container;
+    private contents;
+    private closeModal;
+    private email;
+    private token;
+    private amount;
+    private _currentStep;
+    private activeRef;
+    private paymentResponse;
+    private initialTime;
+    private timeLeft;
+    private timerId;
+    private abortController;
+    constructor(container: HTMLElement, closeModal: () => void, token: string, email: string, amount: number);
+    get currentStep(): number;
+    set currentStep(step: number);
+    attachInputListeners(): void;
+    createTransfer(): Promise<void>;
+    verifyTransfer(token: string, initialInterval: number, onSuccess: (data: PaymentResponseData) => void, onError: (error: Error) => void): Promise<void>;
+    private getTransferStepContent;
+    private updateTransferDetailsContent;
+    renderTransferContent(): void;
+    private startTimer;
+    private updateProgressTimerContent;
+    private stopTimer;
+    stopProgressBar(): void;
+    copyToClipboard(text: string, element: Element): void;
+    destroyTimer(): void;
+    stopPolling(): void;
+}
+export default Transfer;

package/dist/modules/Ussd.d.ts

@@ -0,0 +1,15 @@
+declare class Ussd {
+    private contents;
+    private banks;
+    private _currentStep;
+    constructor();
+    get currentStep(): number;
+    set currentStep(step: number);
+    private getUssdStepContent;
+    renderUssdContent(): void;
+    private renderSearchOptions;
+    searchBanksOnInput(searchInput: HTMLInputElement, optionsContainer: HTMLElement): void;
+    openSearchOnFocus(searchInput: HTMLInputElement, optionsContainer: HTMLElement): void;
+    closeSearchOptionsOutsideFocus(event: Event, searchInput: HTMLInputElement, optionsContainer: HTMLElement): void;
+}
+export default Ussd;

package/dist/types/types.d.ts

@@ -0,0 +1,72 @@
+export type PaymentRequestPayload = {
+    merchantId?: string;
+    amount: number;
+    channel: string;
+    currency: string;
+    customer: {
+        email: string;
+    };
+    reference: string;
+    planId?: string;
+};
+export type CardDetails = {
+    pan: string;
+    cvv: string;
+    expiryMonth: string;
+    expiryYear: string;
+};
+export type CardPaymentRequestPayload = PaymentRequestPayload & {
+    card: CardDetails;
+};
+export type AuthorizeCardPaymentRequestPayload = {
+    authorization: {
+        pin: string;
+    };
+    reference: string;
+};
+export type ValidateCardPaymentRequestPayload = {
+    authorization: {
+        otp: string;
+    };
+    reference: string;
+};
+export type PaymentResponseData = {
+    id: string;
+    reference: string;
+    spotflowReference: string;
+    amount: number;
+    currency: string;
+    channel: string;
+    status: string;
+    bankDetails?: BankDetails;
+    customer: Customer;
+    provider: string;
+    providerMessage: string;
+    rate: Rate;
+    authorization: Authorization;
+    createdAt: Date;
+};
+export interface Authorization {
+    mode: string;
+    redirectUrl: string | null;
+}
+export interface BankDetails {
+    accountName: string;
+    accountNumber: string;
+    bankName: string;
+}
+export interface Customer {
+    id: string;
+    name: string;
+    email: string;
+    phoneNumber: string;
+}
+export interface Rate {
+    from: string;
+    to: string;
+    rate: number;
+}
+export type BankOption = {
+    name: string;
+    code: string;
+};

package/dist/utils.d.ts

@@ -0,0 +1,9 @@
+export declare const generatePaymentReference: () => string;
+export declare const clearNumber: (value?: string) => string;
+export declare const formatCreditCardNumber: (value: string) => string;
+export declare const formatCVC: (value: string) => string;
+export declare const formatExpirationDate: (value: string) => string;
+export declare const unFormatCreditCardNumber: (value: string) => string;
+export declare const formatTime: (seconds: number) => string;
+export declare const getCardType: (cardNumber: string) => string;
+export declare const showToast: (message: string, theme: "success" | "error" | "info" | "warning", duration?: number) => void;

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@spot-flow/checkout-inline-js",
+  "version": "0.0.1",
+  "description": "",
+  "main": "./dist/checkout-inline.js",
+  "source": "./src/index.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "type": "module",
+  "keywords": [],
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/node": "^20.14.9",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.2",
+    "vite-plugin-css-injected-by-js": "^3.5.1",
+    "vite-plugin-dts": "^3.9.1"
+  }
+}