@suportepos/split-checkout 0.4.1 → 0.4.3
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 +207 -219
- package/dist/README.md +207 -219
- package/dist/index.es.js +2 -2
- package/dist/index.umd.js +1 -1
- package/dist/standalone/suportepos-checkout.js +1 -1
- package/package.json +46 -46
package/dist/README.md
CHANGED
|
@@ -1,219 +1,207 @@
|
|
|
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, {
|
|
35
|
-
|
|
36
|
-
const items:
|
|
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
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
<
|
|
99
|
-
|
|
100
|
-
<
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
<
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
|
153
|
-
|
|
154
|
-
| `
|
|
155
|
-
| `
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
-
|
|
204
|
-
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
## 📄 Licenciamento e Uso
|
|
210
|
-
|
|
211
|
-
Este pacote **não é open source** e não está disponível sob a licença MIT.
|
|
212
|
-
O uso do **@suportepos/split-checkout** é restrito e requer contrato comercial firmado com a **SuportePOS**.
|
|
213
|
-
|
|
214
|
-
### ⚠️ Importante
|
|
215
|
-
- Não é permitido utilizar este pacote sem autorização prévia.
|
|
216
|
-
- Para obter acesso, entre em contato com nosso time comercial.
|
|
217
|
-
|
|
218
|
-
📩 **E-mail:** atendimento@suportepos.com.br
|
|
219
|
-
🌐 **Site:** [https://www.suportepos.com.br](https://www.suportepos.com.br)
|
|
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, { Produto, Split } from "@suportepos/split-checkout";
|
|
35
|
+
|
|
36
|
+
const items: Produto[] = [
|
|
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
|
+
{ subordinateMerchantId: "e982d33b-3e82-4566-96bd-28705f09a1fa", valor: 2 },
|
|
43
|
+
{ subordinateMerchantId: "125569b7-e459-4f0d-8106-ac0efac38096", valor: 2 }
|
|
44
|
+
];
|
|
45
|
+
|
|
46
|
+
export default function App() {
|
|
47
|
+
const [flowKey, setFlowKey] = React.useState(0);
|
|
48
|
+
|
|
49
|
+
return (
|
|
50
|
+
<CheckoutFlow
|
|
51
|
+
key={flowKey}
|
|
52
|
+
merchantId="********************************67b7"
|
|
53
|
+
codigoPedido="123"
|
|
54
|
+
producao={false}
|
|
55
|
+
produtos={items}
|
|
56
|
+
splits={splits}
|
|
57
|
+
cliente={{
|
|
58
|
+
nomeComprador: "João da Silva",
|
|
59
|
+
emailComprador: "joao.silva@example.com",
|
|
60
|
+
telefoneComprador: "+55 11988887777",
|
|
61
|
+
tipoDoc: "CPF",
|
|
62
|
+
numeroDoc: "12345678909",
|
|
63
|
+
cep: "01001000",
|
|
64
|
+
endereco: "Avenida Paulista",
|
|
65
|
+
bairro: "Bela Vista",
|
|
66
|
+
numero: "1000",
|
|
67
|
+
complemento: "Conjunto 101",
|
|
68
|
+
cidade: "São Paulo",
|
|
69
|
+
estado: "SP"
|
|
70
|
+
}}
|
|
71
|
+
merchantName="SUPORTEPOS"
|
|
72
|
+
onResponse={(result) => {
|
|
73
|
+
if (result.sucesso) {
|
|
74
|
+
alert(`Sucesso: ${result.mensagem}`);
|
|
75
|
+
setFlowKey(prev => prev + 1);
|
|
76
|
+
} else {
|
|
77
|
+
alert(`Erro: ${result.mensagem}`);
|
|
78
|
+
setFlowKey(prev => prev + 1);
|
|
79
|
+
}
|
|
80
|
+
}}
|
|
81
|
+
/>
|
|
82
|
+
);
|
|
83
|
+
}
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
---
|
|
87
|
+
|
|
88
|
+
## ⚡ Exemplo de uso (Standalone)
|
|
89
|
+
|
|
90
|
+
```html
|
|
91
|
+
<!DOCTYPE html>
|
|
92
|
+
<html lang="pt-BR">
|
|
93
|
+
<head>
|
|
94
|
+
<meta charset="UTF-8" />
|
|
95
|
+
<title>Teste Split Checkout</title>
|
|
96
|
+
</head>
|
|
97
|
+
<body>
|
|
98
|
+
<h1>Checkout</h1>
|
|
99
|
+
|
|
100
|
+
<div id="checkout"></div>
|
|
101
|
+
|
|
102
|
+
<script src="https://unpkg.com/@suportepos/split-checkout@0.2.1/dist/standalone/suportepos-checkout.js"></script>
|
|
103
|
+
|
|
104
|
+
<script>
|
|
105
|
+
SplitCheckout.renderCheckout({
|
|
106
|
+
elementId: "checkout",
|
|
107
|
+
produtos: [
|
|
108
|
+
{ id: "sku-1", name: "Plano Mensal", unitPrice: 100 },
|
|
109
|
+
{ id: "sku-2", name: "Taxa de Adesão", unitPrice: 20 },
|
|
110
|
+
],
|
|
111
|
+
codigoPedido: "123",
|
|
112
|
+
producao: false,
|
|
113
|
+
cliente: {
|
|
114
|
+
nomeComprador: "João da Silva",
|
|
115
|
+
emailComprador: "joao.silva@example.com",
|
|
116
|
+
telefoneComprador: "+55 11988887777",
|
|
117
|
+
tipoDoc: "CPF",
|
|
118
|
+
numeroDoc: "12345678909",
|
|
119
|
+
cep: "01001000",
|
|
120
|
+
endereco: "Avenida Paulista",
|
|
121
|
+
bairro: "Bela Vista",
|
|
122
|
+
numero: "1000",
|
|
123
|
+
complemento: "Conjunto 101",
|
|
124
|
+
cidade: "São Paulo",
|
|
125
|
+
estado: "SP"
|
|
126
|
+
},
|
|
127
|
+
merchantName: "SUPORTEPOS",
|
|
128
|
+
amountOverride: 105.25,
|
|
129
|
+
merchantId: "********************************67b7",
|
|
130
|
+
onResponse: (result) => {
|
|
131
|
+
console.log("Resposta do backend:", result);
|
|
132
|
+
alert(result.sucesso ? "✅ Pagamento aprovado" : "❌ Falha no pagamento");
|
|
133
|
+
},
|
|
134
|
+
});
|
|
135
|
+
</script>
|
|
136
|
+
</body>
|
|
137
|
+
</html>
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
---
|
|
141
|
+
|
|
142
|
+
## 🛠️ Parâmetros de `renderCheckout` / `CheckoutFlow`
|
|
143
|
+
|
|
144
|
+
| Campo | Tipo | Obrigatório | Descrição |
|
|
145
|
+
|------------------|-----------|-------------|---------------------------------------------------------------------------|
|
|
146
|
+
| `elementId` | `string` | ✅ (Standalone) | ID do elemento HTML onde o checkout será montado |
|
|
147
|
+
| `produtos` | `Array` | ✅ | Lista de produtos `{ id, name, unitPrice, quantity? }` |
|
|
148
|
+
| `splits` | `Array` | ❌ | Lista de splits `{ subordinateMerchantId, valor }` |
|
|
149
|
+
| `codigoPedido` | `string` | ✅ | Identificador único do pedido |
|
|
150
|
+
| `producao` | `boolean` | ✅ | Define o ambiente (`true = produção`, `false = homologação/test`) |
|
|
151
|
+
| `cliente` | `object` | ✅ | Dados do comprador (nome, e-mail, telefone, endereço, documento) |
|
|
152
|
+
| `merchantName` | `string` | ✅ | Nome exibido do lojista |
|
|
153
|
+
| `amountOverride` | `number` | ❌ | Sobrescreve o valor total calculado (útil para descontos, taxas, etc.) |
|
|
154
|
+
| `merchantId` | `string` | ✅ | Identificador único da loja (fornecido pela SuportePOS) |
|
|
155
|
+
| `onResponse` | `function`| ✅ | Callback chamado ao finalizar pagamento |
|
|
156
|
+
|
|
157
|
+
---
|
|
158
|
+
|
|
159
|
+
## 🎯 Estrutura do Callback `onResponse`
|
|
160
|
+
|
|
161
|
+
### Exemplo de resposta (sucesso):
|
|
162
|
+
|
|
163
|
+
```json
|
|
164
|
+
{
|
|
165
|
+
"sucesso": true,
|
|
166
|
+
"status": 2,
|
|
167
|
+
"mensagem": "Pagamento capturado com sucesso",
|
|
168
|
+
"paymentId": "ab7adec8-2205-4dee-81cd-49de34998f96",
|
|
169
|
+
"valor": 105.25,
|
|
170
|
+
"nomeComprador": "João da Silva",
|
|
171
|
+
"emailComprador": "joao.silva@example.com",
|
|
172
|
+
"telefoneComprador": "+55 11988887777"
|
|
173
|
+
}
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
| Campo | Tipo | Descrição |
|
|
177
|
+
|--------------------|----------|----------------------------------------------------------|
|
|
178
|
+
| `sucesso` | `boolean`| `true` se o pagamento foi aprovado, `false` se falhou |
|
|
179
|
+
| `status` | `number` | Status numérico do pagamento (ex.: `2 = capturado`) |
|
|
180
|
+
| `mensagem` | `string` | Mensagem amigável do status |
|
|
181
|
+
| `paymentId` | `string` | ID único da transação |
|
|
182
|
+
| `valor` | `number` | Valor pago |
|
|
183
|
+
| `nomeComprador` | `string` | Nome do comprador |
|
|
184
|
+
| `emailComprador` | `string` | E-mail do comprador |
|
|
185
|
+
| `telefoneComprador`| `string` | Telefone do comprador |
|
|
186
|
+
|
|
187
|
+
---
|
|
188
|
+
|
|
189
|
+
## ✅ Boas práticas
|
|
190
|
+
|
|
191
|
+
- Sempre utilize `codigoPedido` único por transação.
|
|
192
|
+
- Configure `producao: true` **somente** em ambiente real.
|
|
193
|
+
- Utilize `onResponse` para atualizar seu backend (registrar transação, mudar status do pedido, etc.).
|
|
194
|
+
|
|
195
|
+
---
|
|
196
|
+
|
|
197
|
+
## 📄 Licenciamento e Uso
|
|
198
|
+
|
|
199
|
+
Este pacote **não é open source** e não está disponível sob a licença MIT.
|
|
200
|
+
O uso do **@suportepos/split-checkout** é restrito e requer contrato comercial firmado com a **SuportePOS**.
|
|
201
|
+
|
|
202
|
+
### ⚠️ Importante
|
|
203
|
+
- Não é permitido utilizar este pacote sem autorização prévia.
|
|
204
|
+
- Para obter acesso, entre em contato com nosso time comercial.
|
|
205
|
+
|
|
206
|
+
📩 **E-mail:** atendimento@suportepos.com.br
|
|
207
|
+
🌐 **Site:** [https://www.suportepos.com.br](https://www.suportepos.com.br)
|
package/dist/index.es.js
CHANGED
|
@@ -21697,7 +21697,7 @@ function SplitCheckoutForm({
|
|
|
21697
21697
|
onResponse,
|
|
21698
21698
|
uuid
|
|
21699
21699
|
}) {
|
|
21700
|
-
const apiUrl = producao ? "
|
|
21700
|
+
const apiUrl = producao ? "https://api-conciliapos-stag.suportepos.com.br" : "https://api-conciliapos-stag.suportepos.com.br";
|
|
21701
21701
|
useMediaQuery("(max-width:900px)");
|
|
21702
21702
|
const [step, setStep] = useState("card");
|
|
21703
21703
|
const maskCard = (v) => v.replace(/\D/g, "").trim();
|
|
@@ -22173,7 +22173,7 @@ function SplitPixForm({
|
|
|
22173
22173
|
onResponse,
|
|
22174
22174
|
uuid
|
|
22175
22175
|
}) {
|
|
22176
|
-
const apiUrl = producao ? "
|
|
22176
|
+
const apiUrl = producao ? "https://api-conciliapos-stag.suportepos.com.br" : "https://api-conciliapos-stag.suportepos.com.br";
|
|
22177
22177
|
useMediaQuery("(max-width:900px)");
|
|
22178
22178
|
const [copied, setCopied] = useState(false);
|
|
22179
22179
|
const [buyerName, setBuyerName] = useState(cliente?.nomeComprador ?? "");
|