@kwespay/widget 1.0.7 → 1.0.8
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 +25 -28
- package/dist/esm/index.js +2 -3
- package/dist/kwespay-widget.js +2 -3
- package/dist/kwespay-widget.min.js +2 -2
- package/package.json +1 -1
package/Readme.MD
CHANGED
|
@@ -1,12 +1,20 @@
|
|
|
1
1
|
# @kwespay/widget
|
|
2
2
|
|
|
3
|
-
> Accept crypto payments
|
|
3
|
+
> Accept crypto payments on any EVM chain with a single JavaScript widget.
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/@kwespay/widget)
|
|
6
6
|
[](LICENSE)
|
|
7
7
|
|
|
8
8
|
---
|
|
9
9
|
|
|
10
|
+
## Get Started
|
|
11
|
+
|
|
12
|
+
1. Create a merchant account at [app.kwespay.xyz](https://app.kwespay.xyz)
|
|
13
|
+
2. Grab your **API Key** and **Vendor ID** from the dashboard
|
|
14
|
+
3. Install the widget and start accepting payments
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
|
|
10
18
|
## Installation
|
|
11
19
|
|
|
12
20
|
```bash
|
|
@@ -27,8 +35,8 @@ Or load via CDN (no bundler required):
|
|
|
27
35
|
import KwesPayWidget from "@kwespay/widget";
|
|
28
36
|
|
|
29
37
|
const widget = new KwesPayWidget({
|
|
30
|
-
apiKey: "your_api_key",
|
|
31
|
-
vendorId: "your_vendor_id",
|
|
38
|
+
apiKey: "your_api_key", // from app.kwespay.xyz
|
|
39
|
+
vendorId: "your_vendor_id", // from app.kwespay.xyz
|
|
32
40
|
amount: 10.0,
|
|
33
41
|
currency: "USD",
|
|
34
42
|
});
|
|
@@ -36,7 +44,7 @@ const widget = new KwesPayWidget({
|
|
|
36
44
|
widget.open();
|
|
37
45
|
```
|
|
38
46
|
|
|
39
|
-
|
|
47
|
+
The widget handles everything — wallet connection, network switching, token selection, transaction signing, and success/error states.
|
|
40
48
|
|
|
41
49
|
---
|
|
42
50
|
|
|
@@ -44,11 +52,11 @@ That's it. The widget handles wallet connection, network switching, token select
|
|
|
44
52
|
|
|
45
53
|
```js
|
|
46
54
|
const widget = new KwesPayWidget({
|
|
47
|
-
apiKey: "your_api_key", // Required —
|
|
48
|
-
vendorId: "your_vendor_id", // Required —
|
|
55
|
+
apiKey: "your_api_key", // Required — from app.kwespay.xyz
|
|
56
|
+
vendorId: "your_vendor_id", // Required — from app.kwespay.xyz
|
|
49
57
|
amount: 25.0, // Required — fiat amount to charge
|
|
50
58
|
currency: "USD", // Optional — "USD" (default) or "GHS"
|
|
51
|
-
acceptedTokens: ["USDT", "USDC"], // Optional — restrict tokens
|
|
59
|
+
acceptedTokens: ["USDT", "USDC"], // Optional — restrict accepted tokens
|
|
52
60
|
});
|
|
53
61
|
```
|
|
54
62
|
|
|
@@ -60,7 +68,7 @@ const widget = new KwesPayWidget({
|
|
|
60
68
|
| `"stablecoins"` | USDT, USDC, DAI, BUSD, USDc |
|
|
61
69
|
| `["USDT", "USDC"]` | Only the listed tokens |
|
|
62
70
|
|
|
63
|
-
|
|
71
|
+
Token and network availability is also scoped by the permissions set on your API key in the dashboard.
|
|
64
72
|
|
|
65
73
|
---
|
|
66
74
|
|
|
@@ -77,27 +85,23 @@ Tokens are also scoped by your API key's network/token permissions set in the Kw
|
|
|
77
85
|
| Base Sepolia | 84532 | Testnet |
|
|
78
86
|
| Lisk Sepolia | 4202 | Testnet |
|
|
79
87
|
|
|
80
|
-
Network and token availability in the widget is automatically filtered by your API key's permitted scope.
|
|
81
|
-
|
|
82
88
|
---
|
|
83
89
|
|
|
84
90
|
## Methods
|
|
85
91
|
|
|
86
92
|
```js
|
|
87
|
-
widget.open(); //
|
|
88
|
-
widget.close(); //
|
|
93
|
+
widget.open(); // Open the payment widget
|
|
94
|
+
widget.close(); // Close the widget
|
|
89
95
|
widget.isOpen(); // Returns boolean
|
|
90
|
-
widget.updateAmount(15.0, "USD"); // Update amount
|
|
91
|
-
widget.getState(); // Returns current widget
|
|
92
|
-
widget.destroy(); //
|
|
96
|
+
widget.updateAmount(15.0, "USD"); // Update amount on the fly
|
|
97
|
+
widget.getState(); // Returns current widget and config state
|
|
98
|
+
widget.destroy(); // Remove widget from DOM and clean up
|
|
93
99
|
```
|
|
94
100
|
|
|
95
101
|
---
|
|
96
102
|
|
|
97
103
|
## Events
|
|
98
104
|
|
|
99
|
-
Listen for widget lifecycle and payment events on the `window`:
|
|
100
|
-
|
|
101
105
|
```js
|
|
102
106
|
window.addEventListener("kwespay:paymentSuccess", (e) => {
|
|
103
107
|
const {
|
|
@@ -109,7 +113,7 @@ window.addEventListener("kwespay:paymentSuccess", (e) => {
|
|
|
109
113
|
token,
|
|
110
114
|
network,
|
|
111
115
|
} = e.detail;
|
|
112
|
-
//
|
|
116
|
+
// fulfil your order here
|
|
113
117
|
});
|
|
114
118
|
|
|
115
119
|
window.addEventListener("kwespay:paymentError", (e) => {
|
|
@@ -121,6 +125,7 @@ window.addEventListener("kwespay:paymentCancelled", (e) => {
|
|
|
121
125
|
});
|
|
122
126
|
|
|
123
127
|
window.addEventListener("kwespay:widgetOpened", () => {});
|
|
128
|
+
|
|
124
129
|
window.addEventListener("kwespay:widgetClosed", (e) => {
|
|
125
130
|
console.log(e.detail.completedPayment); // boolean
|
|
126
131
|
});
|
|
@@ -134,10 +139,8 @@ window.addEventListener("kwespay:apiKeyValidated", (e) => {
|
|
|
134
139
|
|
|
135
140
|
## Wallet Support
|
|
136
141
|
|
|
137
|
-
- **Injected wallets**
|
|
138
|
-
- **Mobile wallets**
|
|
139
|
-
|
|
140
|
-
---
|
|
142
|
+
- **Injected wallets** — MetaMask, Coinbase Wallet, Rabby, and any EIP-6963 compatible wallet
|
|
143
|
+
- **Mobile wallets** — WalletConnect v2 via QR code and deep link
|
|
141
144
|
|
|
142
145
|
## Examples
|
|
143
146
|
|
|
@@ -148,12 +151,6 @@ window.addEventListener("kwespay:apiKeyValidated", (e) => {
|
|
|
148
151
|
|
|
149
152
|
---
|
|
150
153
|
|
|
151
|
-
## Fee Model
|
|
152
|
-
|
|
153
|
-
KwesPay uses a **customer-pays-fee** architecture. The fee is calculated by the backend and signed into the payment payload — the merchant always receives the exact `amount` specified. Fee details are shown to the customer before they confirm the transaction.
|
|
154
|
-
|
|
155
|
-
---
|
|
156
|
-
|
|
157
154
|
## License
|
|
158
155
|
|
|
159
156
|
MIT © KwesPay
|
package/dist/esm/index.js
CHANGED
|
@@ -8,7 +8,7 @@ const SUPPORTED_CURRENCIES = {
|
|
|
8
8
|
const STABLECOIN_SYMBOLS = ["USDT", "USDC", "DAI", "BUSD", "USDc"];
|
|
9
9
|
|
|
10
10
|
const DEFAULT_CONFIG = {
|
|
11
|
-
graphqlEndpoint: "https://
|
|
11
|
+
graphqlEndpoint: "https://api.kwespay.xyz/",
|
|
12
12
|
currency: SUPPORTED_CURRENCIES.USD,
|
|
13
13
|
};
|
|
14
14
|
|
|
@@ -97,7 +97,6 @@ const TOKEN_CONFIGS = {
|
|
|
97
97
|
decimals: 18,
|
|
98
98
|
coingeckoId: "ethereum",
|
|
99
99
|
binanceSymbol: "ETHUSDT",
|
|
100
|
-
|
|
101
100
|
},
|
|
102
101
|
{
|
|
103
102
|
symbol: "USDT",
|
|
@@ -3183,7 +3182,7 @@ const QuoteMethods = {
|
|
|
3183
3182
|
} catch (err) {
|
|
3184
3183
|
console.error("[KwesPayWidget] Quote fetch failed:", err.message);
|
|
3185
3184
|
if (cryptoLine) {
|
|
3186
|
-
cryptoLine.textContent = "Could not load
|
|
3185
|
+
cryptoLine.textContent = "Could not load please try again.";
|
|
3187
3186
|
cryptoLine.classList.remove("loading");
|
|
3188
3187
|
}
|
|
3189
3188
|
if (proceedBtn) proceedBtn.disabled = true;
|
package/dist/kwespay-widget.js
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
const STABLECOIN_SYMBOLS = ["USDT", "USDC", "DAI", "BUSD", "USDc"];
|
|
15
15
|
|
|
16
16
|
const DEFAULT_CONFIG = {
|
|
17
|
-
graphqlEndpoint: "https://
|
|
17
|
+
graphqlEndpoint: "https://api.kwespay.xyz/",
|
|
18
18
|
currency: SUPPORTED_CURRENCIES.USD,
|
|
19
19
|
};
|
|
20
20
|
|
|
@@ -103,7 +103,6 @@
|
|
|
103
103
|
decimals: 18,
|
|
104
104
|
coingeckoId: "ethereum",
|
|
105
105
|
binanceSymbol: "ETHUSDT",
|
|
106
|
-
|
|
107
106
|
},
|
|
108
107
|
{
|
|
109
108
|
symbol: "USDT",
|
|
@@ -19129,7 +19128,7 @@ ${e.length}`,n=new TextEncoder().encode(t+e);return "0x"+toString$1(keccak_256$3
|
|
|
19129
19128
|
} catch (err) {
|
|
19130
19129
|
console.error("[KwesPayWidget] Quote fetch failed:", err.message);
|
|
19131
19130
|
if (cryptoLine) {
|
|
19132
|
-
cryptoLine.textContent = "Could not load
|
|
19131
|
+
cryptoLine.textContent = "Could not load please try again.";
|
|
19133
19132
|
cryptoLine.classList.remove("loading");
|
|
19134
19133
|
}
|
|
19135
19134
|
if (proceedBtn) proceedBtn.disabled = true;
|