@bloonio/lokotro-pay 1.1.1 → 1.2.0
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
CHANGED
|
@@ -4,7 +4,7 @@ Angular SDK for Lokotro Pay - A comprehensive payment processing library with su
|
|
|
4
4
|
|
|
5
5
|
## ✨ Features
|
|
6
6
|
|
|
7
|
-
- 🎨 **
|
|
7
|
+
- 🎨 **Clean white-surface UI** — neutral payment look out of the box, fully themeable
|
|
8
8
|
- 🌍 **Multi-language Support** - 10 languages (EN, FR, ES, DE, IT, RU, HI, JA, ZH, LN)
|
|
9
9
|
- 💳 **Multiple Payment Methods** - Card (Mastercard Hosted Session), Mobile Money, E-Wallet, Flash, Bank Transfer
|
|
10
10
|
- 📱 **Responsive Design** - Works on all screen sizes
|
|
@@ -12,6 +12,38 @@ Angular SDK for Lokotro Pay - A comprehensive payment processing library with su
|
|
|
12
12
|
- 🔒 **Secure** - Built-in encryption and secure payment handling
|
|
13
13
|
- 🎯 **Type Safe** - Full TypeScript support
|
|
14
14
|
|
|
15
|
+
## 🎨 Theming
|
|
16
|
+
|
|
17
|
+
The widget renders on a clean white surface by default. To brand it, pass a `themeConfig`
|
|
18
|
+
alongside your `configs` — only the fields you set are overridden:
|
|
19
|
+
|
|
20
|
+
```ts
|
|
21
|
+
import { LokotroPayThemeConfig } from '@bloonio/lokotro-pay';
|
|
22
|
+
|
|
23
|
+
themeConfig: LokotroPayThemeConfig = {
|
|
24
|
+
primaryColor: '#2563EB', // primary buttons, focused inputs
|
|
25
|
+
secondaryColor: '#1E40AF', // secondary actions
|
|
26
|
+
tertiaryColor: '#3BFBDA', // highlights, OTP focus rings
|
|
27
|
+
// optional structural overrides
|
|
28
|
+
backgroundColor: '#FFFFFF',
|
|
29
|
+
surfaceColor: '#F7F8FA',
|
|
30
|
+
textColor: '#0F172A',
|
|
31
|
+
borderRadius: '12px',
|
|
32
|
+
};
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
```html
|
|
36
|
+
<lokotro-pay-checkout
|
|
37
|
+
[configs]="configs"
|
|
38
|
+
[paymentBody]="paymentBody"
|
|
39
|
+
[themeConfig]="themeConfig"
|
|
40
|
+
(response)="handleSuccess($event)"
|
|
41
|
+
(error)="handleError($event)" />
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
The theme is applied as CSS custom properties scoped to the checkout host —
|
|
45
|
+
it cannot leak into the rest of your app.
|
|
46
|
+
|
|
15
47
|
## 📦 Installation
|
|
16
48
|
|
|
17
49
|
```bash
|
|
@@ -27,7 +59,7 @@ yarn add @bloonio/lokotro-pay
|
|
|
27
59
|
```typescript
|
|
28
60
|
import { Component } from '@angular/core';
|
|
29
61
|
import {
|
|
30
|
-
|
|
62
|
+
LokotroCheckoutComponent,
|
|
31
63
|
LokotroPayConfig,
|
|
32
64
|
LokotroPaymentBody,
|
|
33
65
|
LokotroPayOnResponse,
|
|
@@ -37,15 +69,15 @@ import {
|
|
|
37
69
|
@Component({
|
|
38
70
|
selector: 'app-payment',
|
|
39
71
|
standalone: true,
|
|
40
|
-
imports: [
|
|
72
|
+
imports: [LokotroCheckoutComponent],
|
|
41
73
|
template: `
|
|
42
|
-
<lokotro-
|
|
74
|
+
<lokotro-checkout
|
|
43
75
|
[configs]="configs"
|
|
44
76
|
[paymentBody]="paymentBody"
|
|
45
77
|
(onResponse)="handleSuccess($event)"
|
|
46
78
|
(onError)="handleError($event)"
|
|
47
79
|
/>
|
|
48
|
-
`
|
|
80
|
+
`
|
|
49
81
|
})
|
|
50
82
|
export class PaymentComponent {
|
|
51
83
|
// API Configuration
|
|
@@ -420,16 +452,16 @@ export class MyComponent {
|
|
|
420
452
|
|
|
421
453
|
### Components
|
|
422
454
|
|
|
423
|
-
| Component |
|
|
424
|
-
|
|
425
|
-
| `
|
|
426
|
-
| `LokotroPaymentStatusComponent` |
|
|
427
|
-
| `LokotroPaymentMethodSelectionComponent` |
|
|
428
|
-
| `LokotroPaymentFormComponent` |
|
|
429
|
-
| `LokotroOtpVerificationComponent` |
|
|
430
|
-
| `LokotroProcessingComponent` |
|
|
431
|
-
| `LokotroResultComponent` |
|
|
432
|
-
| `LokotroLoadingComponent` |
|
|
455
|
+
| Component | Description |
|
|
456
|
+
|-----------|-------------|
|
|
457
|
+
| `LokotroCheckoutComponent` | Main checkout widget |
|
|
458
|
+
| `LokotroPaymentStatusComponent` | Payment status tracker (uses only paymentId) |
|
|
459
|
+
| `LokotroPaymentMethodSelectionComponent` | Payment method grid |
|
|
460
|
+
| `LokotroPaymentFormComponent` | Payment forms |
|
|
461
|
+
| `LokotroOtpVerificationComponent` | OTP input |
|
|
462
|
+
| `LokotroProcessingComponent` | Processing spinner |
|
|
463
|
+
| `LokotroResultComponent` | Success/error screens |
|
|
464
|
+
| `LokotroLoadingComponent` | Loading indicator |
|
|
433
465
|
|
|
434
466
|
## Payment Status Tracking
|
|
435
467
|
|