@inflow_pay/sdk 1.0.0 → 1.2.0-beta.0

package/dist/sdk.d.ts

@@ -34,13 +34,15 @@ export declare class CardElement {
 export declare interface CardElementOptions {
     /** Container element or CSS selector where the iframe will be mounted */
     container: string | HTMLElement;
-    /** Payment ID for this transaction */
-    paymentId: string;
-    /** Callback when payment completes */
-    onComplete?: (result: PaymentResult) => void;
-    /** Callback when payment fails */
+    /** Payment ID for a payment transaction. Mutually exclusive with setupId. */
+    paymentId?: string;
+    /** CustomerPaymentMethodRequest ID for a save-card session. Mutually exclusive with paymentId. */
+    setupId?: string;
+    /** Callback when the operation completes (payment or card setup) */
+    onComplete?: (result: PaymentResult | SaveCardResult) => void;
+    /** Callback when the operation fails */
     onError?: (error: any) => void;
-    /** Callback when user closes the payment */
+    /** Callback when user closes the element */
     onClose?: () => void;
     /** Custom styling for the card element */
     style?: CSSProperties;
@@ -52,14 +54,14 @@ export declare interface CardElementOptions {
         expiry?: string;
         cvc?: string;
     };
-    /** Show default success UI after payment (default true). If false, only unmount iframe. */
+    /** Show default success UI after completion (default true). If false, only unmount iframe. */
     showDefaultSuccessUI?: boolean;
 }
 
 export declare interface CardElementProps {
     paymentId: string;
     container?: string | HTMLElement;
-    onComplete?: (result: PaymentResult) => void;
+    onComplete?: (result: PaymentResult | SaveCardResult) => void;
     onError?: (error: any) => void;
     onClose?: () => void;
     onReady?: () => void;
@@ -89,7 +91,9 @@ declare interface CSSProperties {
     disclaimerColor?: string;
     fieldErrorColor?: string;
     generalError?: GeneralMessageStyles;
+    /** @deprecated generalSuccess was removed from the sdk; this has no effect. Will be removed in the next major version. */
     generalSuccess?: GeneralMessageStyles;
+    successUI?: SuccessUIStyles;
     dark?: ThemeStyles;
 }
 
@@ -187,6 +191,8 @@ export declare interface PaymentConfig {
     amount?: number;
     currency?: string;
     paymentId?: string;
+    /** ID of a CustomerPaymentMethodRequest – activates save-card mode in the iframe */
+    setupId?: string;
     /** Custom styling for the card element */
     style?: CSSProperties;
     /** Custom button text (default: "Complete Payment") */
@@ -243,29 +249,40 @@ export declare class PaymentSDK {
      */
     constructor(config: PaymentSDKConfig);
     /**
-     * Create a CardElement for iframe-based payment UI
+     * Create a CardElement for iframe-based payment or save-card UI.
+     *
+     * Pass `paymentId` for a payment transaction, or `setupId` to save
+     * a card without charging. The two options are mutually exclusive.
      *
      * @param options - CardElement configuration
      * @returns CardElement instance
      *
-     * @example
+     * @example – payment
      * ```typescript
      * const cardElement = sdk.createCardElement({
      *   container: '#card-container',
      *   paymentId: 'pay_123',
-     *   onComplete: (result) => {
-     *     if (result.status === 'CHECKOUT_SUCCESS') {
-     *       window.location.href = '/success';
-     *     }
-     *   }
+     *   onComplete: (result) => { ... }
      * });
+     * cardElement.mount();
+     * ```
      *
+     * @example – save card
+     * ```typescript
+     * const cardElement = sdk.createCardElement({
+     *   container: '#card-container',
+     *   setupId: 'cus_pm_req_123',
+     *   onComplete: (result) => { ... }
+     * });
      * cardElement.mount();
      * ```
      */
     createCardElement(options: {
         container: string | HTMLElement;
-        paymentId: string;
+        /** Payment ID – use for payment flow */
+        paymentId?: string;
+        /** CustomerPaymentMethodRequest ID – use for save-card flow */
+        setupId?: string;
         style?: CSSProperties;
         buttonText?: string;
         placeholders?: {
@@ -273,9 +290,10 @@ export declare class PaymentSDK {
             expiry?: string;
             cvc?: string;
         };
-        onComplete?: (result: PaymentResult) => void;
+        onComplete?: (result: PaymentResult | SaveCardResult) => void;
         onError?: (error: any) => void;
         onClose?: () => void;
+        showDefaultSuccessUI?: boolean;
     }): CardElement;
     /**
      * Get the iframe URL being used
@@ -294,6 +312,18 @@ export declare interface PaymentSDKConfig {
     locale?: Locale;
 }
 
+export declare interface SaveCardResult {
+    status: PaymentResultStatus;
+    setupId: string;
+    error?: PaymentError;
+}
+
+declare interface SuccessUIStyles {
+    backgroundColor?: string;
+    primaryTextColor?: string;
+    secondaryTextColor?: string;
+}
+
 declare interface ThemeStyles {
     inputContainer?: InputContainerStyles;
     input?: InputStyles;
@@ -301,9 +331,11 @@ declare interface ThemeStyles {
     disclaimerColor?: string;
     fieldErrorColor?: string;
     generalError?: GeneralMessageStyles;
+    /** @deprecated generalSuccess was removed from the sdk; this has no effect. Will be removed in the next major version. */
     generalSuccess?: GeneralMessageStyles;
+    successUI?: SuccessUIStyles;
 }
 
-export declare const VERSION = "0.8.0";
+export declare const VERSION = "1.1.0";
 
 export { }

package/dist/sdk.esm.js

@@ -1,65 +1,48 @@
-import { P as l } from "./payment-sdk-oRqgQSx5.mjs";
-import { C as s, a as y, b as f } from "./payment-sdk-oRqgQSx5.mjs";
-class d {
-  constructor(e) {
-    const n = {
-      publicKey: e.config.publicKey,
-      locale: e.config.locale
-    };
-    this.sdk = new l(n);
-  }
-  /**
-   * Create a CardElement (similar to React's <CardElement />)
-   * 
-   * @param props - CardElement props (same as React SDK)
-   * @returns CardElement instance
-   */
-  createCardElement(e) {
-    let n;
-    if (e.container)
-      n = e.container;
-    else {
-      const t = document.createElement("div");
-      t.id = "inflowpay-card-element-container", document.body.appendChild(t), n = t;
-    }
-    const a = {
-      container: n,
-      paymentId: e.paymentId,
-      ...e.style && { style: e.style },
-      ...e.buttonText && { buttonText: e.buttonText },
-      ...e.placeholders && { placeholders: e.placeholders },
-      onComplete: (t) => {
-        e.onComplete && e.onComplete(t);
-      },
-      onError: e.onError,
-      onClose: e.onClose
-    }, o = this.sdk.createCardElement(a);
-    if (e.onReady) {
-      const t = o.mount.bind(o);
-      o.mount = () => {
-        t(), setTimeout(() => {
-          e.onReady && e.onReady();
-        }, 100);
-      };
-    }
-    return e.onChange && setTimeout(() => {
-      e.onChange && e.onChange({ complete: !1 });
-    }, 100), o;
-  }
-  /**
-   * Get the underlying PaymentSDK instance
-   */
-  getSDK() {
-    return this.sdk;
-  }
-}
-const m = "0.8.0";
-export {
-  s as CardElement,
-  d as InflowPayProvider,
-  y as PaymentResultErrorCode,
-  f as PaymentResultStatus,
-  l as PaymentSDK,
-  m as VERSION
-};
-//# sourceMappingURL=sdk.esm.js.map
+import { n as e, o as t, s as n, t as r } from "./payment-sdk-DqfuWSo1.mjs";
+//#region src/inflowpay-provider.ts
+var i = class {
+	constructor(e) {
+		this.sdk = new r({
+			publicKey: e.config.publicKey,
+			locale: e.config.locale
+		});
+	}
+	createCardElement(e) {
+		let t;
+		if (e.container) t = e.container;
+		else {
+			let e = document.createElement("div");
+			e.id = "inflowpay-card-element-container", document.body.appendChild(e), t = e;
+		}
+		let n = {
+			container: t,
+			paymentId: e.paymentId,
+			...e.style && { style: e.style },
+			...e.buttonText && { buttonText: e.buttonText },
+			...e.placeholders && { placeholders: e.placeholders },
+			onComplete: (t) => {
+				e.onComplete && e.onComplete(t);
+			},
+			onError: e.onError,
+			onClose: e.onClose
+		}, r = this.sdk.createCardElement(n);
+		if (e.onReady) {
+			let t = r.mount.bind(r);
+			r.mount = () => {
+				t(), setTimeout(() => {
+					e.onReady && e.onReady();
+				}, 100);
+			};
+		}
+		return e.onChange && setTimeout(() => {
+			e.onChange && e.onChange({ complete: !1 });
+		}, 100), r;
+	}
+	getSDK() {
+		return this.sdk;
+	}
+}, a = "1.1.0";
+//#endregion
+export { e as CardElement, i as InflowPayProvider, t as PaymentResultErrorCode, n as PaymentResultStatus, r as PaymentSDK, a as VERSION };
+
+//# sourceMappingURL=sdk.esm.js.map

package/dist/sdk.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"sdk.esm.js","sources":["../src/inflowpay-provider.ts","../src/index.ts"],"sourcesContent":["/**\n * InflowPayProvider - Compatibility layer for React SDK API\n * \n * Provides the same API structure as the original React SDK\n * but works with vanilla JavaScript\n */\n\nimport type { CardElement, CardElementOptions } from './card-element';\nimport type { PaymentSDKConfig } from './payment-sdk';\nimport { PaymentSDK } from './payment-sdk';\nimport { PaymentResult } from './react';\nimport type { Locale } from './types';\n\nexport interface InflowPayProviderConfig {\n  publicKey: string;\n  locale?: Locale;\n}\n\nexport interface CardElementProps {\n  paymentId: string;\n  container?: string | HTMLElement;\n  onComplete?: (result: PaymentResult) => void;\n  onError?: (error: any) => void;\n  onClose?: () => void;\n  onReady?: () => void;\n  onChange?: (state: { complete: boolean }) => void;\n  buttonText?: string;\n  buttonStyle?: any;\n  style?: any;\n  placeholders?: {\n    cardNumber?: string;\n    expiry?: string;\n    cvc?: string;\n  };\n}\n\n/**\n * InflowPayProvider - Global SDK configuration\n * \n * Similar to React's InflowPayProvider but for vanilla JS\n * \n * @example\n * ```typescript\n * const provider = new InflowPayProvider({\n *   config: { apiKey: 'inflow_pub_xxx' }\n * });\n * \n * const cardElement = provider.createCardElement({\n *   paymentId: 'pay_xxx',\n *   onComplete: (result) => {\n *     if (result.status === 'CHECKOUT_SUCCESS') {\n *       window.location.href = '/success';\n *     }\n *   }\n * });\n * \n * cardElement.mount();\n * ```\n */\nexport class InflowPayProvider {\n  private sdk: PaymentSDK;\n\n  constructor(options: { config: InflowPayProviderConfig }) {\n    const config: PaymentSDKConfig = {\n      publicKey: options.config.publicKey,\n      locale: options.config.locale,\n    };\n\n    this.sdk = new PaymentSDK(config);\n  }\n\n  /**\n   * Create a CardElement (similar to React's <CardElement />)\n   * \n   * @param props - CardElement props (same as React SDK)\n   * @returns CardElement instance\n   */\n  createCardElement(props: CardElementProps): CardElement {\n    let container: string | HTMLElement;\n    if (props.container) {\n      container = props.container;\n    } else {\n      const defaultContainer = document.createElement('div');\n      defaultContainer.id = 'inflowpay-card-element-container';\n      document.body.appendChild(defaultContainer);\n      container = defaultContainer;\n    }\n\n    const cardElementOptions: CardElementOptions = {\n      container: container,\n      paymentId: props.paymentId,\n      ...(props.style && { style: props.style }),\n      ...(props.buttonText && { buttonText: props.buttonText }),\n      ...(props.placeholders && { placeholders: props.placeholders }),\n      onComplete: (result) => {\n        if (props.onComplete) {\n          props.onComplete(result);\n        }\n      },\n      onError: props.onError,\n      onClose: props.onClose,\n    };\n\n    const cardElement = this.sdk.createCardElement(cardElementOptions);\n\n    if (props.onReady) {\n      const originalMount = cardElement.mount.bind(cardElement);\n      cardElement.mount = () => {\n        originalMount();\n        setTimeout(() => {\n          if (props.onReady) {\n            props.onReady();\n          }\n        }, 100);\n      };\n    }\n\n    if (props.onChange) {\n      setTimeout(() => {\n        if (props.onChange) {\n          props.onChange({ complete: false });\n        }\n      }, 100);\n    }\n\n    return cardElement;\n  }\n\n  /**\n   * Get the underlying PaymentSDK instance\n   */\n  getSDK(): PaymentSDK {\n    return this.sdk;\n  }\n}\n\n","/**\n * InflowPay SDK v2 - Entry point\n * \n * Provides the same API as the original React SDK but using iframe-based payment flow\n * Compatible with vanilla JavaScript and easy migration from React SDK\n */\n\nexport { InflowPayProvider } from './inflowpay-provider';\nexport type { CardElementProps, InflowPayProviderConfig } from './inflowpay-provider';\n\nexport { PaymentSDK } from './payment-sdk';\nexport type { PaymentSDKConfig } from './payment-sdk';\n\nexport { CardElement } from './card-element';\nexport type { CardElementOptions } from './card-element';\n\nexport type {\n  CardElementState, PaymentConfig,\n  PaymentError,\n  PaymentResult\n} from './types';\n\nexport { PaymentResultErrorCode, PaymentResultStatus } from './types';\n\nexport const VERSION = '0.8.0';\n"],"names":["InflowPayProvider","options","config","PaymentSDK","props","container","defaultContainer","cardElementOptions","result","cardElement","originalMount","VERSION"],"mappings":";;AA2DO,MAAMA,EAAkB;AAAA,EAG7B,YAAYC,GAA8C;AACxD,UAAMC,IAA2B;AAAA,MAC/B,WAAWD,EAAQ,OAAO;AAAA,MAC1B,QAAQA,EAAQ,OAAO;AAAA,IAAA;AAGzB,SAAK,MAAM,IAAIE,EAAWD,CAAM;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,kBAAkBE,GAAsC;AACtD,QAAIC;AACJ,QAAID,EAAM;AACR,MAAAC,IAAYD,EAAM;AAAA,SACb;AACL,YAAME,IAAmB,SAAS,cAAc,KAAK;AACrD,MAAAA,EAAiB,KAAK,oCACtB,SAAS,KAAK,YAAYA,CAAgB,GAC1CD,IAAYC;AAAA,IACd;AAEA,UAAMC,IAAyC;AAAA,MAC7C,WAAAF;AAAA,MACA,WAAWD,EAAM;AAAA,MACjB,GAAIA,EAAM,SAAS,EAAE,OAAOA,EAAM,MAAA;AAAA,MAClC,GAAIA,EAAM,cAAc,EAAE,YAAYA,EAAM,WAAA;AAAA,MAC5C,GAAIA,EAAM,gBAAgB,EAAE,cAAcA,EAAM,aAAA;AAAA,MAChD,YAAY,CAACI,MAAW;AACtB,QAAIJ,EAAM,cACRA,EAAM,WAAWI,CAAM;AAAA,MAE3B;AAAA,MACA,SAASJ,EAAM;AAAA,MACf,SAASA,EAAM;AAAA,IAAA,GAGXK,IAAc,KAAK,IAAI,kBAAkBF,CAAkB;AAEjE,QAAIH,EAAM,SAAS;AACjB,YAAMM,IAAgBD,EAAY,MAAM,KAAKA,CAAW;AACxD,MAAAA,EAAY,QAAQ,MAAM;AACxB,QAAAC,EAAA,GACA,WAAW,MAAM;AACf,UAAIN,EAAM,WACRA,EAAM,QAAA;AAAA,QAEV,GAAG,GAAG;AAAA,MACR;AAAA,IACF;AAEA,WAAIA,EAAM,YACR,WAAW,MAAM;AACf,MAAIA,EAAM,YACRA,EAAM,SAAS,EAAE,UAAU,GAAA,CAAO;AAAA,IAEtC,GAAG,GAAG,GAGDK;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,SAAqB;AACnB,WAAO,KAAK;AAAA,EACd;AACF;AC9GO,MAAME,IAAU;"}
+{"version":3,"file":"sdk.esm.js","names":[],"sources":["../src/inflowpay-provider.ts","../src/index.ts"],"sourcesContent":["/**\n * InflowPayProvider - Compatibility layer for React SDK API\n * \n * Provides the same API structure as the original React SDK\n * but works with vanilla JavaScript\n */\n\nimport type { CardElement, CardElementOptions } from './card-element';\nimport type { PaymentSDKConfig } from './payment-sdk';\nimport { PaymentSDK } from './payment-sdk';\nimport { PaymentResult } from './react';\nimport type { Locale, SaveCardResult } from './types';\n\nexport interface InflowPayProviderConfig {\n  publicKey: string;\n  locale?: Locale;\n}\n\nexport interface CardElementProps {\n  paymentId: string;\n  container?: string | HTMLElement;\n  onComplete?: (result: PaymentResult | SaveCardResult) => void;\n  onError?: (error: any) => void;\n  onClose?: () => void;\n  onReady?: () => void;\n  onChange?: (state: { complete: boolean }) => void;\n  buttonText?: string;\n  buttonStyle?: any;\n  style?: any;\n  placeholders?: {\n    cardNumber?: string;\n    expiry?: string;\n    cvc?: string;\n  };\n}\n\n/**\n * InflowPayProvider - Global SDK configuration\n * \n * Similar to React's InflowPayProvider but for vanilla JS\n * \n * @example\n * ```typescript\n * const provider = new InflowPayProvider({\n *   config: { apiKey: 'inflow_pub_xxx' }\n * });\n * \n * const cardElement = provider.createCardElement({\n *   paymentId: 'pay_xxx',\n *   onComplete: (result) => {\n *     if (result.status === 'CHECKOUT_SUCCESS') {\n *       window.location.href = '/success';\n *     }\n *   }\n * });\n * \n * cardElement.mount();\n * ```\n */\nexport class InflowPayProvider {\n  private sdk: PaymentSDK;\n\n  constructor(options: { config: InflowPayProviderConfig }) {\n    const config: PaymentSDKConfig = {\n      publicKey: options.config.publicKey,\n      locale: options.config.locale,\n    };\n\n    this.sdk = new PaymentSDK(config);\n  }\n\n  /**\n   * Create a CardElement (similar to React's <CardElement />)\n   * \n   * @param props - CardElement props (same as React SDK)\n   * @returns CardElement instance\n   */\n  createCardElement(props: CardElementProps): CardElement {\n    let container: string | HTMLElement;\n    if (props.container) {\n      container = props.container;\n    } else {\n      const defaultContainer = document.createElement('div');\n      defaultContainer.id = 'inflowpay-card-element-container';\n      document.body.appendChild(defaultContainer);\n      container = defaultContainer;\n    }\n\n    const cardElementOptions: CardElementOptions = {\n      container: container,\n      paymentId: props.paymentId,\n      ...(props.style && { style: props.style }),\n      ...(props.buttonText && { buttonText: props.buttonText }),\n      ...(props.placeholders && { placeholders: props.placeholders }),\n      onComplete: (result) => {\n        if (props.onComplete) {\n          props.onComplete(result);\n        }\n      },\n      onError: props.onError,\n      onClose: props.onClose,\n    };\n\n    const cardElement = this.sdk.createCardElement(cardElementOptions);\n\n    if (props.onReady) {\n      const originalMount = cardElement.mount.bind(cardElement);\n      cardElement.mount = () => {\n        originalMount();\n        setTimeout(() => {\n          if (props.onReady) {\n            props.onReady();\n          }\n        }, 100);\n      };\n    }\n\n    if (props.onChange) {\n      setTimeout(() => {\n        if (props.onChange) {\n          props.onChange({ complete: false });\n        }\n      }, 100);\n    }\n\n    return cardElement;\n  }\n\n  /**\n   * Get the underlying PaymentSDK instance\n   */\n  getSDK(): PaymentSDK {\n    return this.sdk;\n  }\n}\n\n","/**\n * InflowPay SDK v2 - Entry point\n * \n * Provides the same API as the original React SDK but using iframe-based payment flow\n * Compatible with vanilla JavaScript and easy migration from React SDK\n */\n\nexport { InflowPayProvider } from './inflowpay-provider';\nexport type { CardElementProps, InflowPayProviderConfig } from './inflowpay-provider';\n\nexport { PaymentSDK } from './payment-sdk';\nexport type { PaymentSDKConfig } from './payment-sdk';\n\nexport { CardElement } from './card-element';\nexport type { CardElementOptions } from './card-element';\n\nexport type {\n  CardElementState,\n  PaymentConfig,\n  PaymentError,\n  PaymentResult,\n  SaveCardResult,\n} from './types';\n\nexport { PaymentResultErrorCode, PaymentResultStatus } from './types';\n\nexport const VERSION = '1.1.0';\n"],"mappings":";;AA2DA,IAAa,IAAb,MAA+B;CAG7B,YAAY,GAA8C;AAMxD,OAAK,MAAM,IAAI,EALkB;GAC/B,WAAW,EAAQ,OAAO;GAC1B,QAAQ,EAAQ,OAAO;GACxB,CAEgC;;CASnC,kBAAkB,GAAsC;EACtD,IAAI;AACJ,MAAI,EAAM,UACR,KAAY,EAAM;OACb;GACL,IAAM,IAAmB,SAAS,cAAc,MAAM;AAGtD,GAFA,EAAiB,KAAK,oCACtB,SAAS,KAAK,YAAY,EAAiB,EAC3C,IAAY;;EAGd,IAAM,IAAyC;GAClC;GACX,WAAW,EAAM;GACjB,GAAI,EAAM,SAAS,EAAE,OAAO,EAAM,OAAO;GACzC,GAAI,EAAM,cAAc,EAAE,YAAY,EAAM,YAAY;GACxD,GAAI,EAAM,gBAAgB,EAAE,cAAc,EAAM,cAAc;GAC9D,aAAa,MAAW;AACtB,IAAI,EAAM,cACR,EAAM,WAAW,EAAO;;GAG5B,SAAS,EAAM;GACf,SAAS,EAAM;GAChB,EAEK,IAAc,KAAK,IAAI,kBAAkB,EAAmB;AAElE,MAAI,EAAM,SAAS;GACjB,IAAM,IAAgB,EAAY,MAAM,KAAK,EAAY;AACzD,KAAY,cAAc;AAExB,IADA,GAAe,EACf,iBAAiB;AACf,KAAI,EAAM,WACR,EAAM,SAAS;OAEhB,IAAI;;;AAYX,SARI,EAAM,YACR,iBAAiB;AACf,GAAI,EAAM,YACR,EAAM,SAAS,EAAE,UAAU,IAAO,CAAC;KAEpC,IAAI,EAGF;;CAMT,SAAqB;AACnB,SAAO,KAAK;;GC1GH,IAAU"}