@proximafortedev/payxy-payment-gateway-core 1.0.2 → 1.0.3

package/README.md

@@ -83,7 +83,7 @@ const payxy = new Payxy({
   env: "test", // Options: 'test', 'staging', 'prod', 'development'
   accessCode: "YOUR_PAYMENT_ACCESS_CODE",
   onSuccess: (data) => console.log("Payment Successful:", data),
-  onError: (error) => console.error("Payment Failed:", error)
+  onError: (error) => console.error("Payment Failed:", error),
 });
 
 // Launch the payment process
@@ -99,6 +99,7 @@ payxy.init();
 The `Dockerfile` is optimized for multi-environment builds. It uses Nginx to serve the static artifacts.
 
 **Build Command:**
+
 ```bash
 docker build \
   --build-arg VITE_ENV=prod \
@@ -110,10 +111,12 @@ docker build \
 ### GitHub Actions (CI/CD)
 
 The workflow in `.github/workflows/main.yml` automatically builds and deploys the gateway based on branch pushes:
+
 - **`staging` branch**: Deploys to the staging environment.
 - **`prod` branch**: Deploys to the production environment.
 
 **Required GitHub Secrets:**
+
 - `TEST_VITE_API_BASE_URL`
 - `STAGING_VITE_API_BASE_URL`
 - `PROD_VITE_API_BASE_URL`

package/dist/index.d.ts

@@ -1,483 +1 @@
-import { AxiosError } from 'axios';
-import { AxiosInstance } from 'axios';
-import { AxiosRequestConfig } from 'axios';
-import { Emitter } from 'mitt';
-import { FC } from 'react';
-import { FormInstance } from 'antd';
-import { InputRef } from 'antd';
-import { JSX } from 'react/jsx-runtime';
-import { Method } from 'axios';
-import { ModalFuncProps } from 'antd';
-import { NoInfer as NoInfer_2 } from '@tanstack/query-core';
-import { PropsWithChildren } from 'react';
-import { ReactNode } from 'react';
-import { RefObject } from 'react';
-import { RuleObject } from 'antd/es/form';
-import * as signalR from '@microsoft/signalr';
-import { StoreApi } from 'zustand';
-import { ThemeConfig } from 'antd';
-import { UseBoundStore } from 'zustand';
-import { UseMutationOptions } from '@tanstack/react-query';
-import { UseMutationResult } from '@tanstack/react-query';
-import { UseQueryOptions } from '@tanstack/react-query';
-import { UseQueryResult } from '@tanstack/react-query';
-
-export declare const AntdProvider: FC<PropsWithChildren>;
-
-export declare const apiClient: AxiosInstance;
-
-export declare type ApiError = AxiosError<BaseApiError>;
-
-export declare interface ApiResponse<T> {
-    responseCode: string;
-    responseMessage: string;
-    data: T;
-}
-
-export declare const App: () => JSX.Element;
-
-export declare type AppEvents = {
-    "payment-method:selected": number;
-    "payment-info:loaded": PaymentInfoData;
-    "payment:terminal": undefined;
-    "signalr:connected": undefined;
-    "signalr:reconnecting": undefined;
-    "signalr:reconnected": string | undefined;
-    "signalr:closed": Error | undefined;
-    "signalr:error": unknown;
-};
-
-export declare const BankTransfer: () => JSX.Element;
-
-export declare interface BaseApiError {
-    message: string;
-    code: string;
-}
-
-export declare interface Bin {
-    Id: number;
-    Name: string;
-    MinPanLength: number;
-    MaxPanLength: number;
-    BinRangeMinimum: number;
-    BinRangeMaximum: number;
-    BinImage: string;
-}
-
-export declare const Card: () => JSX.Element;
-
-export declare interface Customization {
-    bodyColor: string;
-    buttonColor: string;
-    footerText: string;
-    footerLink: string;
-    footerLogo: string;
-}
-
-export declare interface DeviceInformation {
-    httpBrowserLanguage?: string;
-    httpBrowserJavaEnabled?: boolean;
-    httpBrowserJavaScriptEnabled?: boolean;
-    httpBrowserColorDepth?: number;
-    httpBrowserScreenHeight?: number;
-    httpBrowserScreenWidth?: number;
-    httpBrowserTimeDifference?: string;
-    userAgentBrowserValue?: string;
-}
-
-export declare const emitter: Emitter<AppEvents>;
-
-export declare const errorModalProps: (callbackUrl?: string, data?: ValidatePaymentResponse | MakePaymentResponse) => ModalFuncProps;
-
-export declare const formatPrice: (amount: number | string, currency?: string) => string;
-
-export declare const getConnection: () => signalR.HubConnection | null;
-
-export declare const isStoreUrl: (url?: string) => boolean;
-
-export declare const isValidUrl: (str: string | undefined) => boolean;
-
-export declare interface MakePaymentRequest {
-    transactionId?: string;
-    paymentType?: number;
-    mode?: number;
-    bankCode?: string;
-    accountNumber?: string;
-    accountName?: string;
-    cardNumber?: string;
-    cvv?: string;
-    expiryMonth?: string;
-    expiryYear?: string;
-    expiryDate?: string;
-    currency?: string;
-    country?: string;
-    amount?: string;
-    email?: string;
-    phoneNumber?: string;
-    firstName?: string;
-    lastName?: string;
-    ip?: string;
-    dateOfBirth?: string;
-    bvn?: string;
-    redirectUrl?: string;
-    billingZip?: string;
-    billingCity?: string;
-    deviceFingerPrint?: string;
-    billingAddress?: string;
-    billingState?: string;
-    billingCountry?: string;
-    pin?: string;
-    callbackUrl?: string;
-    productId?: string;
-    productDescription?: string;
-    pageKey?: string;
-    productKey?: string;
-    authenticationResend?: string;
-    merchantType?: number;
-    metaData?: string;
-    narration?: string;
-    merchantId?: number;
-    cardBrand?: string;
-    token?: string;
-    entryType?: number;
-    deviceInformation?: DeviceInformation;
-    walletOption?: string;
-    invoiceId?: string;
-    isRecurring?: boolean;
-    isStaticRoute?: number;
-    ussdString?: string;
-    encrypted?: string;
-    accessCode?: string;
-    cardHolderName?: string;
-}
-
-export declare interface MakePaymentResponse {
-    responseCode: string;
-    responseMessage: string;
-    authenticatePaymentResponseCode: string;
-    authenticatePaymentResponseMessage: string;
-    transactionId: string;
-    providerReference: string;
-    transactionNumber: string;
-    isWebhookUrlSet: boolean;
-    accountNumber: string;
-    accountName: string;
-    bankName: string;
-}
-
-declare interface PaymentGatewayLayoutProps extends PropsWithChildren {
-    heading?: string;
-    subtext?: string;
-    showSidebar?: boolean;
-    footer?: ReactNode;
-}
-
-export declare const PaymentGatewayLayoutWrapper: FC<PaymentGatewayLayoutProps>;
-
-export declare interface PaymentInfoData {
-    email: string;
-    amount: string;
-    transactionId: string;
-    link: string;
-    reference: string;
-    businessName: string;
-    isActive: boolean;
-    cardPayment: boolean;
-    accountPayment: boolean;
-    ussdPayment: boolean;
-    qrPayment: boolean;
-    eNaira: boolean;
-    walletPayment: boolean;
-    bankTrasferPayment: boolean;
-    webHookUrl: string;
-    token: string;
-    currency: string;
-    callbackUrl: string;
-    publicKey: string;
-    transactionHistoryId: number;
-    productId: string;
-    productDescription: string;
-    totalAmount: string;
-    isChargeTransferedToCustomer: boolean;
-    isPaymentPageCustomizationEnabled: boolean;
-    customization: Customization;
-    merchantCode: string;
-    firstName: string;
-    lastName: string;
-    billingCountry: string;
-    billingState: string;
-    billingZip: string;
-    billingCity: string;
-    billingAddress: string;
-    phoneNumber?: string;
-}
-
-export declare const paymentOptions: {
-    value: number;
-    label: string;
-    key: string;
-}[];
-
-declare interface PaymentStore {
-    env: PayxyEnv;
-    paymentInfo: PaymentInfoData | null;
-    selectedSavedCard: SavedCards | null;
-    cardOption: string;
-    isMakePaymentSuccessful: boolean | null;
-    setEnv: (env: PayxyEnv) => void;
-    setMakePaymentSuccessful: (value: boolean | null) => void;
-    setCardOption: (value: string) => void;
-    setSelectedSavedCard: (card: SavedCards | null) => void;
-    setPaymentInfo: (info: PaymentInfoData) => void;
-    clearPaymentInfo: () => void;
-}
-
-declare class Payxy {
-    private options;
-    constructor(options: PayxyOptions);
-    /**
-     * Launch the payment gateway
-     */
-    init(): void;
-}
-export { Payxy }
-export default Payxy;
-
-export declare type PayxyEnv = "test" | "prod" | "staging" | "development";
-
-export declare interface PayxyOptions {
-    env?: PayxyEnv;
-    accessCode: string;
-    onSuccess?: (data: any) => void;
-    onError?: (data: any) => void;
-}
-
-export declare const ReactQueryProvider: FC<PropsWithChildren>;
-
-export declare interface RemoveCardRequest {
-    pan: string;
-    email: string;
-}
-
-export declare interface SavedCardRequest {
-    cardPan: string;
-    expiryMonth: string;
-    expiryYear: string;
-    cvv: string;
-    cardBrand: string;
-    firstname: string;
-    lastname: string;
-    billingZip: string;
-    billingCity: string;
-    billingAddress: string;
-    billingState: string;
-    billingCountry: string;
-    cardHolderName: string;
-    email: string;
-}
-
-export declare interface SavedCards {
-    cardPan: string;
-    expiryMonth: string;
-    expiryYear: string;
-    cvv: string;
-    cardBrand: string;
-    email: string;
-    billingZip: string;
-    billingCity: string;
-    billingAddress: string;
-    billingState: string;
-    billingCountry: string;
-    cardHolderName: string;
-}
-
-declare class SecureStorageUtil {
-    private getRawStorage;
-    private saveRawStorage;
-    setItem<T>(key: string, value: T): void;
-    getItem<T>(key: string): T | null;
-    removeItem(key: string): void;
-    clear(): void;
-    hasItem(key: string): boolean;
-}
-
-export declare const SideBar: FC<SideBarProps>;
-
-declare interface SideBarProps {
-    paymentInfo: PaymentInfoData;
-    onSelect?: (value: number) => void;
-}
-
-export declare const startConnection: () => Promise<signalR.HubConnection>;
-
-export declare const stopConnection: () => Promise<void>;
-
-export declare const storageHelper: SecureStorageUtil;
-
-export declare const successModalProps: (callbackUrl?: string, data?: ValidatePaymentResponse) => ModalFuncProps;
-
-export declare const themeConfig: ThemeConfig;
-
-export declare const useCardInfo: () => {
-    cardImg: () => string;
-    cardNumberValidator: (_rule: RuleObject, value: string) => Promise<void>;
-    formatCardNumber: (value: string) => string;
-    getCardNumberMaxLength: () => 24 | 19 | 23 | 22;
-    validateAndFormatExpiryDate: (cardExpiry: string) => string;
-    validateExpiryDate: (cardExpiry: string) => boolean | string;
-    handleCardInput: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    handleCardExpiry: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    handleOnSavedCard: () => void;
-    handleCardPayment: (request: Record<string, string>) => Promise<MakePaymentResponse | undefined>;
-    isSavingCard: boolean;
-    form: FormInstance<any>;
-    paymentInfo: PaymentInfoData | null;
-    isFormIncomplete: boolean;
-    cardNumber: any;
-    expiryDate: any;
-    cvv: any;
-    cardHolderName: any;
-    cardType: string;
-    isPending: boolean;
-    data: MakePaymentResponse | undefined;
-};
-
-export declare const useDisableEvent: () => {
-    cardNumberInputRef: RefObject<InputRef | null>;
-    cvvInputRef: RefObject<InputRef | null>;
-    expiryInputRef: RefObject<InputRef | null>;
-};
-
-export declare const useGetPaymentInfo: () => UseQueryResult<ApiResponse<PaymentInfoData>, ApiError>;
-
-export declare const useGetSavedCards: () => UseQueryResult<ApiResponse<SavedCards[]>, ApiError>;
-
-/**
- * @example
- *
- * const { mutate, isLoading, error } = useHttpMutation({
- *  url: "/api/user",
- *  method: "POST",
- *  onSuccess: () => queryClient.invalidateQueries("user"),
- *  onError: (error) => console.error(error),
- * });
- */
-export declare function useHttpMutation<Data = unknown, Response = unknown>(options?: UseHttpMutationOptions<UseHttpMutationFunctionProps<Data>, Response>): UseMutationResult<Response, AxiosError<unknown, any>, UseHttpMutationFunctionProps<Data>, unknown>;
-
-export declare type UseHttpMutationAxiosOptions<Data> = Pick<AxiosRequestConfig<Data>, "url" | "data" | "method" | "headers">;
-
-export declare type UseHttpMutationFunctionProps<Data> = {
-    data?: Data;
-    config?: AxiosRequestConfig;
-};
-
-declare type UseHttpMutationOptions<Data, Response> = {
-    url?: string;
-    data?: Data;
-    method?: Method | string;
-    headers?: Record<string, string>;
-    axiosInstance?: AxiosInstance;
-    isAuthorized?: boolean;
-    enableEntityId?: boolean;
-} & UseMutationOptions<Response, AxiosError, Data>;
-
-/**
- * @example
- * const { data, isLoading, error } = useHttpQuery({
- *  url: "/api/user",
- *  enabled: !!token,
- *  select: (data) => data.user,
- *  headers: {
- *    Authorization: `Bearer ${token}`,
- *  }
- * }
- */
-export declare function useHttpQuery<Data = unknown, Response = unknown, Selected = Response, Error = ApiError>({ api, url, data, params, headers, responseType, method, ...queryOptions }: UseHttpQueryOptions<Data, Response, Selected, Error>): UseQueryResult<NoInfer_2<Selected>, Error>;
-
-export declare type UseHttpQueryAxiosOptions<Data> = Pick<AxiosRequestConfig<Data>, "url" | "data" | "method" | "headers" | "params" | "responseType">;
-
-export declare type UseHttpQueryOptions<Data, Response, Selected, Error> = UseHttpQueryAxiosOptions<Data> & UseQueryOptions<Response, Error, Selected> & {
-    /** Optional axios instance */
-    api?: AxiosInstance;
-};
-
-export declare const useMakePayment: () => {
-    isPending: boolean;
-    data: MakePaymentResponse | undefined;
-    onMakePayment: (form: MakePaymentRequest) => Promise<MakePaymentResponse | undefined>;
-};
-
-export declare const usePaymentPolling: ({ validatePaymentData, makePaymentData, onValidatePayment, validatePending, timeValue, }: {
-    validatePaymentData: {
-        responseCode: string;
-        responseMessage: string;
-    } | undefined;
-    makePaymentData: MakePaymentResponse | undefined;
-    onValidatePayment: (data: ValidatePaymentRequest) => Promise<{
-        responseCode: string;
-        responseMessage: string;
-    } | undefined>;
-    validatePending: boolean;
-    timeValue: number;
-}) => {
-    isPolling: boolean;
-};
-
-export declare const useRemoveCard: () => {
-    isPending: boolean;
-    data: {
-        responseCode: string;
-        responseMessage: string;
-    } | undefined;
-    onRemoveCard: (data: RemoveCardRequest) => Promise<{
-        responseCode: string;
-        responseMessage: string;
-    } | undefined>;
-};
-
-export declare const useSavedCard: () => {
-    isPending: boolean;
-    data: {
-        responseCode: string;
-        responseMessage: string;
-    } | undefined;
-    onSavedCard: (data: SavedCardRequest) => Promise<{
-        responseCode: string;
-        responseMessage: string;
-    } | undefined>;
-};
-
-export declare const useStore: UseBoundStore<StoreApi<PaymentStore>>;
-
-export declare const useTimer: (seconds?: number) => {
-    timeRemaining: string;
-    resetTimer: () => void;
-    timeValue: number;
-};
-
-export declare const useTransactionTimeout: (timeValue: number, callbackUrl?: string) => void;
-
-export declare const useValidatePayment: () => {
-    onValidatePayment: (data: ValidatePaymentRequest) => Promise<ValidatePaymentResponse | undefined>;
-    isPending: boolean;
-    data: ValidatePaymentResponse | undefined;
-};
-
-export declare const USSD: () => JSX.Element;
-
-export declare interface ValidatePaymentRequest {
-    transactionId: string;
-    providerReference: string;
-    otp?: string;
-    entryType?: number;
-}
-
-export declare interface ValidatePaymentResponse {
-    responseCode: string;
-    responseMessage: string;
-    orderReference: string;
-    chargedAmount: string;
-    providerReference: string;
-}
-
-export { }
+export {}

package/dist/payxy-payment-gateway-core.css

@@ -1 +1 @@
-.ant-radio-wrapper{border-bottom:1px solid #00000010!important;padding-top:3rem;padding-bottom:2rem;width:100%!important}.ant-radio-wrapper:first-child{padding-top:0!important}.ant-radio-wrapper .ant-radio-checked .ant-radio-inner{border:5px solid #e1edff!important}.ant-radio-wrapper .ant-radio-inner:after{background-color:#0569ff!important}@media(max-width:767px){.ant-radio-wrapper{padding-top:1rem;padding-bottom:1rem}}.ant-tabs-tab{font-weight:300!important}
+.ant-radio-wrapper{border-bottom:1px solid #00000010!important;padding-top:3rem;padding-bottom:2rem;width:100%!important}.ant-radio-wrapper:first-child{padding-top:0!important}.ant-radio-wrapper .ant-radio-checked .ant-radio-inner{border:5px solid #e1edff!important}.ant-radio-wrapper .ant-radio-inner:after{background-color:#0569ff!important}.ant-tabs-tab{font-weight:300!important}