@suportepos/split-checkout 0.5.0 → 0.5.1

package/README.md

@@ -69,6 +69,9 @@ export default function App() {
         estado: "SP"
       }}
       merchantName="SUPORTEPOS"
+      cor="#32a852"
+      pagamento="card"
+      resumo={true}
       onResponse={(result) => {
         if (result.sucesso) {
           alert(`Sucesso: ${result.mensagem}`);
@@ -125,7 +128,10 @@ export default function App() {
           estado: "SP"
         },
         merchantName: "SUPORTEPOS",
+        pagamento: "card",
+        cor: "#32a852",
         valorTotal: 105.25,
+        resumo: true,
         merchantId: "********************************67b7",
         onResponse: (result) => {
           console.log("Resposta do backend:", result);
@@ -141,10 +147,10 @@ export default function App() {
 
 ## 🛠️ Parâmetros de `renderCheckout` / `CheckoutFlow`
 
-| Campo            | Tipo       | Obrigatório | Descrição                                                                 |
+| 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 }`                    |
+| `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`)         |
@@ -153,7 +159,9 @@ export default function App() {
 | `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                       |
 ---
 
 ## 🎯 Estrutura do Callback `onResponse`

package/dist/README.md

@@ -69,6 +69,9 @@ export default function App() {
         estado: "SP"
       }}
       merchantName="SUPORTEPOS"
+      cor="#32a852"
+      pagamento="card"
+      resumo={true}
       onResponse={(result) => {
         if (result.sucesso) {
           alert(`Sucesso: ${result.mensagem}`);
@@ -125,7 +128,10 @@ export default function App() {
           estado: "SP"
         },
         merchantName: "SUPORTEPOS",
+        pagamento: "card",
+        cor: "#32a852",
         valorTotal: 105.25,
+        resumo: true,
         merchantId: "********************************67b7",
         onResponse: (result) => {
           console.log("Resposta do backend:", result);
@@ -141,10 +147,10 @@ export default function App() {
 
 ## 🛠️ Parâmetros de `renderCheckout` / `CheckoutFlow`
 
-| Campo            | Tipo       | Obrigatório | Descrição                                                                 |
+| 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 }`                    |
+| `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`)         |
@@ -153,7 +159,9 @@ export default function App() {
 | `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                       |
 ---
 
 ## 🎯 Estrutura do Callback `onResponse`

package/dist/index.es.js

@@ -21695,7 +21695,8 @@ function SplitCheckoutForm({
   installmentsOptions = [1, 2, 3, 6, 10, 12],
   onBack,
   onResponse,
-  uuid
+  uuid,
+  resumo
 }) {
   const apiUrl = producao ? "https://api-conciliapos.suportepos.com.br" : "https://api-conciliapos-stag.suportepos.com.br";
   useMediaQuery("(max-width:900px)");
@@ -21727,6 +21728,8 @@ function SplitCheckoutForm({
   const [docNumber, setDocNumber] = useState(cliente?.numeroDoc ?? "");
   const [errors, setErrors] = useState({});
   const [loading, setLoading] = useState(false);
+  const boxSizeStep = resumo ? 7 : 12;
+  const boxSizeSummary = resumo ? 5 : 12;
   useEffect(() => {
     const script = document.createElement("script");
     if (producao) {
@@ -21880,7 +21883,7 @@ function SplitCheckoutForm({
     window.bpSop_silentOrderPost(options);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { maxWidth: "lg", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid, { container: true, spacing: 3, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { size: { xs: 12, sm: 7 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { elevation: 0, sx: { border: "1px solid #e2e8f0" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { size: { xs: 12, sm: boxSizeStep }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { elevation: 0, sx: { border: "1px solid #e2e8f0" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { display: step === "card" ? "block" : "none" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "h6", sx: { mb: 2 }, children: "Pagamento com cartão de crédito" }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack, { spacing: 2, children: [
@@ -22147,7 +22150,7 @@ function SplitCheckoutForm({
         ] })
       ] }) })
     ] }) }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { size: { xs: 12, sm: 5 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    resumo && /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { size: { xs: 12, sm: boxSizeSummary }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       OrderSummary,
       {
         amount: valor,
@@ -22171,7 +22174,8 @@ function SplitPixForm({
   cliente,
   onBack,
   onResponse,
-  uuid
+  uuid,
+  resumo
 }) {
   const apiUrl = producao ? "https://api-conciliapos.suportepos.com.br" : "https://api-conciliapos-stag.suportepos.com.br";
   useMediaQuery("(max-width:900px)");
@@ -22181,6 +22185,8 @@ function SplitPixForm({
   const [docNumber, setDocNumber] = useState(cliente?.numeroDoc ?? "");
   const [errors, setErrors] = useState({});
   const [loading, setLoading] = useState(false);
+  const boxSizeStep = resumo ? 7 : 12;
+  const boxSizeSummary = resumo ? 5 : 12;
   const [pixData, setPixData] = useState(null);
   const maskCPF = (v) => v.replace(/\D/g, "").slice(0, 11).replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d{1,2})$/, "$1-$2");
   const maskCNPJ = (v) => v.replace(/\D/g, "").slice(0, 14).replace(/^(\d{2})(\d)/, "$1.$2").replace(/^(\d{2})\.(\d{3})(\d)/, "$1.$2.$3").replace(/\.(\d{3})(\d)/, ".$1/$2").replace(/(\d{4})(\d)/, "$1-$2");
@@ -22269,7 +22275,7 @@ function SplitPixForm({
     }
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { maxWidth: "lg", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid, { container: true, spacing: 3, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { size: { xs: 12, sm: 7 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { elevation: 0, sx: { border: "1px solid #e2e8f0" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { size: { xs: 12, sm: boxSizeStep }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { elevation: 0, sx: { border: "1px solid #e2e8f0" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { children: [
       !pixData && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "h6", sx: { mb: 2 }, children: "Preencha seus dados para gerar o PIX" }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack, { spacing: 2, children: [
@@ -22416,7 +22422,7 @@ function SplitPixForm({
         ] })
       ] })
     ] }) }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { size: { xs: 12, sm: 5 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    resumo && /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { size: { xs: 12, sm: boxSizeSummary }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       OrderSummary,
       {
         amount: valor,
@@ -22440,7 +22446,7 @@ function CheckoutFlowContent({
   producao,
   onResponse,
   paymentEnabled,
-  cor
+  resumo
 }) {
   useMediaQuery("(max-width:900px)");
   useTheme();
@@ -22493,6 +22499,8 @@ function CheckoutFlowContent({
     );
   }
   const noneActive = primaryButtons.length === 0 && listItems.length === 0;
+  const boxSizeStep = resumo ? 7 : 12;
+  const boxSizeSummary = resumo ? 5 : 12;
   if (step === "card") {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       SplitCheckoutForm,
@@ -22507,7 +22515,8 @@ function CheckoutFlowContent({
         produtos,
         onBack: () => setStep("select"),
         onResponse,
-        uuid
+        uuid,
+        resumo
       }
     );
   }
@@ -22525,19 +22534,20 @@ function CheckoutFlowContent({
         produtos,
         onBack: () => setStep("select"),
         onResponse,
-        uuid
+        uuid,
+        resumo
       }
     );
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { maxWidth: "lg", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid, { container: true, spacing: 3, justifyContent: "center", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { size: { xs: 12, sm: 7 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { elevation: 0, sx: { border: "1px solid #e2e8f0" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { size: { xs: 12, sm: boxSizeStep }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { elevation: 0, sx: { border: "1px solid #e2e8f0" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "h6", sx: { mb: 2 }, children: "Como você quer pagar?" }),
       noneActive && /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, { severity: "warning", sx: { mb: 2 }, children: "Nenhum meio de pagamento está disponível no momento." }),
       primaryButtons.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Stack, { direction: { xs: "column", sm: "row" }, spacing: 2, sx: { mb: 2 }, children: primaryButtons }),
       primaryButtons.length > 0 && listItems.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, { sx: { my: 1 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.secondary", children: "ou" }) }),
       listItems.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(List, { sx: { mt: primaryButtons.length ? 1 : 0 }, children: listItems })
     ] }) }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { size: { xs: 12, sm: 5 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    resumo && /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { size: { xs: 12, sm: boxSizeSummary }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       OrderSummary,
       {
         amount: valor,
@@ -22631,7 +22641,7 @@ const createBrandTheme = (color2) => {
   });
 };
 function CheckoutFlow(props) {
-  const [step, setStep] = useState("select");
+  const [step, setStep] = useState(props?.pagamento ?? "select");
   const amountFromItems = useMemo(
     () => props.produtos.reduce((sum, p) => sum + p.preco * (p.quantidade ?? 1), 0),
     [props.produtos]