@mintmoney/react 0.1.0-alpha.6 → 0.1.0-alpha.7
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 +34 -49
- package/dist/esm/checkout/views/crypto-intent/direct-details.js +2 -1
- package/dist/esm/checkout/views/crypto-intent/direct-details.js.map +1 -1
- package/dist/esm/checkout/views/crypto-intent/processing.js +3 -3
- package/dist/esm/checkout/views/crypto-intent/processing.js.map +1 -1
- package/dist/types/checkout/views/crypto-intent/direct-details.d.ts.map +1 -1
- package/dist/types/checkout/views/crypto-intent/processing.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,32 +7,33 @@ to integrate the mint money payments checkout into your web application.
|
|
|
7
7
|
|
|
8
8
|
The quickest and easiest way to integrate mintmoney into your application is to use the
|
|
9
9
|
|
|
10
|
-
`@mintmoney/
|
|
10
|
+
`@mintmoney/react` react component.
|
|
11
11
|
|
|
12
12
|
```jsx
|
|
13
13
|
import ReactDOM from 'react-dom/client';
|
|
14
14
|
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
|
|
15
15
|
|
|
16
|
-
import '@fontsource/inter';
|
|
17
|
-
import '@fontsource/inter/400.css';
|
|
18
|
-
import '@fontsource/inter/400-italic.css';
|
|
19
|
-
|
|
20
16
|
import { routes } from './routes.tsx';
|
|
21
17
|
import { ViewportProvider } from '@/contexts/viewport-context.tsx';
|
|
22
|
-
import { createConfig
|
|
18
|
+
import { createConfig } from "@mintmoney/react/config"
|
|
19
|
+
import { MintMoneyProvider } from "@mintmoney/react/context"
|
|
23
20
|
|
|
24
21
|
export const router = createBrowserRouter([routes], {
|
|
25
22
|
basename: import.meta.env.VITE_BASENAME || '/',
|
|
26
23
|
});
|
|
27
24
|
|
|
28
|
-
const config = createConfig("
|
|
25
|
+
const config = createConfig("pk_8tcytWcpd8vfUuclzqWgRGzW", {
|
|
26
|
+
checkoutId: 'your-checkout-id',
|
|
27
|
+
});
|
|
29
28
|
|
|
30
29
|
const App = () => {
|
|
31
30
|
|
|
32
31
|
return (
|
|
33
|
-
<
|
|
34
|
-
<
|
|
35
|
-
|
|
32
|
+
<ViewportProvider>
|
|
33
|
+
<MintMoneyProvider config={config}>
|
|
34
|
+
<RouterProvider router={router} />;
|
|
35
|
+
</MintMoneyProvider>
|
|
36
|
+
</ViewportProvider>
|
|
36
37
|
);
|
|
37
38
|
};
|
|
38
39
|
|
|
@@ -40,70 +41,54 @@ ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
|
|
|
40
41
|
```
|
|
41
42
|
|
|
42
43
|
```jsx
|
|
43
|
-
import { cn } from
|
|
44
|
-
import { Checkout } from "@mintmoney/
|
|
45
|
-
import {
|
|
46
|
-
import
|
|
44
|
+
import { cn } from "@/util/class-name-merge";
|
|
45
|
+
import { Checkout } from "@mintmoney/react/checkout";
|
|
46
|
+
import { useState } from "react";
|
|
47
|
+
import "@mintmoney/react/css/styles.css";
|
|
47
48
|
|
|
48
49
|
export default () => {
|
|
49
|
-
|
|
50
|
-
// your app manages gather payment info
|
|
51
|
-
const [payment, setPayment] = useState<Partial<Payment>>({})
|
|
52
|
-
|
|
53
|
-
const handleAmount = (amount: number) => {
|
|
54
|
-
setPayment({ ...payment, amount })
|
|
55
|
-
}
|
|
50
|
+
const [amount, setAmount] = (useState < number) | (null > null);
|
|
56
51
|
|
|
57
52
|
return (
|
|
58
53
|
<div className="flex flex-col gap-4 items-center">
|
|
59
54
|
<h1 className="text-center">Mint Money Connect Demo</h1>
|
|
60
55
|
<div className="flex gap-4">
|
|
61
|
-
<button
|
|
62
|
-
<button
|
|
63
|
-
<button
|
|
56
|
+
<button onClick={() => setAmount(10.0)}>$10</button>
|
|
57
|
+
<button onClick={() => setAmount(50.0)}>$50</button>
|
|
58
|
+
<button onClick={() => setAmount(150.0)}>$150</button>
|
|
59
|
+
</div>
|
|
60
|
+
<div>
|
|
61
|
+
<Checkout amount={amount} />
|
|
64
62
|
</div>
|
|
65
|
-
{payment.amount && <Checkout checkoutId={"checkout-1"} data={payment} />}
|
|
66
63
|
</div>
|
|
67
64
|
);
|
|
68
65
|
};
|
|
69
|
-
|
|
70
66
|
```
|
|
71
67
|
|
|
72
|
-
## Looking for other ways to integrate ?
|
|
73
|
-
|
|
74
|
-
### @mintmoney/react
|
|
75
|
-
|
|
76
|
-
If you want control over the UI for the user checkout but want to harness the power of the sdk
|
|
77
|
-
to manage the core business logic, we provide the react package that provides access to the
|
|
78
|
-
hooks and core data management flows used by @mintmoney/connect.
|
|
79
|
-
|
|
80
|
-
### @mintmoney/core
|
|
81
|
-
|
|
82
|
-
Vanilla javascript code base that exposes low level apis for interacting with the mintmoney platform.
|
|
83
|
-
|
|
84
|
-
This give developers the most amount of flexability when working with the platform but it requires the most
|
|
85
|
-
amount of work.
|
|
86
|
-
|
|
87
68
|
# Developer Setup
|
|
88
69
|
|
|
89
70
|
🟢 Ensure you're running node version 22
|
|
90
71
|
|
|
91
72
|
`nvm install 22 && nvm use 22`
|
|
92
73
|
|
|
93
|
-
🟢 Install pnpm
|
|
94
|
-
|
|
95
|
-
`npm -g install pnpm`
|
|
96
|
-
|
|
97
74
|
🟢 Install dependencies and set up package workspace.
|
|
98
75
|
|
|
99
|
-
`
|
|
76
|
+
`npm install`
|
|
100
77
|
|
|
101
78
|
🟢 build the packages
|
|
102
79
|
|
|
103
|
-
`
|
|
80
|
+
`npm run build`
|
|
104
81
|
|
|
105
|
-
🟢
|
|
82
|
+
🟢 create a linkable package for dev
|
|
83
|
+
|
|
84
|
+
`npm run link`
|
|
85
|
+
|
|
86
|
+
🟢 Install the @mintmoney/react package
|
|
106
87
|
|
|
107
88
|
`cd platgrounds/vite-react-app`
|
|
108
89
|
|
|
109
|
-
`
|
|
90
|
+
`npm link @mintmoney/react`
|
|
91
|
+
|
|
92
|
+
🟢 Run example app
|
|
93
|
+
|
|
94
|
+
`npm run dev`
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useRef } from "react";
|
|
3
|
-
|
|
3
|
+
//@ts-ignore
|
|
4
|
+
import { QRCode } from "react-qr-code";
|
|
4
5
|
import { useModalWithView, StyledButton, Text, } from "../../../components/index.js";
|
|
5
6
|
import { useMintMoneyConfig } from "../../../context.js";
|
|
6
7
|
import { useCheckoutStore } from "../../../state/checkout/store.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"direct-details.js","sourceRoot":"","sources":["../../../../../src/checkout/views/crypto-intent/direct-details.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"direct-details.js","sourceRoot":"","sources":["../../../../../src/checkout/views/crypto-intent/direct-details.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,YAAY;AACZ,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,IAAI,GACL,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAExD,MAAM,oCAAoC,GAAG,GAAG,EAAE;IAChD,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC9C,MAAM,EAAE,QAAQ,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACxC,MAAM,EAAE,oBAAoB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACpD,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IAEpC,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,QAAQ,CAAC,2BAA2B,CAAC,CAAC;IACxC,CAAC,CAAC;IAEF,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC1B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,oBAAoB,CAAC,mBAAmB,CAAC,CAAC;IAC1E,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,kBAAkB,IAAC,GAAG,EAAE,QAAQ,aAC/B,KAAC,IAAI,IACH,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,QAAQ,EACf,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,sEAGnC,EAEP,cAAK,SAAS,EAAC,iBAAiB,YAC9B,KAAC,MAAM,IAAC,KAAK,EAAE,oBAAoB,CAAC,mBAAmB,EAAE,IAAI,EAAE,GAAG,GAAI,GAClE,EAEN,eAAK,SAAS,EAAC,sBAAsB,aACnC,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,YACnE,oBAAoB,CAAC,mBAAmB,GACpC,EACP,iBAAQ,SAAS,EAAC,aAAa,EAAC,OAAO,EAAE,eAAe,qBAE/C,IACL,EAEN,KAAC,YAAY,IAAC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,SAAS,wBAEzC,IACI,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,oCAAoC,EAAE,CAAC"}
|
|
@@ -8,7 +8,7 @@ const CryptoIntentPaymentStatusViewContent = () => {
|
|
|
8
8
|
const { goToView } = useModalWithView();
|
|
9
9
|
const { payment } = useCheckoutStore();
|
|
10
10
|
const config = useMintMoneyConfig();
|
|
11
|
-
const [_status, setStatus] = useState(payment?.status || "
|
|
11
|
+
const [_status, setStatus] = useState(payment?.status || "pending");
|
|
12
12
|
useEffect(() => {
|
|
13
13
|
let isMounted = true;
|
|
14
14
|
const pollPaymentStatus = async () => {
|
|
@@ -17,11 +17,11 @@ const CryptoIntentPaymentStatusViewContent = () => {
|
|
|
17
17
|
if (!updatedPayment || !isMounted)
|
|
18
18
|
return;
|
|
19
19
|
setStatus(updatedPayment.status);
|
|
20
|
-
if (updatedPayment.status) {
|
|
20
|
+
if (updatedPayment.status === "paid") {
|
|
21
21
|
goToView("cryptoIntentPaymentSuccess");
|
|
22
22
|
}
|
|
23
23
|
else if (updatedPayment.status === "failed") {
|
|
24
|
-
goToView("
|
|
24
|
+
goToView("failed");
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
27
|
catch (error) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"processing.js","sourceRoot":"","sources":["../../../../../src/checkout/views/crypto-intent/processing.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAEhF,MAAM,aAAa,GAAG,IAAI,CAAC;AAE3B,MAAM,oCAAoC,GAAG,GAAG,EAAE;IAChD,MAAM,EAAE,QAAQ,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACxC,MAAM,EAAE,OAAO,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACvC,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IAEpC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,GAAG,QAAQ,
|
|
1
|
+
{"version":3,"file":"processing.js","sourceRoot":"","sources":["../../../../../src/checkout/views/crypto-intent/processing.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAEhF,MAAM,aAAa,GAAG,IAAI,CAAC;AAE3B,MAAM,oCAAoC,GAAG,GAAG,EAAE;IAChD,MAAM,EAAE,QAAQ,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACxC,MAAM,EAAE,OAAO,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACvC,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IAEpC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,SAAS,CAAC,CAAC;IAEpE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,GAAG,IAAI,CAAC;QAErB,MAAM,iBAAiB,GAAG,KAAK,IAAI,EAAE;YACnC,IAAI,CAAC;gBACH,MAAM,cAAc,GAAG,MAAM,UAAU,EAAE,CAAC;gBAC1C,IAAI,CAAC,cAAc,IAAI,CAAC,SAAS;oBAAE,OAAO;gBAE1C,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;gBAEjC,IAAI,cAAc,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;oBACrC,QAAQ,CAAC,4BAA4B,CAAC,CAAC;gBACzC,CAAC;qBAAM,IAAI,cAAc,CAAC,MAAM,KAAK,QAAQ,EAAE,CAAC;oBAC9C,QAAQ,CAAC,QAAQ,CAAC,CAAC;gBACrB,CAAC;YACH,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,OAAO,CAAC,KAAK,CAAC,gCAAgC,EAAE,KAAK,CAAC,CAAC;YACzD,CAAC;QACH,CAAC,CAAC;QAEF,iBAAiB,EAAE,CAAC;QACpB,MAAM,QAAQ,GAAG,WAAW,CAC1B,KAAK,IAAI,EAAE,CAAC,MAAM,iBAAiB,EAAE,EACrC,aAAa,CACd,CAAC;QAEF,OAAO,GAAG,EAAE;YACV,SAAS,GAAG,KAAK,CAAC;YAClB,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,eAAK,SAAS,EAAC,mBAAmB,aAChC,KAAC,MAAM,IAAC,OAAO,EAAE,IAAI,GAAI,EACzB,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,mCAElD,IACH,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,oCAAoC,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"direct-details.d.ts","sourceRoot":"","sources":["../../../../../src/checkout/views/crypto-intent/direct-details.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"direct-details.d.ts","sourceRoot":"","sources":["../../../../../src/checkout/views/crypto-intent/direct-details.tsx"],"names":[],"mappings":"AAaA,QAAA,MAAM,oCAAoC,sDA8CzC,CAAC;AAEF,OAAO,EAAE,oCAAoC,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"processing.d.ts","sourceRoot":"","sources":["../../../../../src/checkout/views/crypto-intent/processing.tsx"],"names":[],"mappings":"AAOA,QAAA,MAAM,oCAAoC,+
|
|
1
|
+
{"version":3,"file":"processing.d.ts","sourceRoot":"","sources":["../../../../../src/checkout/views/crypto-intent/processing.tsx"],"names":[],"mappings":"AAOA,QAAA,MAAM,oCAAoC,+CA+CzC,CAAC;AAEF,OAAO,EAAE,oCAAoC,EAAE,CAAC"}
|