@superlogic/spree-pay 0.0.3 → 0.1.0
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 -26
- package/package.json +7 -3
package/README.md
CHANGED
|
@@ -4,8 +4,6 @@ Publishable React package exposing the SpreePay component and related utilities.
|
|
|
4
4
|
|
|
5
5
|
## Install
|
|
6
6
|
|
|
7
|
-
This package is part of the monorepo. From a consumer app inside the repo:
|
|
8
|
-
|
|
9
7
|
```sh
|
|
10
8
|
npm i @superlogic/spree-pay
|
|
11
9
|
```
|
|
@@ -13,35 +11,45 @@ npm i @superlogic/spree-pay
|
|
|
13
11
|
## Usage
|
|
14
12
|
|
|
15
13
|
```tsx
|
|
16
|
-
import {
|
|
14
|
+
import { useState } from 'react';
|
|
15
|
+
import { SpreePay, SpreePayProvider, useSpreePay } from '@superlogic/spree-pay';
|
|
16
|
+
|
|
17
|
+
const spreeEnv = {
|
|
18
|
+
environment: 'dev', // 'stg' or 'prod' for other environments
|
|
19
|
+
accessToken: 'demo-access-token', // Use env vars in production
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
const [status, setStatus] = useState<'idle' | 'processing' | 'success' | 'error'>('idle');
|
|
17
23
|
|
|
18
|
-
export default function Checkout() {
|
|
19
24
|
return (
|
|
20
|
-
<SpreePayProvider
|
|
21
|
-
|
|
22
|
-
userId: 'user-123',
|
|
23
|
-
stripePublicKey: process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!,
|
|
24
|
-
slapiUrl: process.env.NEXT_PUBLIC_SLAPI_URL!,
|
|
25
|
-
slapiAuthKey: process.env.NEXT_PUBLIC_SLAPI_AUTH_KEY!,
|
|
26
|
-
accessToken: 'optional-access-token',
|
|
27
|
-
}}
|
|
28
|
-
>
|
|
29
|
-
<SpreePay amount="$199.00" />
|
|
25
|
+
<SpreePayProvider env={spreeEnv}>
|
|
26
|
+
<CheckoutContent />
|
|
30
27
|
</SpreePayProvider>
|
|
31
28
|
);
|
|
32
29
|
}
|
|
33
|
-
```
|
|
34
30
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
31
|
+
function CheckoutContent() {
|
|
32
|
+
const { process } = useSpreePay(); // Access payment process function (must be inside provider)
|
|
33
|
+
const [status, setStatus] = useState<'idle' | 'processing' | 'success' | 'error'>('idle');
|
|
34
|
+
|
|
35
|
+
async function handleProcess() {
|
|
36
|
+
setStatus('processing');
|
|
37
|
+
try {
|
|
38
|
+
// Example: create order and process payment
|
|
39
|
+
const order = await getOrderHash();
|
|
40
|
+
await process({ hash: order.hash });
|
|
41
|
+
setStatus('success');
|
|
42
|
+
} catch (err) {
|
|
43
|
+
setStatus('error');
|
|
44
|
+
}
|
|
45
|
+
}
|
|
40
46
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
+
return (
|
|
48
|
+
<div style={{ maxWidth: 540 }}>
|
|
49
|
+
<SpreePay amount="$199.00" onProcess={handleProcess} />
|
|
50
|
+
{status === 'success' && <p>Payment successful! Thank you for your order.</p>}
|
|
51
|
+
{status === 'error' && <p>Payment failed. Please try again.</p>}
|
|
52
|
+
</div>
|
|
53
|
+
);
|
|
54
|
+
}
|
|
47
55
|
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@superlogic/spree-pay",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "0.1.0",
|
|
4
4
|
"description": "Spree-pay React component and utilities",
|
|
5
5
|
"private": false,
|
|
6
6
|
"type": "module",
|
|
@@ -19,11 +19,15 @@
|
|
|
19
19
|
"check-ts": "tsc --noEmit",
|
|
20
20
|
"publish": "npm run build"
|
|
21
21
|
},
|
|
22
|
+
"exports": {
|
|
23
|
+
".": {
|
|
24
|
+
"import": "./src/index.ts"
|
|
25
|
+
}
|
|
26
|
+
},
|
|
22
27
|
"publishConfig": {
|
|
23
28
|
"access": "public"
|
|
24
29
|
},
|
|
25
30
|
"peerDependencies": {
|
|
26
|
-
"@repo/ui": "^1.0.0",
|
|
27
31
|
"react": "^18 || ^19",
|
|
28
32
|
"react-dom": "^18 || ^19"
|
|
29
33
|
},
|
|
@@ -34,7 +38,7 @@
|
|
|
34
38
|
},
|
|
35
39
|
"devDependencies": {
|
|
36
40
|
"@repo/eslint-config": "^1.0.0",
|
|
37
|
-
"@
|
|
41
|
+
"@repo/ui": "^1.0.0",
|
|
38
42
|
"@tailwindcss/postcss": "^4.1.11",
|
|
39
43
|
"@types/react": "^19",
|
|
40
44
|
"@types/react-dom": "^19",
|