@inflow_pay/sdk 0.0.1

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 InflowPay
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,336 @@
+# InflowPay SDK v2 - Iframe-based Payment SDK
+
+Accept card payments with a pre-built, secure payment form. **Same API as the React SDK** for easy migration.
+
+## Installation
+
+```bash
+npm install @inflow_pay/sdk
+```
+
+## Quick Start
+
+**Same API as React SDK!** Easy migration from React SDK to iframe-based SDK:
+
+```javascript
+import { InflowPayProvider } from "@inflow_pay/sdk";
+
+// Step 1: Create InflowPayProvider (same as React's <InflowPayProvider>)
+const provider = new InflowPayProvider({
+  config: { apiKey: "inflow_pub_xxx" },
+});
+
+// Step 2: Create CardElement (same as React's <CardElement>)
+const cardElement = provider.createCardElement({
+  paymentId: "pay_xxx", // From your backend
+  container: "#card-container",
+  onComplete: (result) => {
+    if (result.status === "CHECKOUT_SUCCESS") {
+      window.location.href = "/success";
+    }
+  },
+});
+
+// Step 3: Mount the CardElement
+cardElement.mount();
+```
+
+## How It Works
+
+1. **Backend**: Create a payment with billing info (your private key)
+2. **Frontend**: Create `InflowPayProvider` with your API key
+3. **Frontend**: Create `CardElement` with the `paymentId`
+4. **User**: Enters card details and submits
+5. **SDK**: Handles tokenization, 3DS, and payment completion
+6. **Your app**: Receives success/error via callback
+
+## Payment Status
+
+Payments progress through these statuses:
+
+| Status             | Description       | Success? |
+| ------------------ | ----------------- | -------- |
+| `CHECKOUT_SUCCESS` | Payment confirmed | ✅ Yes   |
+| `PAYMENT_FAILED`   | Failed            | ❌ No    |
+
+**Check for success:**
+
+```javascript
+if (result.status === "CHECKOUT_SUCCESS") {
+  // Payment successful
+}
+```
+
+## API Reference
+
+### InflowPayProvider
+
+```javascript
+const provider = new InflowPayProvider({
+  config: {
+    apiKey: "inflow_pub_xxx", // Required
+    iframeUrl: "https://...", // Optional, auto-detected from API key
+    timeout: 30000, // Optional, default: 30000
+    debug: false, // Optional, default: false
+  },
+});
+```
+
+### CardElement
+
+```javascript
+const cardElement = provider.createCardElement({
+  paymentId: "pay_xxx", // Required
+  container: "#card-container", // Required (CSS selector or HTMLElement)
+
+  // Callbacks (same as React SDK)
+  onReady: () => {
+    // Card element is mounted and ready
+  },
+
+  onChange: (state) => {
+    // Track validation state
+    // state.complete - whether form is valid
+  },
+
+  onComplete: (result) => {
+    // Payment complete (success or failure)
+    if (result.error) {
+      console.error(result.error.message);
+    }
+  },
+
+  onError: (error) => {
+    // SDK-level errors (network, validation)
+    console.error(error);
+  },
+
+  onClose: () => {
+    // User closed the payment
+  },
+});
+
+// Mount the CardElement
+cardElement.mount();
+```
+
+### CardElement Methods
+
+#### `mount(): void`
+
+Mounts the CardElement to the DOM. This will create and display the iframe.
+
+```javascript
+cardElement.mount();
+```
+
+#### `destroy(): void`
+
+Destroys the CardElement and cleans up resources.
+
+```javascript
+cardElement.destroy();
+```
+
+## HTML Example
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>My Payment Page</title>
+  </head>
+  <body>
+    <div id="card-container"></div>
+
+    <script src="https://cdn.inflowpay.com/sdk/v2/inflowpay-sdk.js"></script>
+    <script>
+      // Same API as React SDK!
+      const provider = new InflowPaySDK.InflowPayProvider({
+        config: { apiKey: "inflow_pub_xxx" },
+      });
+
+      const cardElement = provider.createCardElement({
+        paymentId: "pay_xxx",
+        container: "#card-container",
+        onComplete: (result) => {
+          if (result.status === InflowPaySDK.PaymentStatus.CHECKOUT_SUCCESS) {
+            alert("Payment successful!");
+          }
+        },
+      });
+
+      cardElement.mount();
+    </script>
+  </body>
+</html>
+```
+
+## Error Handling
+
+Errors are automatically mapped to user-friendly messages:
+
+```javascript
+cardElement.onComplete = (result) => {
+  if (result.error) {
+    console.log(result.error.message); // User-friendly
+    console.log(result.error.retryable); // Can retry?
+  }
+};
+```
+
+**Common errors:**
+
+- `card_declined` - Card was declined
+- `insufficient_funds` - Not enough funds
+- `invalid_card_number` - Invalid card
+- `THREE_DS_FAILED` - 3DS authentication failed
+
+## 3D Secure
+
+3DS is handled automatically. When required:
+
+1. SDK opens a modal with the authentication page
+2. User completes authentication
+3. Modal closes automatically
+4. Your `onComplete` callback receives the final result
+
+**No setup required!** The SDK automatically handles 3DS redirects.
+
+## Backend Integration
+
+Create payments on your backend with your **private key**:
+
+```javascript
+// Your backend (Node.js example)
+const response = await fetch("https://api.inflowpay.xyz/api/server/payment", {
+  method: "POST",
+  headers: {
+    Accept: "application/json",
+    "Content-Type": "application/json",
+    "X-Inflow-Api-Key": "inflow_priv_xxx", // Private key
+  },
+  body: JSON.stringify({
+    products: [{ name: "Product", price: 4999, quantity: 1 }],
+    currency: "EUR",
+    customerEmail: "customer@example.com",
+    billingCountry: "FR",
+    postalCode: "75001",
+    firstName: "John",
+    lastName: "Doe",
+    purchasingAsBusiness: false,
+    successUrl: "https://yourdomain.com/success",
+    cancelUrl: "https://yourdomain.com/cancel",
+  }),
+});
+
+const { payment } = await response.json();
+// Send payment.id to your frontend
+```
+
+See [API documentation](https://docs.inflowpay.com/v0/reference/createpayment) for full backend API reference.
+
+## Migration from React SDK
+
+The SDK v2 uses the **same API** as the React SDK, making migration easy. You have two options:
+
+### Option 1: Keep Using React (Recommended for React Apps)
+
+If you're using React, you can use the React components which work **exactly like the original SDK**:
+
+```tsx
+// Just change the import path!
+import { InflowPayProvider, CardElement } from "@inflow_pay/sdk/react";
+
+function App() {
+  return (
+    <InflowPayProvider config={{ apiKey: "inflow_pub_xxx" }}>
+      <CardElement
+        paymentId={paymentId}
+        onComplete={(result) => {
+          if (result.status === "CHECKOUT_SUCCESS") {
+            window.location.href = "/success";
+          }
+        }}
+      />
+    </InflowPayProvider>
+  );
+}
+```
+
+**No changes needed!** Same API, same behavior, just a different import path.
+
+### Option 2: Vanilla JavaScript (For Non-React Apps)
+
+If you're not using React, you can use the vanilla JavaScript API:
+
+```javascript
+import { InflowPayProvider } from "@inflow_pay/sdk";
+
+const provider = new InflowPayProvider({
+  config: { apiKey: "inflow_pub_xxx" },
+});
+
+const cardElement = provider.createCardElement({
+  paymentId: paymentId,
+  container: "#card-container",
+  onComplete: (result) => {
+    if (result.status === "CHECKOUT_SUCCESS") {
+      window.location.href = "/success";
+    }
+  },
+});
+
+cardElement.mount();
+```
+
+**Key differences from React version:**
+
+- No React required - works with vanilla JavaScript
+- Explicit `container` prop (CSS selector or HTMLElement) instead of JSX
+- Call `mount()` explicitly instead of automatic React mounting
+- Same callbacks, same status codes, same error handling
+
+## TypeScript
+
+Full type definitions included:
+
+```typescript
+import { InflowPayProvider, PaymentStatus } from "@inflow_pay/sdk";
+import type { PaymentResult, PaymentError } from "@inflow_pay/sdk";
+
+const provider = new InflowPayProvider({
+  config: { apiKey: "inflow_pub_xxx" },
+});
+
+const cardElement = provider.createCardElement({
+  paymentId: "pay_xxx",
+  container: "#card-container",
+  onComplete: (result: PaymentResult) => {
+    if (result.status === PaymentStatus.CHECKOUT_SUCCESS) {
+      // Success
+    }
+  },
+  onError: (error: PaymentError) => {
+    console.error(error);
+  },
+});
+```
+
+## Security
+
+- ✅ Card data is tokenized before reaching your server (PCI compliant)
+- ✅ Public keys can be safely exposed in browser
+- ✅ Private keys should never be in frontend code
+- ✅ All requests over HTTPS
+- ✅ Iframe isolation for security
+
+## Support
+
+- **Documentation:** https://docs.inflowpay.com/v0/reference/createpayment
+- **Email:** support@inflowpay.com
+- **GitHub:** https://github.com/inflowpay/sdk
+
+## License
+
+MIT - See [LICENSE](./LICENSE)

package/dist/react.d.ts

@@ -0,0 +1,104 @@
+import { ReactNode } from 'react';
+import { PaymentSDK } from '../payment-sdk';
+export interface SDKConfig {
+    apiKey: string;
+    iframeUrl?: string;
+    timeout?: number;
+    /** Enable debug logging (default: false, only allowed in local/dev environments) */
+    debug?: boolean;
+}
+export interface PaymentResult {
+    status: string;
+    data?: any;
+    alreadyProcessed?: boolean;
+    error?: {
+        code: string;
+        message: string;
+        retryable: boolean;
+    };
+}
+export interface PaymentError {
+    code: string;
+    message: string;
+    retryable: boolean;
+}
+export interface CardElementState {
+    complete: boolean;
+}
+export interface CardElementProps {
+    paymentId: string;
+    onReady?: () => void;
+    onChange?: (state: CardElementState) => void;
+    onComplete?: (result: PaymentResult) => void;
+    onError?: (error: PaymentError) => void;
+    buttonText?: string;
+    buttonStyle?: any;
+    style?: any;
+    placeholders?: {
+        cardNumber?: string;
+        expiry?: string;
+        cvc?: string;
+    };
+}
+/**
+ * InflowPayProvider - React component
+ *
+ * Same API as the original React SDK
+ *
+ * @example
+ * ```tsx
+ * <InflowPayProvider config={{ apiKey: 'inflow_pub_xxx' }}>
+ *   <CardElement
+ *     paymentId="pay_xxx"
+ *     onComplete={(result) => {
+ *       if (result.status === 'CHECKOUT_SUCCESS') {
+ *         window.location.href = '/success';
+ *       }
+ *     }}
+ *   />
+ * </InflowPayProvider>
+ * ```
+ */
+export declare function InflowPayProvider({ config, children, }: {
+    config: SDKConfig;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * useInflowPay - Hook to access InflowPay SDK instance
+ *
+ * @example
+ * ```tsx
+ * function CustomComponent() {
+ *   const inflow = useInflowPay();
+ *
+ *   const checkStatus = async () => {
+ *     const status = await inflow.getPaymentStatus('pay_xxx');
+ *     console.log(status);
+ *   };
+ *
+ *   return <button onClick={checkStatus}>Check Status</button>;
+ * }
+ * ```
+ */
+export declare function useInflowPay(): PaymentSDK;
+/**
+ * CardElement - React component
+ *
+ * Same API as the original React SDK
+ *
+ * @example
+ * ```tsx
+ * <CardElement
+ *   paymentId="pay_xxx"
+ *   onComplete={(result) => {
+ *     if (result.status === 'CHECKOUT_SUCCESS') {
+ *       window.location.href = '/success';
+ *     }
+ *   }}
+ * />
+ * ```
+ */
+export declare function CardElement({ paymentId, onReady, onChange, onComplete, onError, buttonText, buttonStyle, style, placeholders, config: propConfig, }: CardElementProps & {
+    config?: SDKConfig;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/react/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAc,EAAiB,SAAS,EAA2C,MAAM,OAAO,CAAC;AAIjG,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oFAAoF;IACpF,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,OAAO,CAAC;KACpB,CAAC;CACH;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,CAAC,EAAE;QACb,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;CACH;AAQD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,QAAQ,GACT,EAAE;IACD,MAAM,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAgBA;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,YAAY,IAAI,UAAU,CAMzC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,OAAO,EACP,QAAQ,EACR,UAAU,EACV,OAAO,EACP,UAAU,EACV,WAAW,EACX,KAAK,EACL,YAAY,EACZ,MAAM,EAAE,UAAU,GACnB,EAAE,gBAAgB,GAAG;IAAE,MAAM,CAAC,EAAE,SAAS,CAAA;CAAE,2CAuF3C"}