Integracja frontendu¶

Aby złożyć zamówienie aplikacją OpenApp, użytkownik skanuje kod QR wyświetlony w ramach widgetu OA na witrynie sklepu (desktop) lub klika w niego (mobile). OpenApp udostępnia bibliotekę JavaScript, która generuje odpowiedni widget OA. Integracja to proces trzy-etapowy:

Dołącz bibliotekę JavaScript do kodu źródłowego Twojej strony:

<script src="https://static.prd.open-pay.com/dist/openapp.min.0.0.4.js"></script>

Ustaw przestrzeń gdzie widget OA będzie wyświetlany, oznaczając element HTML odpowiednią klasą CSS (jak w przykładzie poniżej), a także oznacz go swoim ID merchanta (otrzymanym od OpenApp), ID profilu integracji (otrzymanym od OpenApp), ID koszyka, watością koszyka. ID koszyka nie musi być tylko identyfikatorem, jeśli chcesz dodać tam dodatkowe dane (na przykład jak timestamp, id użytkownika lub suma kontrolna) tak, aby całość nie przekroczyła 96 bajtów. Przestrzeń wyświetlania widgetu OA musi być prostokątem, sklep ma jednak swobodę określenia jego rozmiaru. W poniższym przykładzie zrobione jest to przez stylowanie inline, ale możesz to zrobić poprzez standardowe zarządzanie stylami na Twojej stronie. Pamiętaj podczas stylowania miejsca wyświetalania żeby wielkość kodu QR wyświetlanego w ramach widgetu OA umożliwiala jego odczyt telefonem.

<div class="OpenAppCheckout"
          data-merchantId="MERCHANT_ID" data-integrationProfileId="PROFILE_ID"
          data-basketId="BASKET_ID" data-basketValue="17" data-basketCurrency="PLN"
          data-uniqueProductsCount="1" data-letter="C"></div>

Dołącz kod javascript do kodu Twojego sklepu internetowego. Kod wysyła event CustomEvent za każdym razem, gdy chcesz, aby widget był renderowany. Nazwa zdarzenia musi być OpenAppCheckout. Na statycznej stronie może to wyglądać tak:

  <script>
    const OAEvent = new CustomEvent('OpenAppCheckout', {
      detail: {},
      bubbles: true,
      cancelable: true,
      composed: false,
    });

    document.querySelector('#trigger').dispatchEvent(OAEvent);
  </script>

Wyzwalaczem nie musi być żaden konkretny element, może to być po prostu obiekt dokumentu document.dispatchEvent(OAEvent);. Pamiętaj jednak, że jeśli wywołasz to na jakimkolwiek elemencie innym niż document, właściwość zdarzenia bubbles musi być ustawiona na true.

Widget OA wyświetli się automatycznie dzięki bibliotece, w miejscu tagu span. W tym przypadu, widget OA będzie miał rozmiar 300 na 300 pikseli. Widget OA i kod QR będą zawierać wymagane informacje do rozpoczęcia transakcji w OpenApp. Jeśli zmienisz którykolwiek z tych parametrów, Widget OA automatycznie zostanie zaktualizowany.

Biblioteka do OA Logowanie¶

Aby użyć biblioteki do wygenerowania widgetu służącego do autentykacji należy zamienić kod HTML z kroku drugiego na poniższy kod:

<div class="OpenAppCheckout" data-merchantId="MERCHANT_ID" data-integrationProfileId="PROFILE_ID"
          data-token="TOKEN" data-letter="I" data-version="1" ></div>

W parametrach należy podać:

merchantId - identyfikator sklepu,
integrationProfileId - identyfikator profilu integracji,
token.