Customization parameters

Payload parameters

Example of setting the payload parameters:

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

Payload object available parameters:

Name	Type	Default	Required	Description
pk	string	null	required	Public key can be found at Everypay's dashboard
amount	integer	null	required	The 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.
installments	array	[]	optional	You 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.
txnType	string	"tds"	optional	You can choose between two types of transaction: 'tds' and 'moto', tds goes through the normal flow, moto is for mail order or telephone order.
locale	string	browser	optional	Set a default locale for the page. Currently we support: 'en' (English), 'el' (Greek), 'it' (Italian), 'de' (German), 'es' (Spanish), 'da' (Danish), 'fr' (French), 'hr' (Croatian), 'nl' (Dutch), 'pl' (Polish), 'pt' (Portuguese), 'sq' (Albanian), 'sv' (Swedish), 'tr' (Turkish) and 'bg' (Bulgarian). If no locale selected, we choose the browsers locale as a default.
theme	string	"default"	optional	You can choose any of the 3 following themes: 'default', 'material', 'barebone'.
hidden	bool	FALSE	optional	This 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.
elementId	string	pay-form	optional	Here you can change the default element id that the form is initialized on to be something else
display	object	{}	optional	Here you can set some display options for the form.
data	object	{}	optional	Here 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
formOptions	object	{}	optional	Here you can set some options within the form.
buttonOptions	object	{}	optional	Here you can pass down some styles to the button within the Payform to make it look closer to your brand.
inputOptions	object	{}	optional	Here you can change the input style within the form.
errorOptions	object	{}	optional	Here you can change the error messages style that appear within the form.
otherPaymentMethods	object	{}	optional	Here you can add alternative payment methods within the form.
listeners	object	{}	optional	Here you can pass function callbacks that will be called on specific events.

other payment methods parameters

Please contact EveryPay Support for guidance on Google Pay and Apple Pay

Example of setting the other payment methods parameters:

everypay.payform({
    pk: 'your-public-key',
    amount: 5000,
    ...,
    otherPaymentMethods: {
        googlePay: {
            countryCode: 'GR',
            ...
        },
        applePay: {
            merchantName: 'Your Name (Example: EveryPay)',
        },
    },
    ...
});

Other payment method object available parameters:

Name	Type	Default	Required	Description
googlePay	object	{}	optional	Parameters to configure Google Pay payment method.
applePay	object	{}	optional	Parameters to configure Apple Pay payment method.

Google Pay parameters

Example of setting the Google Pay parameters:

everypay.payform({
    pk: 'your-public-key',
    amount: 5000,
    ...,
    otherPaymentMethods: {
        googlePay: {
            countryCode: 'GR',
            merchantName: 'MerchantName',
            merchantUrl: 'order.myshop.com',
            allowedCardNetworks: ['VISA', 'MASTERCARD'],
            allowedAuthMethods: ['CRYPTOGRAM_3DS', 'PAN_ONLY'],
        }
    },
    ...
});

Google Pay object available parameters:

Name	Type	Default	Required	Description
countryCode	string		required	The ISO 3166-1 alpha-2 country code where the transaction is processed.
merchantName	string		required	The name to be displayed on the payform modal.
merchantUrl	string		required	The merchant origin url.
allowedCardNetworks	array	[]	required	Parameters to configure the allowed networks. Valid options are VISA, MASTERCARD
allowedAuthMethods	array	[]	required	Parameters to configure the allowed auth methods PAN_ONLY (3D secure), CRYPTOGRAM_3DS.
buttonColor	string	black	optional	Parameters to configure Google Pay button color. Available options are black or white.

Apple Pay parameters

Example of setting the Apple Pay parameters:

everypay.payform({
    pk: 'your-public-key',
    amount: 5000,
    ...,
    otherPaymentMethods: {
        applePay: {
            merchantName: 'MerchantName',
            countryCode: 'GR',
            merchantUrl: 'order.myshop.com',
            allowedCardNetworks: ['VISA', 'MASTERCARD'],
            buttonColor: 'black',
        },
    },
    ...
});

*Apple Pay object available parameters:*

Name	Type	Default	Required	Description
countryCode	string		required	The merchant's two-letter ISO 3166 country code
merchantName	string		required	The name to be displayed on the Apple Pay modal
merchantUrl	string		required	The merchant origin URL (without the scheme) example: everypay.gr
allowedCardNetworks	array	[]	required	Parameters to configure the allowed networks. Valid options are VISA, MASTERCARD
buttonColor	string	black	optional	Parameters to configure Apple Pay button color. Available options are black or white. You should not use black color when payform background color is dark

Read more about Apple Pay restrictions and domain registration.

display parameters

Example of setting the display parameters:

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

Display object available parameters:

Name	Type	Default	Required	Description
billing	bool	false	optional	If set to true, it will display and require Billing information within the form
button	bool	TRUE	optional	If set to false it will hide the button within the Payform.
errors	bool	TRUE	optional	If set to false it will hide the error messages shown within the form.
hideCloseBtn	bool	false	optional	If set to true the top right close button wont appear on the OTP.
mobile	bool	false	optional	In 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.
staticCardPlaceholder	bool	false	optional	If 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',
        phone: '+306900000000',
        billing: {
            addressLine1: 'example 1',
            ...,
        },
        shipping: {
            ...,
        },
        ...,
    },
    ...
});

Data object available parameters:

Name	Type	Default	Required	Description
email	string	null	required/optional	Email is required when phone is not given. If both email and phone are missing, a required phone input will be displayed.
phone	string	null	required/optional	Phone is required when email is not given. The suggested format is '+306901234567'. If both email and phone are missing, a required phone input will be displayed.
siteLang	string	"el"	optional	Your website's language in the accepted format e.g "el" or "en". This increases your chances of a frictionless transaction.
billing	object	{}	optional	You 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.
shipping	object	{}	optional	Passing 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:

Name	Type	Default	Required	Description
country	string	null	Highly recommended (optional)	Country code following ISO 3166-1 using the Alpha-2 code
state	string	null	Highly 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"
postalCode	string	null	Highly recommended (optional)	a string up to 16 characters
city	string	null	Highly recommended (optional)	a string up to 100 characters
addressLine1	string	null	Highly recommended (optional)	a string up to 100 characters
addressLine2	string	null	optional	This field is completely optional, you don’t need to pass it.

data.shipping parameters

Shipping object available parameters:

Name	Type	Default	Required	Description
country	string	null	Highly recommended (optional)	Country code following ISO 3166-1 using the Alpha-2 code
state	string	null	Highly 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"
postalCode	string	null	Highly recommended (optional)	a string up to 16 characters
city	string	null	Highly recommended (optional)	a string up to 100 characters
addressLine1	string	null	Highly recommended (optional)	a string up to 100 characters
addressLine2	string	null	optional	This 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:

Name	Type	Default	Required	Description
padding	number	25 (px)	optional	Apply padding to the whole form. Minimum padding is 0. This style is using CSS-in-Js (React JSS) format.
background	string		optional	Apply background styling to the whole form. This style is using CSS-in-Js (React JSS) format.
border	string	"none"	optional	Style the border around the form. This style is using CSS-in-Js (React JSS) format.
borderRadius	number		optional	Change the borderRadius of the form. This style is using CSS-in-Js (React JSS) format.
size	string	"xs"	optional	Choose between xs, sm, lg, xl to make the form bigger or smaller, it might affect mobile view of the form.
descriptionOptions	obj	{}	optional	Parameters within description are used for the titles that are above the inputs.

formOptions.descriptionOptions parameters

FormOptions.descriptionOptions object available parameters:

Name	Type	Default	Required	Description
color	string		optional	Title color. This style is using CSS-in-Js (React JSS) format.
fontSize	number		optional	Title fontSize. This style is using CSS-in-Js (React JSS) format.
fontWeight	string	"500"	optional	Title fontWeight. This style is using CSS-in-Js (React JSS) format.
textAlign	string		optional	Title textAlign. This style is using CSS-in-Js (React JSS) format.

buttonOptions parameters

ButtonOptions object available parameters:

Name	Type	Default	Required	Description
background	string		optional	Here you can set the background of the button inside the form. This style is using CSS-in-Js (React JSS) format.
text	string		optional	Here you can change the text that appears inside the form button.
textColor	string		optional	Here you can change the color of the text within the form button. This style is using CSS-in-Js (React JSS) format.
iconColor	string		optional	Here 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.
textTransform	string	"capitalize"	optional	Here you can change the textTransform of the button text. This style is using CSS-in-Js (React JSS) format.
size	string	"md"	optional	Choose the button size (height) you can only choose between sm, md, lg, xl.
borderRadius	number	"6"	optional	Change the borderRadius of the button. This style is using CSS-in-Js (React JSS) format.
fontSize	number	"18"	optional	Change the fontSize of the button text. This style is using CSS-in-Js (React JSS) format.
boxShadow	string		optional	Change the boxShadow of the button. This style is using CSS-in-Js (React JSS) format.
borderRadius	string		optional	Change the border of the button. This style is using CSS-in-Js (React JSS) format.
hoverBackground	string		optional	Change the hover background of the button. This style is using CSS-in-Js (React JSS) format.
hoverTextColor	string		optional	Change the hover textColor of the button. This style is using CSS-in-Js (React JSS) format.
hoverBorder	string		optional	Change the border of the button on hover. This style is using CSS-in-Js (React JSS) format.
shimmer	boolean	true	optional	disable or enable the shimmer (sparkle effect) on the button
decimalComma	boolean	false	optional	change between a decimal comma and a decimal dot separator for pricing

inputOptions parameters

InputOptions object available parameters:

Name	Type	Default	Required	Description
background	string		optional	Change the input background. This style is using CSS-in-Js (React JSS) format.
size	string	"sm"	optional	Change the size of the input. You can choose the input size between sm, md, lg, xl.
fontSize	number	"16"	optional	Change the fontSize of the input. This style is using CSS-in-Js (React JSS) format.
fontWeight	string		optional	Change the fontWeight of the text within the input. This style is using CSS-in-Js (React JSS) format.
placeholderColor	string		optional	Change the placeholder color of the input. This style is using CSS-in-Js (React JSS) format.
textColor	string		optional	Change the text color of the input. This style is using CSS-in-Js (React JSS) format.
borderColor	string		optional	Change the borderColor of the input. This style is using CSS-in-Js (React JSS) format.
focusedBorderColor	string		optional	Change the focused borderColor of the input. This style is using CSS-in-Js (React JSS) format.
labelOptions	object	{}	optional	This 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:

Name	Type	Required	Description
color	string	optional	Change the Label color of the material theme. This style is using CSS-in-Js (React JSS) format.
fontSize	number	optional	Change the Label fontSize of the material theme. This style is using CSS-in-Js (React JSS) format.
fontWeight	string	optional	Change the Label fontWeight of the material theme. This style is using CSS-in-Js (React JSS) format.

errorOptions parameters

ErrorOptions object available parameters:

Name	Type	Required	Description
textColor	string	optional	Change the color for the error messages within the form. This style is using CSS-in-Js (React JSS) format.
fontSize	number	optional	Change the fontSize for the error messages within the form. This style is using CSS-in-Js (React JSS) format.
fontWeight	string	optional	Change the fontWeight for the error messages within the form. This style is using CSS-in-Js (React JSS) format.

listeners parameters

listeners object available parameters:

Name	Type	Default	Required	Description
cardSchemeNotifier	func		optional	This callback function is invoked when the payform detects a card scheme (like VISA, MASTERCARD, etc).