Wczytywanie plików

Następujące metody umożliwiają wczytanie dokumentów.

Tworzenie instancji PayuDocumentForm

PayuDocumentForm(params, options?)

Metoda ta wymaga podania identyfikatora weryfikacyjnego, który możesz uzyskać tworząc submerchanta za pomocą API PayU.

Parametery metody

paramsrequiredobject

Parametry weryfikacyjne.

verificationIdstring

Identyfikator weryfikacji, wymagany.

optionsoptionalobject

Opcje instancji.

devboolean

Umożliwia utworzenie instancji w trybie deweloperskim, co pozwala na działanie w witrynie, która nie korzysta z protokołu HTTPS.

Zwraca

Instancję PayuDocumentForm.

Wyjątki

verificationId.is.empty

Występuje podczas tworzenia instancji PayuDocumentForm, gdy nie sprecyzowano parametru verificationId lub jest on pusty.

non.https.integration

Występuje podczas tworzenia instancji MarketplaceVerification, gdy protokołem strony, na której wczytywane jest JS SDK nie jest https i file, a strona nie jest ładowana z localhost: 127.0.0.1 lub 0.0.0.0. Podczas procesu wdrażania można włączyć tryb deweloperski za pomocą parametru options.

Przykład

const documentForm = PayuDocumentForm({verificationId: 'VERIFICATION_ID'});

Przykłady

Podgląd
HTML
javascript
CSS

Kod html przykładu
<script type="text/javascript" src="https://merch-prod.snd.payu.com/javascript/sdk"></script>
<section class="container">
    <div class="form-container">
        <aside>Important document</aside>
        <div id="payuDocumentUpload" class="payu-document-upload-button"></div>
        <div id="responseUpload"></div>
    </div>
    <button id="uploadButton" onclick="df.upload()">Upload</button>
</section>

Kod javascript przykładu
window.addEventListener('DOMContentLoaded', function () {
    const df = PayuDocumentForm({verificationId: 'marketplace-verification-id'}, {dev: true});

    df
        .on('ready', () => {
            console.log('Ready');
        });

    df
        .on('select', (response) => {
            if (response.status === 'SUCCESS') {
                document.getElementById('responseUpload').innerText = 'File: ' + response.body.name + ', size: ' + response.body.size + ', type: ' + response.body.type;
            } else {
                alert('Error. ' + JSON.stringify(response.error));
            }
        });

    df
        .on('upload', (response) => {
            if (response.status === 'SUCCESS') {
                alert('File loaded. fileId=[' + response.body.fileId + '], verificationId=[' + response.body.verificationId + ']');
            } else {
                alert('Error. ' + JSON.stringify(response.error));
            }
        });

    const documentFormOptions = {
        title: 'Add or drop file here'
    };
    df.render('#payuDocumentUpload', documentFormOptions);
});

Kod css przykładu
.container * {
    font-family: Arial, Helvetica, sans-serif;
}

.container {
    text-align: center;
    width: 420px;
    margin: 20px auto 10px;
    display: block;
    border-radius: 5px;
    box-sizing: border-box;
}

.form-container {
    width: 100%;
    margin: 0 auto;
    border-radius: 6px;
    padding: 10px;
    background: rgb(2, 0, 60);
    text-align: left;
    box-sizing: border-box;
}

.form-container aside, .form-container #responseUpload {
    padding-bottom: 6px;
    font-size: 14px;
    color: #ffffff;

}

.payu-document-upload-button {
    background: #438F29;
    cursor: pointer;
    width: 100%;
    height: 40px;
    border: 1px solid white;
    border-radius: 5px;
    color: rgb(2, 0, 60);
    font-size: 22px;
}

#uploadButton {
    border: none;
    background: #438F29;
    padding: 8px 15px;
    margin: 10px auto;
    cursor: pointer;
}

Metody

Metody wczytywania plików

render(selector, options?)

Wyświetla formularz na stronie.

Parametry metody

selectorrequiredstring

Selektor elementu, w którym zostanie wyświetlony formularz. Wyszukiwanie elementu odbywa się za pomocą metody querySelectorAll.

optionsoptionalobject

Opcje formularza.

titlestring

Nazwa na wyświetlonym elemencie. Jeżeli nie zostanie podana, zostanie wyświetlone Add file.

Wyjątki

element.selector.empty

Parametr selector nie został określony lub jest pusty.

element.selector.not.string

Parametr selector nie jest typu string.

element.not.exists

Element nie istnieje na stronie.

element.too.many.exists

Istnieje więcej niż jeden element na stronie.

element.not.valid

Nieprawidłowy element (metoda appendChild nie została zaimplementowana lub jest elementem typu input).

element.contains.children

Element zawiera elementy drugorzędne.

Przykład

documentForm.render('#documentForm', {title: 'Choose a file or drag it here.'});

upload()

Wysyłanie żądania przesłania wybranego pliku.

Wyjątki

documentForm.not.rendered

Formularz nie został wyświetlony. Wyświetl formularz za pomocą metody render.

Przykład

documentForm.upload();

on(event, callback)

Dodanie własnego wywołania zwrotnego (callback) do zdarzenia wywołanego przez Secure Form.

eventrequiredstring

Typ zdarzenia.

Możliwe Wartości
ready	Emitowane podczas wyświetlania formularza.
select	Emitowane po wybraniu pliku w Secure Form.
upload	Emitowane po wczytaniu pliku na serwer.

callbackrequiredfunction

callback po emisji zdarzenia.

Wyjątki

event.unknown

Nie znany typ zdarzenia w parametrze event.

event.callback.not.function

Parametr callback nie jest funkcją.

Przykład

documentForm
    .on('ready', function() {
        // form ready
    });

documentForm
    .on('select', function(body) {
        // file selected
    });

documentForm
    .on('upload', function(body) {
        // file uploaded
    });

Zdarzenia

Formularze emitują zdarzenia, do których można dołączyć własny callback za pomocą metody on.

Zdarzenie ready

Zdarzenie to jest emitowane po wywołaniu metody documentForm, po wyświetleniu formularza.

Zdarzenie select

To zdarzenie jest emitowane, gdy plik zostanie wybrany lub przeciągnięty na secure form. Callback jest wywoływany z jednym obiektem o następującej strukturze:

Pole	Opis
`status`	Status wczytywania pliku: SUCCESS - plik został załadowany. Informacje o pliku możesz znaleźć w polu `body`, Error - wystąpił błąd podczas ładowania pliku. Informacje o błędzie możesz znaleźć w polu `error`.
`body`	Występuje jedynie przy statusie SUCCESS. Obiekt zawiera informacje o pliku. Dostępne pola: `name` - nazwa pliku, `size` - rozmiar pliku w bajtach, `type` - typ pliku MIME.
`error`	Występuje jedynie przy statusie ERROR. Obiekt ten posiada tablicę `messages`, w której zawarto szczegóły błędu. Więcej informacji znajdziesz w sekcji Błędy.
`correlationId`	Występuje jedynie przy statusie ERROR.

Zdarzenie upload

Zdarzenie to jest emitowane po wywołaniu metody upload> w momencie zakończenia próby załadowania pliku na serwer. Callback jest wywołany z jednym parametrem o danej strukturze:

Pole	Opis
`status`	Status wczytywania pliku: SUCCESS - plik został załadowany. Informacje o pliku możesz znaleźć w polu `body`, Error - wystąpił błąd podczas ładowania pliku. Informacje o błędzie możesz znaleźć w polu `error`.
`body`	Występuje jedynie przy statusie SUCCESS. Obiekt zawiera informacje o pliku. Dostępne pola: `verificationId` - identyfikator weryfikacji, `fileId` - identyfikator pliku nadany przez PayU.
`error`	Występuje jedynie przy statusie ERROR. Obiekt ten posiada tablicę `messages`, w której zawarto szczegóły błędu. Więcej informacji znajdziesz w sekcji Błędy.
`correlationId`	Występuje jedynie przy statusie ERROR.

Błędy

Obiekt error zawiera tablicę obiektów (messages), w której znajdziesz szczegóły błędów.

Obiekt messages

Parametry obiektu error

Pole	Opis
`code`	Kod błędu.
`message`	Opis błędu w języku angielskim.
`parameters`	Obiekt zawierający zmienne fragmenty błędu.

Możliwe kody błędów

Pole	Powiązane zdarzenie	Opis
`error.file.too.large`	select	Rozmiar wybranego pliku jest zbyt duży. Maksymalny rozmiar pliku to 10 MB. Szczegóły możesz znaleźć w obiekcie `parameters`.
`error.file.invalid.type`	select	Typ wybranego pliku jest niewłaściwy. Wspierane type plików: pdf, jpg, tiff, png, bmp. Szczegóły możesz znaleźć w obiekcie `parameters`.
`error.file.not.selected`	upload	Plik nie został wybrany.
`error.file.read.abort`	upload	Ładowanie pliku zostało przerwane.
`error.file.read.error`	upload	Wystąpił błąd podczas ładowania pliku.
`error.network`	upload	Wystąpił błąd komunikacji sieciowej. Informacje o przyczynie błędu można znaleźć w obiekcie `parameters` w polu `error`.

Przykład

Przykład obiektu typu event
{
    "status": "ERROR",
    "correlationId": "",
    "error": {
        "messages": [
            {
                "code": "error.file.too.large",
                "parameters": {
                    "error":"File is larger than 10485760 bytes",
                    "file":"fileName.pdf"
                },
                "message": "File too large"
            }
        ]
    }
}

Przykłady​

Metody​

Zdarzenia​

Błędy​

Na tej stronie

Przykłady

Metody

Zdarzenia

Błędy