npm - @vindhq/sloud-payment-sdk - Versions diffs - 1.0.3 → 1.0.5 - Mend

@vindhq/sloud-payment-sdk 1.0.3 → 1.0.5

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

@@ -41,30 +41,30 @@ For direct browser usage without a bundler, use the UMD build which includes Rea
 ```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>
+  <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>
 ```
@@ -90,11 +90,40 @@ const widget = new PaymentWidget({
     email: "john.doe@example.com",
   },
   isLocalEnv: false, // Optional: set to true for local development
+  onSuccess: () => {
+    console.log("Payment successful!");
+    // Navigate to a confirmation page, update your UI, etc.
+  },
 });
 widget.showPopup();
 ```
+### Handling Payment Success
+Use the `onSuccess` callback to be notified when a payment completes successfully:
+```tsx
+import PaymentWidget from "@vindhq/sloud-payment-sdk";
+const widget = new PaymentWidget({
+  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",
+  },
+  onSuccess: () => {
+    console.log("Payment successful!");
+    // Navigate to a confirmation page, update your UI, etc.
+  },
+});
+widget.showPopup();
+```
 ---
@@ -106,19 +135,19 @@ Creates a new payment widget instance.
 #### Payment Widget Options
-| Parameter | Type | Required | Description |
-| --------------- | --------- | -------- | -------------------------------------------------- |
-| `type` | `"external"` | Yes | Payment type (must be `"external"`) |
-| `public_key` | `string` | Yes | Your public API key for secure payments |
-| `amount` | `number` | Yes | Payment amount in smallest currency unit |
-| `customer` | `Customer` | Yes | Customer information object |
-| `isLocalEnv` | `boolean` | No | Set to `true` for local development environment |
+| Parameter    | Type                                 | Required | Description                                     |
+| ------------ | ------------------------------------ | -------- | ----------------------------------------------- |
+| `type`       | `"external"`                         | Yes      | Payment type (must be `"external"`)             |
+| `public_key` | `string`                             | Yes      | Your public API key for secure payments         |
+| `amount`     | `number`                             | Yes      | Payment amount in smallest currency unit        |
+| `customer`   | `Customer`                           | Yes      | Customer information object                     |
+| `isLocalEnv` | `boolean`                            | No       | Set to `true` for local development environment |
+| `onSuccess`  | `(data: PaymentSuccessData) => void` | No       | Callback invoked after a successful payment     |
 #### Type Definitions
 **Customer**
 ```ts
 interface Customer {
   first_name: string;
@@ -128,6 +157,15 @@ interface Customer {
 }
 ```
+**PaymentSuccessData**
+```ts
+interface PaymentSuccessData {
+  reference: string;
+  amount: number;
+  currency: string;
+}
+```
 #### Methods
@@ -192,9 +230,7 @@ try {
 The SDK uses a builder pattern for payment payloads:
 ```ts
-import {
-  buildPaymentInstrumentPayload,
-} from "@vindhq/sloud-payment-sdk";
+import { buildPaymentInstrumentPayload } from "@vindhq/sloud-payment-sdk";
 // Build payload from options
 const payload = buildPaymentInstrumentPayload({
@@ -217,6 +253,7 @@ The SDK is written in TypeScript and provides full type definitions:
 ```ts
 import type {
   PaymentWidgetOptions,
+  PaymentSuccessData,
   Customer,
 } from "@vindhq/sloud-payment-sdk";
@@ -292,7 +329,7 @@ Payment-Widget/
 ### Output Files
 - **`dist/index.esm.js`** - ES Module build (externalizes React)
-- **`dist/index.cjs.js`** - CommonJS 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