payluk-escrow-inline-checkout 0.2.2 → 0.2.4
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 +32 -17
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -21,7 +21,6 @@ import { initEscrowCheckout, pay } from 'payluk-escrow-inline-checkout';
|
|
|
21
21
|
|
|
22
22
|
// 1) Initialize once at app startup
|
|
23
23
|
initEscrowCheckout({
|
|
24
|
-
apiBaseUrl: 'https://api.example.com', // your backend base URL
|
|
25
24
|
publicKey: '<YOUR_PUBLISHABLE_KEY>' // publishable key only
|
|
26
25
|
});
|
|
27
26
|
|
|
@@ -29,12 +28,11 @@ initEscrowCheckout({
|
|
|
29
28
|
async function onPayClick() {
|
|
30
29
|
try {
|
|
31
30
|
await pay({
|
|
32
|
-
paymentToken: '<
|
|
31
|
+
paymentToken: '<PAYMENT_TOKEN>',
|
|
33
32
|
reference: '<ORDER_OR_REFERENCE_ID>',
|
|
34
33
|
redirectUrl: 'https://your-app.example.com/checkout/complete',
|
|
35
34
|
logoUrl: 'https://your-cdn.example.com/logo.png', // optional
|
|
36
35
|
brand: 'YourBrand', // optional
|
|
37
|
-
extra: { theme: 'dark' }, // optional
|
|
38
36
|
callback: (result) => {
|
|
39
37
|
console.log('Checkout result:', result);
|
|
40
38
|
},
|
|
@@ -51,12 +49,37 @@ async function onPayClick() {
|
|
|
51
49
|
## React Usage
|
|
52
50
|
|
|
53
51
|
```tsx
|
|
54
|
-
|
|
52
|
+
import { initEscrowCheckout } from 'payluk-escrow-inline-checkout';
|
|
53
|
+
|
|
54
|
+
export default function ClientEscrowInit() {
|
|
55
|
+
useEffect(() => {
|
|
56
|
+
initEscrowCheckout({
|
|
57
|
+
publicKey: 'pk_live_*************************',
|
|
58
|
+
});
|
|
59
|
+
}, []);
|
|
60
|
+
return null;
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
export default function RootLayout({ children }: Readonly<{children: React.ReactNode}>) {
|
|
66
|
+
return (
|
|
67
|
+
<html lang="en">
|
|
68
|
+
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
|
|
69
|
+
<ClientEscrowInit />
|
|
70
|
+
{children}
|
|
71
|
+
</body>
|
|
72
|
+
</html>
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
```tsx
|
|
55
78
|
import React from 'react';
|
|
56
79
|
import { useEscrowCheckout } from 'payluk-escrow-inline-checkout/react';
|
|
57
80
|
|
|
58
81
|
export function CheckoutButton() {
|
|
59
|
-
const { pay
|
|
82
|
+
const { pay } = useEscrowCheckout();
|
|
60
83
|
|
|
61
84
|
const handleClick = async () => {
|
|
62
85
|
try {
|
|
@@ -75,10 +98,8 @@ export function CheckoutButton() {
|
|
|
75
98
|
};
|
|
76
99
|
|
|
77
100
|
return (
|
|
78
|
-
<button onClick={handleClick}
|
|
79
|
-
|
|
80
|
-
{!ready && <span>Preparing checkout…</span>}
|
|
81
|
-
{error && <small style={{ color: 'red' }}>{error.message}</small>}
|
|
101
|
+
<button onClick={handleClick}>
|
|
102
|
+
Pay Now
|
|
82
103
|
</button>
|
|
83
104
|
);
|
|
84
105
|
}
|
|
@@ -97,7 +118,6 @@ export function CheckoutButton() {
|
|
|
97
118
|
Initializes the SDK. Must be called before any `pay(...)`.
|
|
98
119
|
|
|
99
120
|
**Required:**
|
|
100
|
-
- `apiBaseUrl`: `string` — your backend base URL (no trailing slash required)
|
|
101
121
|
- `publicKey`: `string` — publishable key only
|
|
102
122
|
|
|
103
123
|
**Advanced (optional):**
|
|
@@ -111,11 +131,7 @@ Initializes the SDK. Must be called before any `pay(...)`.
|
|
|
111
131
|
import { initEscrowCheckout } from 'payluk-escrow-inline-checkout';
|
|
112
132
|
|
|
113
133
|
initEscrowCheckout({
|
|
114
|
-
|
|
115
|
-
publicKey: '<YOUR_PUBLISHABLE_KEY>',
|
|
116
|
-
// scriptUrlOverride: 'https://cdn.example.com/custom-widget.js',
|
|
117
|
-
// globalName: 'EscrowCheckout',
|
|
118
|
-
// crossOrigin: 'anonymous'
|
|
134
|
+
publicKey: '<YOUR_PUBLISHABLE_KEY>'
|
|
119
135
|
});
|
|
120
136
|
```
|
|
121
137
|
|
|
@@ -131,7 +147,6 @@ Creates a checkout session via your backend and opens the widget.
|
|
|
131
147
|
**Optional:**
|
|
132
148
|
- `logoUrl?`: `string`
|
|
133
149
|
- `brand?`: `string`
|
|
134
|
-
- `extra?`: `Record<string, unknown>`
|
|
135
150
|
- `callback?`: `(result: unknown) => void`
|
|
136
151
|
- `onClose?`: `() => void`
|
|
137
152
|
|
|
@@ -161,7 +176,7 @@ import { useEscrowCheckout } from 'payluk-escrow-inline-checkout/react';
|
|
|
161
176
|
## Error Handling
|
|
162
177
|
|
|
163
178
|
Common issues:
|
|
164
|
-
- **Not initialized:** Ensure `initEscrowCheckout({
|
|
179
|
+
- **Not initialized:** Ensure `initEscrowCheckout({ publicKey })` is called before `pay(...)`.
|
|
165
180
|
- **Browser-only:** Do not call `pay(...)` on the server.
|
|
166
181
|
- **Network/API errors:** If the session endpoint fails, `pay(...)` will reject with the error message from your backend (if any).
|
|
167
182
|
|
package/package.json
CHANGED