@finyxpay/ui 0.1.0 → 0.1.2
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 +111 -0
- package/package.json +3 -2
package/README.md
ADDED
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
# @finyxpay/ui
|
|
2
|
+
|
|
3
|
+
Vanilla TypeScript checkout UI for KoomiPay API v4. Payment methods render in the merchant page (not an iframe). Card PAN never touches merchant DOM — Adyen Web and Airwallex Elements own those fields.
|
|
4
|
+
|
|
5
|
+
For React, use [`@finyxpay/react-ui`](https://www.npmjs.com/package/@finyxpay/react-ui).
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @finyxpay/ui
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
```ts
|
|
14
|
+
import { init } from '@finyxpay/ui';
|
|
15
|
+
import '@finyxpay/ui/styles.css';
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
Script tag (UMD): `await Finyx.init(...)` then `Finyx.createElement(...)`.
|
|
19
|
+
|
|
20
|
+
## Drop-in checkout
|
|
21
|
+
|
|
22
|
+
```ts
|
|
23
|
+
const finyx = await init({
|
|
24
|
+
apiKey: 'live.xxx',
|
|
25
|
+
// apiBase: 'https://custom-host', // optional override
|
|
26
|
+
appearance: { theme: 'default' },
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
const checkout = await finyx.createElement('checkout', {
|
|
30
|
+
amount: 25.5,
|
|
31
|
+
currency: 'SGD',
|
|
32
|
+
orderId: 'ord_123',
|
|
33
|
+
items: [{ productID: '1', productName: 'Mug', quantity: 1, price: 25.5 }],
|
|
34
|
+
returnUrl: `${location.origin}/checkout/result`,
|
|
35
|
+
autoCapture: true,
|
|
36
|
+
});
|
|
37
|
+
checkout.mount('#finyx-checkout');
|
|
38
|
+
checkout.on('success', (result) => { /* navigate */ });
|
|
39
|
+
checkout.on('error', (err) => { /* show error */ });
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
`createElement` before `init` throws. `init` twice with the same key reuses the instance; a different key replaces it.
|
|
43
|
+
|
|
44
|
+
## Custom composition
|
|
45
|
+
|
|
46
|
+
```ts
|
|
47
|
+
import { init, resolveElementType } from '@finyxpay/ui';
|
|
48
|
+
|
|
49
|
+
const finyx = await init({ apiKey: 'live.xxx' });
|
|
50
|
+
const list = await finyx.createElement('payment-method-list', {});
|
|
51
|
+
list.mount('#methods');
|
|
52
|
+
list.on('select', async (method) => {
|
|
53
|
+
const type = resolveElementType(method.type);
|
|
54
|
+
const pay = await finyx.createElement(type, {
|
|
55
|
+
amount: 25.5,
|
|
56
|
+
currency: 'SGD',
|
|
57
|
+
orderId: 'ord_123',
|
|
58
|
+
items: [/* ... */],
|
|
59
|
+
returnUrl: `${location.origin}/checkout/result`,
|
|
60
|
+
paymentMethod: method,
|
|
61
|
+
});
|
|
62
|
+
pay.mount('#pay');
|
|
63
|
+
pay.on('success', (result) => { /* navigate */ });
|
|
64
|
+
});
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
Atomic names still work (`createElement('paynow', ...)`, `createElement('alipaycn', ...)`, …).
|
|
68
|
+
|
|
69
|
+
### Element types
|
|
70
|
+
|
|
71
|
+
| Kind | Types |
|
|
72
|
+
| --- | --- |
|
|
73
|
+
| Drop-in / layout | `checkout`, `payment-method-list`, `card`, `payment-result` |
|
|
74
|
+
| Families | `qr` (PayNow, WeChat), `wallet` (Apple Pay, Google Pay), `alipay` (`alipay` / `alipaycn` / `alipayhk`), `redirect` |
|
|
75
|
+
| Atomics | `paynow`, `wechatpay`, `applepay`, `googlepay`, `alipay`, `alipaycn`, `alipayhk` |
|
|
76
|
+
|
|
77
|
+
`resolveElementType` map: `card` → `card`; `paynow` / `wechatpay` → `qr`; `applepay` / `googlepay` → `wallet`; `alipay` / `alipaycn` / `alipayhk` → `alipay`; anything else → `redirect`.
|
|
78
|
+
|
|
79
|
+
Events: `ready`, `select` (list only), `change`, `success`, `error`.
|
|
80
|
+
|
|
81
|
+
## API key → apiBase
|
|
82
|
+
|
|
83
|
+
`apiBase` is optional. If omitted, the host is inferred from the key prefix (`apiKey.split('.')[0]`):
|
|
84
|
+
|
|
85
|
+
| Prefix | Host |
|
|
86
|
+
| --- | --- |
|
|
87
|
+
| `dev` | `http://localhost:32022` |
|
|
88
|
+
| `test` / `playground` | `https://awx-api-pay-demo.koomi.app` |
|
|
89
|
+
| `sandbox` | `https://api-sandbox.koomipay.com` |
|
|
90
|
+
| `live` | `https://api.koomipay.com` |
|
|
91
|
+
|
|
92
|
+
Unknown prefix without `apiBase` throws `Invalid API Key`. A non-empty `apiBase` always wins. Export `resolveApiBase(apiKey)` for tests.
|
|
93
|
+
|
|
94
|
+
## Appearance
|
|
95
|
+
|
|
96
|
+
```ts
|
|
97
|
+
await init({
|
|
98
|
+
apiKey: 'live.xxx',
|
|
99
|
+
appearance: {
|
|
100
|
+
theme: 'default', // 'default' | 'minimal' | 'night'
|
|
101
|
+
showWordmark: true,
|
|
102
|
+
variables: { colorPrimary: '#2563eb' },
|
|
103
|
+
},
|
|
104
|
+
});
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
Tokens on the `.fy` root: `--fy-color-primary`, `--fy-color-bg`, `--fy-color-text`, `--fy-color-muted`, `--fy-color-danger`, `--fy-radius`, `--fy-font`.
|
|
108
|
+
|
|
109
|
+
## License
|
|
110
|
+
|
|
111
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@finyxpay/ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Finyx vanilla JS checkout UI — init, createElement, mount to the DOM",
|
|
5
5
|
"author": "Finyx",
|
|
6
6
|
"license": "MIT",
|
|
@@ -9,7 +9,8 @@
|
|
|
9
9
|
"module": "./dist/index.js",
|
|
10
10
|
"types": "./dist/index.d.ts",
|
|
11
11
|
"files": [
|
|
12
|
-
"dist"
|
|
12
|
+
"dist",
|
|
13
|
+
"README.md"
|
|
13
14
|
],
|
|
14
15
|
"sideEffects": [
|
|
15
16
|
"**/*.css"
|