npm package: @suportepos/split-checkout
Description: Checkout transparente com **split de pagamentos** pronto para integração em sites e aplicações.   Fornecido pela **SuportePOS**.
Latest version: 0.5.9

# 🛒 Split Checkout — Standalone

Checkout transparente com **split de pagamentos** pronto para integração em sites e aplicações.  
Fornecido pela **SuportePOS**.

---

## 📦 Instalação

### Opção 1 — Standalone (HTML direto)

Inclua o bundle standalone em sua página HTML:

```html
<script src="https://unpkg.com/@suportepos/split-checkout@0.2.1/dist/standalone/suportepos-checkout.js"></script>
```

Isso expõe o objeto global `SplitCheckout` com o método `renderCheckout`.

### Opção 2 — React (componente `CheckoutFlow`)

Instale a lib:

```bash
npm install @suportepos/split-checkout
# ou
yarn add @suportepos/split-checkout
```

Depois importe no seu projeto React:

```tsx
import React from "react";
import CheckoutFlow, { Produto, Split } from "@suportepos/split-checkout";

const items: Produto[] = [
  { id: "sku-1", nome: "Plano Mensal", preco: 100, quantidade: 1 },
  { id: "sku-2", nome: "Taxa de Adesão", preco: 20, quantidade: 1 },
];

const splits: Split[] = [
  { subordinateMerchantId: "e982d33b-3e82-4566-96bd-28705f09a1fa", valor: 2 },
  { subordinateMerchantId: "125569b7-e459-4f0d-8106-ac0efac38096", valor: 2 }
];

export default function App() {
  const [flowKey, setFlowKey] = React.useState(0);

  return (
    <CheckoutFlow
      key={flowKey}
      merchantId="********************************67b7"
      codigoPedido="123"
      producao={false}
      produtos={items}
      splits={splits}
      cliente={{
        nomeComprador: "João da Silva",
        emailComprador: "joao.silva@example.com",
        telefoneComprador: "+55 11988887777",
        tipoDoc: "CPF",
        numeroDoc: "12345678909",
        cep: "01001000",
        endereco: "Avenida Paulista",
        bairro: "Bela Vista",
        numero: "1000",
        complemento: "Conjunto 101",
        cidade: "São Paulo",
        estado: "SP"
      }}
      merchantName="SUPORTEPOS"
      cor="#32a852"
      pagamento="card"
      resumo={true}
      parcelas={2}
      onResponse={(result) => {
        if (result.sucesso) {
          alert(`Sucesso: ${result.mensagem}`);
          setFlowKey(prev => prev + 1);
        } else {
          alert(`Erro: ${result.mensagem}`);
          setFlowKey(prev => prev + 1);
        }
      }}
    />
  );
}
```

---

## ⚡ Exemplo de uso (Standalone)

```html
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <title>Teste Split Checkout</title>
  </head>
  <body>
    <h1>Checkout</h1>

    <div id="checkout"></div>

    <script src="https://unpkg.com/@suportepos/split-checkout@0.2.1/dist/standalone/suportepos-checkout.js"></script>

    <script>
      SplitCheckout.renderCheckout({
        elementId: "checkout",
        produtos: [
          { id: "sku-1", nome: "Plano Mensal", preco: 100, quantidade: 1 },
          { id: "sku-2", nome: "Taxa de Adesão", preco: 20, quantidade: 1 },
        ],
        codigoPedido: "123",
        producao: false,
        cliente: {
          nomeComprador: "João da Silva",
          emailComprador: "joao.silva@example.com",
          telefoneComprador: "+55 11988887777",
          tipoDoc: "CPF",
          numeroDoc: "12345678909",
          cep: "01001000",
          endereco: "Avenida Paulista",
          bairro: "Bela Vista",
          numero: "1000",
          complemento: "Conjunto 101",
          cidade: "São Paulo",
          estado: "SP"
        },
        merchantName: "SUPORTEPOS",
        pagamento: "card",
        cor: "#32a852",
        valorTotal: 105.25,
        resumo: true,
        merchantId: "********************************67b7",
        parcelas: 2,
        onResponse: (result) => {
          console.log("Resposta do backend:", result);
          alert(result.sucesso ? "✅ Pagamento aprovado" : "❌ Falha no pagamento");
        },
      });
    </script>
  </body>
</html>
```

---

## 🛠️ Parâmetros de `renderCheckout` / `CheckoutFlow`

| Campo            | Tipo       | Obrigatório | Descrição                                                                |
|------------------|-----------|-------------|---------------------------------------------------------------------------|
| `elementId`      | `string`  | ✅ (Standalone) | ID do elemento HTML onde o checkout será montado                      |
| `produtos`       | `Array`   | ✅          | Lista de produtos `{ id, nome, preco, quantidade }`                       |
| `splits`         | `Array`   | ❌          | Lista de splits `{ subordinateMerchantId, valor }`                        |
| `codigoPedido`   | `string`  | ✅          | Identificador único do pedido                                             |
| `producao`       | `boolean` | ✅          | Define o ambiente (`true = produção`, `false = homologação/test`)         |
| `cliente`        | `object`  | ✅          | Dados do comprador (nome, e-mail, telefone, endereço, documento)          |
| `merchantName`   | `string`  | ✅          | Nome exibido do lojista                                                   |
| `valorTotal`     | `number`  | ❌          | Sobrescreve o valor total calculado (útil para descontos, taxas, etc.)    |
| `merchantId`     | `string`  | ✅          | Identificador único da loja (fornecido pela SuportePOS)                   |
| `onResponse`     | `function`| ✅          | Callback chamado ao finalizar pagamento                                   |
| `cor`            | `string`  | ❌          | Customização da cor dos botões                                            |
| `pagamento`      | `string`  | ❌          | Meio de pagamento para pular opção de seleção (card, pix)                 |
| `resumo`         | `boolean` | ❌          | Resumo com as informações de valor total e produtos                       |
| `parcelas`       | `number`  | ❌           | Quantidade de parcelas para pagamento                                    |
---

## 🎯 Estrutura do Callback `onResponse`

### Exemplo de resposta (sucesso):

```json
{
  "sucesso": true,
  "pago": true,
  "payment_id": "ab7adec8-2205-4dee-81cd-49de34998f96",
  "codigo_pedido": "PED-000124",
  "valor": 105.25,
  "codigo_adquirente": "CIELO",
  "codigo_autenticacao": "998877665544",
  "bandeira": "VISA",
  "nome_produto_primario": "CRÉDITO"
}
```

| Campo               | Tipo       | Descrição                                                |
|----------------------|------------|----------------------------------------------------------|
| `sucesso`            | `boolean`  | `true` se o pagamento foi aprovado, `false` se falhou.   |
| `pago`               | `boolean`  | Indica se o pagamento foi efetivamente liquidado.        |
| `payment_id`         | `string`   | ID único da transação de pagamento.                      |
| `codigo_pedido`      | `string`   | Código de referência do pedido vinculado à transação.    |
| `valor`              | `number`   | Valor total pago em reais (BRL).                         |
| `codigo_adquirente`  | `string`   | Nome ou código da adquirente (ex.: `CIELO`, `REDE`).     |
| `codigo_autenticacao`| `string`   | Código de autenticação retornado pela adquirente.        |
| `bandeira`           | `string`   | Bandeira do cartão utilizado (ex.: `VISA`, `MASTERCARD`).|
| `nome_produto_primario` | `string` | Tipo principal de produto (ex.: `CRÉDITO`, `DÉBITO`).   |

---

## ✅ Boas práticas

- Sempre utilize `codigoPedido` único por transação.
- Configure `producao: true` **somente** em ambiente real.
- Utilize `onResponse` para atualizar seu backend (registrar transação, mudar status do pedido, etc.).

---

## 📄 Licenciamento e Uso

Este pacote **não é open source** e não está disponível sob a licença MIT.  
O uso do **@suportepos/split-checkout** é restrito e requer contrato comercial firmado com a **SuportePOS**.

### ⚠️ Importante
- Não é permitido utilizar este pacote sem autorização prévia.  
- Para obter acesso, entre em contato com nosso time comercial.  

📩 **E-mail:** atendimento@suportepos.com.br  
🌐 **Site:** [https://www.suportepos.com.br](https://www.suportepos.com.br)