@lavapayments/checkout 0.1.0 → 0.1.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 +96 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
# Lava Checkout
|
|
2
|
+
|
|
3
|
+
A React package that provides hooks for integrating Lava's wallet-based checkout experience into your AI application.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install --save @lavapayments/checkout
|
|
9
|
+
# or
|
|
10
|
+
yarn add @lavapayments/checkout
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
### Basic Implementation
|
|
16
|
+
|
|
17
|
+
```jsx
|
|
18
|
+
import { useLavaCheckout } from '@lavapayments/checkout';
|
|
19
|
+
import { useState } from 'react';
|
|
20
|
+
|
|
21
|
+
function CheckoutButton() {
|
|
22
|
+
const [connectionId, setConnectionId] = useState(null);
|
|
23
|
+
|
|
24
|
+
const { open } = useLavaCheckout({
|
|
25
|
+
onSuccess: ({ connectionId }) => {
|
|
26
|
+
console.log('Checkout successful!');
|
|
27
|
+
setConnectionId(connectionId);
|
|
28
|
+
// Store the connectionId for your application
|
|
29
|
+
saveConnectionIdToDatabase(userId, connectionId);
|
|
30
|
+
},
|
|
31
|
+
onCancel: ({ checkoutSessionId }) => {
|
|
32
|
+
console.log('Checkout cancelled:', checkoutSessionId);
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
return (
|
|
37
|
+
<button
|
|
38
|
+
onClick={() => {
|
|
39
|
+
// Request a checkout session token from your backend
|
|
40
|
+
fetch('/api/create-checkout-session')
|
|
41
|
+
.then(res => res.json())
|
|
42
|
+
.then(data => {
|
|
43
|
+
// Open the checkout modal with the session token
|
|
44
|
+
open(data.checkout_session_token);
|
|
45
|
+
});
|
|
46
|
+
}}
|
|
47
|
+
>
|
|
48
|
+
Connect Wallet
|
|
49
|
+
</button>
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### Top-up Implementation
|
|
55
|
+
|
|
56
|
+
To allow users to add funds to an existing wallet:
|
|
57
|
+
|
|
58
|
+
```jsx
|
|
59
|
+
import { useLavaCheckout } from '@lavapayments/checkout';
|
|
60
|
+
|
|
61
|
+
function TopUpButton({ connectionId }) {
|
|
62
|
+
const { open } = useLavaCheckout({
|
|
63
|
+
onSuccess: () => {
|
|
64
|
+
console.log('Top-up successful!');
|
|
65
|
+
// Refresh balance display
|
|
66
|
+
},
|
|
67
|
+
onCancel: () => {
|
|
68
|
+
console.log('Top-up cancelled');
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
return (
|
|
73
|
+
<button
|
|
74
|
+
onClick={() => {
|
|
75
|
+
// Request a top-up checkout session token from your backend
|
|
76
|
+
fetch('/api/create-topup-session', {
|
|
77
|
+
method: 'POST',
|
|
78
|
+
headers: { 'Content-Type': 'application/json' },
|
|
79
|
+
body: JSON.stringify({ connectionId })
|
|
80
|
+
})
|
|
81
|
+
.then(res => res.json())
|
|
82
|
+
.then(data => {
|
|
83
|
+
// Open the checkout modal with the session token
|
|
84
|
+
open(data.checkout_session_token);
|
|
85
|
+
});
|
|
86
|
+
}}
|
|
87
|
+
>
|
|
88
|
+
Add Funds
|
|
89
|
+
</button>
|
|
90
|
+
);
|
|
91
|
+
}
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
## Related Documentation
|
|
95
|
+
|
|
96
|
+
For complete documentation on Lava's usage-based billing system and backend integration, visit [lavapayments.com](https://www.lavapayments.com).
|