@inflow_pay/sdk 0.0.1 → 0.2.0

package/README.md

@@ -8,27 +8,45 @@ Accept card payments with a pre-built, secure payment form. **Same API as the Re
 npm install @inflow_pay/sdk
 ```
 
+Or use via CDN (UMD build):
+
+```html
+<!-- Main SDK -->
+<script src="https://cdn.inflowpay.com/sdk/v2/sdk.umd.js"></script>
+<script>
+  // SDK is available as window.InflowPaySDK
+  const provider = new InflowPaySDK.InflowPayProvider({
+    config: { apiKey: 'inflow_pub_xxx' }
+  });
+</script>
+
+<!-- React SDK (if using React) -->
+<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+<script src="https://cdn.inflowpay.com/sdk/v2/react.umd.js"></script>
+```
+
 ## Quick Start
 
 **Same API as React SDK!** Easy migration from React SDK to iframe-based SDK:
 
 ```javascript
-import { InflowPayProvider } from "@inflow_pay/sdk";
+import { InflowPayProvider } from '@inflow_pay/sdk';
 
 // Step 1: Create InflowPayProvider (same as React's <InflowPayProvider>)
 const provider = new InflowPayProvider({
-  config: { apiKey: "inflow_pub_xxx" },
+  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",
+  paymentId: 'pay_xxx', // From your backend
+  container: '#card-container',
   onComplete: (result) => {
-    if (result.status === "CHECKOUT_SUCCESS") {
-      window.location.href = "/success";
+    if (result.status === 'CHECKOUT_SUCCESS') {
+      window.location.href = '/success';
     }
-  },
+  }
 });
 
 // Step 3: Mount the CardElement
@@ -48,15 +66,19 @@ cardElement.mount();
 
 Payments progress through these statuses:
 
-| Status             | Description       | Success? |
-| ------------------ | ----------------- | -------- |
-| `CHECKOUT_SUCCESS` | Payment confirmed | ✅ Yes   |
-| `PAYMENT_FAILED`   | Failed            | ❌ No    |
+| Status | Description | Success? |
+|--------|-------------|----------|
+| `CHECKOUT_SUCCESS` | Payment confirmed | ✅ Yes |
+| `PAYMENT_RECEIVED` | Funds received | ✅ Yes |
+| `PAYMENT_SUCCESS` | Complete | ✅ Yes |
+| `PAYMENT_FAILED` | Failed | ❌ No |
 
 **Check for success:**
 
 ```javascript
-if (result.status === "CHECKOUT_SUCCESS") {
+if (result.status === 'CHECKOUT_SUCCESS' ||
+    result.status === 'PAYMENT_RECEIVED' ||
+    result.status === 'PAYMENT_SUCCESS') {
   // Payment successful
 }
 ```
@@ -68,11 +90,11 @@ if (result.status === "CHECKOUT_SUCCESS") {
 ```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
-  },
+    apiKey: 'inflow_pub_xxx',  // Required
+    iframeUrl: 'https://...',   // Optional, auto-detected from API key
+    timeout: 30000,             // Optional, default: 30000
+    debug: false                // Optional, default: false
+  }
 });
 ```
 
@@ -80,34 +102,34 @@ const provider = new InflowPayProvider({
 
 ```javascript
 const cardElement = provider.createCardElement({
-  paymentId: "pay_xxx", // Required
-  container: "#card-container", // Required (CSS selector or HTMLElement)
-
+  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
@@ -137,32 +159,33 @@ cardElement.destroy();
 ```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>
+<head>
+  <title>My Payment Page</title>
+</head>
+<body>
+  <div id="card-container"></div>
+  
+  <script src="https://cdn.inflowpay.com/sdk/v2/sdk.umd.js"></script>
+  <script>
+    // Same API as React SDK!
+    // SDK is available as window.InflowPaySDK
+    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>
 ```
 
@@ -203,25 +226,25 @@ 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",
+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
+    '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",
+    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",
-  }),
+    successUrl: 'https://yourdomain.com/success',
+    cancelUrl: 'https://yourdomain.com/cancel'
+  })
 });
 
 const { payment } = await response.json();
@@ -240,16 +263,16 @@ If you're using React, you can use the React components which work **exactly lik
 
 ```tsx
 // Just change the import path!
-import { InflowPayProvider, CardElement } from "@inflow_pay/sdk/react";
+import { InflowPayProvider, CardElement } from '@inflow_pay/sdk/react';
 
 function App() {
   return (
-    <InflowPayProvider config={{ apiKey: "inflow_pub_xxx" }}>
+    <InflowPayProvider config={{ apiKey: 'inflow_pub_xxx' }}>
       <CardElement
         paymentId={paymentId}
         onComplete={(result) => {
-          if (result.status === "CHECKOUT_SUCCESS") {
-            window.location.href = "/success";
+          if (result.status === 'CHECKOUT_SUCCESS') {
+            window.location.href = '/success';
           }
         }}
       />
@@ -265,27 +288,26 @@ function App() {
 If you're not using React, you can use the vanilla JavaScript API:
 
 ```javascript
-import { InflowPayProvider } from "@inflow_pay/sdk";
+import { InflowPayProvider } from '@inflow_pay/sdk';
 
 const provider = new InflowPayProvider({
-  config: { apiKey: "inflow_pub_xxx" },
+  config: { apiKey: 'inflow_pub_xxx' }
 });
 
 const cardElement = provider.createCardElement({
   paymentId: paymentId,
-  container: "#card-container",
+  container: '#card-container',
   onComplete: (result) => {
-    if (result.status === "CHECKOUT_SUCCESS") {
-      window.location.href = "/success";
+    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
@@ -296,16 +318,16 @@ cardElement.mount();
 Full type definitions included:
 
 ```typescript
-import { InflowPayProvider, PaymentStatus } from "@inflow_pay/sdk";
-import type { PaymentResult, PaymentError } from "@inflow_pay/sdk";
+import { InflowPayProvider, PaymentStatus } from '@inflow_pay/sdk';
+import type { PaymentResult, PaymentError } from '@inflow_pay/sdk';
 
 const provider = new InflowPayProvider({
-  config: { apiKey: "inflow_pub_xxx" },
+  config: { apiKey: 'inflow_pub_xxx' }
 });
 
 const cardElement = provider.createCardElement({
-  paymentId: "pay_xxx",
-  container: "#card-container",
+  paymentId: 'pay_xxx',
+  container: '#card-container',
   onComplete: (result: PaymentResult) => {
     if (result.status === PaymentStatus.CHECKOUT_SUCCESS) {
       // Success
@@ -313,7 +335,7 @@ const cardElement = provider.createCardElement({
   },
   onError: (error: PaymentError) => {
     console.error(error);
-  },
+  }
 });
 ```