Reference Documentation

CanopyConnectComponents

.form(options)

Returns a Form

Creates a FormComponent instance for a specific carrier.

Kind: static method of CanopyConnectComponents

Param	Type	Description
options	Object	Form options
options.carrierConfig	Object	One of the configs returned by GET /carriers for which you would like to create a authentication form for.
[options.fonts]	Array	Array of font face objects that are either a Font Face Object or a Font CSS Object.
[options.styles]	Object	Global styles that will be used across all input types. The structure is defined here and lists the available states, styles and pseudo-selectors.
[options.usernameStyles]	Object	Styles that will be applied to the username input. Will override the global styles. The structure is defined here and lists the available states, styles and pseudo-selectors.
[options.passwordStyles]	Object	Styles that will be applied to the password input. Will override the global styles. The structure is defined here and lists the available states, styles and pseudo-selectors.
[options.thirdfieldStyles]	Object	Styles that will be applied to the thirdfield input. Will override the global styles. The structure is defined here and lists the available states, styles and pseudo-selectors.
[options.onTokensAvailable]	Callback	Triggered when tokens are available after form.submit() is called. Reference .on('tokensavailable') for callback data shape.
[options.onError]	Callback	Triggered when there is an error loading/submitting form fields. Reference .on('error') for callback data shape.
[options.onDestroy]	Callback	Triggered when the form is destroyed after form.destroy() is called.

Form

.destroy()

Destroys and deletes every component and will trigger the destroy event.

Kind: instance method of Form

.on('change', callback)

Triggered when an input in the form is changed. Callback contains validation information.

Kind: instance method of Form

Param	Type	Description
data	Object	Event data.
data.type	string	The input type. Possible values: `username`, `password`, `thirdfield`.
data.empty	Boolean	Whether the input is empty.
data.complete	Boolean	Whether the input passes validation and is ready to be submitted.
[data.error]	String	The error string, exists if input is empty or does not pass validation.

.on('destroy', callback)

Triggered after the form and it's components are destroyed, after .destroy() is called.

Kind: instance method of Form

.on('error', callback)

Triggered when there is an error loading/submitting form fields.

Kind: instance method of Form

Param	Type	Description
data	object	Event data.
data.err	string	The error message.

.on('ready', callback)

Triggered when the form and it's fields are loaded and ready.

Kind: instance method of Form

.on('submit', callback)

Triggered when the enter key/return is pressed.

Kind: instance method of FieldComponent

.on('tokensavailable', callback)

Triggered when tokens are available after .submit() is called.

Kind: instance method of Form

Param	Type	Description
data	object	Event data.
data.username	string	Input tokenized value.
[data.password]	string	Input tokenized value.
[data.thirdfield]	string	Input tokenized value.

.ready()

Returns a Promise that gets resolved when all of the components are mounted and ready.

Kind: instance method of Form

.submit()

Returns a Promise<{ errors?: Object; tokens?: Object; }>

Submits the input for all of the components and returns the tokenized value for each input.

Will contain errors if any input fails validation:

{ errors: { [username|password|thirdfield]: { error: string, isEmpty: boolean } } }

Will contain tokens if all inputs pass validation:

{ tokens: { username: string, [password]: string, [thirdfield]: string } }

Kind: instance method of Form

.components: `object`

A object containing all of the available components based on the provided carrierConfig

Kind: instance property of Form

Param	Type	Description
username	FieldComponent	Username authentication field
[password]	FieldComponent	Password authentication field. Exists if the carrierConfig has `disablePasswordField` set to `false`.
[thirdfield]	FieldComponent	Third authentication field. Exists if the carrierConfig has `thirdFieldPlaceholder`.

FieldComponent

.blur()

Calls blur on the field's input.

Kind: instance method of FieldComponent

.destroy()

Unmounts and removes the field and will trigger the destroy event.

Kind: instance method of FieldComponent

.focus()

Calls focus on the field's input.

Kind: instance method of FieldComponent

.on('blur', callback)

Triggered when the input loses focus and becomes blurred

Kind: instance method of FieldComponent

.on('change', callback)

Triggered when the input field is changed. Callback includes validation information.

Kind: instance method of FieldComponent

Param	Type	Description
data	Object	Event data.
data.empty	Boolean	Whether the input is empty.
data.complete	Boolean	Whether the input passes validation and can be submitted.
[data.error]	String	The error string, exists if input is empty or does not pass validation.

.on('destroy', callback)

Triggered after .destroy() is called and the field was unmounted.

Kind: instance method of FieldComponent

.on('error', callback)

Triggered when there is an error loading/submitting.

Kind: instance method of FieldComponent

Param	Type	Description
data	object	Event data.
data.err	string	The error message.

.on('focus', callback)

Triggered when the input gains focus

Kind: instance method of FieldComponent

.on('ready', callback)

Triggered after being mounted and the field finishes loading.

Kind: instance method of FieldComponent

.on('tokenavailable', callback)

Triggered when the a token is available after .submit() is called

Kind: instance method of FieldComponent

Param	Type	Description
data	Object	Event data.
data.token	String	Input tokenized value.

.mount(selectorOrElement)

Mounts the FieldComponent to the matching selector or the element.

Kind: instance method of FieldComponent

Param	Type	Description
selectorOrElement	String \| HTMLElement	The selector or element that the FieldComponent should be mounted to.

.unmount()

Unmounts the FieldComponent from the currently mounted element.

Kind: instance method of FieldComponent

.validate()

Returns a Promise<Object> - { type: "username|password|thirdfield", isValid: boolean, isEmpty: boolean, error?: string }

Validates the input's value, should be used before calling .submit().

Kind: instance method of FieldComponent

CanopyConnectComponents

.form(options)

Form

.destroy()

.on('change', callback)

.on('destroy', callback)

.on('error', callback)

.on('ready', callback)

.on('submit', callback)

.on('tokensavailable', callback)

.ready()

.submit()

.components: object

FieldComponent

.blur()

.destroy()

.focus()

.on('blur', callback)

.on('change', callback)

.on('destroy', callback)

.on('error', callback)

.on('focus', callback)

.on('ready', callback)

.on('tokenavailable', callback)

.mount(selectorOrElement)

.unmount()

.validate()

.components: `object`