Jak dodać dane do faktury w Wix Studio – NIP, nazwa firmy i zapis do CRM przez Velo

Jak dodać dane do faktury w Wix Studio

Dodanie danych do faktury w Wix może być bardzo przydatne, szczególnie jeśli sklep internetowy obsługuje klientów biznesowych, firmy, freelancerów lub osoby, które podczas zakupu chcą otrzymać fakturę. W standardowym procesie zakupowym klient często podaje dane kontaktowe i adresowe, ale w wielu przypadkach właściciel sklepu chce zebrać dodatkowe informacje, takie jak nazwa firmy oraz NIP.

W tym artykule pokazuję praktyczne rozwiązanie dla stron tworzonych w Wix Studio Editor z użyciem Velo. Celem jest stworzenie krótkiego formularza przed przejściem do koszyka lub kasy, w którym klient może zaznaczyć opcję „Chcę fakturę”, wpisać nazwę firmy, NIP oraz e-mail. Następnie dane są sprawdzane i zapisywane do kontaktu w Wix CRM.

To rozwiązanie jest szczególnie przydatne, gdy chcesz uporządkować dane firmowe klientów i mieć je zapisane w kontaktach Wix. Dzięki temu możesz łatwiej obsługiwać zamówienia, przygotowywać dokumenty, weryfikować dane klientów oraz zachować spójność informacji przy kolejnych zakupach.

Ważna informacja przed rozpoczęciem

Strony koszyka i checkoutu w Wix mają ograniczone możliwości modyfikacji. Oznacza to, że nie zawsze można bezpośrednio przebudować natywny formularz checkoutu tak, jak zwykłą stronę w edytorze. Dlatego najbezpieczniejszym rozwiązaniem jest stworzenie osobnej strony pre-checkout, czyli strony wyświetlanej przed koszykiem lub przed kasą.

W praktyce wygląda to tak:

1. Klient klika przycisk prowadzący do zakupu.

2. Zamiast od razu przejść do koszyka, trafia na stronę „Dane do faktury”.

3. Jeśli nie chce faktury, klika „Kontynuuj” i przechodzi dalej.

4. Jeśli chce fakturę, zaznacza checkbox, wpisuje dane firmy i NIP.

5. Kod sprawdza poprawność NIP.

6. Dane zapisują się do Wix Contacts / CRM.

7. Klient przechodzi do koszyka lub checkoutu.

Takie rozwiązanie nie zastępuje całego systemu fakturowania, ale pomaga zebrać i zapisać potrzebne dane firmowe przed finalizacją zakupu.

Dla kogo jest to rozwiązanie?

To rozwiązanie sprawdzi się, jeśli prowadzisz sklep na Wix i sprzedajesz produkty lub usługi klientom biznesowym. Może być przydatne dla sklepów B2B, firm szkoleniowych, konsultantów, agencji, sprzedawców produktów cyfrowych, sklepów internetowych, usług profesjonalnych oraz biznesów, które często otrzymują prośby o fakturę.

Przykładowo, klient kupuje usługę konsultacji, pakiet godzin, produkt firmowy albo dostęp do materiałów szkoleniowych. Podczas zakupu chce, aby faktura została wystawiona na firmę. Dzięki formularzowi pre-checkout możesz zebrać jego dane wcześniej i zapisać je w CRM.

Co zrobimy w tym poradniku?

W tym poradniku przygotujemy:

• stronę „Dane do faktury” w Wix Studio,

• checkbox „Chcę fakturę”,

• pole „Nazwa firmy”,

• pole „NIP”,

• pole „E-mail do faktury”,

• przycisk „Kontynuuj do kasy”,

• walidację polskiego NIP,

• zapis danych do Wix Contacts / CRM,

• przekierowanie do koszyka lub checkoutu.

Kod będzie podzielony na dwie części:

• Page Code – kod działający na stronie „Dane do faktury”,

• Backend web module – kod zapisujący dane do Wix CRM.

Najpierw otwórz stronę w Wix Studio Editor. Następnie włącz Velo, aby mieć dostęp do kodu strony i plików backendowych.

W edytorze Wix Studio wybierz:

Dev Mode → Turn on Dev Mode

Po włączeniu Velo zobaczysz panel kodu, w którym można edytować kod strony oraz tworzyć pliki backendowe.

Krok 2 – Utwórz stronę „Dane do faktury”

W Wix Studio dodaj nową stronę. Możesz nazwać ją:

Dane do faktury

Dobry adres URL dla tej strony to na przykład:

/dane-do-faktury

Ta strona będzie pełnić funkcję formularza pre-checkout. Możesz zaprojektować ją bardzo prosto. Wystarczy krótki nagłówek, wyjaśnienie i kilka pól formularza.

Przykładowy tekst na stronie:

Dane do faktury

Jeśli chcesz otrzymać fakturę na firmę, zaznacz opcję poniżej i uzupełnij dane firmowe. Jeśli nie potrzebujesz faktury, kliknij „Kontynuuj do kasy”.

Krok 3 – Dodaj elementy formularza

Na stronie „Dane do faktury” dodaj następujące elementy:

Checkbox

ID elementu:

invoiceCheckbox

Tekst przy checkboxie:

Chcę fakturę

Text Input – nazwa firmy

ID elementu:

companyInput

Placeholder:

Nazwa firmy na fakturę

Text Input – NIP

ID elementu:

nipInput

Placeholder:

NIP, 10 cyfr bez spacji

Text Input – e-mail

ID elementu:

emailInput

Placeholder:

E-mail do faktury

Pole e-mail jest bardzo ważne, szczególnie jeśli klient nie jest zalogowany. Backend potrzebuje sposobu, aby powiązać dane z konkretnym kontaktem w CRM. Jeśli użytkownik jest zalogowany, można go powiązać przez konto członkowskie. Jeśli nie jest zalogowany, najprostszym identyfikatorem jest e-mail.

Text – komunikat błędu

Dodaj zwykły element tekstowy, który będzie pokazywał błędy formularza.

ID elementu:

formErrorText

Przykładowy tekst domyślny:

Uzupełnij dane do faktury.

Ustaw ten tekst jako ukryty lub zwinięty na start.

Button – kontynuacja

ID elementu:

continueBtn

Tekst przycisku:

Kontynuuj do kasy

Krok 4 – Przygotuj pola niestandardowe w Wix Contacts

W panelu Wix przejdź do kontaktów i przygotuj pola niestandardowe dla danych fakturowych.

Dodaj dwa pola niestandardowe:

Nazwa firmy na fakturęPrzykładowy Field Key:custom.invoiceCompanyName

NIP na fakturęPrzykładowy Field Key:custom.invoiceNIP

Bardzo ważne: w kodzie musisz użyć dokładnych kluczy pól z Twojej konfiguracji Wix CRM. Jeśli Twoje klucze różnią się od przykładów, podmień je w kodzie backendowym.

Krok 5 – Kod strony „Dane do faktury”

Otwórz Page Code na stronie „Dane do faktury” i wklej poniższy kod.

Ten kod:

• ukrywa pola firmowe na start,

• pokazuje pola po zaznaczeniu checkboxa,

• sprawdza nazwę firmy, NIP i e-mail,

• blokuje przycisk, jeśli dane są błędne,

• zapisuje dane do CRM przez backend,

• przekierowuje klienta do koszyka.

import wixLocationFrontend from 'wix-location-frontend';
import wixWindowFrontend from 'wix-window-frontend';
import { saveInvoiceDataForContact } from 'backend/invoice-utils.web';

// Zmień ścieżkę, jeśli chcesz kierować klienta bezpośrednio do checkoutu.
const CHECKOUT_PATH = '/cart';

function normalizeDigits(value) {
  return String(value || '').replace(/\D/g, '');
}

function isValidNIP(raw) {
  const nip = normalizeDigits(raw);

  if (nip.length !== 10) {
    return false;
  }

  const weights = [6, 5, 7, 2, 3, 4, 5, 6, 7];
  const digits = nip.split('').map((digit) => Number(digit));

  const checksum = digits
    .slice(0, 9)
    .reduce((sum, digit, index) => sum + digit * weights[index], 0) % 11;

  return checksum === digits[9];
}

function isValidEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(email || '').trim());
}

$w.onReady(() => {
  prepareInvoiceFields();

  $w('#invoiceCheckbox').onChange(() => {
    toggleInvoiceFields();
    validateForm();
  });

  $w('#companyInput').onInput(validateForm);
  $w('#nipInput').onInput(validateForm);
  $w('#emailInput').onInput(validateForm);

  $w('#continueBtn').onClick(handleContinueClick);

  validateForm();
});

function prepareInvoiceFields() {
  $w('#companyInput').collapse();
  $w('#nipInput').collapse();
  $w('#emailInput').collapse();
  $w('#formErrorText').collapse();
}

function toggleInvoiceFields() {
  const needInvoice = $w('#invoiceCheckbox').checked;

  if (needInvoice) {
    $w('#companyInput').expand();
    $w('#nipInput').expand();
    $w('#emailInput').expand();
  } else {
    $w('#companyInput').value = '';
    $w('#nipInput').value = '';
    $w('#emailInput').value = '';

    $w('#companyInput').collapse();
    $w('#nipInput').collapse();
    $w('#emailInput').collapse();
    $w('#formErrorText').collapse();
  }
}

function showError(message) {
  $w('#formErrorText').text = message;
  $w('#formErrorText').expand();
}

function clearError() {
  $w('#formErrorText').text = '';
  $w('#formErrorText').collapse();
}

function validateForm() {
  const needInvoice = $w('#invoiceCheckbox').checked;

  if (!needInvoice) {
    clearError();
    $w('#continueBtn').enable();
    return true;
  }

  const company = String($w('#companyInput').value || '').trim();
  const nip = String($w('#nipInput').value || '').trim();
  const email = String($w('#emailInput').value || '').trim();

  if (!company) {
    showError('Wpisz nazwę firmy do faktury.');
    $w('#continueBtn').disable();
    return false;
  }

  if (!isValidNIP(nip)) {
    showError('Wpisz poprawny NIP. Numer powinien mieć 10 cyfr i prawidłową sumę kontrolną.');
    $w('#continueBtn').disable();
    return false;
  }

  if (!isValidEmail(email)) {
    showError('Wpisz poprawny adres e-mail do faktury.');
    $w('#continueBtn').disable();
    return false;
  }

  clearError();
  $w('#continueBtn').enable();
  return true;
}

async function handleContinueClick() {
  const needInvoice = $w('#invoiceCheckbox').checked;

  if (!needInvoice) {
    goToCheckout();
    return;
  }

  if (!validateForm()) {
    return;
  }

  const company = String($w('#companyInput').value || '').trim();
  const nip = normalizeDigits($w('#nipInput').value);
  const email = String($w('#emailInput').value || '').trim();

  $w('#continueBtn').disable();

  try {
    await saveInvoiceDataForContact({
      company,
      nip,
      email
    });

    goToCheckout();
  } catch (error) {
    console.error('Błąd zapisu danych do faktury:', error);

    showError('Nie udało się zapisać danych do faktury. Spróbuj ponownie lub skontaktuj się z obsługą sklepu.');

    wixWindowFrontend.openLightbox('Błąd', {
      message: 'Nie udało się zapisać danych do faktury. Spróbuj ponownie.'
    }).catch(() => {});

    $w('#continueBtn').enable();
  }
}

function goToCheckout() {
  wixLocationFrontend.to(CHECKOUT_PATH);
}

Krok 6 – Backend web module do zapisu danych w CRM

Teraz dodaj plik backendowy.

W Wix Studio przejdź do panelu kodu i dodaj nowy web module w backendzie. Nazwij go:

invoice-utils.web.js

Kod frontendowy importuje go jako:

import { saveInvoiceDataForContact } from 'backend/invoice-utils.web';

Do pliku invoice-utils.web.js wklej poniższy kod.

Ten kod:

• sprawdza, czy użytkownik jest zalogowany,

• jeśli jest zalogowany, aktualizuje jego kontakt,

• jeśli nie jest zalogowany, szuka kontaktu po adresie e-mail,

• jeśli kontakt istnieje, aktualizuje go,

• jeśli kontakt nie istnieje, tworzy nowy kontakt,

• zapisuje nazwę firmy i NIP w polach niestandardowych CRM.

import { Permissions, webMethod } from 'wix-web-module';
import { currentMember } from 'wix-members-backend';
import { contacts } from 'wix-crm-backend';

// Podmień te klucze na dokładne Field Keys z Twojego Wix CRM.
const INVOICE_COMPANY_FIELD_KEY = 'custom.invoiceCompanyName';
const INVOICE_NIP_FIELD_KEY = 'custom.invoiceNIP';

const CRM_OPTIONS = {
  suppressAuth: true,
  allowDuplicates: false
};

function normalizeDigits(value) {
  return String(value || '').replace(/\D/g, '');
}

function buildInvoiceContactInfo({ company, nip, email }) {
  const contactInfo = {
    company,
    extendedFields: {
      [INVOICE_COMPANY_FIELD_KEY]: company,
      [INVOICE_NIP_FIELD_KEY]: nip
    }
  };

  if (email) {
    contactInfo.emails = [
      {
        tag: 'WORK',
        email,
        primary: true
      }
    ];
  }

  return contactInfo;
}

async function getLoggedInMemberContactId() {
  const member = await currentMember.getMember().catch(() => null);
  return member?.contactId || null;
}

async function findContactByEmail(email) {
  if (!email) {
    return null;
  }

  const results = await contacts
    .queryContacts()
    .eq('primaryInfo.email', email)
    .find({ suppressAuth: true });

  return results.items?.[0] || null;
}

async function updateContactById(contactId, invoiceData) {
  const existingContact = await contacts.getContact(contactId, {
    suppressAuth: true
  });

  const identifiers = {
    contactId,
    revision: existingContact.revision
  };

  const contactInfo = buildInvoiceContactInfo(invoiceData);

  return contacts.updateContact(identifiers, contactInfo, CRM_OPTIONS);
}

async function createContactWithInvoiceData(invoiceData) {
  const contactInfo = buildInvoiceContactInfo(invoiceData);
  return contacts.createContact(contactInfo, CRM_OPTIONS);
}

export const saveInvoiceDataForContact = webMethod(
  Permissions.Anyone,
  async ({ company, nip, email }) => {
    const cleanCompany = String(company || '').trim();
    const cleanNip = normalizeDigits(nip);
    const cleanEmail = String(email || '').trim().toLowerCase();

    if (!cleanCompany || cleanNip.length !== 10) {
      throw new Error('Brak wymaganych danych do faktury.');
    }

    const invoiceData = {
      company: cleanCompany,
      nip: cleanNip,
      email: cleanEmail
    };

    const memberContactId = await getLoggedInMemberContactId();

    if (memberContactId) {
      await updateContactById(memberContactId, invoiceData);

      return {
        ok: true,
        via: 'logged-in-member'
      };
    }

    if (!cleanEmail) {
      throw new Error('Brak e-maila. Nie można znaleźć ani utworzyć kontaktu.');
    }

    const existingContact = await findContactByEmail(cleanEmail);

    if (existingContact?._id) {
      await updateContactById(existingContact._id, invoiceData);

      return {
        ok: true,
        via: 'existing-email-contact'
      };
    }

    const createdContact = await createContactWithInvoiceData(invoiceData);

    return {
      ok: true,
      via: 'new-email-contact',
      contactId: createdContact?._id
    };
  }
);

Krok 7 – Sprawdź klucze pól niestandardowych

Najczęstszy problem przy takim wdrożeniu dotyczy pól niestandardowych w CRM. W kodzie używam przykładowych kluczy:

const INVOICE_COMPANY_FIELD_KEY = 'custom.invoiceCompanyName';
const INVOICE_NIP_FIELD_KEY = 'custom.invoiceNIP';

Jeśli Twoje pola mają inne klucze, kod nie zapisze danych tam, gdzie oczekujesz. Przed publikacją sprawdź dokładne Field Key w ustawieniach kontaktów Wix i podmień wartości w kodzie.

Nie wystarczy, że nazwa pola w panelu wygląda podobnie. Kod musi używać technicznego klucza pola.

Krok 8 – Jak połączyć formularz z procesem zakupu?

Najprostsze rozwiązanie to kierować klienta najpierw na stronę:

/dane-do-faktury

a dopiero potem do:

/cart

W kodzie odpowiada za to ta linia:

const CHECKOUT_PATH = '/cart';

Jeśli w Twoim sklepie lepiej działa bezpośrednie przejście do checkoutu, możesz zmienić ją na:

const CHECKOUT_PATH = '/checkout';

W praktyce polecam najpierw testować z koszykiem, czyli:

const CHECKOUT_PATH = '/cart';

Daje to bardziej przewidywalny proces i pozwala klientowi jeszcze sprawdzić zamówienie przed finalizacją.

Krok 9 – Co z fakturą?

Ten formularz zbiera i zapisuje dane do faktury w CRM. To oznacza, że w kontakcie klienta możesz przechowywać nazwę firmy i NIP. Natomiast to, czy dane automatycznie pojawią się na konkretnym dokumencie, zależy od konfiguracji checkoutu, faktur, pól billingowych i szablonów używanych w danym sklepie.

Dlatego po wdrożeniu koniecznie wykonaj testowy zakup i sprawdź:

• czy dane zapisały się w Wix Contacts,

• czy kontakt ma nazwę firmy,

• czy pola niestandardowe zawierają NIP,

• czy dane pojawiają się tam, gdzie chcesz je widzieć,

• czy proces działa dla zalogowanego użytkownika,

• czy proces działa dla gościa z adresem e-mail.

Jeśli NIP nie pojawia się na dokumencie faktury, możesz nadal mieć go zapisany w CRM jako pole pomocnicze. Wtedy właściciel sklepu lub obsługa może wykorzystać te dane przy wystawianiu dokumentu.

Test poprawności NIP

Kod sprawdza polski NIP przez usunięcie spacji, myślników i innych znaków, a następnie sprawdzenie długości i sumy kontrolnej. To oznacza, że klient może wpisać NIP w różnych formatach, ale do CRM zostanie zapisany jako same cyfry.

Przykład testowego numeru NIP, który przechodzi podstawową walidację:

1234563218

Pamiętaj jednak, że ta walidacja sprawdza poprawność matematyczną numeru, a nie to, czy firma faktycznie istnieje, jest aktywna lub jest czynnym podatnikiem VAT. Do takiej weryfikacji potrzebna byłaby dodatkowa integracja z zewnętrznym rejestrem lub API.

Test wdrożenia krok po kroku

Po dodaniu elementów i kodu wykonaj pełny test.

Najpierw opublikuj stronę. Następnie wejdź na stronę:

/dane-do-faktury

Przetestuj scenariusz bez faktury:

1. Nie zaznaczaj checkboxa „Chcę fakturę”.

2. Kliknij „Kontynuuj do kasy”.

3. Sprawdź, czy strona przenosi do koszyka.

Następnie przetestuj scenariusz z fakturą:

1. Zaznacz „Chcę fakturę”.

2. Wpisz nazwę firmy.

3. Wpisz poprawny NIP.

4. Wpisz e-mail.

5. Kliknij „Kontynuuj do kasy”.

6. Sprawdź, czy dane zostały zapisane w kontakcie CRM.

Przykładowe dane testowe:

Nazwa firmy: Przykładowa Sp. z o.o.NIP: 1234563218E-mail: test@example.com

Następnie przejdź do panelu Wix i sprawdź kontakt. Powinny pojawić się dane:

Nazwa firmy: Przykładowa Sp. z o.o.NIP: 1234563218

Jeśli dane nie pojawiają się w CRM, sprawdź najpierw Field Keys pól niestandardowych oraz logi w Developer Console.

Najczęstsze problemy

Pola się nie pokazują po zaznaczeniu checkboxa

Sprawdź, czy elementy mają dokładnie takie ID jak w kodzie:

• invoiceCheckbox

• companyInput

• nipInput

• emailInput

• formErrorText

• continueBtn

Jeśli ID różni się choćby jedną literą, kod nie zadziała poprawnie.

Przycisk jest cały czas zablokowany

Najczęściej oznacza to, że formularz nie przechodzi walidacji. Sprawdź, czy wpisujesz poprawny NIP, nazwę firmy i e-mail.

Dane nie zapisują się w CRM

Sprawdź, czy plik backendowy ma nazwę:

invoice-utils.web.js

oraz czy import w Page Code wygląda tak:

import { saveInvoiceDataForContact } from 'backend/invoice-utils.web';

Sprawdź też, czy używasz poprawnych Field Keys w kodzie backendowym.

NIP jest poprawny, ale system go odrzuca

Upewnij się, że wpisujesz polski NIP składający się z 10 cyfr. Kod usuwa spacje i myślniki, ale numer nadal musi mieć prawidłową sumę kontrolną.

Kontakt już istnieje, ale dane się nie aktualizują

Wix CRM wymaga aktualizacji kontaktu z aktualnym numerem revision. Kod pobiera kontakt przed aktualizacją i dopiero potem zapisuje nowe dane. Jeśli mimo tego występuje błąd, sprawdź logi backendowe i upewnij się, że kontakt można znaleźć po ID lub e-mailu.

Dlaczego warto zapisywać dane do CRM?

Zapisanie danych do Wix CRM porządkuje pracę sklepu. Dzięki temu dane firmowe klienta nie są tylko jednorazową informacją wpisaną w formularzu. Są przypisane do kontaktu i można je wykorzystać później przy obsłudze zamówienia, komunikacji, wystawianiu dokumentów lub analizie klientów biznesowych.

Dla właściciela sklepu to duża wygoda. Zamiast szukać danych w wiadomościach e-mail lub ręcznie dopytywać klienta po zakupie, można zapisać nazwę firmy i NIP w jednym miejscu.

To rozwiązanie pomaga także w bardziej profesjonalnej obsłudze klientów B2B. Jeśli sklep sprzedaje usługi, produkty firmowe lub pakiety dla przedsiębiorców, formularz danych do faktury może wyglądać znacznie bardziej profesjonalnie niż zwykła prośba o wysłanie NIP-u w wiadomości.

Dobre praktyki przy wdrożeniu

Nie ukrywaj informacji przed klientem. Wyjaśnij krótko, po co prosisz o dane firmowe. Na przykład:

Dane zostaną zapisane wyłącznie w celu obsługi zamówienia i przygotowania dokumentu sprzedaży.

Zadbaj o prosty wygląd formularza. Nie dodawaj zbyt wielu pól, jeśli nie są potrzebne. W większości przypadków wystarczy nazwa firmy, NIP i e-mail.

Dodaj wyraźny przycisk kontynuacji. Klient powinien wiedzieć, że po uzupełnieniu danych przejdzie dalej do koszyka lub kasy.

Przetestuj formularz na telefonie. Wielu klientów kupuje z urządzeń mobilnych, dlatego pola muszą być czytelne, wygodne i dobrze ułożone w wersji mobilnej.

Zrób test jako zalogowany użytkownik i jako gość. Oba scenariusze mogą działać inaczej, dlatego warto sprawdzić je osobno.

Checklista wdrożenia

Przed publikacją sprawdź:

• czy Velo jest włączone w Wix Studio Editor,

• czy strona „Dane do faktury” istnieje,

• czy wszystkie elementy mają poprawne ID,

• czy pola firmowe są zwinięte na start,

• czy checkbox pokazuje i ukrywa pola,

• czy walidacja NIP działa poprawnie,

• czy przy błędnych danych przycisk jest zablokowany,

• czy backend web module ma nazwę invoice-utils.web.js,

• czy import backendu w Page Code jest poprawny,

• czy Field Keys w CRM są zgodne z kodem,

• czy dane zapisują się w kontakcie,

• czy przekierowanie do koszyka działa,

• czy cały proces działa po opublikowaniu strony.

Podsumowanie

Dodanie danych do faktury w Wix Studio jest możliwe dzięki prostemu formularzowi pre-checkout i kodowi Velo. Takie rozwiązanie pozwala zebrać nazwę firmy, NIP oraz e-mail, sprawdzić poprawność numeru NIP i zapisać dane do Wix CRM.

Najważniejsze jest to, aby nie próbować na siłę przebudowywać natywnej strony checkoutu, jeśli nie daje ona pełnej kontroli nad formularzem. Lepiej stworzyć osobną stronę „Dane do faktury”, która działa przed koszykiem lub kasą. Dzięki temu proces jest bardziej przewidywalny, łatwiejszy do testowania i bezpieczniejszy dla sklepu.

Wdrożenie tego rozwiązania pomaga uporządkować dane klientów biznesowych i usprawnia obsługę zamówień. Jest to szczególnie przydatne dla sklepów i firm, które regularnie obsługują zakupy na firmę i chcą mieć dane fakturowe zapisane bezpośrednio w CRM. (Jak dodać dane do faktury)

Pomoc