npm - @vindhq/sloud-payment-sdk - Versions diffs - 1.0.0 → 1.0.1 - Mend

@vindhq/sloud-payment-sdk 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (163) hide show

package/README.md CHANGED Viewed

@@ -1,14 +1,14 @@
 # Sloud Payment SDK
-A secure, embeddable payment widget built in React, usable in **any JavaScript application** (React, Angular, Vue, or vanilla JS). Ships with **ESM builds** for easy integration.
+A secure, embeddable payment widget built in React, usable in **any JavaScript application** (React, Angular, Vue, or vanilla JS). Ships with **ESM, CJS, and UMD builds** for easy integration in any environment.
 ---
 ## Features
 - **Developer-friendly**: authored in React for easy maintenance and composability.
-- **Framework-agnostic**: works with React (peer dependency required).
-- **ESM build format** for modern npm/React apps.
+- **Framework-agnostic**: works in any JavaScript environment.
+- **Multiple build formats**: ESM and CJS for npm/React apps, UMD for browser usage.
 - **Bundled CSS** via PostCSS.
 - **Asset support** (SVG icons) included in the build.
 - **Built-in validation** using Formik and Yup.
@@ -18,26 +18,64 @@ A secure, embeddable payment widget built in React, usable in **any JavaScript a
 ## Installation
+### For npm/React Projects
 ```bash
 # Using npm
-npm install sloud-payment-sdk
+npm install @vindhq/sloud-payment-sdk
 # Using yarn
-yarn add sloud-payment-sdk
+yarn add @vindhq/sloud-payment-sdk
 ```
-**Note:** This widget has peer dependencies on React 19.1.1+. Make sure you have React and ReactDOM installed:
+**Note:** For npm projects, this widget has peer dependencies on React 18+. Make sure you have React and ReactDOM installed:
 ```bash
 npm install react react-dom
 ```
+### For Browser Usage (No Bundler)
+For direct browser usage without a bundler, use the UMD build which includes React bundled:
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Payment Widget</title>
+</head>
+<body>
+  <!-- Load the UMD bundle (includes React) -->
+  <script src="https://unpkg.com/@vindhq/sloud-payment-sdk@latest/dist/index.umd.js"></script>
+  <script>
+    // Access via PaymentWidget.default for UMD builds
+    const widget = new PaymentWidget.default({
+      type: "external",
+      public_key: "your-public-api-key",
+      amount: 10000,
+      customer: {
+        first_name: "John",
+        last_name: "Doe",
+        phone_number: "+2348012345678",
+        email: "john.doe@example.com",
+      },
+    });
+    widget.showPopup();
+  </script>
+</body>
+</html>
+```
 ---
 ## Usage
 The payment widget supports three payment types: **external**, **storefront**, and **sloudfront**. Each type has its own set of required fields.
+> **Note**: When using the UMD build in the browser (via script tag), access the widget via `PaymentWidget.default`. For npm/ES module imports, use the standard `import PaymentWidget from "sloud-payment-sdk"`.
 ### External Payment (Simple Payments)
 For straightforward payments with customer details:
@@ -354,15 +392,27 @@ const options: StorefrontPaymentWidgetOptions = {
 # Install dependencies
 yarn install
-# Run dev server with live reload
+# Run dev server with live reload (UMD build for browser testing)
 yarn dev
-# Build production bundles
+# Run dev server for library development (ESM/CJS builds)
+yarn dev:lib
+# Build all production bundles (ESM, CJS, UMD, and type definitions)
 yarn build
 ```
-- Development server serves `dist` and `public` folders at `http://localhost:8080`.
-- Includes live reload for fast iteration.
+### Development Server
+- **`yarn dev`**: Starts development server with UMD build at `http://localhost:3000`
+  - Bundles React for standalone browser testing
+  - Live reload enabled
+  - Serves `dist` and `public` folders
+  - Use `public/index.html` to test the widget
+- **`yarn dev:lib`**: Starts development server with ESM/CJS builds
+  - Externalizes React (for library development)
+  - Watch mode for rapid iteration
 ---
@@ -371,13 +421,19 @@ yarn build
 ```
 Payment-Widget/
 ├─ src/
-│  ├─ index.ts         # Entry point
-│  ├─ widget.ts        # Widget class
-│  ├─ components/      # React components
-│  └─ styles/          # SCSS/CSS files
-├─ dist/               # Bundled output (ESM, CJS, UMD)
-├─ public/             # Dev server HTML
-├─ rollup.config.ts    # Rollup configuration
+│  ├─ index.ts              # Entry point
+│  ├─ widget.tsx            # Widget class
+│  ├─ components/           # React components
+│  └─ styles/               # SCSS/CSS files
+├─ dist/                    # Bundled output
+│  ├─ index.esm.js          # ES Module build
+│  ├─ index.cjs.js          # CommonJS build
+│  ├─ index.umd.js          # UMD browser build
+│  └─ index.d.ts            # Type definitions
+├─ public/                  # Dev server HTML for testing
+├─ rollup.config.ts         # ESM/CJS build config
+├─ rollup.config.umd.ts     # UMD build config
+├─ rollup.config.dts.ts     # Type definitions config
 └─ package.json
 ```
@@ -385,9 +441,20 @@ Payment-Widget/
 ## Build Details
-- **ESM/CJS** → externalizes React for React apps.
-- **PostCSS** → injects and minifies CSS.
-- **Assets** → SVG/PNG handled automatically.
+### Output Files
+- **`dist/index.esm.js`** - ES Module build (externalizes React)
+- **`dist/index.cjs.js`** - CommonJS build (externalizes React)
+- **`dist/index.umd.js`** - UMD build for browsers (bundles React, ~2MB)
+- **`dist/index.d.ts`** - TypeScript type definitions
+### Build Configuration
+- **ESM/CJS** → Externalizes React as peer dependency for React apps
+- **UMD** → Bundles React for standalone browser usage
+- **PostCSS** → Injects and minifies CSS into JS bundle
+- **Assets** → SVG/PNG files handled automatically
+- **TypeScript** → Full type definitions included
 ---