@paydock/client-sdk

## Classes <dl> <dt><a href="#user-content-w_HtmlWidget">HtmlWidget</a> ⇐ <code><a href="#user-content-w_HtmlMultiWidget">HtmlMultiWidget</a></code></dt> <dd>Class Widget include method for working on html and include extended by HtmlMultiWidget methods </dd> <dt><a href="#user-content-w_HtmlMultiWidget">HtmlMultiWidget</a> ⇐ <code><a href="#user-content-w_MultiWidget">MultiWidget</a></code></dt> <dd>Class HtmlMultiWidget include method for working with html </dd> <dt><a href="#user-content-w_Configuration">Configuration</a></dt> <dd>Class Configuration include methods for creating configuration token </dd> <dt><a href="#user-content-w_MultiWidget">MultiWidget</a></dt> <dd>Class MultiWidget include method for for creating iframe url </dd> </dl> ## Members <dl> <dt><a href="#user-content-w_PURPOSE">PURPOSE</a> : <code>object</code></dt> <dd>Purposes </dd> </dl> ## Constants <dl> <dt><a href="#user-content-w_EVENT">EVENT</a> : <code>object</code></dt> <dd>List of available event's name </dd> <dt><a href="#user-content-w_VAULT_DISPLAY_EVENT">VAULT_DISPLAY_EVENT</a> : <code>object</code></dt> <dd>List of available event's name </dd> <dt><a href="#user-content-w_PAYMENT_TYPE">PAYMENT_TYPE</a> : <code>object</code></dt> <dd>List of available payment source types </dd> <dt><a href="#user-content-w_FORM_FIELD">FORM_FIELD</a> : <code>object</code></dt> <dd>Current constant include available type of fields which can be included to widget </dd> <dt><a href="#user-content-w_STYLE">STYLE</a> : <code>object</code></dt> <dd>List of available style params for widget </dd> <dt><a href="#user-content-w_TEXT">TEXT</a> : <code>object</code></dt> <dd>List of available text item params for widget </dd> <dt><a href="#user-content-w_ELEMENT">ELEMENT</a> : <code>object</code></dt> <dd>List of available params for hide elements </dd> <dt><a href="#user-content-w_SUPPORTED_CARD_TYPES">SUPPORTED_CARD_TYPES</a> : <code>object</code></dt> <dd>The list of available parameters for showing card icons </dd> <dt><a href="#user-content-w_STYLABLE_ELEMENT">STYLABLE_ELEMENT</a> : <code>object</code></dt> <dd>Current constant include available type of element for styling </dd> <dt><a href="#user-content-w_STYLABLE_ELEMENT_STATE">STYLABLE_ELEMENT_STATE</a> : <code>object</code></dt> <dd>Current constant include available states of element for styling </dd> <dt><a href="#user-content-w_CARD_VALIDATORS">CARD_VALIDATORS</a> : <code>Record.<string, string></code></dt> <dd>List of available form field validators dedicated to cards and their definition </dd> <dt><a href="#user-content-w_GENERIC_VALIDATORS">GENERIC_VALIDATORS</a> : <code>Record.<string, string></code></dt> <dd>List of available generic form field validators and their definition </dd> <dt><a href="#user-content-w_TRIGGER">TRIGGER</a> : <code>object</code></dt> <dd>List of available triggers </dd> </dl> ## Interfaces <dl> <dt><a href="#user-content-w_IFormValidation">IFormValidation</a></dt> <dd>Interface of data from validation event. </dd> <dt><a href="#user-content-w_IEventMetaData">IEventMetaData</a></dt> <dd>Contains basic information associated with the event and additional meta data specific to the event. E.g., card info, gateway info, etc. </dd> <dt><a href="#user-content-w_IEventAfterLoadData">IEventAfterLoadData</a></dt> <dd>Interface of data from event. </dd> <dt><a href="#user-content-w_IEventFinishData">IEventFinishData</a></dt> <dd>Interface of data from event. </dd> <dt><a href="#user-content-w_IPayPalMeta">IPayPalMeta</a></dt> <dd>Interface for PayPal checkout meta information </dd> <dt><a href="#user-content-w_IStyles">IStyles</a></dt> <dd>Interface for classes that represent widget's styles. </dd> <dt><a href="#user-content-w_ITexts">ITexts</a></dt> <dd>Interface for classes that represent widget's text. </dd> <dt><a href="#user-content-w_IBamboraMeta">IBamboraMeta</a></dt> <dd>Interface for Bamboora meta information </dd> <dt><a href="#user-content-w_IElementStyleInput">IElementStyleInput</a></dt> <dd>Interface for styling input element. </dd> <dt><a href="#user-content-w_IElementStyleSubmitButton">IElementStyleSubmitButton</a></dt> <dd>Interface for styling submit_button element. </dd> <dt><a href="#user-content-w_IElementStyleLabel">IElementStyleLabel</a></dt> <dd>Interface for styling label element. </dd> <dt><a href="#user-content-w_IElementStyleTitle">IElementStyleTitle</a></dt> <dd>Interface for styling title element. </dd> <dt><a href="#user-content-w_IElementStyleTitleDescription">IElementStyleTitleDescription</a></dt> <dd>Interface for styling title_description element. </dd> <dt><a href="#user-content-w_ITriggerData">ITriggerData</a></dt> <dd>Interface for classes that represent a trigger data. </dd> </dl> <a name="w_IFormValidation" id="w_IFormValidation" href="#user-content-w_IFormValidation"> </a> ## IFormValidation Interface of data from validation event. **Kind**: global interface | Param | Type | Description | | --- | --- | --- | | event | <code>string</code> | The name of the event. | | message_source | <code>string</code> | A system variable that identifies the event source. | | purpose | <code>string</code> | A system variable that states the purpose of the event. | | [ref_id] | <code>string</code> | Custom unique value that identifies result of processed operation. | | [form_valid] | <code>boolean</code> | Indicates wether or not the form is valid. | | [invalid_fields] | <code>Array.<string></code> | Names of form fields with invalid data. | | [invalid_showed_fields] | <code>Array.<string></code> | Names of invalid form fields which are already displaying the error. | | [validators] | <code>Partial.<Record.<(CardValidatorValue\|GenericValidatorValue), Array.<string>>></code> | Object containing validator identifiers as keys and the fields subject to that validator as an array of form field names. See list of available [Generic Vallidators](#user-content-w_GENERIC_VALIDATORS) and [Card Validators](#user-content-w_CARD_VALIDATORS), | <a name="w_IEventMetaData" id="w_IEventMetaData" href="#user-content-w_IEventMetaData"> </a> ## IEventMetaData Contains basic information associated with the event and additional meta data specific to the event. E.g., card info, gateway info, etc. **Kind**: global interface | Param | Type | Description | | --- | --- | --- | | event | <code>string</code> | The name of the event. | | purpose | <code>string</code> | A system variable that states the purpose of the event. | | message_source | <code>string</code> | A system variable that identifies the event source. | | [ref_id] | <code>string</code> | Custom unique value that identifies result of processed operation. | | configuration_token | <code>string</code> | Token received from our API with widget data | | type | <code>string</code> | Payment type 'card', 'bank_account' | | gateway_type | <code>string</code> | Gateway type | | [card_number_last4] | <code>string</code> | Last 4 digit of your card | | [card_scheme] | <code>string</code> | Card scheme, e.g., (Visa, Mastercard and American Express (AmEx)) | | [card_number_length] | <code>number</code> | Card number length | | [account_name] | <code>string</code> | Bank account account name | | [account_number] | <code>string</code> | Bank account account number | <a name="w_IEventAfterLoadData" id="w_IEventAfterLoadData" href="#user-content-w_IEventAfterLoadData"> </a> ## IEventAfterLoadData Interface of data from event. **Kind**: global interface | Param | Type | Description | | --- | --- | --- | | event | <code>string</code> | The name of the event. | | purpose | <code>string</code> | A system variable that states the purpose of the event. | | message_source | <code>string</code> | A system variable that identifies the event source. | | [ref_id] | <code>string</code> | Custom unique value that identifies result of processed operation. | <a name="w_IEventFinishData" id="w_IEventFinishData" href="#user-content-w_IEventFinishData"> </a> ## IEventFinishData Interface of data from event. **Kind**: global interface | Param | Type | Description | | --- | --- | --- | | event | <code>string</code> | The name of the event. | | purpose | <code>string</code> | A system variable that states the purpose of the event. | | message_source | <code>string</code> | A system variable that identifies the event source. | | [ref_id] | <code>string</code> | Custom unique value that identifies result of processed operation. | | payment_source | <code>string</code> | One time token. Result from this endpoint [API docs](https://docs.paydock.com/#tokens) | <a name="w_IPayPalMeta" id="w_IPayPalMeta" href="#user-content-w_IPayPalMeta"> </a> ## IPayPalMeta Interface for PayPal checkout meta information **Kind**: global interface | Param | Type | Description | | --- | --- | --- | | [brand_name] | <code>string</code> | A label that overrides the business name in the PayPal account on the PayPal hosted checkout pages | | [cart_border_color] | <code>string</code> | The HTML hex code for your principal identifying color | | [reference] | <code>string</code> | Merchant Customer Service number displayed on the PayPal pages | | [email] | <code>string</code> | The consumer’s email | | [hdr_img] | <code>string</code> | URL for the image you want to appear at the top left of the payment page | | [logo_img] | <code>string</code> | A URL to your logo image | | [pay_flow_color] | <code>string</code> | Sets the background color for the payment page. By default, the color is white. | | [first_name] | <code>string</code> | The consumer’s given names | | [last_name] | <code>string</code> | The consumer’s surname | | [address_line] | <code>string</code> | Street address | | [address_line2] | <code>string</code> | Second line of the address | | [address_city] | <code>string</code> | City | | [address_state] | <code>string</code> | State | | [address_postcode] | <code>string</code> | Postcode | | [address_country] | <code>string</code> | Country | | [phone] | <code>string</code> | The consumer’s phone number in E.164 international notation (Example: +12345678901) | | [hide_shipping_address] | <code>boolean</code> | Determines whether PayPal displays shipping address fields on the PayPal pages | <a name="w_IStyles" id="w_IStyles" href="#user-content-w_IStyles"> </a> ## IStyles Interface for classes that represent widget's styles. **Kind**: global interface | Param | Type | | --- | --- | | [background_color] | <code>string</code> | | [text_color] | <code>string</code> | | [border_color] | <code>string</code> | | [button_color] | <code>string</code> | | [error_color] | <code>string</code> | | [success_color] | <code>string</code> | | [font_size] | <code>string</code> | | [font_family] | <code>string</code> | <a name="w_ITexts" id="w_ITexts" href="#user-content-w_ITexts"> </a> ## ITexts Interface for classes that represent widget's text. **Kind**: global interface | Param | Type | | --- | --- | | [title] | <code>string</code> | | [title_h1] | <code>string</code> | | [title_h2] | <code>string</code> | | [title_h3] | <code>string</code> | | [title_h4] | <code>string</code> | | [title_h5] | <code>string</code> | | [title_h6] | <code>string</code> | | [finish_text] | <code>string</code> | | [title_description] | <code>string</code> | | [submit_button] | <code>string</code> | | [submit_button_processing] | <code>string</code> | <a name="w_IBamboraMeta" id="w_IBamboraMeta" href="#user-content-w_IBamboraMeta"> </a> ## IBamboraMeta Interface for Bamboora meta information **Kind**: global interface | Param | Type | Description | | --- | --- | --- | | [customer_storage_number] | <code>string</code> | Customer storage number | | [tokenise_algorithm] | <code>number</code> | Tokenise algorithm | <a name="w_IElementStyleInput" id="w_IElementStyleInput" href="#user-content-w_IElementStyleInput"> </a> ## IElementStyleInput Interface for styling input element. **Kind**: global interface | Param | Type | Description | | --- | --- | --- | | [color] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/color) | | [border] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/border) | | [border_radius] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) | | [background_color] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) | | [height] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/height) | | [text_decoration] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) | | [font_size] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) | | [font_family] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) | | [transition] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) | | [line_height] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) | | [font_weight] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) | | [padding] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) | | [margin] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) | <a name="w_IElementStyleSubmitButton" id="w_IElementStyleSubmitButton" href="#user-content-w_IElementStyleSubmitButton"> </a> ## IElementStyleSubmitButton Interface for styling submit_button element. **Kind**: global interface | Param | Type | Description | | --- | --- | --- | | [color] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/color) | | [border] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/border) | | [border_radius] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) | | [background_color] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) | | [text_decoration] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) | | [font_size] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) | | [font_family] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) | | [padding] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) | | [margin] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) | | [transition] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) | | [line_height] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) | | [font_weight] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) | | [opacity] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) | <a name="w_IElementStyleLabel" id="w_IElementStyleLabel" href="#user-content-w_IElementStyleLabel"> </a> ## IElementStyleLabel Interface for styling label element. **Kind**: global interface | Param | Type | Description | | --- | --- | --- | | [color] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/color) | | [text_decoration] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) | | [font_size] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) | | [font_family] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) | | [line_height] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) | | [font_weight] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) | | [padding] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) | | [margin] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) | <a name="w_IElementStyleTitle" id="w_IElementStyleTitle" href="#user-content-w_IElementStyleTitle"> </a> ## IElementStyleTitle Interface for styling title element. **Kind**: global interface | Param | Type | Description | | --- | --- | --- | | [color] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/color) | | [text_decoration] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) | | [font_size] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) | | [font_family] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) | | [line_height] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) | | [font_weight] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) | | [padding] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) | | [margin] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) | | ['text-align',] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) | <a name="w_IElementStyleTitleDescription" id="w_IElementStyleTitleDescription" href="#user-content-w_IElementStyleTitleDescription"> </a> ## IElementStyleTitleDescription Interface for styling title_description element. **Kind**: global interface | Param | Type | Description | | --- | --- | --- | | [color] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/color) | | [text_decoration] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) | | [font_size] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) | | [font_family] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) | | [line_height] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) | | [font_weight] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) | | [padding] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) | | [margin] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) | | ['text-align',] | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) | <a name="w_ITriggerData" id="w_ITriggerData" href="#user-content-w_ITriggerData"> </a> ## ITriggerData Interface for classes that represent a trigger data. **Kind**: global interface | Param | Type | | --- | --- | | [configuration_token] | <code>string</code> | | [tab_number] | <code>string</code> | | [elements] | <code>string</code> | | [form_values] | <code>string</code> | <a name="w_HtmlWidget" id="w_HtmlWidget" href="#user-content-w_HtmlWidget"> </a> ## HtmlWidget ⇐ [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget) Class Widget include method for working on html and include extended by HtmlMultiWidget methods **Kind**: global class **Extends**: [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget), [<code>MultiWidget</code>](#user-content-w_MultiWidget) * [HtmlWidget](#user-content-w_HtmlWidget) ⇐ [<code>HtmlMultiWidget</code>](#user-content-w_HtmlMultiWidget) * [new HtmlWidget(selector, publicKey, [gatewayID], [paymentType], [purpose])](#user-content-w_new_HtmlWidget_new) * [.setWebHookDestination(url)](#user-content-w_HtmlWidget+setWebHookDestination) * [.setSuccessRedirectUrl(url)](#user-content-w_HtmlWidget+setSuccessRedirectUrl) * [.setErrorRedirectUrl(url)](#user-content-w_HtmlWidget+setErrorRedirectUrl) * [.setFormFields(fields)](#user-content-w_HtmlWidget+setFormFields) * [.setFormElements(elements)](#user-content-w_HtmlWidget+setFormElements) * [.setMeta(object)](#user-content-w_HtmlWidget+setMeta) * [.load()](#user-content-w_HtmlMultiWidget+load) * [.afterLoad()](#user-content-w_HtmlMultiWidget+afterLoad) * [.trigger(triggers, data)](#user-content-w_HtmlMultiWidget+trigger) * [.getValidationState()](#user-content-w_HtmlMultiWidget+getValidationState) ⇒ [<code>IFormValidation</code>](#user-content-w_IFormValidation) * [.isValidForm()](#user-content-w_HtmlMultiWidget+isValidForm) ⇒ <code>boolean</code> * [.isInvalidField(field)](#user-content-w_HtmlMultiWidget+isInvalidField) ⇒ <code>boolean</code> * [.isFieldErrorShowed(field)](#user-content-w_HtmlMultiWidget+isFieldErrorShowed) ⇒ <code>boolean</code> * [.isInvalidFieldByValidator(field, validator)](#user-content-w_HtmlMultiWidget+isInvalidFieldByValidator) ⇒ <code>boolean</code> * [.hide([saveSize])](#user-content-w_HtmlMultiWidget+hide) * [.show()](#user-content-w_HtmlMultiWidget+show) * [.reload()](#user-content-w_HtmlMultiWidget+reload) * [.hideElements(elements)](#user-content-w_HtmlMultiWidget+hideElements) * [.showElements(elements)](#user-content-w_HtmlMultiWidget+showElements) * [.updateFormValues(fieldValues)](#user-content-w_HtmlMultiWidget+updateFormValues) * [.updateFormValue(key, value)](#user-content-w_HtmlMultiWidget+updateFormValue) * [.onFinishInsert(selector, dataType)](#user-content-w_HtmlMultiWidget+onFinishInsert) * [.interceptSubmitForm(selector)](#user-content-w_HtmlMultiWidget+interceptSubmitForm) * [.useCheckoutAutoSubmit()](#user-content-w_HtmlMultiWidget+useCheckoutAutoSubmit) * [.useAutoResize()](#user-content-w_HtmlMultiWidget+useAutoResize) * [.setStyles(fields)](#user-content-w_MultiWidget+setStyles) * [.usePhoneCountryMask([options])](#user-content-w_MultiWidget+usePhoneCountryMask) * [.setTexts(fields)](#user-content-w_MultiWidget+setTexts) * [.setElementStyle(element, [state], styles)](#user-content-w_MultiWidget+setElementStyle) * [.setFormValues(fieldValues)](#user-content-w_MultiWidget+setFormValues) * [.setFormLabels(fieldLabels)](#user-content-w_MultiWidget+setFormLabels) * [.setFormPlaceholders(fieldPlaceholders)](#user-content-w_MultiWidget+setFormPlaceholders) * ~~[.setIcons()](#user-content-w_MultiWidget+setIcons)~~ * [.setHiddenElements(elements)](#user-content-w_MultiWidget+setHiddenElements) * [.setRefId(refId)](#user-content-w_MultiWidget+setRefId) * [.useGatewayFieldValidation()](#user-content-w_MultiWidget+useGatewayFieldValidation) * [.setSupportedCardIcons(elements, validateCardNumberInput)](#user-content-w_MultiWidget+setSupportedCardIcons) * [.hideUiErrors()](#user-content-w_MultiWidget+hideUiErrors) * [.setEnv(env, [alias])](#user-content-w_MultiWidget+setEnv) * [.loadIFrameUrl()](#user-content-w_MultiWidget+loadIFrameUrl) * [.setLanguage(code)](#user-content-w_MultiWidget+setLanguage) <a name="w_new_HtmlWidget_new" id="w_new_HtmlWidget_new" href="#user-content-w_new_HtmlWidget_new"> </a> ### new HtmlWidget(selector, publicKey, [gatewayID], [paymentType], [purpose]) | Param | Type | Default | Description | | --- | --- | --- | --- | | selector | <code>string</code> | | Selector of html element. Container for widget | | publicKey | <code>string</code> | | PayDock users public key | | [gatewayID] | <code>string</code> | <code>"default"</code> | ID of a gateway connected to PayDock. By default or if put 'default', it will use the selected default gateway. If put 'not_configured', it won’t use gateway to create downstream token. | | [paymentType] | <code>string</code> | <code>"card"</code> | Type of payment source which shows in widget form. Available parameters : “card”, “bank_account”. | | [purpose] | <code>string</code> | <code>"payment_source"</code> | Purpose of widget form. Available parameters: ‘payment_source’, ‘card_payment_source_with_cvv’, ‘card_payment_source_without_cvv’ | **Example** ```javascript var widget = new HtmlWidget('#widget', 'publicKey', 'gatewayID'); // short var widget = new HtmlWidget('#widget', 'publicKey', 'gatewayID', 'bank_account', 'payment_source'); // extend var widget = new HtmlWidget('#widget', 'publicKey', 'not_configured'); // without gateway ``` <a name="w_HtmlWidget+setWebHookDestination" id="w_HtmlWidget+setWebHookDestination" href="#user-content-w_HtmlWidget+setWebHookDestination"> </a> ### htmlWidget.setWebHookDestination(url) Destination, where customer will receive all successful responses. Response will contain “data” object with “payment_source” or other parameters, in depending on 'purpose' **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) | Param | Type | Description | | --- | --- | --- | | url | <code>string</code> | Your endpoint for post request. | **Example** ```javascript widget.setWebHookDestination('http://google.com'); ``` <a name="w_HtmlWidget+setSuccessRedirectUrl" id="w_HtmlWidget+setSuccessRedirectUrl" href="#user-content-w_HtmlWidget+setSuccessRedirectUrl"> </a> ### htmlWidget.setSuccessRedirectUrl(url) URL to which the Customer will be redirected to after the success finish **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) | Param | Type | | --- | --- | | url | <code>string</code> | **Example** ```javascript widget.setSuccessRedirectUrl('google.com/search?q=success'); ``` <a name="w_HtmlWidget+setErrorRedirectUrl" id="w_HtmlWidget+setErrorRedirectUrl" href="#user-content-w_HtmlWidget+setErrorRedirectUrl"> </a> ### htmlWidget.setErrorRedirectUrl(url) URL to which the Customer will be redirected to if an error is triggered in the process of operation **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) | Param | Type | | --- | --- | | url | <code>string</code> | **Example** ```javascript widget.setErrorRedirectUrl('google.com/search?q=error'); ``` <a name="w_HtmlWidget+setFormFields" id="w_HtmlWidget+setFormFields" href="#user-content-w_HtmlWidget+setFormFields"> </a> ### htmlWidget.setFormFields(fields) Set list with widget form field, which will be shown in form. Also you can set the required validation for these fields **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) | Param | Type | Description | | --- | --- | --- | | fields | <code>Array.<string></code> | name of fields which can be shown in a widget. If after a name of a field, you put “*”, this field will be required on client-side. (For validation, you can specify any fields, even those that are shown by default: card_number, expiration, etc... ) [FORM_FIELD](#user-content-w_FORM_FIELD) | **Example** ```javascript widget.setFormFields(['phone', 'email', 'first_name*']); ``` <a name="w_HtmlWidget+setFormElements" id="w_HtmlWidget+setFormElements" href="#user-content-w_HtmlWidget+setFormElements"> </a> ### htmlWidget.setFormElements(elements) The method to set the full configuration for the all specific form elements (visibility, required, label, placeholder, value) You can also use the other method for the partial configuration like: setFormFields, setFormValues, setFormPlaceholder, setFormLabel **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) **Overrides**: [<code>setFormElements</code>](#user-content-w_MultiWidget+setFormElements) | Param | Type | Description | | --- | --- | --- | | elements | <code>Array.<Object></code> | List of elements | | elements[].field | <code>string</code> | Field name of element. If after a name of a field, you put “*”, this field will be required on client-side. (For validation, you can specify any fields, even those that are shown by default: card_number, expiration, etc... ) [FORM_FIELD](#user-content-w_FORM_FIELD) | | elements[].placeholder | <code>string</code> | Set custom placeholders in form fields | | elements[].label | <code>string</code> | Set a custom labels near the form field | | elements[].value | <code>string</code> | Set predefined values for the form field | **Example** ```javascript widget.setFormElements([ { field: 'card_name*', placeholder: 'Input your card holder name...', label: 'Card Holder Name', value: 'Houston', }, { field: 'email', placeholder: 'Input your email, like test@example.com', label: 'Email for the receipt', value: 'predefined@email.com', }, ]) ``` <a name="w_HtmlWidget+setMeta" id="w_HtmlWidget+setMeta" href="#user-content-w_HtmlWidget+setMeta"> </a> ### htmlWidget.setMeta(object) The method to set meta information for the checkout page **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) | Param | Type | Description | | --- | --- | --- | | object | [<code>IPayPalMeta</code>](#user-content-w_IPayPalMeta) \| [<code>IBamboraMeta</code>](#user-content-w_IBamboraMeta) | data which can be shown on checkout page [IPayPalMeta](#user-content-w_IPayPalMeta) [IBamboraMeta](#user-content-w_IBamboraMeta) | **Example** ```javascript config.setMeta({ brand_name: 'paydock', reference: '15', email: 'wault@paydock.com' }); ``` <a name="w_HtmlMultiWidget+load" id="w_HtmlMultiWidget+load" href="#user-content-w_HtmlMultiWidget+load"> </a> ### htmlWidget.load() Loads the widget. Calling this method results in an iframe element being inserted and rendered in the DOM. **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) **Overrides**: [<code>load</code>](#user-content-w_HtmlMultiWidget+load) <a name="w_HtmlMultiWidget+afterLoad" id="w_HtmlMultiWidget+afterLoad" href="#user-content-w_HtmlMultiWidget+afterLoad"> </a> ### htmlWidget.afterLoad() Registers a form validation callback for validation events. **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) **Overrides**: [<code>afterLoad</code>](#user-content-w_HtmlMultiWidget+afterLoad) <a name="w_HtmlMultiWidget+trigger" id="w_HtmlMultiWidget+trigger" href="#user-content-w_HtmlMultiWidget+trigger"> </a> ### htmlWidget.trigger(triggers, data) Registers callback that will be invoked for every trigger. **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) **Overrides**: [<code>trigger</code>](#user-content-w_HtmlMultiWidget+trigger) | Param | Type | Description | | --- | --- | --- | | triggers | <code>'submit\_form'</code> \| <code>'tab'</code> | The Widget element identifier that caused the trigger. | | data | [<code>ITriggerData</code>](#user-content-w_ITriggerData) | Data that will be sent to the widget when the trigger occurs. | <a name="w_HtmlMultiWidget+getValidationState" id="w_HtmlMultiWidget+getValidationState" href="#user-content-w_HtmlMultiWidget+getValidationState"> </a> ### htmlWidget.getValidationState() ⇒ [<code>IFormValidation</code>](#user-content-w_IFormValidation) Gets a reference to the form current validation state. !Warning: do not directly modify the values of the returned object. **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) **Overrides**: [<code>getValidationState</code>](#user-content-w_HtmlMultiWidget+getValidationState) **Returns**: [<code>IFormValidation</code>](#user-content-w_IFormValidation) - Form validation object <a name="w_HtmlMultiWidget+isValidForm" id="w_HtmlMultiWidget+isValidForm" href="#user-content-w_HtmlMultiWidget+isValidForm"> </a> ### htmlWidget.isValidForm() ⇒ <code>boolean</code> Checks if a given form is valid. A form is valid if all form fields are valid. **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) **Overrides**: [<code>isValidForm</code>](#user-content-w_HtmlMultiWidget+isValidForm) **Returns**: <code>boolean</code> - Indicates wether or not form is valid. <a name="w_HtmlMultiWidget+isInvalidField" id="w_HtmlMultiWidget+isInvalidField" href="#user-content-w_HtmlMultiWidget+isInvalidField"> </a> ### htmlWidget.isInvalidField(field) ⇒ <code>boolean</code> Using this method you can check if a specific form field is invalid **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) **Overrides**: [<code>isInvalidField</code>](#user-content-w_HtmlMultiWidget+isInvalidField) **Returns**: <code>boolean</code> - Field is invalid | Param | Type | Description | | --- | --- | --- | | field | <code>string</code> | Field name | <a name="w_HtmlMultiWidget+isFieldErrorShowed" id="w_HtmlMultiWidget+isFieldErrorShowed" href="#user-content-w_HtmlMultiWidget+isFieldErrorShowed"> </a> ### htmlWidget.isFieldErrorShowed(field) ⇒ <code>boolean</code> Checks if a given form field is displaying an error. **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) **Overrides**: [<code>isFieldErrorShowed</code>](#user-content-w_HtmlMultiWidget+isFieldErrorShowed) **Returns**: <code>boolean</code> - Indicates wether or not the Error message is being displayed on the associated field. | Param | Type | Description | | --- | --- | --- | | field | <code>string</code> | The form field name | <a name="w_HtmlMultiWidget+isInvalidFieldByValidator" id="w_HtmlMultiWidget+isInvalidFieldByValidator" href="#user-content-w_HtmlMultiWidget+isInvalidFieldByValidator"> </a> ### htmlWidget.isInvalidFieldByValidator(field, validator) ⇒ <code>boolean</code> Checks if a given form field is valid or invalid by name. **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) **Overrides**: [<code>isInvalidFieldByValidator</code>](#user-content-w_HtmlMultiWidget+isInvalidFieldByValidator) **Returns**: <code>boolean</code> - Indicates wether or not the field is invalid based on validator intepretation. | Param | Type | Description | | --- | --- | --- | | field | <code>string</code> | The form field name | | validator | | The name of the validator. | <a name="w_HtmlMultiWidget+hide" id="w_HtmlMultiWidget+hide" href="#user-content-w_HtmlMultiWidget+hide"> </a> ### htmlWidget.hide([saveSize]) Hides the widget. E.g., use this method to hide the widget after it loads. **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) **Overrides**: [<code>hide</code>](#user-content-w_HtmlMultiWidget+hide) | Param | Type | Default | Description | | --- | --- | --- | --- | | [saveSize] | <code>boolean</code> | <code>false</code> | Wether the original iframe element size should be saved before being hidden. | <a name="w_HtmlMultiWidget+show" id="w_HtmlMultiWidget+show" href="#user-content-w_HtmlMultiWidget+show"> </a> ### htmlWidget.show() Shows the widget. E.g., use this method to show the widget after it was explicitly hidden. **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) **Overrides**: [<code>show</code>](#user-content-w_HtmlMultiWidget+show) <a name="w_HtmlMultiWidget+reload" id="w_HtmlMultiWidget+reload" href="#user-content-w_HtmlMultiWidget+reload"> </a> ### htmlWidget.reload() Reloads the widget. **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) **Overrides**: [<code>reload</code>](#user-content-w_HtmlMultiWidget+reload) <a name="w_HtmlMultiWidget+hideElements" id="w_HtmlMultiWidget+hideElements" href="#user-content-w_HtmlMultiWidget+hideElements"> </a> ### htmlWidget.hideElements(elements) Hides the specified Widget elements by their identifier. **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) **Overrides**: [<code>hideElements</code>](#user-content-w_HtmlMultiWidget+hideElements) | Param | Type | Description | | --- | --- | --- | | elements | <code>Array.<string></code> | List of element which can be hidden [ELEMENT](#user-content-w_ELEMENT) || [FORM_FIELD](#user-content-w_FORM_FIELD) | **Example** ```javascript widget.hideElements(['submit_button', 'email']); ``` <a name="w_HtmlMultiWidget+showElements" id="w_HtmlMultiWidget+showElements" href="#user-content-w_HtmlMultiWidget+showElements"> </a> ### htmlWidget.showElements(elements) Shows the specified Widget elements by their identifier. **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) **Overrides**: [<code>showElements</code>](#user-content-w_HtmlMultiWidget+showElements) | Param | Type | Description | | --- | --- | --- | | elements | <code>Array.<string></code> | List of elements which can be showed [ELEMENT](#user-content-w_ELEMENT) || [FORM_FIELD](#user-content-w_FORM_FIELD) | **Example** ```javascript widget.showElements(['submit_button', 'email']); ``` <a name="w_HtmlMultiWidget+updateFormValues" id="w_HtmlMultiWidget+updateFormValues" href="#user-content-w_HtmlMultiWidget+updateFormValues"> </a> ### htmlWidget.updateFormValues(fieldValues) Updates the form field values inside the widget. **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) **Overrides**: [<code>updateFormValues</code>](#user-content-w_HtmlMultiWidget+updateFormValues) | Param | Type | Description | | --- | --- | --- | | fieldValues | <code>IFormValues</code> | Fields with values | **Example** ```javascript widget.updateFormValues({ email: 'predefined@email.com', card_name: 'Houston' }); ``` <a name="w_HtmlMultiWidget+updateFormValue" id="w_HtmlMultiWidget+updateFormValue" href="#user-content-w_HtmlMultiWidget+updateFormValue"> </a> ### htmlWidget.updateFormValue(key, value) Updates a single form field values inside the widget by the form field name. **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) **Overrides**: [<code>updateFormValue</code>](#user-content-w_HtmlMultiWidget+updateFormValue) | Param | Type | Description | | --- | --- | --- | | key | <code>string</code> | The form field name | | value | <code>string</code> | The form field value | **Example** ```javascript widget.updateFormValue("card_name", "John Doe"); ``` <a name="w_HtmlMultiWidget+onFinishInsert" id="w_HtmlMultiWidget+onFinishInsert" href="#user-content-w_HtmlMultiWidget+onFinishInsert"> </a> ### htmlWidget.onFinishInsert(selector, dataType) Inserts the event data (after finish event) onto the input field associated with the provided CSS selector. **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) **Overrides**: [<code>onFinishInsert</code>](#user-content-w_HtmlMultiWidget+onFinishInsert) | Param | Type | Description | | --- | --- | --- | | selector | <code>string</code> | A CSS selector. E.g., ".my-class", "#my-id", or others | | dataType | <code>string</code> | The data type of IEventData object. | <a name="w_HtmlMultiWidget+interceptSubmitForm" id="w_HtmlMultiWidget+interceptSubmitForm" href="#user-content-w_HtmlMultiWidget+interceptSubmitForm"> </a> ### htmlWidget.interceptSubmitForm(selector) Intercepts a form submission and delegates processing to the widget. An simplified example of the process: - User clicks submit button in your form - This implicitly triggers a submission to the widget - The widget submits your form **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) **Overrides**: [<code>interceptSubmitForm</code>](#user-content-w_HtmlMultiWidget+interceptSubmitForm) **Note**: The widget's submit button will be hidden. | Param | Type | Description | | --- | --- | --- | | selector | <code>string</code> | css selector of your form | **Example** ```html <body> <form id="myForm"> <input name="amount"> <button type="submit">Submit</button> </form> <script> widget.interceptSubmitForm('#myForm'); </script> </body> ``` <a name="w_HtmlMultiWidget+useCheckoutAutoSubmit" id="w_HtmlMultiWidget+useCheckoutAutoSubmit" href="#user-content-w_HtmlMultiWidget+useCheckoutAutoSubmit"> </a> ### htmlWidget.useCheckoutAutoSubmit() This method hides a submit button and automatically execute form submit **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) **Overrides**: [<code>useCheckoutAutoSubmit</code>](#user-content-w_HtmlMultiWidget+useCheckoutAutoSubmit) <a name="w_HtmlMultiWidget+useAutoResize" id="w_HtmlMultiWidget+useAutoResize" href="#user-content-w_HtmlMultiWidget+useAutoResize"> </a> ### htmlWidget.useAutoResize() Use this method for resize iFrame according content height **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) **Overrides**: [<code>useAutoResize</code>](#user-content-w_HtmlMultiWidget+useAutoResize) **Example** ```javascript widget.useAutoResize(); ``` <a name="w_MultiWidget+setStyles" id="w_MultiWidget+setStyles" href="#user-content-w_MultiWidget+setStyles"> </a> ### htmlWidget.setStyles(fields) Object contain styles for widget **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) **Overrides**: [<code>setStyles</code>](#user-content-w_MultiWidget+setStyles) | Param | Type | Description | | --- | --- | --- | | fields | [<code>IStyles</code>](#user-content-w_IStyles) | name of styles which can be shown in widget [STYLE](#user-content-w_STYLE) | **Example** ```javascript widget.setStyles({ background_color: 'rgb(0, 0, 0)', border_color: 'yellow', text_color: '#FFFFAA', button_color: 'rgba(255, 255, 255, 0.9)', font_size: '20px' fort_family: 'fantasy' }); ``` <a name="w_MultiWidget+usePhoneCountryMask" id="w_MultiWidget+usePhoneCountryMask" href="#user-content-w_MultiWidget+usePhoneCountryMask"> </a> ### htmlWidget.usePhoneCountryMask([options]) Method to set a country code mask for the phone input. **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) **Overrides**: [<code>usePhoneCountryMask</code>](#user-content-w_MultiWidget+usePhoneCountryMask) | Param | Type | Description | | --- | --- | --- | | [options] | <code>object</code> | Options for configure the phone mask. | | [options.default_country] | <code>string</code> | Set a default country for the mask. | | [options.preferred_countries] | <code>Array.<string></code> | Set list of preferred countries for the top of the select box . | | [options.only_countries] | <code>Array.<string></code> | Set list of countries to show in the select box. | **Example** ```javascript widget.usePhoneCountryMask(); ``` **Example** ```javascript widget.usePhoneCountryMask({ default_country: 'au', preferred_countries: ['au', 'gb'], only_countries: ['au', 'gb', 'us', 'ua'] }); ``` <a name="w_MultiWidget+setTexts" id="w_MultiWidget+setTexts" href="#user-content-w_MultiWidget+setTexts"> </a> ### htmlWidget.setTexts(fields) Method for set different texts inside the widget **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) **Overrides**: [<code>setTexts</code>](#user-content-w_MultiWidget+setTexts) | Param | Type | Description | | --- | --- | --- | | fields | [<code>ITexts</code>](#user-content-w_ITexts) | name of text items which can be shown in widget [TEXT](#user-content-w_TEXT) | **Example** ```javascript widget.setTexts({ title: 'Your card', finish_text: 'Payment resource was successfully accepted', title_description: '* indicates required field', submit_button: 'Save', submit_button_processing: 'Load...', }); ``` <a name="w_MultiWidget+setElementStyle" id="w_MultiWidget+setElementStyle" href="#user-content-w_MultiWidget+setElementStyle"> </a> ### htmlWidget.setElementStyle(element, [state], styles) Method for set styles for different elements and states **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) **Overrides**: [<code>setElementStyle</code>](#user-content-w_MultiWidget+setElementStyle) | Param | Type | Description | | --- | --- | --- | | element | <code>string</code> | type of element for styling. These elements are available [STYLABLE_ELEMENT](#user-content-w_STYLABLE_ELEMENT) | | [state] | <code>string</code> | state of element for styling. These states are available [STYLABLE_ELEMENT_STATE](#user-content-w_STYLABLE_ELEMENT_STATE) | | styles | [<code>IElementStyleInput</code>](#user-content-w_IElementStyleInput) \| [<code>IElementStyleSubmitButton</code>](#user-content-w_IElementStyleSubmitButton) \| [<code>IElementStyleLabel</code>](#user-content-w_IElementStyleLabel) \| [<code>IElementStyleTitle</code>](#user-content-w_IElementStyleTitle) \| [<code>IElementStyleTitleDescription</code>](#user-content-w_IElementStyleTitleDescription) | styles list | **Example** ```javascript widget.setElementStyle('input', { border: 'green solid 1px' }); widget.setElementStyle('input', 'focus', { border: 'blue solid 1px' }); widget.setElementStyle('input', 'error', { border: 'red solid 1px' }); ``` <a name="w_MultiWidget+setFormValues" id="w_MultiWidget+setFormValues" href="#user-content-w_MultiWidget+setFormValues"> </a> ### htmlWidget.setFormValues(fieldValues) The method to set the predefined values for the form fields inside the widget **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) **Overrides**: [<code>setFormValues</code>](#user-content-w_MultiWidget+setFormValues) | Param | Type | Description | | --- | --- | --- | | fieldValues | <code>Object</code> | Key of object is one of [FORM_FIELD](#user-content-w_FORM_FIELD), The object value is what we are expecting | **Example** ```javascript widget.setFormValues({ email: 'predefined@email.com', card_name: 'Houston' }); ``` <a name="w_MultiWidget+setFormLabels" id="w_MultiWidget+setFormLabels" href="#user-content-w_MultiWidget+setFormLabels"> </a> ### htmlWidget.setFormLabels(fieldLabels) The method to set custom form field labels **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) **Overrides**: [<code>setFormLabels</code>](#user-content-w_MultiWidget+setFormLabels) | Param | Type | Description | | --- | --- | --- | | fieldLabels | <code>Object</code> | Key of object is one of [FORM_FIELD](#user-content-w_FORM_FIELD), The object value is what we are expecting | **Example** ```javascript widget.setFormPlaceholders({ card_name: 'Card Holder Name', email: 'Email For Receipt' }) ``` <a name="w_MultiWidget+setFormPlaceholders" id="w_MultiWidget+setFormPlaceholders" href="#user-content-w_MultiWidget+setFormPlaceholders"> </a> ### htmlWidget.setFormPlaceholders(fieldPlaceholders) The method to set custom form fields placeholders **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) **Overrides**: [<code>setFormPlaceholders</code>](#user-content-w_MultiWidget+setFormPlaceholders) | Param | Type | Description | | --- | --- | --- | | fieldPlaceholders | <code>Object</code> | Key of object is one of [FORM_FIELD](#user-content-w_FORM_FIELD), Value of object is expected placeholder | **Example** ```javascript widget.setFormPlaceholders({ card_name: 'Input your card holder name...', email: 'Input your email, like test@example.com' }) ``` <a name="w_MultiWidget+setIcons" id="w_MultiWidget+setIcons" href="#user-content-w_MultiWidget+setIcons"> </a> ### ~~htmlWidget.setIcons()~~ ***Deprecated*** The method to change the widget icons **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) **Overrides**: [<code>setIcons</code>](#user-content-w_MultiWidget+setIcons) <a name="w_MultiWidget+setHiddenElements" id="w_MultiWidget+setHiddenElements" href="#user-content-w_MultiWidget+setHiddenElements"> </a> ### htmlWidget.setHiddenElements(elements) Using this method you can set hidden elements inside widget **Kind**: instance method of [<code>HtmlWidget</code>](#user-content-w_HtmlWidget) **Overrides**: [<code>setHiddenElements</code