Przejdź do głównej zawartości

Przykłady implementacji

Dema na tej stronie działają na żywo: ładują Card SDK z sandboxu (https://cards.sandbox.paymentic.com/sdk/v1/paymentic-card.js) i montują prawdziwe pole karty Paymentic. Wpisz kartę ze strony Testowanie kart z dowolną przyszłą datą i dowolnym CVC. Wynikiem jest token, który w prawdziwej integracji wysłałbyś do backendu; dema tylko go wyświetlają.

Konfigurator pola karty​

Wybierz preset, a potem klikaj: każda opcja elementu (lang, layout, floatingLabels, showErrors, disabled, cvcHelp) i każda właściwość stylu z grup basic, placeholder, focus, invalid, disabled, label, error i box jest tu do przestawienia. Pole przestylowuje się na żywo przez card.update(), a kod pod spodem odpowiada aktualnym ustawieniom; skopiuj go i podmień pointId na swój.

Żeby zobaczyć stany invalid i komunikat błędu, wpisz błędny numer karty i opuść pole. Etykietę w układach compact i stacked widać przy włączonych unoszących się etykietach, a odstęp pól tylko w układzie form.

Karta

Zachowanie
Tekst (basic, placeholder, focus, invalid, disabled)
Pudełko (box)
Etykieta i komunikat błędu (label, error)

Kod dla wybranych opcji

const paymentic = new PaymenticCard({ pointId: '1f5e9c25' });

const card = paymentic.elements().create('card', {
  lang: 'pl',
  style: {
    basic: {
      fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
      fontSize: '16px',
      fontColor: '#111936',
      fontWeight: '400',
      letterSpacing: 'normal',
      lineHeight: '1.5'
    },
    placeholder: {
      fontColor: '#9aa3bf'
    },
    focus: {
      fontColor: '#111936'
    },
    invalid: {
      fontColor: '#d92d20'
    },
    disabled: {
      fontColor: '#9aa3bf'
    },
    label: {
      fontColor: '#5b6480',
      fontWeight: '500',
      textTransform: 'none'
    },
    error: {
      fontColor: '#d92d20',
      fontSize: '12px'
    },
    box: {
      background: '#ffffff',
      borderColor: '#d5dbef',
      borderColorFocus: '#2739c4',
      borderColorInvalid: '#d92d20',
      borderWidth: '1px',
      radius: '10px',
      gap: '16px'
    }
  }
});

card.mount('#card');
card.on('change', (e) => {
  payBtn.disabled = !e.complete;
});

const result = await paymentic.tokenize(card);
if (result.error) showError(result.error.message);
else sendToServer(result.jwt);

Znaczenie opcji opisuje strona Karta (hosted fields), a zasady wartości stylu sekcja Stylowanie.

Checkout: karta, Google Pay i Apple Pay​

Minimalny checkout z polem karty i natywnymi przyciskami portfeli. Przyciski pojawiają się tylko wtedy, gdy portfel jest dostępny na Twoim urządzeniu i włączony dla punktu; powód niedostępności widać pod demem. Handlery zdarzeń complete, error i cancel są zarejestrowane przed zamontowaniem przycisków.

Zamówienie #12345149,00 zł
Karta
  • Google Pay: sprawdzanie…
  • Apple Pay: sprawdzanie…


Ten sam checkout w czystym JavaScripcie, do wklejenia na stronę:


<div id="apple-pay" hidden></div>
<div id="google-pay" hidden></div>
<div id="card" style="min-height: 48px"></div>
<button id="payBtn" disabled>Zapłać 149,00 zł</button>

<script src="https://cards.sandbox.paymentic.com/sdk/v1/paymentic-card.js"></script>
<script>
  (async function () {
    const payBtn = document.getElementById('payBtn');

    // Tutaj wysyłasz jwt do swojego backendu, a on tworzy transakcję w Payment API.
    function sendToServer(jwt) {
      return fetch('/api/checkout/pay', { method: 'POST', body: JSON.stringify({ token: jwt }) });
    }

    const paymentic = new PaymenticCard({
      pointId: '000cb241',
      wallet: { payment: { amount: '149.00', currencyCode: 'PLN', countryCode: 'PL', label: 'Twój Sklep' } },
    });

    // 1. Handlery portfeli przed zamontowaniem przycisków.
    paymentic
      .on('complete', (data) => sendToServer(data.jwt))
      .on('error', (data) => alert(data.error))
      .on('cancel', () => {});

    // 2. Pole karty.
    const card = paymentic.elements().create('card', { lang: 'pl', layout: 'auto' });
    card.on('change', (e) => { payBtn.disabled = !e.complete; });
    card.mount('#card');

    payBtn.addEventListener('click', async () => {
      const result = await paymentic.tokenize(card);
      if (result.error) { alert(result.error.message); return; }
      await sendToServer(result.jwt);
    });

    // 3. Natywne przyciski portfeli. mount*Pay nie odrzuca promise'a, gdy portfel jest niedostępny.
    const gp = await paymentic.mountGooglePay('#google-pay');
    document.getElementById('google-pay').hidden = !gp.available;
    const ap = await paymentic.mountApplePay('#apple-pay');
    document.getElementById('apple-pay').hidden = !ap.available;
  })();
</script>


Apple Pay pokaże się tylko w Safari na urządzeniu Apple i tylko na domenie zweryfikowanej u Apple.
Zob. Apple Pay.


Co dalej​