@vindhq/sloud-payment-sdk 1.0.3 → 1.0.4
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.
- package/README.md +74 -37
- package/dist/index.cjs.js +1 -1
- package/dist/index.d.ts +11 -1
- package/dist/index.esm.js +2 -2
- package/dist/index.umd.js +54239 -24
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -41,30 +41,30 @@ For direct browser usage without a bundler, use the UMD build which includes Rea
|
|
|
41
41
|
```html
|
|
42
42
|
<!DOCTYPE html>
|
|
43
43
|
<html>
|
|
44
|
-
<head>
|
|
45
|
-
|
|
46
|
-
</head>
|
|
47
|
-
<body>
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
</body>
|
|
44
|
+
<head>
|
|
45
|
+
<title>Payment Widget</title>
|
|
46
|
+
</head>
|
|
47
|
+
<body>
|
|
48
|
+
<!-- Load the UMD bundle (includes React) -->
|
|
49
|
+
<script src="https://unpkg.com/@vindhq/sloud-payment-sdk@latest/dist/index.umd.js"></script>
|
|
50
|
+
|
|
51
|
+
<script>
|
|
52
|
+
// Access via PaymentWidget.default for UMD builds
|
|
53
|
+
const widget = new PaymentWidget.default({
|
|
54
|
+
type: "external",
|
|
55
|
+
public_key: "your-public-api-key",
|
|
56
|
+
amount: 10000,
|
|
57
|
+
customer: {
|
|
58
|
+
first_name: "John",
|
|
59
|
+
last_name: "Doe",
|
|
60
|
+
phone_number: "+2348012345678",
|
|
61
|
+
email: "john.doe@example.com",
|
|
62
|
+
},
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
widget.showPopup();
|
|
66
|
+
</script>
|
|
67
|
+
</body>
|
|
68
68
|
</html>
|
|
69
69
|
```
|
|
70
70
|
|
|
@@ -90,11 +90,40 @@ const widget = new PaymentWidget({
|
|
|
90
90
|
email: "john.doe@example.com",
|
|
91
91
|
},
|
|
92
92
|
isLocalEnv: false, // Optional: set to true for local development
|
|
93
|
+
onSuccess: () => {
|
|
94
|
+
console.log("Payment successful!");
|
|
95
|
+
// Navigate to a confirmation page, update your UI, etc.
|
|
96
|
+
},
|
|
93
97
|
});
|
|
94
98
|
|
|
95
99
|
widget.showPopup();
|
|
96
100
|
```
|
|
97
101
|
|
|
102
|
+
### Handling Payment Success
|
|
103
|
+
|
|
104
|
+
Use the `onSuccess` callback to be notified when a payment completes successfully:
|
|
105
|
+
|
|
106
|
+
```tsx
|
|
107
|
+
import PaymentWidget from "@vindhq/sloud-payment-sdk";
|
|
108
|
+
|
|
109
|
+
const widget = new PaymentWidget({
|
|
110
|
+
type: "external",
|
|
111
|
+
public_key: "your-public-api-key",
|
|
112
|
+
amount: 10000,
|
|
113
|
+
customer: {
|
|
114
|
+
first_name: "John",
|
|
115
|
+
last_name: "Doe",
|
|
116
|
+
phone_number: "+2348012345678",
|
|
117
|
+
email: "john.doe@example.com",
|
|
118
|
+
},
|
|
119
|
+
onSuccess: () => {
|
|
120
|
+
console.log("Payment successful!");
|
|
121
|
+
// Navigate to a confirmation page, update your UI, etc.
|
|
122
|
+
},
|
|
123
|
+
});
|
|
124
|
+
|
|
125
|
+
widget.showPopup();
|
|
126
|
+
```
|
|
98
127
|
|
|
99
128
|
---
|
|
100
129
|
|
|
@@ -106,19 +135,19 @@ Creates a new payment widget instance.
|
|
|
106
135
|
|
|
107
136
|
#### Payment Widget Options
|
|
108
137
|
|
|
109
|
-
| Parameter
|
|
110
|
-
|
|
|
111
|
-
| `type`
|
|
112
|
-
| `public_key` | `string`
|
|
113
|
-
| `amount`
|
|
114
|
-
| `customer`
|
|
115
|
-
| `isLocalEnv` | `boolean`
|
|
116
|
-
|
|
117
|
-
|
|
138
|
+
| Parameter | Type | Required | Description |
|
|
139
|
+
| ------------ | ------------------------------------ | -------- | ----------------------------------------------- |
|
|
140
|
+
| `type` | `"external"` | Yes | Payment type (must be `"external"`) |
|
|
141
|
+
| `public_key` | `string` | Yes | Your public API key for secure payments |
|
|
142
|
+
| `amount` | `number` | Yes | Payment amount in smallest currency unit |
|
|
143
|
+
| `customer` | `Customer` | Yes | Customer information object |
|
|
144
|
+
| `isLocalEnv` | `boolean` | No | Set to `true` for local development environment |
|
|
145
|
+
| `onSuccess` | `(data: PaymentSuccessData) => void` | No | Callback invoked after a successful payment |
|
|
118
146
|
|
|
119
147
|
#### Type Definitions
|
|
120
148
|
|
|
121
149
|
**Customer**
|
|
150
|
+
|
|
122
151
|
```ts
|
|
123
152
|
interface Customer {
|
|
124
153
|
first_name: string;
|
|
@@ -128,6 +157,15 @@ interface Customer {
|
|
|
128
157
|
}
|
|
129
158
|
```
|
|
130
159
|
|
|
160
|
+
**PaymentSuccessData**
|
|
161
|
+
|
|
162
|
+
```ts
|
|
163
|
+
interface PaymentSuccessData {
|
|
164
|
+
reference: string;
|
|
165
|
+
amount: number;
|
|
166
|
+
currency: string;
|
|
167
|
+
}
|
|
168
|
+
```
|
|
131
169
|
|
|
132
170
|
#### Methods
|
|
133
171
|
|
|
@@ -192,9 +230,7 @@ try {
|
|
|
192
230
|
The SDK uses a builder pattern for payment payloads:
|
|
193
231
|
|
|
194
232
|
```ts
|
|
195
|
-
import {
|
|
196
|
-
buildPaymentInstrumentPayload,
|
|
197
|
-
} from "@vindhq/sloud-payment-sdk";
|
|
233
|
+
import { buildPaymentInstrumentPayload } from "@vindhq/sloud-payment-sdk";
|
|
198
234
|
|
|
199
235
|
// Build payload from options
|
|
200
236
|
const payload = buildPaymentInstrumentPayload({
|
|
@@ -217,6 +253,7 @@ The SDK is written in TypeScript and provides full type definitions:
|
|
|
217
253
|
```ts
|
|
218
254
|
import type {
|
|
219
255
|
PaymentWidgetOptions,
|
|
256
|
+
PaymentSuccessData,
|
|
220
257
|
Customer,
|
|
221
258
|
} from "@vindhq/sloud-payment-sdk";
|
|
222
259
|
|
|
@@ -292,7 +329,7 @@ Payment-Widget/
|
|
|
292
329
|
### Output Files
|
|
293
330
|
|
|
294
331
|
- **`dist/index.esm.js`** - ES Module build (externalizes React)
|
|
295
|
-
- **`dist/index.cjs.js`** - CommonJS build (externalizes React)
|
|
332
|
+
- **`dist/index.cjs.js`** - CommonJS build (externalizes React)
|
|
296
333
|
- **`dist/index.umd.js`** - UMD build for browsers (bundles React, ~2MB)
|
|
297
334
|
- **`dist/index.d.ts`** - TypeScript type definitions
|
|
298
335
|
|