Accepting Regulations

The following methods allow to generate checkbox for accepting regulations. Appropriate link to regulations document is rendered.

PayuRegulationsForm Instance Creation with shopId and extCustomerId

PayuRegulationsForm(params, options?)

This method requires a public shop identifier and unique submerchant identifier.

Parametery metody

paramsrequiredobject

Regulations form parameters.

shopIdrequiredstring

Public shop identifier obtained from the PayU panel.

extCustomerIdrequiredstring

Unique submerchant identifier given by marketplace.

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

PayuRegulationsForm instance.

Exceptions

invalid.params

Occurs when creating PayuRegulationsForm instance when no shopId or extCustomerId parameter is specified or is empty.

npn.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 optionsparameter.

Example

const regulationsForm =  PayuRegulationsForm({shopId: 'marketplace-shop-id', extCustomerId: 'ext-customer-id'});

PayuRegulationsForm Instance Creation with verificationId parameter

PayuRegulationsForm(params, options?)

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

Method Parameters

paramsrequiredobject

Regulations form 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

PayuRegulationsForm instance.

Exceptions

invalid.params

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

non.http.integration

Example

const regulationsForm = PayuRegulationsForm({verificationId: 'VERIFICATION_ID'});

Examples

Preview
HTML
javascript
CSS

html Code used in the Example
<script type="text/javascript" src="https://merch-prod.snd.payu.com/javascript/sdk"></script>
<section class="container">
    <div class="form-container">
        <aside>Accept regulations</aside>
        <div id="payuRegulationsAcceptance"></div>
        <div id="responseAccept"></div>
    </div>
    <button id="acceptButton" onclick="rf.acceptRegulations()">Accept</button>
</section>

javascript Code used in the Example
window.addEventListener('DOMContentLoaded', () => {
    const rf = PayuRegulationsForm({shopId: 'marketplace-shop-id', extCustomerId: 'ext-customer-id'});

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

    rf
        .on('accept', (response) => {
            if (response.status === 'SUCCESS') {
                alert('Regulations accepted');
            } else {
                alert('Error. ' + JSON.stringify(response.error));
            }
        });

    const regulationsFormOptions = {
        label: 'Accept Terms and Conditions (',
        linkLabel: 'open',
        labelAfterLink: ')',
        style: {
            label: {
                fontColor: '#ffffff',
                fontSize: '18px',
                fontFamily: 'Courier'
            },
            link: {
                fontColor: '#ff0000',
                fontWeight: '200',
                textDecoration: 'underline'
            },
            linkHover: {
                fontColor: '#880000',
                textDecoration: 'none'
            }
        }
    };
    rf.render('#payuRegulationsAcceptance', regulationsFormOptions);
});

css Code used in the Example
.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 #responseAccept {
    padding-bottom: 6px;
    font-size: 14px;
    color: #ffffff;
}

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

Methods

Accepting Regulations Methods

render(selector, options?)

Displays the form on the page.

Parametery metody

selectorrequiredstring

Selector of the element in which the form will be displayed. Searching for element is done by querySelectorAll.

optionsoptionalobject

Form options.

labelstring

The text displayed as checkbox label before link to regulations.

labelAfterLinkstring

The text displayed as checkbox label after link to regulations.

linkLabelstring

The text displayed as link to regulations. If not specified, link will be displayed.

styleobject

Your own form style.

Exceptions

element.selector.empty

selector parameter not specified or is empty.

element.selector.not.string

selector parameter is not of the type 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.

Example

regulationsForm.render('#regulationsForm', {
    label: 'Accept ',
    linkLabel: 'Terms and Conditions'
});

acceptRegulations()

Sending a request to accept regulations.

Exceptions

regulationsForm.not.rendered

Form was not displayed. Display the form with regulationsForm method.

Example

regulationsForm.acceptRegulations();

on(event, callback)

Attaching your own callback to the event emitted by the secure form.

Method Parameters

eventrequiredstring

Event type

Possible Values
ready	Emitted when the form is displayed.
accept	Emitted when a regulations are accepted on a secure form.

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.

Example

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

documentForm
    .on('accept', function(body) {
        // zaakceptowano regulaminy
    });

Form Styles

The style of the form depends on how the style object is set up.

style Object

The style object groups styles for different form behaviors in objects. Each group has its own set of permitted styles.

Example obiektu style

{
    style: {
        label: { 
            fontColor: '#ff0000', 
            fontSize: '20px',
            fontFamily: 'Verdana',
            fontWeight: 'bolder'
        },
        link: {
            fontColor: '#888888',
            fontWeight: '200',
            textDecoration: 'none'
        },
        linkHover: {
            fontColor: '#00ff00',
            fontWeight: '700',
            textDecoration: 'underline'
        }
    }
}

Style Groups

Style Group	Permitted Styles	Description
label	`fontColor` `fontSize` `fontFamily` `fontWeight`	Label styles.
link	`fontColor` `fontWeight` `textDecoration`	Link styles.
linkHover	`fontColor` `fontWeight` `textDecoration`	Style for hovered link.

Available Styles

Style	Description	Permitted Values
fontColor	font color	`#[0-9a-f]{6}`
fontSize	font size	`(\d+\|\d*\.\d+)(px\|em\|%)`
fontFamily	font family	`[0-9a-z\-\s]{1,50}`
fontWeight	font weight	`([1-9]00\|normal\|bold\|lighter\|bolder\|inherit\|initial\|unset)`
textDecoration	text decoration	`(none\|underline)`

Events

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

ready Event

This event is emitted after calling render method after the form is displayed.

accept Event

This event is emitted when regulations are accepted. Callback is called with one object parameter with the following structure:

Field	Description
`status`	Acceptance status: SUCCESS - regulations acceptance was processed successfully, Error - an error has occured while accepting regulations. Error information can be found in `error` field.
`error`	Only for ERROR status. Object with `messages` array which contains error information. Details can be found in Errors 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

Field	Description
`code`	Error code.
`message`	Error description in english.
`parameters`	Object containing changeable error fragments.

Possible Error Codes

Field	Linked Event	Description
`regulations-not-checked`	accept	The checkbox is not checked. Checking checkbox is required to accept regulations.
`error.regulations.acceptance`	accept	An error has occured while processing acceptance.
`error.network`	accept	A network communication error has occurred. Information about the cause of the error can be found in `parameters` object in the `error` field.

Example

event Object Example
{
    "status": "ERROR",
    "correlationId": "correlation-id",
    "error": {
        "messages": [
            {
                "code": "regulations-not-checked",
            }
        ]
    }
}

Examples​

Methods​

Form Styles​

Events​

Errors​

On this page

Examples

Methods

Form Styles

Events

Errors