@suportepos/split-checkout 0.5.5 → 0.5.7

package/dist/index.es.js

@@ -21697,10 +21697,9 @@ function SplitCheckoutForm({
   onResponse,
   uuid,
   resumo,
-  parcelas
+  parcelas,
+  urlApi
 }) {
-  const apiUrl = producao ? "https://api-conciliapos.suportepos.com.br" : "https://api-conciliapos-stag.suportepos.com.br";
-  useMediaQuery("(max-width:900px)");
   const [step, setStep] = useState("card");
   const maskCard = (v) => v.replace(/\D/g, "").trim();
   const maskExpiry = (v) => v.replace(/\D/g, "").slice(0, 6).replace(/(\d{2})(\d{0,4})/, (m, mm, yyyy) => yyyy ? `${mm}/${yyyy}` : mm);
@@ -21715,6 +21714,8 @@ function SplitCheckoutForm({
   const [cvv, setCvv] = useState("");
   const [installments, setInstallments] = useState(1);
   const [accessToken, setAccessToken] = useState("");
+  const [bandeiras, setBandeiras] = useState([]);
+  const [bandeiraDetectada, setBandeiraDetectada] = useState("MASTERCARD");
   const [cep, setCep] = useState(cliente?.cep ? maskCEP(cliente.cep) : "");
   const [address, setAddress] = useState(cliente?.endereco ?? "");
   const [number, setNumber] = useState(cliente?.numero ?? "");
@@ -21742,7 +21743,10 @@ function SplitCheckoutForm({
     document.body.appendChild(script);
     script.onload = async () => {
       try {
-        const res = await fetch(`${apiUrl}/api/token-cartao?merchantId=${merchantId}&producao=${producao}`);
+        const resBandeiras = await fetch(`${urlApi}/api/bandeiras?merchantId=${merchantId}&producao=${producao}`);
+        const dataBandeiras = await resBandeiras.json();
+        setBandeiras(dataBandeiras);
+        const res = await fetch(`${urlApi}/api/token-cartao?merchantId=${merchantId}&producao=${producao}`);
         const data = await res.json();
         setAccessToken(data?.access_token);
       } catch (err) {
@@ -21753,6 +21757,20 @@ function SplitCheckoutForm({
       document.body.removeChild(script);
     };
   }, []);
+  useEffect(() => {
+    const bin = cardNumber.replace(/\D/g, "").slice(0, 6);
+    if (bin.length === 6) {
+      const binInt = parseInt(bin);
+      const encontrada = bandeiras.find(
+        (b) => binInt >= parseInt(b.bin_inicial) && binInt <= parseInt(b.bin_final)
+      );
+      if (encontrada) {
+        setBandeiraDetectada(encontrada.bandeira);
+      } else {
+        setBandeiraDetectada("MASTERCARD");
+      }
+    }
+  }, [cardNumber, bandeiras]);
   function validateCard() {
     const e = {};
     if (cardNumber.replace(/\D/g, "").length < 15) e.cardNumber = "Número inválido";
@@ -21807,7 +21825,7 @@ function SplitCheckoutForm({
     const rawCep = masked.replace(/\D/g, "");
     if (rawCep.length === 8) {
       try {
-        const res = await fetch(`${apiUrl}/api/cep/${rawCep}?merchantId=${merchantId}`);
+        const res = await fetch(`${urlApi}/api/cep/${rawCep}?merchantId=${merchantId}`);
         const data = await res.json();
         if (!data.error) {
           setAddress(data.street || "");
@@ -21821,6 +21839,12 @@ function SplitCheckoutForm({
       }
     }
   };
+  const fieldLabels = {
+    "bp-sop-cardnumber": "Número do cartão",
+    "bp-sop-cardholdername": "Nome como está no cartão",
+    "bp-sop-cardexpirationdat": "Vencimento",
+    "bp-sop-cardcvv": "CVV"
+  };
   const handleFinalSubmit = async () => {
     if (!validateBuyer()) return;
     setLoading(true);
@@ -21834,7 +21858,7 @@ function SplitCheckoutForm({
       cvvrequired: true,
       onSuccess: async (response) => {
         try {
-          const res = await fetch(`${apiUrl}/api/pagar`, {
+          const res = await fetch(`${urlApi}/api/pagar`, {
             method: "POST",
             headers: { "Content-Type": "application/json" },
             body: JSON.stringify({
@@ -21858,26 +21882,29 @@ function SplitCheckoutForm({
               cidade: city,
               estado: uf,
               producao,
-              uuid
+              uuid,
+              bandeira: bandeiraDetectada
             })
           });
           const result = await res.json();
           onResponse?.(result);
         } catch (err) {
           console.error("Erro chamando backend:", err);
-          onResponse?.({ sucesso: false, mensagem: "Erro ao comunicar backend" });
+          onResponse?.({ sucesso: false, mensagem: "100 - Erro ao comunicar backend" });
         } finally {
           setLoading(false);
         }
       },
       onError: (err) => {
-        console.error("Erro SOP:", err);
-        onResponse?.({ sucesso: false, mensagem: "Erro SOP" });
+        onResponse?.({ sucesso: false, mensagem: "101 - Dados do cartão inválidos. Verifique e tente novamente." });
         setLoading(false);
       },
       onInvalid: (fields) => {
-        console.warn("Campos inválidos:", fields);
-        onResponse?.({ sucesso: false, mensagem: "Campos inválidos" });
+        const message = `102 - Campos inválidos: ${fields.map((e) => {
+          const label = fieldLabels[e.Field] ?? e.Field;
+          return `${label} - ${e.Message}`;
+        }).join(", ")}`;
+        onResponse?.({ sucesso: false, mensagem: message });
         setLoading(false);
       }
     };
@@ -22184,9 +22211,9 @@ function SplitPixForm({
   onBack,
   onResponse,
   uuid,
-  resumo
+  resumo,
+  urlApi
 }) {
-  const apiUrl = producao ? "https://api-conciliapos.suportepos.com.br" : "https://api-conciliapos-stag.suportepos.com.br";
   useMediaQuery("(max-width:900px)");
   const [copied, setCopied] = useState(false);
   const [buyerName, setBuyerName] = useState(cliente?.nomeComprador ?? "");
@@ -22224,7 +22251,7 @@ function SplitPixForm({
     if (!validate()) return;
     setLoading(true);
     try {
-      const res = await fetch(apiUrl + "/api/pix", {
+      const res = await fetch(urlApi + "/api/pix", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
@@ -22255,7 +22282,7 @@ function SplitPixForm({
     if (!validate()) return;
     setLoading(true);
     try {
-      const res = await fetch(apiUrl + "/api/pix/consultar", {
+      const res = await fetch(urlApi + "/api/pix/consultar", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
@@ -22462,6 +22489,7 @@ function CheckoutFlowContent({
   useTheme();
   const primaryButtons = [];
   const listItems = [];
+  const apiUrl = producao ? "https://api-conciliapos.suportepos.com.br" : "https://api-conciliapos-stag.suportepos.com.br";
   if (paymentEnabled?.creditCard) {
     listItems.push(
       /* @__PURE__ */ jsxRuntimeExports.jsxs(ListItemButton, { onClick: () => setStep("card"), sx: {
@@ -22527,7 +22555,8 @@ function CheckoutFlowContent({
         onResponse,
         uuid,
         resumo,
-        parcelas
+        parcelas,
+        urlApi: apiUrl
       }
     );
   }
@@ -22546,7 +22575,8 @@ function CheckoutFlowContent({
         onBack: () => setStep("select"),
         onResponse,
         uuid,
-        resumo
+        resumo,
+        urlApi: apiUrl
       }
     );
   }