Skip to main content

Uploading Files

The following methods allow to upload document.

PayuDocumentForm Instance Creation
PayuDocumentForm(params, options?)

This method requires a verification identifier, which you can obtain by creating submerchant using the PayU API.

Method parameters
paramsrequiredobject
Verification parameters.
verificationIdrequiredstring

Verification identifier.

optionsoptionalobject

Instance options.

devoptionalboolean

Allows to create instance in developer mode which enables you to operate on a site that does not use HTTPS.

Return

PayuDocumentForm instance.

Exceptions
verificationId.is.empty

Occurs when creating PayuDocumentForm instance when no verificationId parameter is specified or is empty.

non.https.integration

Occurs on MarketplaceVerification instance creation when the protocol of the page, on which JS SDK is loaded, is not https and file, and the page is not loaded from localhost: 127.0.0.1 or 0.0.0.0. During the implementation process you can enable developer mode in the options parameter.

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

Examples​

Methods​

Uploading Files Methods
render(selector, options?)
Displays the form on the page.
Method parameters
selectorrequiredstring
Selector of the element in which the form will be displayed. Searching for element is done by querySelectorAll.
optionsoptionalobject
Form options.
titleoptionalstring
The name shown on the displayed element. If not specified, Add file will be displayed.
Exceptions
element.selector.empty
selector parameter not specified or is empty.
element.selector.not.string
selector parameter is not of the type string string.
element.not.exists
Element does not exists on the page.
element.too.many.exists
There is more than one element on the page.
element.not.valid
Invalid element (appendChild method is not implemented or it is an input element).
element.contains.children
Element contains secondary items.
documentForm.render('#documentForm', {title: 'Choose a file or drag it here.'});
upload()
Sending a request to upload selected file.
Exceptions
documentForm.not.rendered
Form was not displayed. Display the form with render method.
documentForm.upload();
on(event, callback)
Attaching your own callback to the event emitted by the secure form.
Method parameters
eventrequiredstring
Event type.
Possible Values
readyEmitted when the form is displayed.
selectEmitted when a file is selected on a secure form.
uploadEmitted when a file is uploaded to the server.
callbackrequiredfunction
Callback called after the event is emitted.
Exceptions
event.unknown
Unknown event type in event parameter.
event.callback.not.function
callback parameter is not a function.
documentForm
    .on('ready', function() {
        // form ready
    });

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

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

Events​

Forms emit events to which you can attach your own callback using the on method.

ready Event
This event is emitted after calling documentForm method after the form is displayed.
select Event
This event is emitted when the file is selected or dragged on a secure form. Callback is called with one object parameter with the following structure:
FieldDescription
status
File upload status:
  • SUCCESS - file has been uploaded. Information about file can be found in body field,
  • Error - an error has occured while uploading the file. Error information can be found in error field.
body
Only for SUCCESS status. This object contains information about the uploaded file.
Available fields are:
  • name - file name,
  • size - file size in bytes,
  • type - MIME file type.
error
Only for ERROR status. Object with messages array which contains error information. Details can be found in Błędy section.
correlationId
Only for ERROR status.
upload Event
This event is emitted after calling upload method when the attempt to upload the file to the server is finished. Callback is called with one object parameter with the following structure:
FieldDescription
status
File upload status:
  • SUCCESS - file has been uploaded. Information about file can be found in body field,
  • Error - an error has occured while uploading the file. Error information can be found in error field.
body
Only for SUCCESS status. This object contains information about the uploaded file.
Available fields are:
  • verificationId - verification identifier,
  • fileId - file identifier assigned by the PayU system.
error
Only for ERROR status. Object with messages array which contains error information. Details can be found in Błędy section.
correlationId
Only for ERROR status.

Errors​

error object contains an array of objects (messages), which contain detailed information about the errors.

messages Object
error Object Parameters
FieldDescription
code
KError code.
message
Error description in english.
parameters
Object containing changeable error fragments.
Possible Error Codes
FieldLinked EventDescription
error.file.too.large
select
The size of the selected file is too big. Maximum file size is 10MB. Detailed information can be found in parameters object.
error.file.invalid.type
select
The selected file type is invalid. Supported file types: pdf, jpg, tiff, png, bmp. Detailed information can be found in parameters object.
error.file.not.selected
upload
File was not selected.
error.file.read.abort
upload
The loading of files has been aborted.
error.file.read.error
upload
An error has occured while loading a file.
error.network
upload
A network communication error has occurred. Information about the cause of the error can be found in parameters object in the error field.
event Object Example
{
    "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"
            }
        ]
    }
}

On this page