paygate-checkout-sdk 1.0.0

package/dist/lib/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PaymentMethodSelector } from '../containers/Payment/PaymentMethodSelector';
+export type { UserBasicDataType, PaymentMethodSelectorProps } from '../shared/types';

package/dist/reportWebVitals.d.ts

@@ -0,0 +1,3 @@
+import { ReportHandler } from 'web-vitals';
+declare const reportWebVitals: (onPerfEntry?: ReportHandler) => void;
+export default reportWebVitals;

package/dist/setupTests.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/shared/hooks/Styles/SnackbarStyle.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const SnackbarContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Snackbar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    type: "success" | "error" | "info" | "warning";
+}>> & string;
+export declare const SnackbarTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SnackbarMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/shared/hooks/useCheckTransactionStatus.d.ts

@@ -0,0 +1,14 @@
+interface CheckStatusPayload {
+    transactionReference: string;
+    transactionCountry: string;
+    requestType: string;
+    clientId?: string;
+    publicKey: string;
+}
+interface CheckStatusResponse {
+    [key: string]: any;
+}
+export declare const useCheckTransactionStatus: () => {
+    checkStatus: ({ transactionReference, transactionCountry, requestType, clientId, publicKey, }: CheckStatusPayload) => Promise<CheckStatusResponse>;
+};
+export {};

package/dist/shared/hooks/useGetBanks.d.ts

@@ -0,0 +1,7 @@
+import { BankListResponse } from "../types";
+export declare const useGetBanks: () => {
+    banks: BankListResponse | undefined;
+    loading: boolean;
+    error: string | null;
+    getBanks: (currency?: string) => Promise<any>;
+};

package/dist/shared/hooks/usePaymentFlow.d.ts

@@ -0,0 +1,5 @@
+export type FlowStep = 'details' | 'pin' | 'otp' | 'completed';
+export declare const usePaymentFlow: () => {
+    step: FlowStep;
+    nextStep: () => void;
+};

package/dist/shared/hooks/useSnackBar.d.ts

@@ -0,0 +1,6 @@
+type SnackbarType = "success" | "error" | "info" | "warning";
+export declare const useSnackbar: () => {
+    showSnackbar: (type: SnackbarType, title: string, message: string) => void;
+    SnackbarUI: () => import("react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/shared/themes/ThemeProvider.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+interface ThemeProviderProps {
+    children: ReactNode;
+}
+export declare function ThemeProvider({ children }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/themes/index.d.ts

@@ -0,0 +1,5 @@
+export declare const theme: {
+    color: {
+        blue: string;
+    };
+};

package/dist/shared/types/index.d.ts

@@ -0,0 +1,204 @@
+export type PaymentMethod = 'card' | 'ussd';
+export type PaymentOption = {
+    id: number;
+    paymentOption: string;
+    status: boolean;
+    businessFk: number;
+    feeAmount: number;
+};
+export type CheckoutResponseData = {
+    redirect_url: string;
+    id: number;
+    transaction_amount: number;
+    transaction_amount_card: number;
+    transaction_fee_amount: number;
+    ussd_fee_amount: number;
+    momo_fee_amount: number;
+    qr_fee_amount: number;
+    transaction_card_fee_amount: number;
+    business: Business;
+    customer: Customer;
+    currency: Currency;
+    transaction_reference: string;
+    biller_name: string;
+    payment_options: PaymentOption[];
+    customer_pay_fee: boolean;
+};
+export type CheckoutResponse = {
+    status: true;
+    message: "Checkout ready";
+    data: CheckoutResponseData;
+    code: string;
+};
+export interface PaymentSDKProps {
+    amount?: number;
+    method?: PaymentMethod;
+    currency?: 'NGN' | 'USD';
+    onSuccess?: (transactionId: string) => void;
+    onFailure?: (error: string) => void;
+}
+export type UserBasicDataType = {
+    clientId?: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+    phoneNumber: string;
+    countryCode: string;
+    currencyCode: string;
+    transactionCurrency?: string;
+    merchantName?: string;
+    amount: number;
+    merchantReference?: string;
+    customerAddress?: string;
+    customerCity?: string;
+    customerState?: string;
+    customerCountry?: string;
+    customerPostalCode?: string;
+    webhookUrl?: string;
+    deviceSignature?: string;
+    ipAddress?: string;
+    metadataOrderId?: string;
+    metadataProductInfo?: string;
+    redirectUrl?: string;
+    merchantPublicKey?: string;
+    merchantSecretKey?: string;
+    merchantAPIKey?: string;
+    merchantSiteUrl: string;
+};
+export type ItemsType = {
+    name?: string;
+    price?: number;
+};
+export type VirtualAccountData = {
+    account_name: string;
+    account_number: string;
+    bank_name: string;
+    bank_code: string;
+    account_reference: string;
+    account_expired: boolean;
+};
+export type VirtualAccountResponse = {
+    message: string;
+    data: VirtualAccountData;
+    success: boolean;
+};
+export type Business = {
+    id: number;
+    name: string;
+    business_public_id: string;
+    resubmission_status: boolean;
+};
+export type Customer = {
+    customer_id: string;
+    email_address: string;
+    first_name: string;
+    last_name: string;
+    mobile_number: string;
+};
+export type Currency = {
+    id: number;
+    name: string;
+    code: string;
+    unicode: string;
+    html_value: string;
+    enabled: boolean;
+};
+export type CheckoutReadyResponse = {
+    status: boolean;
+    message: string;
+    data: CheckoutReadyResponseData;
+    code: string;
+};
+export type CheckoutReadyResponseData = {
+    redirect_url: string;
+    id: number;
+    transaction_amount: number;
+    transaction_amount_card: number;
+    transaction_fee_amount: number;
+    ussd_fee_amount: number;
+    momo_fee_amount: number;
+    qr_fee_amount: number;
+    transaction_card_fee_amount: number;
+    business: Business;
+    customer: Customer;
+    currency: Currency;
+    transaction_reference: string;
+    biller_name: string;
+    payment_options: PaymentOption[];
+    customer_pay_fee: boolean;
+};
+export type BankListResponse = {
+    isSuccessful: boolean;
+    responseCode: string;
+    responseMessage: string;
+    responseData: Bank[];
+};
+export type Bank = {
+    blockTransaction: boolean;
+    avatar: string;
+    sortCode: string;
+    active: boolean;
+    skipNameEnquiry: boolean;
+    code: string;
+    shortName: string;
+    name: string;
+    currency: string;
+    country: string;
+};
+export type TransactionResponse = {
+    internal_transaction_id: string;
+    processor_transaction_id: string;
+    status: string;
+    message: string;
+    client_transaction_reference: string;
+    business_reference: string;
+    amount: number;
+    processed_amount: number;
+    fee_amount: number;
+    merchant_amount: number;
+    currency: string;
+    processor_reference: string;
+    fee_bearer: "BUSINESS" | "CUSTOMER" | string;
+    card_bin: string;
+    card_scheme: string;
+    card_type: string;
+    card_last4: string;
+    card_holder_name: string;
+    acquirer_reference_number: string;
+    retrieval_reference_number: string;
+    transaction_date: string;
+    redirect_url_3ds?: string;
+    details?: string;
+    error_code?: string;
+};
+export type ThreeDSRequiredResponse = {
+    internal_transaction_id: string;
+    processor_transaction_id: string | null;
+    status: "PENDING_3DS";
+    message: string;
+    redirect_url_3ds: string;
+    client_transaction_reference: string;
+    amount: number;
+    currency: string;
+};
+export type OtpRequiredResponse = {
+    internal_transaction_id: string;
+    processor_transaction_id: string;
+    status: string;
+    message: string;
+    otp_required: true;
+    otp_submission_reference: string;
+    client_transaction_reference: string;
+    amount: number;
+    currency: string;
+};
+export type PaymentMethodSelectorProps = {
+    userData: UserBasicDataType;
+    config?: {
+        theme?: "light" | "dark";
+        environment?: "test" | "live";
+        [key: string]: any;
+    };
+    onSuccess?: (response: any) => void;
+    onError?: (error: any) => void;
+};

package/dist/shared/utils/Styles.d.ts

@@ -0,0 +1,77 @@
+export declare const color: {
+    blue: string;
+    blue1: string;
+    blue2: string;
+    blue3: string;
+    black: string;
+    black1: string;
+    black2: string;
+    white: string;
+    white1: string;
+    white2: string;
+    white3: string;
+    white4: string;
+    grey: string;
+    grey1: string;
+    grey2: string;
+    grey3: string;
+    grey4: string;
+    grey5: string;
+    red: string;
+    red1: string;
+    green: string;
+    green1: string;
+    green2: string;
+    green3: string;
+    green4: string;
+    green5: string;
+    yellow: string;
+    yellow1: string;
+    yellow2: string;
+    purple: string;
+    purple1: string;
+    error: string;
+    error1: string;
+    error2: string;
+    error3: string;
+    error4: string;
+    error5: string;
+    error6: string;
+    error7: string;
+    error8: string;
+};
+export declare const size: {
+    gridSize: number;
+    gutterWidth: string;
+    outerMargin: string;
+    xsMin: number;
+    smMin: number;
+    mdMin: number;
+    lgMin: number;
+    xlMin: number;
+    xxlMin: number;
+};
+export declare const breakpoint: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+};
+export declare const device: {
+    mobile: string;
+    tablet: string;
+    desktop: string;
+};
+export declare const gradient: {
+    primary: string;
+    primaryActive: string;
+    light: string;
+    error: string;
+};
+export declare const mixin: {
+    clickable: import("styled-components").RuleSet<object>;
+    scrollableY: import("styled-components").RuleSet<object>;
+    truncateText: import("styled-components").RuleSet<object>;
+};

package/dist/shared/utils/index.d.ts

@@ -0,0 +1,9 @@
+export declare function generateRandomString(length?: number): string;
+export declare const generateSdkTransactionReference: () => string;
+export declare const isValidCardNumber: (cardNumber: string) => boolean;
+export declare const generateXModelHeader: (transactionAmount: number, transactionReference: string, customerNumber: string) => string;
+export declare const encodeString: (input: string) => string;
+export declare const allCurrencySymbols: Record<string, string>;
+export declare const getCurrencySymbol: (code: string) => string;
+export declare const formatAmountWithSymbol: (amount?: number, currency?: string, locale?: string) => string;
+export declare const isVerveCard: (cardNumber: string) => boolean;

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "paygate-checkout-sdk",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "description": "A React-based SDK for integrating payment methods via Paygate.",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MYPAYGATE/checkout-frontend.git" 
+  },
+  "homepage": "https://github.com/MYPAYGATE/checkout-frontend#readme",
+  "bugs": {
+    "url": "https://github.com/MYPAYGATE/checkout-frontend/issues"
+  },
+  "author": "Paygate",
+  "license": "MIT",
+  "dependencies": {
+    "@radix-ui/react-toast": "^1.2.11",
+    "@rollup/plugin-json": "^6.1.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/jest": "^27.0.1",
+    "@types/node": "^16.7.13",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/styled-system": "^5.1.23",
+    "@vitejs/plugin-react": "^4.4.1",
+    "axios": "^1.9.0",
+    "card-validator": "^10.0.3",
+    "credit-card-type": "^10.0.2",
+    "fontawesome": "^5.6.3",
+    "html2canvas": "^1.4.1",
+    "moment": "^2.30.1",
+    "react-chartjs-2": "^5.3.0",
+    "react-icons": "^5.5.0",
+    "react-router-dom": "^7.5.3",
+    "react-scripts": "5.0.1",
+    "recharts": "^2.15.3",
+    "styled-components": "^6.1.19",
+    "styled-system": "^5.1.5",
+    "vite": "^6.3.3",
+    "web-vitals": "^2.1.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "styled-components": "^6.0.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "dev": "rollup -c -w",
+    "build": "rollup -c",
+    "prepare": "yarn build"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@rollup/plugin-alias": "^5.1.1",
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-typescript": "^12.1.4",
+    "@svgr/rollup": "^8.1.0",
+    "@types/styled-components": "^5.1.34",
+    "rollup": "^4.44.2",
+    "rollup-plugin-dts": "^6.2.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "typescript": "^4.4.2"
+  }
+}