@superlogic/spree-pay 0.1.16 → 0.1.18
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 +21 -9
- package/build/index.cjs +1918 -587
- package/build/index.css +228 -20
- package/build/index.d.cts +7 -3
- package/build/index.d.ts +7 -3
- package/build/index.js +1923 -593
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -14,13 +14,14 @@ npm i @superlogic/spree-pay
|
|
|
14
14
|
import { useState } from 'react';
|
|
15
15
|
|
|
16
16
|
import { SpreePay, SpreePayProvider, useSpreePay } from '@superlogic/spree-pay';
|
|
17
|
+
import { useCapture3DS } from '@superlogic/spree-pay';
|
|
17
18
|
import '@superlogic/spree-pay/styles.css';
|
|
18
19
|
|
|
19
20
|
const spreeEnv = {
|
|
20
|
-
tenantId: 'moca' // Keep moca for crypto payments on BASE network
|
|
21
|
+
tenantId: 'moca', // Keep moca for crypto payments on BASE network
|
|
21
22
|
environment: 'dev' as const,
|
|
22
|
-
redirect3dsURI: '/3ds' // Any valid URI in your app that captures 3ds redirect
|
|
23
|
-
ssoPageURI: '/silent-check-sso.html' // Any valid URI in your app that will handle
|
|
23
|
+
redirect3dsURI: '/3ds', // Any valid URI in your app that captures 3ds redirect
|
|
24
|
+
ssoPageURI: '/silent-check-sso.html', // Any valid URI in your app that will handle Keycloak SSO (example below)
|
|
24
25
|
};
|
|
25
26
|
|
|
26
27
|
function Checkout() {
|
|
@@ -48,16 +49,20 @@ function CheckoutContent() {
|
|
|
48
49
|
}
|
|
49
50
|
|
|
50
51
|
return (
|
|
51
|
-
<div
|
|
52
|
-
<SpreePay
|
|
52
|
+
<div>
|
|
53
|
+
<SpreePay
|
|
54
|
+
amount={99}
|
|
55
|
+
onProcess={handleProcess}
|
|
56
|
+
transactionFeePercentage={0.04}
|
|
57
|
+
className="w-full max-w-[540px]"
|
|
58
|
+
isProcessing={status === 'processing'}
|
|
59
|
+
/>
|
|
53
60
|
{status === 'success' && <p>Payment successful! Thank you for your order.</p>}
|
|
54
61
|
{status === 'error' && <p>Payment failed. Please try again.</p>}
|
|
55
62
|
</div>
|
|
56
63
|
);
|
|
57
64
|
}
|
|
58
65
|
|
|
59
|
-
import { useCapture3DS } from '@superlogic/spree-pay';
|
|
60
|
-
|
|
61
66
|
// example 3DS redirect page hosted on /3ds
|
|
62
67
|
export default function ThreeDSRedirectPage() {
|
|
63
68
|
// take payment intent from search params as payment_intent
|
|
@@ -69,10 +74,17 @@ export default function ThreeDSRedirectPage() {
|
|
|
69
74
|
// Render null or any other UI/Loader
|
|
70
75
|
return null;
|
|
71
76
|
}
|
|
72
|
-
|
|
73
77
|
```
|
|
74
78
|
|
|
75
|
-
|
|
79
|
+
### SpreePay props
|
|
80
|
+
|
|
81
|
+
- amount: number — USD amount to charge (e.g., 99 for $99). Used for display and fee calculation.
|
|
82
|
+
- onProcess: () => Promise<void> — Called when the Checkout button is clicked. Implement your order flow here and call useSpreePay().process({ hash, ... }).
|
|
83
|
+
- isProcessing: boolean — Optional, shows a loading state and disables interactions when true (useful while your onProcess runs).
|
|
84
|
+
- transactionFeePercentage: number — Optional fee multiplier applied to the USD portion (e.g., 0.04 for 4%).
|
|
85
|
+
- className: string — Optional wrapper class for layout/styling.
|
|
86
|
+
|
|
87
|
+
## Keycloak SSO page example (/silent-check-sso.html)
|
|
76
88
|
|
|
77
89
|
```html
|
|
78
90
|
<!doctype html>
|