@veruspay/react 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 +178 -0
- package/package.json +9 -2
package/README.md
ADDED
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
# @veruspay/react
|
|
2
|
+
|
|
3
|
+
Drop-in PIX checkout component for React apps. The simplest way to accept PIX payments in Brazil.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@veruspay/react)
|
|
6
|
+
[](./LICENSE)
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## Installation
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm install @veruspay/react
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
**Peer dependencies:** React 18+
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## Quick start
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
import { PixCheckout } from '@veruspay/react'
|
|
24
|
+
|
|
25
|
+
export default function CheckoutPage() {
|
|
26
|
+
return (
|
|
27
|
+
<PixCheckout
|
|
28
|
+
clientId="cli_xxxxxxxx"
|
|
29
|
+
clientSecret="your-client-secret"
|
|
30
|
+
accountId="uuid-da-conta"
|
|
31
|
+
pixKey="uuid-chave-evp"
|
|
32
|
+
amount={4990} // R$ 49,90 (em centavos)
|
|
33
|
+
description="Pedido #123"
|
|
34
|
+
onSuccess={(txId) => console.log('Pago!', txId)}
|
|
35
|
+
/>
|
|
36
|
+
)
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
That's it. The component handles QR Code generation, copy-paste, and payment polling automatically.
|
|
41
|
+
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
## Sandbox (testing)
|
|
45
|
+
|
|
46
|
+
Add `sandbox` to enable test mode — no real payments are processed. A "Simulate payment" button appears so you can confirm the payment without scanning the QR Code.
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
<PixCheckout
|
|
50
|
+
clientId="cli_xxxxxxxx"
|
|
51
|
+
clientSecret="your-client-secret"
|
|
52
|
+
accountId="uuid-da-conta"
|
|
53
|
+
pixKey="uuid-chave-evp"
|
|
54
|
+
amount={4990}
|
|
55
|
+
description="Pedido #123"
|
|
56
|
+
sandbox
|
|
57
|
+
onSuccess={(txId) => alert('Pagamento simulado: ' + txId)}
|
|
58
|
+
/>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
In sandbox mode the SDK automatically points to `https://dev-api-bank.veruspay.co`.
|
|
62
|
+
|
|
63
|
+
---
|
|
64
|
+
|
|
65
|
+
## Props
|
|
66
|
+
|
|
67
|
+
### `<PixCheckout>`
|
|
68
|
+
|
|
69
|
+
| Prop | Type | Required | Default | Description |
|
|
70
|
+
|---|---|---|---|---|
|
|
71
|
+
| `clientId` | `string` | ✅ | — | Client ID from VerusPay dashboard |
|
|
72
|
+
| `clientSecret` | `string` | ✅ | — | Client secret from VerusPay dashboard |
|
|
73
|
+
| `accountId` | `string` | ✅ | — | Your VerusPay account UUID |
|
|
74
|
+
| `pixKey` | `string` | ✅ | — | EVP PIX key UUID registered to the account |
|
|
75
|
+
| `amount` | `number` | ✅ | — | Amount in cents (e.g. `4990` = R$ 49,90) |
|
|
76
|
+
| `description` | `string` | ✅ | — | Payment description |
|
|
77
|
+
| `type` | `'static' \| 'dynamic'` | — | `'static'` | QR Code type |
|
|
78
|
+
| `name` | `string` | — | `'VerusPay'` | Recipient name (static QR only) |
|
|
79
|
+
| `city` | `string` | — | `'Brasil'` | Recipient city (static QR only) |
|
|
80
|
+
| `expirationSeconds` | `number` | — | `3600` | Expiration in seconds (dynamic QR only) |
|
|
81
|
+
| `sandbox` | `boolean` | — | `false` | Enable sandbox/test mode |
|
|
82
|
+
| `apiUrl` | `string` | — | auto | Custom API base URL (overrides sandbox flag) |
|
|
83
|
+
| `title` | `string` | — | `'Pagar com PIX'` | Title shown above the amount |
|
|
84
|
+
| `className` | `string` | — | — | CSS class for the container |
|
|
85
|
+
| `style` | `CSSProperties` | — | — | Inline styles for the container |
|
|
86
|
+
| `onSuccess` | `(txId: string) => void` | — | — | Called when payment is confirmed |
|
|
87
|
+
| `onError` | `(error: Error) => void` | — | — | Called on error |
|
|
88
|
+
|
|
89
|
+
---
|
|
90
|
+
|
|
91
|
+
## Components & hooks
|
|
92
|
+
|
|
93
|
+
### `<PixQrCode>`
|
|
94
|
+
|
|
95
|
+
Renders just the QR Code image, without the full checkout UI.
|
|
96
|
+
|
|
97
|
+
```tsx
|
|
98
|
+
import { PixQrCode } from '@veruspay/react'
|
|
99
|
+
|
|
100
|
+
<PixQrCode emv={qrCodeEmv} size={200} />
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
| Prop | Type | Default | Description |
|
|
104
|
+
|---|---|---|---|
|
|
105
|
+
| `emv` | `string` | — | PIX EMV payload string |
|
|
106
|
+
| `size` | `number` | `200` | Width and height in pixels |
|
|
107
|
+
|
|
108
|
+
---
|
|
109
|
+
|
|
110
|
+
### `usePixPayment`
|
|
111
|
+
|
|
112
|
+
Hook for building a fully custom checkout UI.
|
|
113
|
+
|
|
114
|
+
```tsx
|
|
115
|
+
import { usePixPayment } from '@veruspay/react'
|
|
116
|
+
|
|
117
|
+
function CustomCheckout() {
|
|
118
|
+
const { qrCodeEmv, status, error, copyCode, copied, simulatePayment } = usePixPayment({
|
|
119
|
+
clientId: 'cli_xxxxxxxx',
|
|
120
|
+
clientSecret: 'your-client-secret',
|
|
121
|
+
accountId: 'uuid-da-conta',
|
|
122
|
+
pixKey: 'uuid-chave-evp',
|
|
123
|
+
amount: 4990,
|
|
124
|
+
description: 'Pedido #123',
|
|
125
|
+
sandbox: true,
|
|
126
|
+
onSuccess: (txId) => console.log('Pago!', txId),
|
|
127
|
+
})
|
|
128
|
+
|
|
129
|
+
if (status === 'loading') return <p>Gerando QR Code…</p>
|
|
130
|
+
if (status === 'error') return <p>Erro: {error}</p>
|
|
131
|
+
if (status === 'completed') return <p>✅ Pagamento confirmado!</p>
|
|
132
|
+
|
|
133
|
+
return (
|
|
134
|
+
<div>
|
|
135
|
+
<img src={/* render qrCodeEmv */} />
|
|
136
|
+
<button onClick={copyCode}>{copied ? 'Copiado!' : 'Copiar código'}</button>
|
|
137
|
+
<button onClick={simulatePayment}>Simular pagamento</button>
|
|
138
|
+
</div>
|
|
139
|
+
)
|
|
140
|
+
}
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
---
|
|
144
|
+
|
|
145
|
+
### `VerusPayClient`
|
|
146
|
+
|
|
147
|
+
Low-level API client for advanced use cases (Node.js, custom integrations).
|
|
148
|
+
|
|
149
|
+
```ts
|
|
150
|
+
import { VerusPayClient, SANDBOX_API_URL } from '@veruspay/react'
|
|
151
|
+
|
|
152
|
+
const client = new VerusPayClient(SANDBOX_API_URL)
|
|
153
|
+
const token = await client.getToken('cli_xxxxxxxx', 'your-client-secret')
|
|
154
|
+
|
|
155
|
+
const qr = await client.createDynamicQrCode(token, {
|
|
156
|
+
accountId: 'uuid-da-conta',
|
|
157
|
+
pixKey: 'uuid-chave-evp',
|
|
158
|
+
amount: 4990,
|
|
159
|
+
description: 'Pedido #123',
|
|
160
|
+
expirationSeconds: 3600,
|
|
161
|
+
})
|
|
162
|
+
|
|
163
|
+
console.log(qr.txId, qr.qrCodeEmv)
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
---
|
|
167
|
+
|
|
168
|
+
## Getting credentials
|
|
169
|
+
|
|
170
|
+
1. Sign up at [veruspay.co](https://veruspay.co)
|
|
171
|
+
2. Go to **Homologação (Sandbox)** to get test credentials
|
|
172
|
+
3. Use `sandbox` prop for testing — switch to production credentials when ready
|
|
173
|
+
|
|
174
|
+
---
|
|
175
|
+
|
|
176
|
+
## License
|
|
177
|
+
|
|
178
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,8 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@veruspay/react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Drop-in PIX checkout component for React apps. The simplest way to accept PIX payments.",
|
|
5
|
-
"keywords": [
|
|
5
|
+
"keywords": [
|
|
6
|
+
"pix",
|
|
7
|
+
"payment",
|
|
8
|
+
"brazil",
|
|
9
|
+
"react",
|
|
10
|
+
"checkout",
|
|
11
|
+
"qrcode"
|
|
12
|
+
],
|
|
6
13
|
"author": "VerusPay",
|
|
7
14
|
"license": "MIT",
|
|
8
15
|
"type": "module",
|