@paydock/client-sdk NPM

Client-sdk

It is a solution for collecting and handling payment sources in secure way.

With SDK you can create a payment form widget as an independent part or insert use inside your form.

The SDK supports methods for customization of widget by your needs (styling, form fields, etc)

Other information

To work with the widget you will need public_key or access_token (see Authentication)

Also you will need added gateway (see API Reference by gateway)

Get started

With package manager

To install with package manager, enter the following command:

npm install @paydock/client-sdk

You can use ES2015 or TypeScript modules

@paydock/client-sdk/widget

Also can use UMD module (global visibility, see above)

@paydock/client-sdk/bundles/widget.umd.js

@paydock/client-sdk/bundles/widget.umd.min.js

// ES2015 / TypeScript

import { HtmlWidget } from '@paydock/client-sdk/widget';

let widget = new HtmlWidget('#selector', 'publicKey', 'gatewayId');

<script src="@paydock/client-sdk/bundles/widget.umd.min.js"></script>
<script>
    var widget = new paydock.HtmlWidget('#tag', 'publicKey', 'gatewayId');
</script>

Download from CDN

You should begin by including the library in your page.

Add this script tag to your page to get started with with the url below:

Compressed version for production https://widget.paydock.com/sdk/latest/widget.umd.min.js

Full version for development and debug https://widget.paydock.com/sdk/latest/widget.umd.js

Also can download library the production version or the development version

The library will always be available via the global variable paydock.

Also for more advanced use, the library has UMD format, thus can be used in requireJs, webpack, etc.

<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js"></script>
<script>
    var widget = new paydock.HtmlWidget('#tag', 'publicKey', 'gatewayId');
</script>

Widget

You can find description of all methods and parameters here

A payment form where it is possible to enter card data/bank accounts and then receive a one-time token for charges, subscriptions etc. This form can be customized, you can customize the fields and set styles. It is possible in real-time to monitor the actions of user with widget and get information about payment-source using events.

Widget simple example

Container

<div id="widget"></div>

You must create a container for the widget. Inside this tag, the widget will be initialized

Initialization

var widget = new paydock.HtmlWidget('#widget', 'publicKey');
widget.load();

// ES2015 | TypeScript

import { HtmlWidget } from '@paydock/client-sdk/widget';
    
var widget = new HtmlWidget('#widget', 'publicKey');
widget.load();

Then write only need 2 lines of code in js to initialize widget

Full example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>iframe {border: 0;width: 100%;height: 300px;}</style>
</head>
<body>
    <form id="paymentForm">
        <div id="widget"></div>
        <input name="payment_source_token" id="payment_source_token" type="hidden">
    </form>
    <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
    <script>
        var widget = new paydock.HtmlWidget('#widget', 'publicKey');
        widget.onFinishInsert('input[name="payment_source_token"]', 'payment_source');
        widget.load();
    </script>
</body>
</html>

Widget advanced example

Customization

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'
	});

This example shows how you can customize to your needs and design

Customization from html

<div id="widget"
	 widget-style="text-color: #FFFFAA; border-color: #yellow"
	 title="Payment form"
	 finish-text="Payment resource was successfully accepted"></div>

This example shows how you can set style and texts from html

Settings

widget.setRefId('id'); // your unique identifier to identify the data

widget.setFormFields(['phone', 'email']); // add additional fields for form of widget

widget.setSupportedCardIcons(['mastercard', 'visa']); // add icons of supported card types

This example shows how you can use a lot of other methods to settings your form

Full example

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>iframe {border: 0;width: 100%;height: 400px;}</style>
</head>
<body>
<form id="paymentForm">
    <div id="widget"
        widget-style="text-color: #FFFFAA; border-color: #yellow"
        title="Payment form"
        finish-text="Payment resource was successfully accepted"></div>
</form>

<script src="https://widget.paydock.com/sdk/latest/widget.umd.js" ></script>
<script>
	var widget = new paydock.HtmlWidget('#widget', 'publicKey', 'gatewayId');
	
	widget.setSupportedCardIcons(['mastercard', 'visa']);
	widget.setFormFields(['phone', 'email']);
	widget.setRefId('custom-ref-id');
    widget.onFinishInsert('input[name="payment_source_token"]', 'payment_source');z
	
	widget.load();
</script>
</script>
</body>
</html>

Classes

Constants

Interfaces

IFormValidation

Interface of data from validation event.

Kind: global interface

Param	Type	Description
event	string	Event name
purpose	string	System variable. Purpose of event
message_source	string	System variable. Event source
ref_id	string	Custom value for identify result of processed operation
form_valid	boolean	Form is valid
invalid_fields	array	Invalid form fields
invalid_showed_fields	array	List of fields on which the error is already displayed
validators	array	List of validators with fields

IEventMetaData

Interface of data from event.

Kind: global interface

Param	Type	Description
event	string	Event name
purpose	string	System variable. Purpose of event
message_source	string	System variable. Event source
ref_id	string	Custom value for identify result of processed operation
configuration_token	string	Token received from our API with widget data
type	string	Payment type 'card', 'bank_account'
gateway_type	string	Gateway type
card_number_last4	string	Last 4 digit of your card
card_scheme	string	Card scheme
card_number_length	number	Card number length
account_name	string	Bank account account name
account_number	string	Bank account account number

IEventAfterLoadData

Interface of data from event.

Kind: global interface

Param	Type	Description
event	string	Event name
purpose	string	System variable. Purpose of event
message_source	string	System variable. Event source
ref_id	string	Custom value for identify result of processed operation

IEventFinishData

Interface of data from event.

Kind: global interface

Param	Type	Description
event	string	Event name
purpose	string	System variable. Purpose of event
message_source	string	System variable. Event source
ref_id	string	Custom value for identify result of processed operation
payment_source	string	One time token. Result from this endpoint API docs

IPayPalMeta

Interface for PayPal checkout meta information

Kind: global interface

Param	Type	Description
brand_name	string	A label that overrides the business name in the PayPal account on the PayPal hosted checkout pages
cart_border_color	string	The HTML hex code for your principal identifying color
reference	string	Merchant Customer Service number displayed on the PayPal pages
email	string	The consumer’s email
hdr_img	string	URL for the image you want to appear at the top left of the payment page
logo_img	string	A URL to your logo image
pay_flow_color	string	Sets the background color for the payment page. By default, the color is white.
first_name	string	The consumer’s given names
last_name	string	The consumer’s surname
address_line	string	Street address
address_line2	string	Second line of the address
address_city	string	City
address_state	string	State
address_postcode	string	Postcode
address_country	string	Country
phone	string	The consumer’s phone number in E.164 international notation (Example: +12345678901)
hide_shipping_address	boolean	Determines whether PayPal displays shipping address fields on the PayPal pages

IStyles

Interface for classes that represent widget's styles.

Kind: global interface

Param	Type
background_color	string
text_color	string
border_color	string
button_color	string
error_color	string
success_color	string
font_size	string
font_family	string

ITexts

Interface for classes that represent widget's text.

Kind: global interface

Param	Type
title	string
title_h1	string
title_h2	string
title_h3	string
title_h4	string
title_h5	string
title_h6	string
finish_text	string
title_description	string
submit_button	string
submit_button_processing	string

IBamboraMeta

Interface for Bamboora meta information

Kind: global interface

Param	Type	Description
customer_storage_number	string	Customer storage number
tokenise_algorithm	number	Tokenise algorithm

IElementStyleInput

Interface for styling input element.

Kind: global interface

Param	Type	Description
color	string	Look more mozilla.org/color
border	string	Look more mozilla.org/color
border_radius	string	Look more mozilla.org/color
background_color	string	Look more mozilla.org/color
height	string	Look more mozilla.org/color
text_decoration	string	Look more mozilla.org/color
font_size	string	Look more mozilla.org/color
font_family	string	Look more mozilla.org/color
transition	string	Look more mozilla.org/color
line_height	string	Look more mozilla.org/color
font_weight	string	Look more mozilla.org/color
padding	string	Look more mozilla.org/color
margin	string	Look more mozilla.org/color

IElementStyleSubmitButton

Interface for styling submit_button element.

Kind: global interface

Param	Type	Description
color	string	Look more mozilla.org/color
border	string	Look more mozilla.org/color
border_radius	string	Look more mozilla.org/color
background_color	string	Look more mozilla.org/color
text_decoration	string	Look more mozilla.org/color
font_size	string	Look more mozilla.org/color
font_family	string	Look more mozilla.org/color
padding	string	Look more mozilla.org/color
margin	string	Look more mozilla.org/color
transition	string	Look more mozilla.org/color
line_height	string	Look more mozilla.org/color
font_weight	string	Look more mozilla.org/color
opacity	string	Look more mozilla.org/color

IElementStyleLabel

Interface for styling label element.

Kind: global interface

Param	Type	Description
color	string	Look more mozilla.org/color
text_decoration	string	Look more mozilla.org/color
font_size	string	Look more mozilla.org/color
font_family	string	Look more mozilla.org/color
line_height	string	Look more mozilla.org/color
font_weight	string	Look more mozilla.org/color
padding	string	Look more mozilla.org/color
margin	string	Look more mozilla.org/color

IElementStyleTitle

Interface for styling title element.

Kind: global interface

Param	Type	Description
color	string	Look more mozilla.org/color
text_decoration	string	Look more mozilla.org/color
font_size	string	Look more mozilla.org/color
font_family	string	Look more mozilla.org/color
line_height	string	Look more mozilla.org/color
font_weight	string	Look more mozilla.org/color
padding	string	Look more mozilla.org/color
margin	string	Look more mozilla.org/color
'text-align',	string	Look more mozilla.org/color

IElementStyleTitleDescription

Interface for styling title_description element.

Kind: global interface

Param	Type	Description
color	string	Look more mozilla.org/color
text_decoration	string	Look more mozilla.org/color
font_size	string	Look more mozilla.org/color
font_family	string	Look more mozilla.org/color
line_height	string	Look more mozilla.org/color
font_weight	string	Look more mozilla.org/color
padding	string	Look more mozilla.org/color
margin	string	Look more mozilla.org/color
'text-align',	string	Look more mozilla.org/color

ITriggerData

Interface for classes that represent a trigger data.

Kind: global interface

Param	Type
configuration_token	string
tab_number	string
elements	string
form_values	string

HtmlWidget ⇐ HtmlMultiWidget

Class Widget include method for working on html and include extended by HtmlMultiWidget methods

Kind: global class
Extends: HtmlMultiWidget, MultiWidget

HtmlWidget ⇐ HtmlMultiWidget

new exports.HtmlWidget(selector, publicKey, gatewayID, paymentType, purpose)

Param	Type	Default	Description
selector	string		Selector of html element. Container for widget
publicKey	string		PayDock users public key
gatewayID	string	"default"	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	string	"card"	Type of payment source which shows in widget form. Available parameters : “card”, “bank_account”.
purpose	string	"payment_source"	Purpose of widget form. Available parameters: ‘payment_source’, ‘card_payment_source_with_cvv’, ‘card_payment_source_without_cvv’

Example

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

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 HtmlWidget

Param	Type	Description
url	string	Your endpoint for post request.

Example

widget.setWebHookDestination('http://google.com');

htmlWidget.setSuccessRedirectUrl(url)

URL to which the Customer will be redirected to after the success finish

Kind: instance method of HtmlWidget

Param	Type
url	string

Example

widget.setSuccessRedirectUrl('google.com/search?q=success');

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 HtmlWidget

Param	Type
url	string

Example

widget.setErrorRedirectUrl('google.com/search?q=error');

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 HtmlWidget

Param	Type	Description
fields	'Array' .<string>	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

Example

widget.setFormFields(['phone', 'email', 'first_name*']);

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 HtmlWidget
Overrides: setFormElements

Param	Type	Description
elements	'Array' .<Object>	List of elements
elements[].field	string	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
elements[].placeholder	string	Set custom placeholders in form fields
elements[].label	string	Set a custom labels near the form field
elements[].value	string	Set predefined values for the form field

Example

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',
      },
  ])

htmlWidget.setMeta(object)

The method to set meta information for the checkout page

Kind: instance method of HtmlWidget

Param	Type	Description
object	IPayPalMeta \| IBamboraMeta	data which can be shown on checkout page IPayPalMeta IBamboraMeta

Example

config.setMeta({
            brand_name: 'paydock',
            reference: '15',
            email: 'wault@paydock.com'
        });

htmlWidget.load()

The final method to beginning, the load process of widget to html

Kind: instance method of HtmlWidget

htmlWidget.on(eventName, cb) ⇒ Promise.<(IEventData|IEventMetaData|IEventFinishData|IFormValidation)> | void

Listen to events of widget

Kind: instance method of HtmlWidget

Param	Type	Description
eventName	string	Available event names EVENT
cb	listener

Example

widget.on('form_submit', function (data) {
     console.log(data);
});
// or
 widget.on('form_submit').then(function (data) {
     console.log(data);
});

htmlWidget.trigger(triggers, data)

This callback will be called for every trigger

Kind: instance method of HtmlWidget

Param	Type	Description
triggers	triggerName	submit_form, tab
data	ITriggerData	which will be sending to widget

htmlWidget.getValidationState() ⇒ IFormValidation

Using this method you can get validation state information

Kind: instance method of HtmlWidget
Returns: IFormValidation - Form validation object

htmlWidget.isValidForm() ⇒ boolean

Using this method you can check if the form is valid

Kind: instance method of HtmlWidget
Returns: boolean - Form is valid

htmlWidget.isInvalidField(field) ⇒ boolean

Using this method you can check if a specific form field is invalid

Kind: instance method of HtmlWidget
Returns: boolean - Field is invalid

Param	Type	Description
field	string	Field name

htmlWidget.isFieldErrorShowed(field) ⇒ boolean

Using this method you can check if an error is displayed on a specific field

Kind: instance method of HtmlWidget
Returns: boolean - Error is showed on field

Param	Type	Description
field	string	Field name

htmlWidget.isInvalidFieldByValidator(field, validator) ⇒ boolean

Using this method you can check if a specific field is invalid

Kind: instance method of HtmlWidget
Returns: boolean - Field is invalid by validator

Param	Type	Description
field	string	Field name
validator	string	Validator name. Available validators: `required, cardNumberValidator, expireDateValidation`

htmlWidget.hide(saveSize)

Using this method you can hide widget after load

Kind: instance method of HtmlWidget

Param	Type	Default	Description
saveSize	boolean	false	using this param you can save iframe's size

htmlWidget.show()

Using this method you can show widget after using hide method

Kind: instance method of HtmlWidget

htmlWidget.reload()

Using this method you can reload widget

Kind: instance method of HtmlWidget

htmlWidget.hideElements(elements)

Using this method you can hide any elements inside widget

Kind: instance method of HtmlWidget

Param	Type	Description
elements	'Array' .<string>	list of element which can be hidden ELEMENT		FORM_FIELD

Example

widget.hideElements(['submit_button', 'email']);

htmlWidget.showElements(elements)

Using this method you can show any elements inside widget

@example widget.showElements('submit_button', 'email');

Kind: instance method of HtmlWidget

Param	Type	Description
elements	'Array' .<string>	list of element which can be showed ELEMENT		FORM_FIELD

htmlWidget.updateFormValues(fieldValues)

Method for update values for form fields inside the widget

Kind: instance method of HtmlWidget

Param	Type	Description
fieldValues	IFormValues	Fields with values

Example

widget.updateFormValues({
      email: 'predefined@email.com',
      card_name: 'Houston'
  });

htmlWidget.onFinishInsert(selector, dataType)

After finish event of widget, data (dataType) will be insert to input (selector)

Kind: instance method of HtmlWidget

Param	Type	Description
selector	string	css selector . [] #
dataType	string	data type of IEventData object.

htmlWidget.interceptSubmitForm(selector)

Widget will intercept submit of your form for processing widget

Process: click by submit button in your form --> submit widget ---> submit your form

Kind: instance method of HtmlWidget
Note: submit button in widget will be hidden.

Param	Type	Description
selector	string	css selector of your form

Example

<form id="myForm">
     <input name="amount">
     <button type="submit">Submit</button>
 </form>
<!--
-->
<script>
    widget.interceptSubmitForm('#myForm');
</script>

htmlWidget.useCheckoutAutoSubmit()

This method hides a submit button and automatically execute form submit

Kind: instance method of HtmlWidget

htmlWidget.useAutoResize()

Use this method for resize iFrame according content height

Kind: instance method of HtmlWidget
Example

widget.useAutoResize();

htmlWidget.setStyles(fields)

Object contain styles for widget

Kind: instance method of HtmlWidget

Param	Type	Description
fields	IStyles	name of styles which can be shown in widget STYLE

Example

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'
  });

htmlWidget.usePhoneCountryMask(options)

Method to set a country code mask for the phone input.

Kind: instance method of HtmlWidget

Param	Type	Description
options	object	Options for configure the phone mask.
options.default_country	string	Set a default country for the mask.
options.preferred_countries	'Array' .<string>	Set list of preferred countries for the top of the select box .
options.only_countries	'Array' .<string>	Set list of countries to show in the select box.

Example

widget.usePhoneCountryMask();

Example

widget.usePhoneCountryMask({
      default_country: 'au',
      preferred_countries: ['au', 'gb'],
      only_countries: ['au', 'gb', 'us', 'ua']
  });

htmlWidget.setTexts(fields)

Method for set different texts inside the widget

Kind: instance method of HtmlWidget

Param	Type	Description
fields	ITexts	name of text items which can be shown in widget TEXT

Example

widget.setTexts({
      title: 'Your card',
      finish_text: 'Payment resource was successfully accepted',
      title_description: '* indicates required field',
      submit_button: 'Save',
      submit_button_processing: 'Load...',
  });

htmlWidget.setElementStyle(element, state, styles)

Method for set styles for different elements and states

Kind: instance method of HtmlWidget

Param	Type	Description
element	string	type of element for styling. These elements are available STYLABLE_ELEMENT
state	string	state of element for styling. These states are available STYLABLE_ELEMENT_STATE
styles	IElementStyleInput \| IElementStyleSubmitButton \| IElementStyleLabel \| IElementStyleTitle \| IElementStyleTitleDescription	styles list

Example

widget.setElementStyle('input', {
  border: 'green solid 1px'
});

widget.setElementStyle('input', 'focus', {
  border: 'blue solid 1px'
});

widget.setElementStyle('input', 'error', {
 border: 'red solid 1px'
});

htmlWidget.setFormValues(fieldValues)

The method to set the predefined values for the form fields inside the widget

Kind: instance method of HtmlWidget

Param	Type	Description
fieldValues	Object	Key of object is one of FORM_FIELD, The object value is what we are expecting

Example

widget.setFormValues({
      email: 'predefined@email.com',
      card_name: 'Houston'
  });

htmlWidget.setFormLabels(fieldLabels)

The method to set custom form field labels

Kind: instance method of HtmlWidget

Param	Type	Description
fieldLabels	Object	Key of object is one of FORM_FIELD, The object value is what we are expecting

Example

widget.setFormPlaceholders({
      card_name: 'Card Holder Name',
      email: 'Email For Receipt'
  })

htmlWidget.setFormPlaceholders(fieldPlaceholders)

The method to set custom form fields placeholders

Kind: instance method of HtmlWidget

Param	Type	Description
fieldPlaceholders	Object	Key of object is one of FORM_FIELD, Value of object is expected placeholder

Example

widget.setFormPlaceholders({
      card_name: 'Input your card holder name...',
      email: 'Input your email, like test@example.com'
  })

htmlWidget.setIcons()

The method to change the widget icons

Kind: instance method of HtmlWidget
Todo

DEPRECATED

htmlWidget.setHiddenElements(elements)

Using this method you can set hidden elements inside widget

Kind: instance method of HtmlWidget

Param	Type	Description
elements	'Array' .<string>	list of element which can be hidden ELEMENT		FORM_FIELD

Example

widget.setHiddenElements(['submit_button', 'email']);

htmlWidget.setRefId(refId)

Current method can set custom ID to identify the data in the future

Kind: instance method of HtmlWidget

Param	Type	Description
refId	string	custom id

Example

widget.setRefId('id');

htmlWidget.useGatewayFieldValidation()

Current method can add visual validation from gateway to widget's form fields

Kind: instance method of HtmlWidget
Example

widget.useGatewayFieldValidation();

htmlWidget.setSupportedCardIcons(elements, validateCardNumberInput)

Current method can set icons of supported card types

Kind: instance method of HtmlWidget

Param	Type	Description
elements	'Array' .<string>	SUPPORTED_CARD_TYPES
validateCardNumberInput	boolean	validateCardNumberInput=false - using this param you allow validation for card number input on supported card types

Example

widget.setSupportedCardIcons(['mastercard', 'visa'], validateCardNumberInput);

htmlWidget.setEnv(env, alias)

Current method can change environment. By default environment = sandbox. Also we can change domain alias for this environment. By default domain_alias = paydock.com

Kind: instance method of HtmlWidget

Param	Type	Description
env	string	sandbox, production
alias	string	Own domain alias

Example

widget.setEnv('production', 'paydock.com');

htmlWidget.loadIFrameUrl()

Method for creating iframe url

Kind: instance method of HtmlWidget
Example

widget.loadIFrameUrl(function (url) {
     console.log(url);
}, function (errors) {
     console.log(errors);
});

htmlWidget.setLanguage(code)

Method for setting a custom language code

Kind: instance method of HtmlWidget

Param	Type	Description
code	string	ISO 639-1

Example

config.setLanguage('en');

HtmlMultiWidget ⇐ MultiWidget

Class HtmlMultiWidget include method for working with html

Kind: global class
Extends: MultiWidget

HtmlMultiWidget ⇐ MultiWidget
- new exports.HtmlMultiWidget(selector, publicKey, conf)
- .load()
- .on(eventName, [cb]) ⇒ Promise.<(IEventData|IEventMetaData|IEventFinishData|IFormValidation)> | void
- .trigger(triggers, data)
- .getValidationState() ⇒ IFormValidation
- .isValidForm() ⇒ boolean
- .isInvalidField(field) ⇒ boolean
- .isFieldErrorShowed(field) ⇒ boolean
- .isInvalidFieldByValidator(field, validator) ⇒ boolean
- .hide([saveSize])
- .show()
- .reload()
- .hideElements(elements)
- .showElements(elements)
- .updateFormValues(fieldValues)
- .onFinishInsert(selector, dataType)
- .interceptSubmitForm(selector)
- .useCheckoutAutoSubmit()
- .useAutoResize()
- .setStyles(fields)
- .usePhoneCountryMask([options])
- .setTexts(fields)
- .setElementStyle(element, [state], styles)
- .setFormValues(fieldValues)
- .setFormLabels(fieldLabels)
- .setFormPlaceholders(fieldPlaceholders)
- .setFormElements(elements)
- .setIcons()
- .setHiddenElements(elements)
- .setRefId(refId)
- .useGatewayFieldValidation()
- .setSupportedCardIcons(elements, validateCardNumberInput)
- .setEnv(env, [alias])
- .loadIFrameUrl()
- .setLanguage(code)

new exports.HtmlMultiWidget(selector, publicKey, conf)

Param	Type	Description
selector	string	Selector of html element. Container for widget
publicKey	string	PayDock users public key
conf	Configuration \| string \| Array.<Configuration> \| Array.<string>	exemplars Configuration class OR configuration token

Example

var widget = new MultiWidget('#widget', 'publicKey','configurationToken'); // With a pre-created configuration token

var widget = new MultiWidget('#widget', 'publicKey',['configurationToken', 'configurationToken2']); // With pre-created configuration tokens

var widget = new MultiWidget('#widget', 'publicKey', new Configuration('gatewayId')); With Configuration

var widget = new MultiWidget('#widget', 'publicKey',[ With Configurations
     Configuration(), // default gateway_id,
     Configuration('not_configured'), // without gateway,
     Configuration('gatewayId'),
     Configuration('gatewayId', 'bank_account')
]);

htmlMultiWidget.load()

The final method to beginning, the load process of widget to html

Kind: instance method of HtmlMultiWidget

htmlMultiWidget.on(eventName, cb) ⇒ Promise.<(IEventData|IEventMetaData|IEventFinishData|IFormValidation)> | void

Listen to events of widget

Kind: instance method of HtmlMultiWidget

Param	Type	Description
eventName	string	Available event names EVENT
cb	listener

Example

widget.on('form_submit', function (data) {
     console.log(data);
});
// or
 widget.on('form_submit').then(function (data) {
     console.log(data);
});

htmlMultiWidget.trigger(triggers, data)

This callback will be called for every trigger

Kind: instance method of HtmlMultiWidget

Param	Type	Description
triggers	triggerName	submit_form, tab
data	ITriggerData	which will be sending to widget

htmlMultiWidget.getValidationState() ⇒ IFormValidation

Using this method you can get validation state information

Kind: instance method of HtmlMultiWidget
Returns: IFormValidation - Form validation object

htmlMultiWidget.isValidForm() ⇒ boolean

Using this method you can check if the form is valid

Kind: instance method of HtmlMultiWidget
Returns: boolean - Form is valid

htmlMultiWidget.isInvalidField(field) ⇒ boolean

Using this method you can check if a specific form field is invalid

Kind: instance method of HtmlMultiWidget
Returns: boolean - Field is invalid

Param	Type	Description
field	string	Field name

htmlMultiWidget.isFieldErrorShowed(field) ⇒ boolean

Using this method you can check if an error is displayed on a specific field

Kind: instance method of HtmlMultiWidget
Returns: boolean - Error is showed on field

Param	Type	Description
field	string	Field name

htmlMultiWidget.isInvalidFieldByValidator(field, validator) ⇒ boolean

Using this method you can check if a specific field is invalid

Kind: instance method of HtmlMultiWidget
Returns: boolean - Field is invalid by validator

Param	Type	Description
field	string	Field name
validator	string	Validator name. Available validators: `required, cardNumberValidator, expireDateValidation`

htmlMultiWidget.hide(saveSize)

Using this method you can hide widget after load

Kind: instance method of HtmlMultiWidget

Param	Type	Default	Description
saveSize	boolean	false	using this param you can save iframe's size

htmlMultiWidget.show()

Using this method you can show widget after using hide method

Kind: instance method of HtmlMultiWidget

htmlMultiWidget.reload()

Using this method you can reload widget

Kind: instance method of HtmlMultiWidget

htmlMultiWidget.hideElements(elements)

Using this method you can hide any elements inside widget

Kind: instance method of HtmlMultiWidget

Param	Type	Description
elements	'Array' .<string>	list of element which can be hidden ELEMENT		FORM_FIELD

Example

paydock widget client-sdk sdk typeScript es2015

@types/applepayjs @types/googlepay @stripe/stripe-js

@infinitebrahmanuniverse/nolb-_pay @everything-registry/sub-chunk-708 @zalastax/nolb-_pay

9 months ago

11 months ago

12 months ago

12 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago