Customization parameters

Payload parameters

Example of setting the payload parameters:

   everypay.payform({
    pk: 'your-public-key',
    amount: 5000,    
})

Payload object available parameters:

NameTypeDefaultRequiredDescription
pkstringnullrequiredPublic key can be found at Everypay's dashboard
amountintegernullrequiredThe amount that is going to be charged on this card in the form of an integer (no decimals). The amount is calculated in cents. Example: 5 euros is 500.
installmentsarray[]optionalYou can define installments in an array and add them to fit your purposes to be. E.g [2, 4, 8, 12] would allow the customer to pay in 2, 4, 8 or 12 installments. Max 36 installments.
txnTypestring"tds"optionalYou can choose between two types of transaction: 'tds' and 'moto', tds goes through the normal flow, moto is for mail order or telephone order.
localestringbrowseroptionalSet a default locale for the page. Currently we support: 'en' (English), 'el' (Greek), 'it' (Italian), 'de' (Deutsch), 'es' (Spanish) and 'bg' (Bulgarian). If no locale selected, we choose the browsers locale as a default.
themestring"default"optionalYou can choose any of the 2 following themes: 'default', 'material'.
hiddenboolFALSEoptionalThis sets the form as hidden within the #pay-form div. You will need to use everypay.showForm() to show the form and everypay.hideForm() to hide the form. Its recommended that if you are initializing the form after an action to use hidden true and then everypay.show() as the form will be initiallized once the user lands on that page and it will be ready to show without any loading time once the show() function is invoked.
elementIdstringpay-formoptionalHere you can change the default element id that the form is initialized on to be something else
displayobject{}optionalHere you can set some display options for the form.
dataobject{}optionalHere you can pass some data to us, in order to make the customer transaction go smoother. The more data you pass to us the more chances you get to go through a successful transaction. Some of the data require a specific format following a certain ISO
formOptionsobject{}optionalHere you can set some options within the form.
buttonOptionsobject{}optionalHere you can pass down some styles to the button within the Payform to make it look closer to your brand.
inputOptionsobject{}optionalHere you can change the input style within the form.
errorOptionsobject{}optionalHere you can change the error messages style that appear within the form.

display parameters

Example of setting the display parameters:

   everypay.payform({
    pk: 'your-public-key',
    amount: 5000,
    ...,  
    display: {
        billing: false,
        ...,
    },
    ...
})

Display object available parameters:

NameTypeDefaultRequiredDescription
billingboolfalseoptionalIf set to true, it will display and require Billing information within the form
buttonboolTRUEoptionalIf set to false it will hide the button within the Payform.
errorsboolTRUEoptionalIf set to false it will hide the error messages shown within the form.
hideCloseBtnboolfalseoptionalIf set to true the top right close button wont appear on the OTP.
mobileboolfalseoptionalIn case you are using the Payform within a WebView you can set this flag to true. This flag will disable some styling that doesnt work well on WebViews and it will also make the 3DS window appear on the allocated space without any backdrop.
staticCardPlaceholderboolfalseoptionalIf set to true it will display a default card icon instead of the rotating card icons within the card number input

data parameters

Example of setting the data parameters:

   everypay.payform({
    pk: 'your-public-key',
    amount: 5000,
    ...,  
    data: {
        email: 'jdoe@example.com',
        billing: {
            addressLine1: 'example 1',
            ...,
        },
        shipping: {
            ...,
        },
        ...,
    },
    ...
})

Data object available parameters:

NameTypeDefaultRequiredDescription
emailstringnullHighly recommended (optional)Email is optional at this step of the authentication although if you pass it, you increase the chances of a frictionless transaction.
phonestringnulloptionalPhone is optional although if you pass it in the suggested format e.g '+ 302182182800' you increase the chances of a frictionless transaction.
siteLangstring"el"optionalYour website's language in the accepted format e.g "el" or "en". This increases your chances of a frictionless transaction.
billingobject{}optionalYou can pass the billing address using the ISO format described on the fields bellow. This requires all the fields to be filled apart from 'addressLine2'. Then on the Display object you can set 'billing: false' and the form won't display the billing address fields to the customer.
shippingobject{}optionalPassing any fields within the shipping object increases your chances of a frictionless transaction. Unlike billing, not all fields are required here, so you can send even one field to increase your chances for a frictionles transaction.

data.billing parameters

Billing object available parameters:

NameTypeDefaultRequiredDescription
countrystringnullHighly recommended (optional)Country code following ISO 3166-1 using the Alpha-2 code
statestringnullHighly recommended (optional)State code following ISO 3166-2 using the code without the country alpha-2 code and the "-" e.g for Attiki the code that should be passed is "I"
postalCodestringnullHighly recommended (optional)a string up to 16 characters
citystringnullHighly recommended (optional)a string up to 100 characters
addressLine1stringnullHighly recommended (optional)a string up to 100 characters
addressLine2stringnulloptionalThis field is completely optional, you don’t need to pass it.

data.shipping parameters

Shipping object available parameters:

NameTypeDefaultRequiredDescription
countrystringnullHighly recommended (optional)Country code following ISO 3166-1 using the Alpha-2 code
statestringnullHighly recommended (optional)State code following ISO 3166-2 using the code without the country alpha-2 code and the "-" e.g for Attiki the code that should be passed is "I"
postalCodestringnullHighly recommended (optional)a string up to 16 characters
citystringnullHighly recommended (optional)a string up to 100 characters
addressLine1stringnullHighly recommended (optional)a string up to 100 characters
addressLine2stringnulloptionalThis field is completely optional, you don’t need to pass it.

formOptions parameters

Example of setting FormOption parameters

   everypay.payform({
    pk: 'your-public-key',
    amount: 5000,
    ...,
    formOptions: {
        background: 'radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(117,99,103,1) 100%)',
        borderRadius: 50,
        size: 'xs',
          descriptionOptions: {
            color: '#f8fafa',
            fontSize: 14,
            fontWeight: '500',
            textAlign: 'left',
          }
    },
    ...      
})

FormOptions object available parameters:

NameTypeDefaultRequiredDescription
paddingnumber25 (px)optionalApply padding to the whole form. Minimum padding is 0. This style is using CSS-in-Js (React JSS) format.
backgroundstringoptionalApply background styling to the whole form. This style is using CSS-in-Js (React JSS) format.
borderstring"none"optionalStyle the border around the form. This style is using CSS-in-Js (React JSS) format.
borderRadiusnumberoptionalChange the borderRadius of the form. This style is using CSS-in-Js (React JSS) format.
sizestring"xs"optionalChoose between xs, sm, lg, xl to make the form bigger or smaller, it might affect mobile view of the form.
descriptionOptionsobj{}optionalParameters within description are used for the titles that are above the inputs.

formOptions.descriptionOptions parameters

FormOptions.descriptionOptions object available parameters:

NameTypeDefaultRequiredDescription
colorstringoptionalTitle color. This style is using CSS-in-Js (React JSS) format.
fontSizenumberoptionalTitle fontSize. This style is using CSS-in-Js (React JSS) format.
fontWeightstring"500"optionalTitle fontWeight. This style is using CSS-in-Js (React JSS) format.
textAlignstringoptionalTitle textAlign. This style is using CSS-in-Js (React JSS) format.

buttonOptions parameters

ButtonOptions object available parameters:

NameTypeDefaultRequiredDescription
backgroundstringoptionalHere you can set the background of the button inside the form. This style is using CSS-in-Js (React JSS) format.
textstringoptionalHere you can change the text that appears inside the form button.
textColorstringoptionalHere you can change the color of the text within the form button. This style is using CSS-in-Js (React JSS) format.
iconColorstringoptionalHere you can change the color of the lock icon that appears at the end of the form within the button. This style is using CSS-in-Js (React JSS) format.
textTransformstring"capitalize"optionalHere you can change the textTransform of the button text. This style is using CSS-in-Js (React JSS) format.
sizestring"md"optionalChoose the button size (height) you can only choose between sm, md, lg, xl.
borderRadiusnumber"6"optionalChange the borderRadius of the button. This style is using CSS-in-Js (React JSS) format.
fontSizenumber"18"optionalChange the fontSize of the button text. This style is using CSS-in-Js (React JSS) format.
boxShadowstringoptionalChange the boxShadow of the button. This style is using CSS-in-Js (React JSS) format.
borderRadiusstringoptionalChange the border of the button. This style is using CSS-in-Js (React JSS) format.
hoverBackgroundstringoptionalChange the hover background of the button. This style is using CSS-in-Js (React JSS) format.
hoverTextColorstringoptionalChange the hover textColor of the button. This style is using CSS-in-Js (React JSS) format.
hoverBorderstringoptionalChange the border of the button on hover. This style is using CSS-in-Js (React JSS) format.
shimmerbooleantrueoptionaldisable or enable the shimmer (sparkle effect) on the button
decimalCommabooleanfalseoptionalchange between a decimal comma and a decimal dot separator for pricing

inputOptions parameters

InputOptions object available parameters:

NameTypeDefaultRequiredDescription
backgroundstringoptionalChange the input background. This style is using CSS-in-Js (React JSS) format.
sizestring"sm"optionalChange the size of the input. You can choose the input size between sm, md, lg, xl.
fontSizenumber"16"optionalChange the fontSize of the input. This style is using CSS-in-Js (React JSS) format.
fontWeightstringoptionalChange the fontWeight of the text within the input. This style is using CSS-in-Js (React JSS) format.
placeholderColorstringoptionalChange the placeholder color of the input. This style is using CSS-in-Js (React JSS) format.
textColorstringoptionalChange the text color of the input. This style is using CSS-in-Js (React JSS) format.
borderColorstringoptionalChange the borderColor of the input. This style is using CSS-in-Js (React JSS) format.
focusedBorderColorstringoptionalChange the focused borderColor of the input. This style is using CSS-in-Js (React JSS) format.
labelOptionsobject{}optionalThis option only works with the theme 'material' and its not available on 'default' theme.

inputOptions.labelOptions parameters

InputOptions.labelOptions (only available with 'material') object available parameters:

NameTypeDefaultRequiredDescription
colorstringoptionalChange the Label color of the material theme. This style is using CSS-in-Js (React JSS) format.
fontSizenumberoptionalChange the Label fontSize of the material theme. This style is using CSS-in-Js (React JSS) format.
fontWeightstringoptionalChange the Label fontWeight of the material theme. This style is using CSS-in-Js (React JSS) format.

errorOptions parameters

ErrorOptions object available parameters:

NameTypeDefaultRequiredDescription
textColorstringoptionalChange the color for the error messages within the form. This style is using CSS-in-Js (React JSS) format.
fontSizenumberoptionalChange the fontSize for the error messages within the form. This style is using CSS-in-Js (React JSS) format.
fontWeightstringoptionalChange the fontWeight for the error messages within the form. This style is using CSS-in-Js (React JSS) format.