Hosted Fields

Bezpieczne pola formularza karty hostowane przez MeestPay w iframe.

W przypadku gdy sprzedawca nie posiada certyfikatu PCI, a chciałby umieścić pola formularza karty bezpośrednio na jego stronie, może skorzystać z MeestPay Hosted Fields.

Skrypt MeestPayHostedFields pozwoli wyświetlić na stronie elementy formularza wewnątrz okienek iframe, w których klient będzie mógł podać dane karty. Następnie te dane zostaną przesłane do MeestPay, a skrypt zwróci do strony ID tokenu, który można użyć do płatności lub utworzenia profilu klienta.

Kroki integracji

Inicjacja MeestPayHostedFields.

Przygotowanie elementów HTML

Na stronie, na której chcemy umieścić pola formularza, należy utworzyć elementy HTML z odpowiednimi identyfikatorami. Te elementy posłużą jako kontenery dla przyszłych okienek iframe. Potrzebny będzie również element, który po naciśnięciu wywoła proces tokenizacji.

Lista identyfikatorów dla trybu formularza na dane karty (standard oraz panOnly):

ID	Wymagany	Informacje
meestpay-hosted-field-container-first-name	tak	Kontener dla okienka z imieniem cardholder'a
meestpay-hosted-field-container-last-name	tak	Kontener dla okienka z nazwiskiem cardholder'a
meestpay-hosted-field-container-number	tak	Kontener dla okienka z numerem karty
meestpay-hosted-field-container-expiry-date	tak	Kontener dla okienka z datą ważności karty
meestpay-hosted-field-container-cvv	tak	Kontener dla okienka z kodem CVV

Istnieje również możliwość użycia Hosted Fields do generowania tokenów numerów CVV (tryb cvvOnly). Wymagany ID: meestpay-hosted-field-container-cvv.

Przygotowanie skryptu

W skrypcie JavaScript należy stworzyć obiekt MeestPayHostedFields. Następnie, wywołując metodę init() zostaną utworzone elementy iframe. Każdy iframe zostanie zagnieżdżony w element o odpowiednim identyfikatorze. Następnie należy stworzyć event listener na naciśnięcie przycisku, który wywoła asynchroniczną metodę tokenize(). Metoda ta zwróci Promise, który po pomyślnej operacji zwraca unikalny token karty.

Przykładowy skrypt integracji

<script src="https://js.meestpay.com/meestPayHostedFields.js"></script>
<script>
  const hostedFields = new MeestPayHostedFields({
    publicKey: "merchantPublicKey123",
    env: "sandbox",
  })

  hostedFields.load((error) => {
    console.log(`${error.field} field validation error. ${error.message}`)
  })

  document.getElementById("tokenize-btn").addEventListener("click", () => {
    hostedFields.tokenize().then((result) => {
      console.log(`Tokenization successful! Token: ${result.token}`)
    }).catch((error) => {
      console.log(`Tokenization failed: ${error.message}`)
    })
  })
</script>

Parametry obiektu MeestPayHostedFields

Parametr	Wymagany	Typ	Informacje
publicKey	tak	string	Klucz publiczny sprzedawcy
env	tak	string	Środowisko procesowania płatności: "production", "sandbox"
kind	nie	string	"standard" (domyślna) — standardowa integracja, "panOnly" — tylko numer karty, "cvvOnly" — tylko wartość CVV

Parametry metody `load()`

Parametr	Wymagany	Typ	Informacje
validationErrorCallback	nie	(error: { field: string; message: string }) => void	Funkcja zwrotna wywoływana przy błędach walidacji pól formularza. Możliwe wartości pola `field`: first-name, last-name, number, expiry-date, cvv.

Wartości obietnicy zwracanej w metodzie `tokenize()`

Wynik	Typ	Informacje
Wartość rozwiązana	{ token: string }	Token wygenerowany dla karty
Wartość odrzucona	{ message: string }	Komunikat błędu

Wykorzystanie tokenu

Po uzyskaniu tokenu, należy go przekazać do serwera sprzedawcy.

Serwer po otrzymaniu tokenu powinien wysłać zapytanie metodą POST na adres https://sandbox.meestpay.com/api/charges w celu obciążania karty lub na https://sandbox.meestpay.com/api/clients/ w celu utworzenia profilu klienta.