@moneydevkit/replit 0.0.1
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 +85 -0
- package/dist/components/Checkout.d.ts +4 -0
- package/dist/components/Checkout.js +3 -0
- package/dist/components/Checkout.js.map +1 -0
- package/dist/hooks/useCheckout.d.ts +1 -0
- package/dist/hooks/useCheckout.js +2 -0
- package/dist/hooks/useCheckout.js.map +1 -0
- package/dist/hooks/useCheckoutSuccess.d.ts +1 -0
- package/dist/hooks/useCheckoutSuccess.js +2 -0
- package/dist/hooks/useCheckoutSuccess.js.map +1 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +4 -0
- package/dist/index.js.map +1 -0
- package/dist/mdk-styles.css +2436 -0
- package/dist/server/express.d.ts +4 -0
- package/dist/server/express.js +56 -0
- package/dist/server/express.js.map +1 -0
- package/package.json +48 -0
package/README.md
ADDED
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
# @moneydevkit/replit
|
|
2
|
+
|
|
3
|
+
Money Dev Kit checkout package tuned for Replit workspaces: Vite + React on the client and Express on the server.
|
|
4
|
+
|
|
5
|
+
## Setup
|
|
6
|
+
1. **Create a Money Dev Kit account** at [moneydevkit.com](https://moneydevkit.com) (or run `npx @moneydevkit/create` locally) and grab your `api_key`, `webhook_key`, and mnemonic.
|
|
7
|
+
2. **Install the SDK** in your Replit project (Express is a peer dependency):
|
|
8
|
+
```bash
|
|
9
|
+
npm install @moneydevkit/replit express
|
|
10
|
+
```
|
|
11
|
+
3. **Add required secrets** to `.env` (or Replit Secrets):
|
|
12
|
+
```env
|
|
13
|
+
MDK_ACCESS_TOKEN=your_api_key_here
|
|
14
|
+
MDK_WEBHOOK_SECRET=your_webhook_key_here
|
|
15
|
+
MDK_MNEMONIC=your_mnemonic_here
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Backend: Express route
|
|
19
|
+
Mount the unified Money Dev Kit endpoint at `/api/mdk`:
|
|
20
|
+
```ts
|
|
21
|
+
// server/index.ts (or server.js)
|
|
22
|
+
import express from 'express'
|
|
23
|
+
import { createMdkExpressRouter } from '@moneydevkit/replit/server/express'
|
|
24
|
+
|
|
25
|
+
const app = express()
|
|
26
|
+
app.use('/api/mdk', createMdkExpressRouter())
|
|
27
|
+
|
|
28
|
+
app.listen(3000, () => {
|
|
29
|
+
console.log('Server listening on http://localhost:3000')
|
|
30
|
+
})
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Frontend: Vite + React
|
|
34
|
+
Trigger a checkout from your client code (the checkout component pulls in its own CSS; import `@moneydevkit/replit/mdk-styles.css` once globally only if you want to preload it):
|
|
35
|
+
```tsx
|
|
36
|
+
// src/App.tsx
|
|
37
|
+
import { useCheckout } from '@moneydevkit/replit'
|
|
38
|
+
|
|
39
|
+
export default function App() {
|
|
40
|
+
const { navigate, isNavigating } = useCheckout()
|
|
41
|
+
|
|
42
|
+
return (
|
|
43
|
+
<button
|
|
44
|
+
onClick={() =>
|
|
45
|
+
navigate({
|
|
46
|
+
title: 'Purchase title for the buyer',
|
|
47
|
+
description: 'Description of the purchase',
|
|
48
|
+
amount: 500,
|
|
49
|
+
currency: 'USD',
|
|
50
|
+
metadata: { successUrl: '/checkout/success' },
|
|
51
|
+
})
|
|
52
|
+
}
|
|
53
|
+
disabled={isNavigating}
|
|
54
|
+
>
|
|
55
|
+
{isNavigating ? 'Creating checkout…' : 'Buy Now'}
|
|
56
|
+
</button>
|
|
57
|
+
)
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
Render the hosted checkout page:
|
|
62
|
+
```tsx
|
|
63
|
+
// src/routes/checkout/[id].tsx (or similar)
|
|
64
|
+
import { Checkout } from '@moneydevkit/replit'
|
|
65
|
+
|
|
66
|
+
export default function CheckoutPage({ params }: { params: { id: string } }) {
|
|
67
|
+
return <Checkout id={params.id} />
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
Verify successful payments:
|
|
72
|
+
```tsx
|
|
73
|
+
import { useCheckoutSuccess } from '@moneydevkit/replit'
|
|
74
|
+
|
|
75
|
+
export function SuccessPage() {
|
|
76
|
+
const { isCheckoutPaidLoading, isCheckoutPaid, metadata } = useCheckoutSuccess()
|
|
77
|
+
|
|
78
|
+
if (isCheckoutPaidLoading || isCheckoutPaid === null) return <p>Verifying payment…</p>
|
|
79
|
+
if (!isCheckoutPaid) return <p>Payment has not been confirmed.</p>
|
|
80
|
+
|
|
81
|
+
return <p>Payment confirmed for {metadata?.name ?? 'customer'}.</p>
|
|
82
|
+
}
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
This wiring keeps the client pointed at `/api/mdk`, which the Express route handles by delegating to the shared Money Dev Kit core logic.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkout.js","sourceRoot":"","sources":["../../src/components/Checkout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAGnD,OAAO,EAAE,QAAQ,EAAE,QAAQ,IAAI,OAAO,EAAE,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { useCheckout } from '@moneydevkit/core/client';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCheckout.js","sourceRoot":"","sources":["../../src/hooks/useCheckout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { useCheckoutSuccess } from '@moneydevkit/core/client';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCheckoutSuccess.js","sourceRoot":"","sources":["../../src/hooks/useCheckoutSuccess.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAA"}
|
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAEhD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA"}
|