@mintmoney/react 0.1.0-alpha.23 → 0.1.0-alpha.24
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/dist/css/styles.css +1 -0
- package/dist/esm/api/checkouts.js +11 -3
- package/dist/esm/api/checkouts.js.map +1 -1
- package/dist/esm/api/generated.js +130 -0
- package/dist/esm/api/generated.js.map +1 -1
- package/dist/esm/api/payments.js +13 -8
- package/dist/esm/api/payments.js.map +1 -1
- package/dist/esm/checkout/modal.js +0 -2
- package/dist/esm/checkout/modal.js.map +1 -1
- package/dist/esm/checkout/views/crypto-intent/currency-select.js +14 -18
- package/dist/esm/checkout/views/crypto-intent/currency-select.js.map +1 -1
- package/dist/esm/checkout/views/crypto-intent/direct-details.js +168 -7
- package/dist/esm/checkout/views/crypto-intent/direct-details.js.map +1 -1
- package/dist/esm/checkout/views/crypto-intent/methods.js +43 -17
- package/dist/esm/checkout/views/crypto-intent/methods.js.map +1 -1
- package/dist/esm/components/crypto/currency-selector.js +3 -3
- package/dist/esm/components/crypto/currency-selector.js.map +1 -1
- package/dist/esm/components/icons/clipboard-add.js +20 -0
- package/dist/esm/components/icons/clipboard-add.js.map +1 -0
- package/dist/esm/components/icons/clipboard-check.js +20 -0
- package/dist/esm/components/icons/clipboard-check.js.map +1 -0
- package/dist/esm/components/icons/index.js +2 -0
- package/dist/esm/components/icons/index.js.map +1 -1
- package/dist/esm/config.js.map +1 -1
- package/dist/esm/state/checkout/store.js +4 -4
- package/dist/esm/state/checkout/store.js.map +1 -1
- package/dist/esm/utils/string.js +34 -0
- package/dist/esm/utils/string.js.map +1 -0
- package/dist/types/api/checkouts.d.ts +2 -7
- package/dist/types/api/checkouts.d.ts.map +1 -1
- package/dist/types/api/generated.d.ts +313 -44
- package/dist/types/api/generated.d.ts.map +1 -1
- package/dist/types/api/payments.d.ts +2 -2
- package/dist/types/api/payments.d.ts.map +1 -1
- package/dist/types/api/types.d.ts +9 -0
- package/dist/types/api/types.d.ts.map +1 -1
- package/dist/types/checkout/modal.d.ts.map +1 -1
- package/dist/types/checkout/views/crypto-intent/currency-select.d.ts.map +1 -1
- package/dist/types/checkout/views/crypto-intent/direct-details.d.ts.map +1 -1
- package/dist/types/checkout/views/crypto-intent/methods.d.ts.map +1 -1
- package/dist/types/components/crypto/currency-selector.d.ts +1 -1
- package/dist/types/components/crypto/currency-selector.d.ts.map +1 -1
- package/dist/types/components/icons/clipboard-add.d.ts +6 -0
- package/dist/types/components/icons/clipboard-add.d.ts.map +1 -0
- package/dist/types/components/icons/clipboard-check.d.ts +6 -0
- package/dist/types/components/icons/clipboard-check.d.ts.map +1 -0
- package/dist/types/components/icons/index.d.ts +2 -0
- package/dist/types/components/icons/index.d.ts.map +1 -1
- package/dist/types/config.d.ts.map +1 -1
- package/dist/types/state/checkout/store.d.ts +13 -7
- package/dist/types/state/checkout/store.d.ts.map +1 -1
- package/dist/types/utils/string.d.ts +23 -0
- package/dist/types/utils/string.d.ts.map +1 -0
- package/package.json +8 -8
- package/dist/docs/api-examples.md +0 -55
- package/dist/docs/guides/customisation.md +0 -45
- package/dist/docs/guides/overview.md +0 -19
- package/dist/docs/guides/quickstart.md +0 -169
- package/dist/docs/index.md +0 -21
- package/dist/docs/markdown-examples.md +0 -85
- package/dist/docs/package-lock.json +0 -2408
- package/dist/docs/package.json +0 -19
|
@@ -1,169 +0,0 @@
|
|
|
1
|
-
# Quickstart
|
|
2
|
-
|
|
3
|
-
This guide walks you through integrating @mintmoney/react into your React application, including both frontend setup and backend integration.
|
|
4
|
-
|
|
5
|
-
## 🚀 Prerequisites
|
|
6
|
-
|
|
7
|
-
Before starting, ensure you have the following:
|
|
8
|
-
|
|
9
|
-
- ✅ A React application (React 18+)
|
|
10
|
-
- ✅ API Keys from your MintMoney dashboard
|
|
11
|
-
- ✅ A backend server (Node.js/Express recommended)
|
|
12
|
-
|
|
13
|
-
## 📥 Installation
|
|
14
|
-
|
|
15
|
-
Install @mintmoney/react in your project:
|
|
16
|
-
|
|
17
|
-
```sh
|
|
18
|
-
npm install @mintmoney/react
|
|
19
|
-
# or
|
|
20
|
-
yarn add @mintmoney/react
|
|
21
|
-
# or
|
|
22
|
-
pnpm add @mintmoney/react
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
## 🛠️ SDK Setup
|
|
26
|
-
|
|
27
|
-
Add the MintMoneyProvider to your application's root component:
|
|
28
|
-
|
|
29
|
-
```tsx
|
|
30
|
-
import { createConfig } from "@mintmoney/react/config";
|
|
31
|
-
import { MintMoneyProvider } from "@mintmoney/react/context";
|
|
32
|
-
import "@mintmoney/react/css/styles.css"; // Import default styles
|
|
33
|
-
|
|
34
|
-
const config = createConfig("your-public-key", {
|
|
35
|
-
apiUrl: "https://api.mintmoney.com", // Your API URL
|
|
36
|
-
checkoutId: "your-checkout-id", // Your checkout ID
|
|
37
|
-
});
|
|
38
|
-
|
|
39
|
-
const App = () => {
|
|
40
|
-
return (
|
|
41
|
-
<MintMoneyProvider config={config}>
|
|
42
|
-
<YourApp />
|
|
43
|
-
</MintMoneyProvider>
|
|
44
|
-
);
|
|
45
|
-
};
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
## 🔒 Backend Integration
|
|
49
|
-
|
|
50
|
-
For security, always create payments through a server-side endpoint. Here's an example using Express:
|
|
51
|
-
|
|
52
|
-
```typescript
|
|
53
|
-
// Example using Express
|
|
54
|
-
app.post("/api/create-payment", async (req, res) => {
|
|
55
|
-
const { amount, currency } = req.body;
|
|
56
|
-
|
|
57
|
-
// Validate required fields
|
|
58
|
-
if (!amount || !currency) {
|
|
59
|
-
res.status(400).json({ error: "Missing required fields" });
|
|
60
|
-
return;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
try {
|
|
64
|
-
// Make request to MintMoney API
|
|
65
|
-
const response = await fetch(`${process.env.API_URL}/v1/payments`, {
|
|
66
|
-
method: "POST",
|
|
67
|
-
headers: {
|
|
68
|
-
"Content-Type": "application/json",
|
|
69
|
-
"x-api-key": process.env.API_SECRET_KEY,
|
|
70
|
-
},
|
|
71
|
-
body: JSON.stringify({
|
|
72
|
-
amount: Number(amount), // Ensure amount is a number
|
|
73
|
-
currency: currency.toUpperCase(), // Ensure currency is uppercase
|
|
74
|
-
checkout_id: process.env.CHECKOUT_ID,
|
|
75
|
-
}),
|
|
76
|
-
});
|
|
77
|
-
|
|
78
|
-
const data = await response.json();
|
|
79
|
-
|
|
80
|
-
if (!response.ok) {
|
|
81
|
-
throw new Error(data.error || "Failed to create payment");
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
res.json(data);
|
|
85
|
-
} catch (error) {
|
|
86
|
-
console.error("Payment creation error:", error);
|
|
87
|
-
res.status(500).json({
|
|
88
|
-
error:
|
|
89
|
-
error instanceof Error ? error.message : "Failed to create payment",
|
|
90
|
-
});
|
|
91
|
-
}
|
|
92
|
-
});
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
## 💳 Using the Checkout Component
|
|
96
|
-
|
|
97
|
-
Add the Checkout component to your application:
|
|
98
|
-
|
|
99
|
-
```tsx
|
|
100
|
-
import { Checkout } from "@mintmoney/react";
|
|
101
|
-
|
|
102
|
-
function ProductPage() {
|
|
103
|
-
const handleCreatePayment = async () => {
|
|
104
|
-
// Call your server endpoint to create the payment
|
|
105
|
-
const response = await fetch("/api/create-payment", {
|
|
106
|
-
method: "POST",
|
|
107
|
-
headers: {
|
|
108
|
-
"Content-Type": "application/json",
|
|
109
|
-
},
|
|
110
|
-
body: JSON.stringify({
|
|
111
|
-
amount: 10.99, // Amount in the currency's standard unit (e.g., dollars)
|
|
112
|
-
currency: "USD", // Currency code (e.g., USD, EUR)
|
|
113
|
-
}),
|
|
114
|
-
});
|
|
115
|
-
|
|
116
|
-
if (!response.ok) {
|
|
117
|
-
const error = await response.json();
|
|
118
|
-
throw new Error(error.error || "Failed to create payment");
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
return response.json();
|
|
122
|
-
};
|
|
123
|
-
|
|
124
|
-
const handleSuccess = (paymentId: string) => {
|
|
125
|
-
// Handle successful payment
|
|
126
|
-
console.log("Payment successful:", paymentId);
|
|
127
|
-
};
|
|
128
|
-
|
|
129
|
-
const handleError = (error: Error) => {
|
|
130
|
-
// Handle payment error
|
|
131
|
-
console.error("Payment failed:", error);
|
|
132
|
-
};
|
|
133
|
-
|
|
134
|
-
return (
|
|
135
|
-
<Checkout
|
|
136
|
-
createPayment={handleCreatePayment}
|
|
137
|
-
onSuccess={handleSuccess}
|
|
138
|
-
onError={handleError}
|
|
139
|
-
>
|
|
140
|
-
{/* Optional: Custom trigger button */}
|
|
141
|
-
<button>Pay with Crypto</button>
|
|
142
|
-
</Checkout>
|
|
143
|
-
);
|
|
144
|
-
}
|
|
145
|
-
```
|
|
146
|
-
|
|
147
|
-
### Checkout Component Props
|
|
148
|
-
|
|
149
|
-
| Prop | Type | Required | Description |
|
|
150
|
-
| --------------- | -------------------------------------- | -------- | ---------------------------------------------------------------------------------------------- |
|
|
151
|
-
| `createPayment` | `() => Promise<Payment>` | Yes | Function that calls your server endpoint to create a payment. Must be implemented server-side. |
|
|
152
|
-
| `onSuccess` | `(paymentId: string) => Promise<void>` | No | Callback when payment is successful |
|
|
153
|
-
| `onError` | `(error: Error) => Promise<void>` | No | Callback when payment fails |
|
|
154
|
-
| `asChild` | `boolean` | No | Whether to use the child element as the trigger button |
|
|
155
|
-
| `children` | `ReactNode` | No | Custom trigger element when asChild is true |
|
|
156
|
-
|
|
157
|
-
## ⚠️ Security Considerations
|
|
158
|
-
|
|
159
|
-
- Never expose your API secret key in the frontend code
|
|
160
|
-
- Always create payments through a server-side endpoint
|
|
161
|
-
- Use environment variables to store sensitive credentials
|
|
162
|
-
- Implement proper error handling and validation on the server
|
|
163
|
-
- Use HTTPS for all API communications
|
|
164
|
-
|
|
165
|
-
## 📚 Next Steps
|
|
166
|
-
|
|
167
|
-
- Learn about [customizing the checkout experience](./customisation.md)
|
|
168
|
-
- Read the [overview guide](./overview.md) for more details about the SDK
|
|
169
|
-
- Check out our [example implementations](https://github.com/mintmoney/mintmoney-js/tree/main/examples) for more use cases
|
package/dist/docs/index.md
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
# https://vitepress.dev/reference/default-theme-home-page
|
|
3
|
-
layout: home
|
|
4
|
-
|
|
5
|
-
hero:
|
|
6
|
-
name: "mint money SDK"
|
|
7
|
-
text: "Mint Money SDK Docs"
|
|
8
|
-
tagline: Money without limitations
|
|
9
|
-
actions:
|
|
10
|
-
- theme: brand
|
|
11
|
-
text: Get Started
|
|
12
|
-
link: /guides/overview
|
|
13
|
-
|
|
14
|
-
features:
|
|
15
|
-
- title: Feature A
|
|
16
|
-
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
|
|
17
|
-
- title: Feature B
|
|
18
|
-
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
|
|
19
|
-
- title: Feature C
|
|
20
|
-
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
|
|
21
|
-
---
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
# Markdown Extension Examples
|
|
2
|
-
|
|
3
|
-
This page demonstrates some of the built-in markdown extensions provided by VitePress.
|
|
4
|
-
|
|
5
|
-
## Syntax Highlighting
|
|
6
|
-
|
|
7
|
-
VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting:
|
|
8
|
-
|
|
9
|
-
**Input**
|
|
10
|
-
|
|
11
|
-
````md
|
|
12
|
-
```js{4}
|
|
13
|
-
export default {
|
|
14
|
-
data () {
|
|
15
|
-
return {
|
|
16
|
-
msg: 'Highlighted!'
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
```
|
|
21
|
-
````
|
|
22
|
-
|
|
23
|
-
**Output**
|
|
24
|
-
|
|
25
|
-
```js{4}
|
|
26
|
-
export default {
|
|
27
|
-
data () {
|
|
28
|
-
return {
|
|
29
|
-
msg: 'Highlighted!'
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
## Custom Containers
|
|
36
|
-
|
|
37
|
-
**Input**
|
|
38
|
-
|
|
39
|
-
```md
|
|
40
|
-
::: info
|
|
41
|
-
This is an info box.
|
|
42
|
-
:::
|
|
43
|
-
|
|
44
|
-
::: tip
|
|
45
|
-
This is a tip.
|
|
46
|
-
:::
|
|
47
|
-
|
|
48
|
-
::: warning
|
|
49
|
-
This is a warning.
|
|
50
|
-
:::
|
|
51
|
-
|
|
52
|
-
::: danger
|
|
53
|
-
This is a dangerous warning.
|
|
54
|
-
:::
|
|
55
|
-
|
|
56
|
-
::: details
|
|
57
|
-
This is a details block.
|
|
58
|
-
:::
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
**Output**
|
|
62
|
-
|
|
63
|
-
::: info
|
|
64
|
-
This is an info box.
|
|
65
|
-
:::
|
|
66
|
-
|
|
67
|
-
::: tip
|
|
68
|
-
This is a tip.
|
|
69
|
-
:::
|
|
70
|
-
|
|
71
|
-
::: warning
|
|
72
|
-
This is a warning.
|
|
73
|
-
:::
|
|
74
|
-
|
|
75
|
-
::: danger
|
|
76
|
-
This is a dangerous warning.
|
|
77
|
-
:::
|
|
78
|
-
|
|
79
|
-
::: details
|
|
80
|
-
This is a details block.
|
|
81
|
-
:::
|
|
82
|
-
|
|
83
|
-
## More
|
|
84
|
-
|
|
85
|
-
Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).
|