@suportepos/split-checkout 0.2.1 → 0.2.2

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.
Files changed (3) hide show
  1. package/README.md +210 -0
  2. package/dist/README.md +210 -0
  3. package/package.json +2 -2
package/README.md ADDED
@@ -0,0 +1,210 @@
1
+ # 🛒 Split Checkout — Standalone
2
+
3
+ Checkout transparente com **split de pagamentos** pronto para integração em sites e aplicações.
4
+ Fornecido pela **SuportePOS**.
5
+
6
+ ---
7
+
8
+ ## 📦 Instalação
9
+
10
+ ### Opção 1 — Standalone (HTML direto)
11
+
12
+ Inclua o bundle standalone em sua página HTML:
13
+
14
+ ```html
15
+ <script src="https://unpkg.com/@suportepos/split-checkout@0.2.1/dist/standalone/suportepos-checkout.js"></script>
16
+ ```
17
+
18
+ Isso expõe o objeto global `SplitCheckout` com o método `renderCheckout`.
19
+
20
+ ### Opção 2 — React (componente `CheckoutFlow`)
21
+
22
+ Instale a lib:
23
+
24
+ ```bash
25
+ npm install @suportepos/split-checkout
26
+ # ou
27
+ yarn add @suportepos/split-checkout
28
+ ```
29
+
30
+ Depois importe no seu projeto React:
31
+
32
+ ```tsx
33
+ import React from "react";
34
+ import CheckoutFlow, { Product, Split } from "@suportepos/split-checkout";
35
+
36
+ const items: Product[] = [
37
+ { id: "sku-1", name: "Mensalidade", unitPrice: 79.9 },
38
+ { id: "sku-2", name: "Taxa de adesão", unitPrice: 20.1, quantity: 1 },
39
+ ];
40
+
41
+ const splits: Split[] = [
42
+ {
43
+ subordinateMerchantId: "e982d33b-3e82-4566-96bd-28705f09a1fa",
44
+ valor: 2
45
+ },
46
+ {
47
+ subordinateMerchantId: "125569b7-e459-4f0d-8106-ac0efac38096",
48
+ valor: 2
49
+ }
50
+ ];
51
+
52
+ export default function App() {
53
+ const [flowKey, setFlowKey] = React.useState(0);
54
+
55
+ return (
56
+ <CheckoutFlow
57
+ key={flowKey} // força recriar o componente do zero
58
+ merchantId="91699892-6de9-438b-940d-624ebbe267b7"
59
+ orderId="123"
60
+ production={false}
61
+ products={items}
62
+ splits={splits}
63
+ customer={{
64
+ buyerName: "João da Silva",
65
+ buyerEmail: "joao.silva@example.com",
66
+ buyerPhone: "+55 11988887777",
67
+ docType: "CPF",
68
+ docNumber: "12345678909", // CPF fictício
69
+ cep: "01001000",
70
+ address: "Avenida Paulista",
71
+ neighborhood: "Bela Vista",
72
+ number: "1000",
73
+ complement: "Conjunto 101",
74
+ city: "São Paulo",
75
+ uf: "SP"
76
+ }}
77
+ merchantName="SUPORTEPOS"
78
+ //amountOverride={10.50}
79
+ onResponse={(result) => {
80
+ if (result.success) {
81
+ alert(`Sucesso: ${result.label}`);
82
+ setFlowKey(prev => prev + 1);
83
+ } else {
84
+ alert(`Erro: ${result.message}`);
85
+ }
86
+ }}
87
+ />
88
+ );
89
+ }
90
+ ```
91
+
92
+ ---
93
+
94
+ ## ⚡ Exemplo de uso (Standalone)
95
+
96
+ ```html
97
+ <!DOCTYPE html>
98
+ <html lang="pt-BR">
99
+ <head>
100
+ <meta charset="UTF-8" />
101
+ <title>Teste Split Checkout</title>
102
+ </head>
103
+ <body>
104
+ <h1>Checkout</h1>
105
+
106
+ <!-- container -->
107
+ <div id="checkout"></div>
108
+
109
+ <!-- lib -->
110
+ <script src="https://unpkg.com/@suportepos/split-checkout@0.2.1/dist/standalone/suportepos-checkout.js"></script>
111
+
112
+ <script>
113
+ SplitCheckout.renderCheckout({
114
+ elementId: "checkout",
115
+ products: [
116
+ { id: "sku-1", name: "Plano Mensal", unitPrice: 100 },
117
+ { id: "sku-2", name: "Taxa de Adesão", unitPrice: 20 },
118
+ ],
119
+ orderId: "123",
120
+ production: false, // true = produção | false = homologação
121
+ customer: {
122
+ buyerName: "João da Silva",
123
+ buyerEmail: "joao.silva@example.com",
124
+ buyerPhone: "+55 11988887777",
125
+ docType: "CPF",
126
+ docNumber: "12345678909",
127
+ cep: "01001000",
128
+ address: "Avenida Paulista",
129
+ neighborhood: "Bela Vista",
130
+ number: "1000",
131
+ complement: "Conjunto 101",
132
+ city: "São Paulo",
133
+ uf: "SP"
134
+ },
135
+ merchantName: "SUPORTEPOS",
136
+ amountOverride: 105.25,
137
+ merchantId: "91699892-6de9-438b-940d-624ebbe267b7",
138
+ onResponse: (result) => {
139
+ console.log("Resposta do backend:", result);
140
+ alert(result.success ? "✅ Pagamento aprovado" : "❌ Falha no pagamento");
141
+ },
142
+ });
143
+ </script>
144
+ </body>
145
+ </html>
146
+ ```
147
+
148
+ ---
149
+
150
+ ## 🛠️ Parâmetros de `renderCheckout` / `CheckoutFlow`
151
+
152
+ | Campo | Tipo | Obrigatório | Descrição |
153
+ |------------------|-----------|-------------|---------------------------------------------------------------------------|
154
+ | `elementId` | `string` | ✅ (Standalone) | ID do elemento HTML onde o checkout será montado |
155
+ | `products` | `Array` | ✅ | Lista de produtos `{ id, name, unitPrice }` |
156
+ | `splits` | `Array` | ❌ | Lista de splits `{ subordinateMerchantId, valor }` |
157
+ | `orderId` | `string` | ✅ | Identificador único do pedido |
158
+ | `production` | `boolean` | ✅ | Define o ambiente (`true = produção`, `false = staging/test`) |
159
+ | `customer` | `object` | ✅ | Dados do cliente comprador (nome, e-mail, telefone, endereço, documento) |
160
+ | `merchantName` | `string` | ✅ | Nome exibido do lojista |
161
+ | `amountOverride` | `number` | ❌ | Sobrescreve o valor total calculado (útil para descontos, taxas, etc.) |
162
+ | `merchantId` | `string` | ✅ | Identificador único da loja (fornecido pela SuportePOS) |
163
+ | `onResponse` | `function`| ✅ | Callback chamado ao finalizar pagamento |
164
+
165
+ ---
166
+
167
+ ## 🎯 Estrutura do Callback `onResponse`
168
+
169
+ O checkout retorna a função `onResponse(result)` com um objeto JSON.
170
+
171
+ ### Exemplo de resposta (sucesso):
172
+
173
+ ```json
174
+ {
175
+ "success": true,
176
+ "status": 2,
177
+ "label": "Pagamento capturado com sucesso",
178
+ "paymentId": "ab7adec8-2205-4dee-81cd-49de34998f96",
179
+ "amount": 105.25,
180
+ "buyerName": "João da Silva",
181
+ "buyerEmail": "joao.silva@example.com",
182
+ "buyerPhone": "+55 11988887777"
183
+ }
184
+ ```
185
+
186
+ ### Campos do retorno
187
+
188
+ | Campo | Tipo | Descrição |
189
+ |--------------|----------|----------------------------------------------------------|
190
+ | `success` | `boolean`| `true` se o pagamento foi aprovado, `false` se falhou |
191
+ | `status` | `number` | Status numérico do pagamento (ex.: `2 = capturado`) |
192
+ | `label` | `string` | Mensagem amigável do status |
193
+ | `paymentId` | `string` | ID único da transação |
194
+ | `amount` | `number` | Valor pago |
195
+ | `buyerName` | `string` | Nome do comprador |
196
+ | `buyerEmail` | `string` | E-mail do comprador |
197
+ | `buyerPhone` | `string` | Telefone do comprador |
198
+
199
+ ---
200
+
201
+ ## ✅ Boas práticas
202
+
203
+ - Sempre utilize `orderId` único por transação.
204
+ - Configure `production: true` **somente** em ambiente real.
205
+ - Utilize `onResponse` para atualizar seu backend (registrar transação, mudar status do pedido, etc.).
206
+
207
+ ---
208
+
209
+ ## 📄 Licença
210
+ MIT — © SuportePOS
package/dist/README.md ADDED
@@ -0,0 +1,210 @@
1
+ # 🛒 Split Checkout — Standalone
2
+
3
+ Checkout transparente com **split de pagamentos** pronto para integração em sites e aplicações.
4
+ Fornecido pela **SuportePOS**.
5
+
6
+ ---
7
+
8
+ ## 📦 Instalação
9
+
10
+ ### Opção 1 — Standalone (HTML direto)
11
+
12
+ Inclua o bundle standalone em sua página HTML:
13
+
14
+ ```html
15
+ <script src="https://unpkg.com/@suportepos/split-checkout@0.2.1/dist/standalone/suportepos-checkout.js"></script>
16
+ ```
17
+
18
+ Isso expõe o objeto global `SplitCheckout` com o método `renderCheckout`.
19
+
20
+ ### Opção 2 — React (componente `CheckoutFlow`)
21
+
22
+ Instale a lib:
23
+
24
+ ```bash
25
+ npm install @suportepos/split-checkout
26
+ # ou
27
+ yarn add @suportepos/split-checkout
28
+ ```
29
+
30
+ Depois importe no seu projeto React:
31
+
32
+ ```tsx
33
+ import React from "react";
34
+ import CheckoutFlow, { Product, Split } from "@suportepos/split-checkout";
35
+
36
+ const items: Product[] = [
37
+ { id: "sku-1", name: "Mensalidade", unitPrice: 79.9 },
38
+ { id: "sku-2", name: "Taxa de adesão", unitPrice: 20.1, quantity: 1 },
39
+ ];
40
+
41
+ const splits: Split[] = [
42
+ {
43
+ subordinateMerchantId: "e982d33b-3e82-4566-96bd-28705f09a1fa",
44
+ valor: 2
45
+ },
46
+ {
47
+ subordinateMerchantId: "125569b7-e459-4f0d-8106-ac0efac38096",
48
+ valor: 2
49
+ }
50
+ ];
51
+
52
+ export default function App() {
53
+ const [flowKey, setFlowKey] = React.useState(0);
54
+
55
+ return (
56
+ <CheckoutFlow
57
+ key={flowKey} // força recriar o componente do zero
58
+ merchantId="91699892-6de9-438b-940d-624ebbe267b7"
59
+ orderId="123"
60
+ production={false}
61
+ products={items}
62
+ splits={splits}
63
+ customer={{
64
+ buyerName: "João da Silva",
65
+ buyerEmail: "joao.silva@example.com",
66
+ buyerPhone: "+55 11988887777",
67
+ docType: "CPF",
68
+ docNumber: "12345678909", // CPF fictício
69
+ cep: "01001000",
70
+ address: "Avenida Paulista",
71
+ neighborhood: "Bela Vista",
72
+ number: "1000",
73
+ complement: "Conjunto 101",
74
+ city: "São Paulo",
75
+ uf: "SP"
76
+ }}
77
+ merchantName="SUPORTEPOS"
78
+ //amountOverride={10.50}
79
+ onResponse={(result) => {
80
+ if (result.success) {
81
+ alert(`Sucesso: ${result.label}`);
82
+ setFlowKey(prev => prev + 1);
83
+ } else {
84
+ alert(`Erro: ${result.message}`);
85
+ }
86
+ }}
87
+ />
88
+ );
89
+ }
90
+ ```
91
+
92
+ ---
93
+
94
+ ## ⚡ Exemplo de uso (Standalone)
95
+
96
+ ```html
97
+ <!DOCTYPE html>
98
+ <html lang="pt-BR">
99
+ <head>
100
+ <meta charset="UTF-8" />
101
+ <title>Teste Split Checkout</title>
102
+ </head>
103
+ <body>
104
+ <h1>Checkout</h1>
105
+
106
+ <!-- container -->
107
+ <div id="checkout"></div>
108
+
109
+ <!-- lib -->
110
+ <script src="https://unpkg.com/@suportepos/split-checkout@0.2.1/dist/standalone/suportepos-checkout.js"></script>
111
+
112
+ <script>
113
+ SplitCheckout.renderCheckout({
114
+ elementId: "checkout",
115
+ products: [
116
+ { id: "sku-1", name: "Plano Mensal", unitPrice: 100 },
117
+ { id: "sku-2", name: "Taxa de Adesão", unitPrice: 20 },
118
+ ],
119
+ orderId: "123",
120
+ production: false, // true = produção | false = homologação
121
+ customer: {
122
+ buyerName: "João da Silva",
123
+ buyerEmail: "joao.silva@example.com",
124
+ buyerPhone: "+55 11988887777",
125
+ docType: "CPF",
126
+ docNumber: "12345678909",
127
+ cep: "01001000",
128
+ address: "Avenida Paulista",
129
+ neighborhood: "Bela Vista",
130
+ number: "1000",
131
+ complement: "Conjunto 101",
132
+ city: "São Paulo",
133
+ uf: "SP"
134
+ },
135
+ merchantName: "SUPORTEPOS",
136
+ amountOverride: 105.25,
137
+ merchantId: "91699892-6de9-438b-940d-624ebbe267b7",
138
+ onResponse: (result) => {
139
+ console.log("Resposta do backend:", result);
140
+ alert(result.success ? "✅ Pagamento aprovado" : "❌ Falha no pagamento");
141
+ },
142
+ });
143
+ </script>
144
+ </body>
145
+ </html>
146
+ ```
147
+
148
+ ---
149
+
150
+ ## 🛠️ Parâmetros de `renderCheckout` / `CheckoutFlow`
151
+
152
+ | Campo | Tipo | Obrigatório | Descrição |
153
+ |------------------|-----------|-------------|---------------------------------------------------------------------------|
154
+ | `elementId` | `string` | ✅ (Standalone) | ID do elemento HTML onde o checkout será montado |
155
+ | `products` | `Array` | ✅ | Lista de produtos `{ id, name, unitPrice }` |
156
+ | `splits` | `Array` | ❌ | Lista de splits `{ subordinateMerchantId, valor }` |
157
+ | `orderId` | `string` | ✅ | Identificador único do pedido |
158
+ | `production` | `boolean` | ✅ | Define o ambiente (`true = produção`, `false = staging/test`) |
159
+ | `customer` | `object` | ✅ | Dados do cliente comprador (nome, e-mail, telefone, endereço, documento) |
160
+ | `merchantName` | `string` | ✅ | Nome exibido do lojista |
161
+ | `amountOverride` | `number` | ❌ | Sobrescreve o valor total calculado (útil para descontos, taxas, etc.) |
162
+ | `merchantId` | `string` | ✅ | Identificador único da loja (fornecido pela SuportePOS) |
163
+ | `onResponse` | `function`| ✅ | Callback chamado ao finalizar pagamento |
164
+
165
+ ---
166
+
167
+ ## 🎯 Estrutura do Callback `onResponse`
168
+
169
+ O checkout retorna a função `onResponse(result)` com um objeto JSON.
170
+
171
+ ### Exemplo de resposta (sucesso):
172
+
173
+ ```json
174
+ {
175
+ "success": true,
176
+ "status": 2,
177
+ "label": "Pagamento capturado com sucesso",
178
+ "paymentId": "ab7adec8-2205-4dee-81cd-49de34998f96",
179
+ "amount": 105.25,
180
+ "buyerName": "João da Silva",
181
+ "buyerEmail": "joao.silva@example.com",
182
+ "buyerPhone": "+55 11988887777"
183
+ }
184
+ ```
185
+
186
+ ### Campos do retorno
187
+
188
+ | Campo | Tipo | Descrição |
189
+ |--------------|----------|----------------------------------------------------------|
190
+ | `success` | `boolean`| `true` se o pagamento foi aprovado, `false` se falhou |
191
+ | `status` | `number` | Status numérico do pagamento (ex.: `2 = capturado`) |
192
+ | `label` | `string` | Mensagem amigável do status |
193
+ | `paymentId` | `string` | ID único da transação |
194
+ | `amount` | `number` | Valor pago |
195
+ | `buyerName` | `string` | Nome do comprador |
196
+ | `buyerEmail` | `string` | E-mail do comprador |
197
+ | `buyerPhone` | `string` | Telefone do comprador |
198
+
199
+ ---
200
+
201
+ ## ✅ Boas práticas
202
+
203
+ - Sempre utilize `orderId` único por transação.
204
+ - Configure `production: true` **somente** em ambiente real.
205
+ - Utilize `onResponse` para atualizar seu backend (registrar transação, mudar status do pedido, etc.).
206
+
207
+ ---
208
+
209
+ ## 📄 Licença
210
+ MIT — © SuportePOS
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@suportepos/split-checkout",
3
- "version": "0.2.1",
3
+ "version": "0.2.2",
4
4
  "type": "module",
5
5
  "main": "dist/index.umd.js",
6
6
  "module": "dist/index.es.js",
@@ -14,7 +14,7 @@
14
14
  "preview": "vite preview",
15
15
  "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
16
16
  "build:standalone": "vite build --config vite.config.standalone.ts && npm run build:types",
17
- "prepublishOnly": "npm run build && npm run build:standalone"
17
+ "prepublishOnly": "npm run build && npm run build:standalone && cp README.md dist/README.md"
18
18
  },
19
19
  "peerDependencies": {
20
20
  "@emotion/react": ">=11.0.0",