Appendices

Methods

The main methods exposed by the MacroPay class.

NAME	ARGUMENTS	TYPE	DESCRIPTION
initForm	formConfig	Object	This function will render the form and receive a config object as a parameter.
submit	-	-	In custom mode this method will invoke the submit handler inside the hosted form and return a promise with the submission result.
configUpdate	config	Object	Through this method it is possible to pass a new config to the form without a page or component refresh. At this moment, only the orderId can be updated.

Configuration object

Description of the formConfig object necessary for a properly initForm method invocation.

PROPERTIES	REQUIRED	TYPE	DESCRIPTION
containerId	Yes	String	The ID attribute of the HTML element chosen as a container for the iframe.
formOptions	No	Object	An optional object with some customization properties for the form initialization. If this is not provided then the form will be rendered in default mode.
onSubmit	-	Function	A callback function to inform about the form submission result. Should be defined only in default mode.
onChange	-	Function	A callback function to inform about the current form state.

Customization object

Description of the formOptions object necessary to customize the form.

PROPERTIES	REQUIRED	TYPE	DEFAULT	DESCRIPTION
showButton	No	Boolean	true	Indicates if the submit button must be rendered or not.
showCardTypes	No	Boolean	true	Indicates if the card types component must be rendered or not.
theme	No	String	‘bootstrap’	Select a theme style: ‘bootstrap’ / ‘material’
language	No	String	'en-US'	Indicates in what language the form should be rendered (ISO code). Check the languages table for the full list of available languages.
styles	No	Object	undefined	Receive CSS properties for different form elements. You can learn more about these in the styles object table below.
wideLayout	No	Boolean	false	Set wideLayout to true to render a responsive and wide form. In this case, the form will get the container's size and grow/shrink as its container does.
tooltips	No	Boolean/Object	true	Show/hide input’s tooltips. Only available at wideLayout mode. true: show a tooltip on each form input. false: hide all tooltips. object: you can select which tooltips show by sending a tooltips object
showZipCode	No	Boolean	false	Indicates if the ZIP code input must be rendered or not.

Tooltips object

This object is optional and is used to render only the selected input tooltips. You can select which ones to render by sending a key pair with a true value, such as in the example below.

{
   cardHolder: true,
   cardNumber: true
}

PROPERTIES	REQUIRED	TYPE
cardHolder	No	Boolean
cardNumber	No	Boolean
cardNumber	No	Boolean
cvc	No	Boolean

Styling properties

ELEMENT	CSS PROPERTY	TYPE	DEFAULT	RANGE	DESCRIPTION
typography	fontFamily	String	"Roboto", "Helvetica", "Arial", sans-serif	Roboto and System fonts	Set the fontFamily of the form.Only Roboto and System fonts are available.
	primaryColor	String	"rgba(0, 0, 0, 0.87)"	-
	secondaryColor	String	"rgba(0, 0, 0, 0.80)"	-
input	color	String	'rgba(0, 0, 0, 0.87)'	-	The input element css properties. All can be overridden with a value of the indicated type and also using ‘none' or 'unset’ strings. The color css property must have one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(). The input height can be a number between 19 and 60.
	fontSize	Number	16	10 – 18	The input element css properties. All can be overridden with a value of the indicated type and also using ‘none' or 'unset’ strings. The color css property must have one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(). The input height can be a number between 19 and 60.
	borderRadius	Number	4	-	The input element css properties. All can be overridden with a value of the indicated type and also using ‘none' or 'unset’ strings. The color css property must have one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(). The input height can be a number between 19 and 60.
	border	String	'1px solid #ced4da'	-	The input element css properties. All can be overridden with a value of the indicated type and also using ‘none' or 'unset’ strings. The color css property must have one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(). The input height can be a number between 19 and 60.
	height	Number	19	19 – 60	The input element css properties. All can be overridden with a value of the indicated type and also using ‘none' or 'unset’ strings. The color css property must have one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(). The input height can be a number between 19 and 60.
	backgroundColor	String	‘white’	-	The input element css properties. All can be overridden with a value of the indicated type and also using ‘none' or 'unset’ strings. The color css property must have one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(). The input height can be a number between 19 and 60.
	inputAdornmentColor	String	‘#ced4da’	-	The input icon color (cardType icon and CVC icon).
	spacing	Number	0	0 – 30	Used to increase the vertical space between inputs. Due to layout, it is not possible to decrease the current space between inputs.
inputFocus	borderColor	String	'#80bdff'	-	Styles applied to the input element on a focus event.
	boxShadow	String	'none	-
	backgroundColor	String	‘white’	-	The input BackgroundColor, applied on focus event.
inputHover	borderColor	String	'rgba(0, 0, 0, 0.80)'	-	Styles applied to the input element on a hover event.
	backgroundColor	String	‘white’	-	The input BackgroundColor, applied on hover event.
inputValidation	color	String	‘none’	-	Styles applied to the input element on a valid event.
	borderColor	String	‘none’	-	Styles applied to the input element on a valid event.
inputError	fontWeight	Number	300	[300, 400, 500, 700]	Styles applied to the input error element on an error event.
	fontSize	Number	12	10 – 18	Styles applied to the input error element on an error event.
	color	String	‘#db2828’	-	Styles applied to the input error element on an error event.
	borderColor	String	‘#db2828’	-	Styles applied to the input error element on an error event.
inputLabel	color	String	'rgba(0, 0, 0, 0.80)'		Styles applied to the input label element.
	fontSize	Number	12	10 – 18	Styles applied to the input label element.
	fontWeight	Number	400	[400, 500, 700]	Set the label font weight
inputLabelFocus	color	String	'#80bdff'	-	Styles applied to the input label element on a focus event.
tooltip	iconColor	String	'rgb(128,128,128)'	-	Sets the tooltip icon color
	iconTextColor	String	‘white’	-	Sets the inner icon “?” color.
	iconHover	String	'rgba(128,128,128, 0.6)'	-	Sets the tooltip icon color on hover event
	backgroundColor	String	'rgb(128,128,128)'	-	Sets the background Color of the box with help text, opened when a hover event happens.
	textColor	String	'#FFF	-	Sets the help text color.
	fontSize	Number	12	10 – 18	Sets the help text size.
	fontWeight	Number	400	[400, 500, 700]	Sets the help text weight.
	padding	Number	5	5 – 15	Sets the inner padding between help text and its box.

Languages

LANGUAGE	ISO CODE	LANGUAGE	ISO CODE
Arabic	‘ar-SA’	Dutch	'nl-NL'
Czech	'cs-CZ'	Polish	'pl-PL'
German	'de-DE'	Portuguese	'nl-NL'
English	'en-US'	Russian	'ru-RU'
Spanish	'es-ES'	Thai	'th-TH'
French	'fr-FR'	Turkish	‘tr-TR’
Italian	'it-IT'	Ukrainian	'uk-UA'
Japanese	'ja-JP'	Chinese Simplified	'zh-CN'
Korean	'ko-KR'	Chinese Traditional	'zh-TW'

Methods​

Configuration object​

Customization object​

Tooltips object​

Styling properties​

Languages​