@suportepos/split-checkout

v0.5.7

Published

7 days ago

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

0High
0Medium
0Low

maxlessing

🛒 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:

<script src="https://unpkg.com/@suportepos/[email protected]/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:

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

Depois importe no seu projeto React:

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: "[email protected]",
        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)

<!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/[email protected]/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: "[email protected]",
          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):

{
  "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: [email protected]
🌐 Site: https://www.suportepos.com.br

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme