Paydock client sdk
npm install @paydock/client-sdkIt 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)
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)
The Client SDK ships in JavaScript ES6 (EcmaScript 2015) in three different
formats (CJS, ESM and UMD) along with respective TypeScript declarations. Below,
we exemplify how to import each format.
Our NPM package is compatible with all package managers (e.g., npm, yarn,pnpm, bun). Using npm the following command would add the Client SDK as a
production dependency.
``bash`
npm install @paydock/client-sdk
After installation is complete, if you are developing in NodeJS environments or
using tools that expect your JavaScript code to be in CJS format (e.g., Jest,
Karma, RequireJS, Webpack), you can import the Client SDK using CommonJS modules.
For these environments the UMD format (@paydock/client-sdk/bundles/widget.umd.js)
can also be used as a fallback. Alternatively, in case you are developing in
projects that have access to modern bundlers such as Vite or others (e.g., SPA
libs or SSR Metaframeworks), you can import the Client SDK features using ESM
through named imports or namespaced imports.
`cjs`
// module import - CommonJS/Node projects ✅
const paydock = require('@paydock/client-sdk')
const api = new paydock.Api('publicKey');
`mjs`
// named import - ESM projects or TypeScript projects ✅
import { HtmlWidget } from '@paydock/client-sdk'
const widget = new HtmlWidget('#selector', 'publicKey', 'gatewayId');
`mjs`
// namespaced import - ESM projects or TypeScript projects ✅
import * as Paydock from '@paydock/client-sdk'
const widget = new Paydock.HtmlWidget('#selector', 'publicKey', 'gatewayId');
`js`
// default import - Not officially supported . They are handled differently by different tools / settings!
❌
import paydock from '@paydock/client-sdk'
>>> "Uncaught SyntaxError: The requested module does not provide an export named 'default'"
For browser environments, you can import the Client SDK directly from our CDN to
your project's HTML. To accomplish this, include the Client SDK in your page
using one and only of the two script tags below. After this step you will be
able to access the Client SDK features via the global variable paydock.
For production we recommend using the compressed version (.min.js) since
it will result in faster loading times for your end users.
- 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
You may download the production version of the Client SDK scripts [here][min],
and, the development version [here][max].
[min]: https://widget.paydock.com/sdk/latest/widget.umd.min.js
[max]: https://widget.paydock.com/sdk/latest/widget.umd.js
For more advanced use-cases, the library has UMD
format that can be used in RequireJS, Webpack, etc.
`html`
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.
`html`
You must create a container for the widget. Inside this tag, the widget will be initialized
`javascript`
var widget = new paydock.HtmlWidget('#widget', 'publicKey');
widget.load();
`javascript
// ES2015 | TypeScript
import { HtmlWidget } from '@paydock/client-sdk';
var widget = new HtmlWidget('#widget', 'publicKey');
widget.load();
`
Then write only need 2 lines of code in js to initialize widget
`html`
`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'
});
This example shows how you can customize to your needs and design
`html
widget-style="text-color: #FFFFAA; border-color: #yellow"
title="Payment form"
finish-text="Payment resource was successfully accepted">
This example shows how you can set style and texts from html
$3
javascript
widget.setRefId('id'); // your unique identifier to identify the datawidget.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
$3
Overview
Error events are emitted when an error occurs during widget operations. These events provide detailed information about the error, including its category, cause, and contextual details.
Error Event Structure
$3
| Property | Type | Description |
|----------|------|-------------|
|
| string | Always set to "error" |
| purpose | string | Indicates the purpose of the action that triggered the error event (e.g., "payment_source") |
| message_source | string | Source of the message (e.g., "widget.paydock") |
| ref_id | string | Reference ID for the operation |
| widget_id | string | Unique identifier of the widget instance |
| error | object | Error object containing error information |$3
The
error object contains detailed information about the error:| Property | Type | Description |
|----------|------|-------------|
|
category | string | High-level error classification |
| cause | string | Specific error cause |
| retryable | boolean | Indicates if the operation can be retried |
| details | object | Additional error context |Error Categories
| Category | Description |
|----------|-------------|
|
configuration | Configuration-related errors |
| identity_access_management | Authentication and authorization errors |
| internal | Internal system errors |
| process | Process and operation errors |
| resource | Resource-related errors |
| validation | Input validation errors |Error Causes
| Cause | Category | Description |
|-------|----------|-------------|
|
aborted | process | Operation was aborted |
| access_forbidden | identity | Access to resource is forbidden |
| already_exists | validation | Resource already exists |
| canceled | process | Operation was canceled |
| invalid_configuration | configuration | Invalid widget configuration |
| invalid_input | validation | Invalid input provided |
| not_found | resource | Requested resource not found |
| not_implemented | process | Requested feature not implemented |
| rate_limited | process | Too many requests |
| server_busy | process | Server is too busy to handle request |
| service_unreachable | process | Unable to reach required service |
| unauthorized | identity | Authentication required |
| unknown_error | internal | Unexpected error occurred |
| unprocessable_entity | validation | Valid input but cannot be processed |Error Details Object
| Property | Type | Description |
|----------|------|-------------|
|
cause | string | Matches the top-level error cause |
| contextId | string | Context identifier (usually matches widget_id) |
| message | string | Human-readable error message |
| timestamp | string | ISO 8601 timestamp of when the error occurred |Example
`javascript
widget.hideUiErrors(); // hide default UI errors and handle errors by listening to error events with widget.on('error')widget.on('error', (error) => {
console.log(error);
// {
// "event": "error",
// "purpose": "payment_source",
// "message_source": "widget.paydock",
// "ref_id": "",
// "widget_id": "d4744f30-dcf5-168e-7f78-c8273a3401d4",
// "error": {
// "category": "process",
// "cause": "service_unreachable",
// "details": {
// "cause": "service_unreachable",
// "contextId": "d4744f30-dcf5-168e-7f78-c8273a3401d4",
// "message": "The service is not availabe",
// "timestamp": "2025-02-13T09:30:21.157Z"
// },
// "retryable": false
// }
// }
});
`Handling Errors (Tips)
When handling errors, consider:
1. Check the
flag to determine if the operation can be retried
2. Use the category for high-level error handling logic
3. Use the cause for specific error handling cases
4. The contextId can be used for error tracking and debugging
5. The timestamp helps with error logging and debugging$3
`html
Title
id="error"
`
objectCurrent constant include available type of fields which can be included to widget
objectList of available style params for widget
objectList of available text item params for widget
objectList of available params for hide elements
objectThe list of available parameters for showing card icons
objectCurrent constant include available type of element for styling
objectCurrent constant include available states of element for styling
Record.<string, string>List of available form field validators dedicated to cards and their definition
Record.<string, string>List of available generic form field validators and their definition
objectList of available triggers
Interface for PayPal checkout meta information
Interface for classes that represent widget's styles.
Interface for classes that represent widget's text.
Interface for Bamboora meta information
Interface for styling input element.
Interface for styling submit_button element.
Interface for styling label element.
Interface for styling title element.
Interface for styling title_description element.
Interface for classes that represent a trigger data.
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 |
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 |
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 |
Kind: global interface
| Param | Type | Description |
| --- | --- | --- |
| [customer_storage_number] | string | Customer storage number |
| [tokenise_algorithm] | number | Tokenise algorithm |
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 |
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 |
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 |
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 |
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 |
Kind: global interface
| Param | Type |
| --- | --- |
| [configuration_token] | string |
| [tab_number] | string |
| [elements] | string |
| [form_values] | string |
objectKind: global constant
| Param | Type | Default |
| --- | --- | --- |
| CARD_NAME | string | "card_name" |
| CARD_NUMBER | string | "card_number" |
| EXPIRE_MONTH | string | "expire_month" |
| EXPIRE_YEAR | string | "expire_year" |
| CARD_CCV | string | "card_ccv" |
| CARD_PIN | string | "card_pin" |
| ACCOUNT_NAME | string | "account_name" |
| ACCOUNT_BSB | string | "account_bsb" |
| ACCOUNT_NUMBER | string | "account_number" |
| ACCOUNT_ROUTING | string | "account_routing" |
| ACCOUNT_HOLDER_TYPE | string | "account_holder_type" |
| ACCOUNT_BANK_NAME | string | "account_bank_name" |
| ACCOUNT_TYPE | string | "account_type" |
| FIRST_NAME | string | "first_name" |
| LAST_NAME | string | "last_name" |
| EMAIL | string | "email" |
| PHONE | string | "phone" |
| PHONE2 | string | "phone2" |
| ADDRESS_LINE1 | string | "address_line1" |
| ADDRESS_LINE2 | string | "address_line2" |
| ADDRESS_STATE | string | "address_state" |
| ADDRESS_COUNTRY | string | "address_country" |
| ADDRESS_CITY | string | "address_city" |
| ADDRESS_POSTCODE | string | "address_postcode" |
| ADDRESS_COMPANY | string | "address_company" |
objectKind: global constant
| Param | Type | Default |
| --- | --- | --- |
| BACKGROUND_COLOR | string | "background_color" |
| TEXT_COLOR | string | "text_color" |
| BORDER_COLOR | string | "border_color" |
| BUTTON_COLOR | string | "button_color" |
| ERROR_COLOR | string | "error_color" |
| SUCCESS_COLOR | string | "success_color" |
| FONT_SIZE | string | "font_size" |
| FONT_FAMILY | string | "font_family" |
objectKind: global constant
| Param | Type | Default |
| --- | --- | --- |
| TITLE | string | "title" |
| FINISH | string | "finish_text" |
objectKind: global constant
| Param | Type | Default |
| --- | --- | --- |
| SUBMIT_BUTTON | string | "submit_button" |
| TABS | string | "tabs" |
objectKind: global constant
| Param | Type | Default |
| --- | --- | --- |
| AMEX | string | "amex" |
| AUSBC | string | "ausbc" |
| DINERS | string | "diners" |
| DISCOVER | string | "discover" |
| JAPCB | string | "japcb" |
| LASER | string | "laser" |
| MASTERCARD | string | "mastercard" |
| SOLO | string | "solo" |
| VISA | string | "visa" |
| VISA_WHITE | string | "visa_white" |
| UNIONPAY | string | "unionpay" |
objectKind: global constant
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| INPUT | string | "input." | These states are available: STYLABLE_ELEMENT_STATE.ERROR, STYLABLE_ELEMENT_STATE.FOCUS. These styles are available IElementStyleInput |
| SUBMIT_BUTTON | string | "submit_button" | These states are available: STYLABLE_ELEMENT_STATE.HOVER. These styles are available IElementStyleSubmitButton |
| LABEL | string | "label." | These styles are available IElementStyleLabel |
| TITLE | string | "title." | These styles are available IElementStyleTitle |
| TITLE_DESCRIPTION | string | "title_description." | These styles are available IElementStyleTitleDescription |
objectKind: global constant
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| ERROR | string | "error" | client|server validation. This state applies to: input |
| FOCUS | string | "focus" | focus. This state applies to: input |
| HOVER | string | "hover" | focus. This state applies to: submit_button |
Record.<string, string>Kind: global constant
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| CVV | string | "cardCvvValidation" | Asserts that CVV contains zero or more digits and is a number |
| EXPIRY_DATE | string | "expireDateValidation" | Asserts value is a date in the future with format MM/YY |
| HOLDER_NAME | string | "cardHoldernameValidation" | Asserts value is a name that respects the ITU-T T.50 standard (@see https://www.itu.int/rec/T-REC-T.50/en) |
| NUMBER | string | "cardNumberValidation" | Asserts the value matches a known card scheme and as a the correct length. E.g., matches a 13, 16 or 19 digit bank card, or, a 13 to 25 digit Vii Gift card |
| PIN | string | "cardPinValidation" | Asserts the value is a number with exactly 4 digits |
Record.<string, string>Kind: global constant
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| REQUIRED | string | "required" | Asserts the input or form field has a value defined truthy value |
objectKind: global constant
| Param | Type | Default |
| --- | --- | --- |
| SUBMIT_FORM | string | "submit_form" |
| CHANGE_TAB | string | "tab" |
| HIDE_ELEMENTS | string | "hide_elements" |
| SHOW_ELEMENTS | string | "show_elements" |
| REFRESH_CHECKOUT | string | "refresh_checkout" |
| UPDATE_FORM_VALUES | string | "update_form_values" |
| INIT_CHECKOUT | string | "init_checkout" |
| INJECT_CUSTOMER_DATA | string | "inject_customer_data" |
This widget provides a list of previously added (saved) payment-sources by customer_id or reference.
The widget provides an opportunity to use events to track the process of selecting payment-sources and provide meta information about the payment-sources.
Payment-source requires a query_token that represents a pre-generated and secure token for limiting the list
payment-sources, for a specific user or reference.
In order to generate this token, you need to send a GET request to getCustomerList
where required query parameter must be id or reference. In response you get response.query_token which you can use in the widget.
`html`
You must create a container for the widget. Inside this tag, the widget will be initialized
javascript
var list = new paydock.HtmlPaymentSourceWidget('#list', 'publicKey', 'queryToken');
list.load();
`javascript
// ES2015 | TypeScriptimport { HtmlPaymentSourceWidget } from '@paydock/client-sdk';
var list = new HtmlPaymentSourceWidget('#list', 'publicKey', 'queryToken');
list.load();
`Then write only need 2 lines of code in js to initialize widget
$3
html
Title
`
Payment sources advanced example
$3
javascript
list.setStyles({
icon_size: 'small'
});
`This example shows how you can customize to your needs and design
$3
javascriptlist.filterByTypes(['card', 'checkout']); // filter by any payment source types
list.filterByGatewayIds(['gateway1']); // also other filters
list.setRefId('id'); // your unique identifier to identify the data
list.setLimit(4); // Pagination elements will show if count of elements more then argument passed
list.onSelectInsert('input[name="ps_id"]', 'payment_source_id'); // insert one-time-token to your input after finish checkout
list.on('select', function(data) {
console.log(data);
});
`This example shows how you can use a lot of other methods to settings your form
$3
html
Title
`Classes
- HtmlPaymentSourceWidget ⇐
PaymentSourceWidget
Class HtmlPaymentSourceWidget include method for working on html
- PaymentSourceWidget
Class PaymentSourceWidget include method for for creating iframe url
Constants
- EVENT :
object
List of available event's name
- STYLE :
object
List of available style params for widget
- PAYMENT_SOURCE_TYPE :
object
List of available payment source types
Typedefs
- listener--PaymentSourceWidget :
function
This callback will be called for each event in payment source widget
Interfaces
- IEventSelectData
Interface of data from event.
- IEventPaginationData
Interface of data from event.
- IEventAfterLoadData
Interface of data from event.
- IEventFinishData
Interface of data from event.
- IEventSizeData
Interface of data from event.
- IStyles
Interface for classes that represent widget's styles.
IEventSelectData
Interface of data from event.Kind: global interface
| Param | Type |
| --- | --- |
| event | string |
| purpose | string |
| message_source | string |
| [ref_id] | string |
| customer_id | string |
| payment_source_id | string |
| gateway_id | string |
| primary | boolean |
| [widget_id] | string |
| [card_number_last4] | string |
| [card_scheme] | string |
| gateway_type | string |
| [checkout_email] | string |
| payment_source_type | string |
| [account_name] | string |
| [account_number] | string |
IEventPaginationData
Interface of data from event.Kind: global interface
| Param | Type |
| --- | --- |
| event | string |
| purpose | string |
| message_source | string |
| [ref_id] | string |
| total_item | number |
| skip | number |
| limit | number |
IEventAfterLoadData
Interface of data from event.Kind: global interface
| Param | Type | Description |
| --- | --- | --- |
| event | string | The name of the event. |
| purpose | string | A system variable that states the purpose of the event. |
| message_source | string | A system variable that identifies the event source. |
| [ref_id] | string | Custom unique value that identifies result of processed operation. |
| total_item | number | Pagination param. Total item count |
| skip | number | Pagination param. Skip items from first item |
| limit | number | Pagination param. Query limit |
IEventFinishData
Interface of data from event.Kind: global interface
| Param | Type | Description |
| --- | --- | --- |
| event | string | The name of the event. |
| purpose | string | A system variable that states the purpose of the event. |
| message_source | string | A system variable that identifies the event source. |
| [ref_id] | string | Custom unique value that identifies result of processed operation. |
IEventSizeData
Interface of data from event.Kind: global interface
| Param | Type | Description |
| --- | --- | --- |
| event | number | The name of the event. |
| purpose | number | A system variable that states the purpose of the event. |
| message_source | string | A system variable that identifies the event source. |
| [ref_id] | string | Custom unique value that identifies result of processed operation. |
| height | number | Height of iFrame |
| width | number | Width of iFrame |
IStyles
Interface for classes that represent widget's styles.Kind: global interface
| Param | Type |
| --- | --- |
| [background_color] | string |
| [background_active_color] | string |
| [text_color] | string |
| [border_color] | string |
| [font_size] | string |
| [icon_size] | string |
HtmlPaymentSourceWidget ⇐ PaymentSourceWidget
Class HtmlPaymentSourceWidget include method for working on htmlKind: global class
Extends: PaymentSourceWidget
* HtmlPaymentSourceWidget ⇐ PaymentSourceWidget
* new HtmlPaymentSourceWidget(selector, publicKey, queryToken)
* .load()
* .on(eventName, cb)
* [.hide([saveSize])](#user-content-psw_HtmlPaymentSourceWidget+hide)
* .show()
* .reload()
* .onSelectInsert(selector, dataType)
* .setStyles(fields)
* .setRefId(refId)
* .setLimit(count)
* [.setEnv(env, [alias])](#user-content-psw_PaymentSourceWidget+setEnv)
* .getIFrameUrl()
* .filterByGatewayIds(ids)
* .filterByTypes(types)
* .setLanguage(code)
$3
| Param | Type | Description |
| --- | --- | --- |
| selector | string | Selector of html element. Container for widget |
| publicKey | string | PayDock users public key |
| queryToken | string | PayDock's query token that represents params to search customer by id or reference |
Example
javascript
* var widget = new HtmlPaymentSourceWidget('#widget', 'publicKey','queryToken');
`
$3
The final method to beginning, the load process of widget to htmlKind: instance method of HtmlPaymentSourceWidget
$3
Listen to events of widgetKind: instance method of HtmlPaymentSourceWidget
| Param | Type | Description |
| --- | --- | --- |
| eventName | string | Available event names EVENT |
| cb | listener--PaymentSourceWidget | |
Example
javascript
widget.on('select', function (data) {
console.log(data);
});
`
$3
Using this method you can hide widget after loadKind: instance method of HtmlPaymentSourceWidget
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| [saveSize] | boolean | false | using this param you can save iframe's size |
$3
Using this method you can show widget after using hide methodKind: instance method of HtmlPaymentSourceWidget
$3
Using this method you can reload widgetKind: instance method of HtmlPaymentSourceWidget
$3
After select event of widget, data (dataType) will be insert to input (selector)Kind: instance method of HtmlPaymentSourceWidget
| Param | Type | Description |
| --- | --- | --- |
| selector | string | css selector . [] # |
| dataType | string | data type of IEventSelectData. |
$3
Object contain styles for widgetKind: instance method of HtmlPaymentSourceWidget
Overrides: setStyles
| Param | Type | Description |
| --- | --- | --- |
| fields | IStyles | name of styles which can be shown in widget STYLE |
Example
javascript
widget.setStyles({
background_color: 'rgb(0, 0, 0)',
border_color: 'yellow',
text_color: '#FFFFAA',
icon_size: 'small',
font_size: '20px'
});
`
$3
Current method can set custom ID to identify the data in the futureKind: instance method of HtmlPaymentSourceWidget
Overrides: setRefId
| Param | Type | Description |
| --- | --- | --- |
| refId | string | custom id |
Example
javascript
widget.setRefId('id');
`
$3
Current method can set limit for payment sources count. In case when limit sets less then general count will be shown pagination buttons prev and next.Kind: instance method of HtmlPaymentSourceWidget
Overrides: setLimit
| Param | Type | Description |
| --- | --- | --- |
| count | string | payment source count |
$3
Current method can change environment. By default environment = sandbox
Also we can change domain alias for this environment. By default domain_alias = paydock.comKind: instance method of HtmlPaymentSourceWidget
Overrides: setEnv
| Param | Type | Description |
| --- | --- | --- |
| env | string | sandbox, production |
| [alias] | string | Own domain alias |
Example
javascript
widget.setEnv('production');
`
$3
Method for getting iframe's urlKind: instance method of HtmlPaymentSourceWidget
Overrides: getIFrameUrl
$3
Show payment source inside widget only with requested gateway idsKind: instance method of HtmlPaymentSourceWidget
Overrides: filterByGatewayIds
| Param | Type | Description |
| --- | --- | --- |
| ids | Array.<string> | List of gateway_id |
$3
Show payment source inside widget only with requested payment source typesKind: instance method of HtmlPaymentSourceWidget
Overrides: filterByTypes
| Param | Description |
| --- | --- |
| types | List of payment source types. Available parameters PAYMENT_TYPE |
$3
Method for setting a custom language codeKind: instance method of HtmlPaymentSourceWidget
Overrides: setLanguage
| Param | Type | Description |
| --- | --- | --- |
| code | string | ISO 639-1 |
Example
javascript
config.setLanguage('en');
`
PaymentSourceWidget
Class PaymentSourceWidget include method for for creating iframe urlKind: global class
* PaymentSourceWidget
* [new PaymentSourceWidget(publicKey, customer, [useReference])](#user-content-psw_new_PaymentSourceWidget_new)
* .setStyles(fields)
* .setRefId(refId)
* .setLimit(count)
* [.setEnv(env, [alias])](#user-content-psw_PaymentSourceWidget+setEnv)
* .getIFrameUrl()
* .filterByGatewayIds(ids)
* .filterByTypes(types)
* .setLanguage(code)
$3
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| publicKey | string | | PayDock users public key |
| customer | string | | PayDock's customer_id or customer_reference (In order to use the customer_reference, you must explicitly specify useReference as true) |
| [useReference] | boolean | false | |
Example
javascript
var widget = new PaymentSourceWidget('publicKey','customerId');
// or
var widget = new PaymentSourceWidget('publicKey', customerReference, true);
`
$3
Object contain styles for widgetKind: instance method of PaymentSourceWidget
| Param | Type | Description |
| --- | --- | --- |
| fields | IStyles | name of styles which can be shown in widget STYLE |
Example
javascript
widget.setStyles({
background_color: 'rgb(0, 0, 0)',
border_color: 'yellow',
text_color: '#FFFFAA',
icon_size: 'small',
font_size: '20px'
});
`
$3
Current method can set custom ID to identify the data in the futureKind: instance method of PaymentSourceWidget
| Param | Type | Description |
| --- | --- | --- |
| refId | string | custom id |
Example
javascript
widget.setRefId('id');
`
$3
Current method can set limit for payment sources count. In case when limit sets less then general count will be shown pagination buttons prev and next.Kind: instance method of PaymentSourceWidget
| Param | Type | Description |
| --- | --- | --- |
| count | string | payment source count |
$3
Current method can change environment. By default environment = sandbox
Also we can change domain alias for this environment. By default domain_alias = paydock.comKind: instance method of PaymentSourceWidget
| Param | Type | Description |
| --- | --- | --- |
| env | string | sandbox, production |
| [alias] | string | Own domain alias |
Example
javascript
widget.setEnv('production');
`
$3
Method for getting iframe's urlKind: instance method of PaymentSourceWidget
$3
Show payment source inside widget only with requested gateway idsKind: instance method of PaymentSourceWidget
| Param | Type | Description |
| --- | --- | --- |
| ids | Array.<string> | List of gateway_id |
$3
Show payment source inside widget only with requested payment source typesKind: instance method of PaymentSourceWidget
| Param | Description |
| --- | --- |
| types | List of payment source types. Available parameters PAYMENT_TYPE |
$3
Method for setting a custom language codeKind: instance method of PaymentSourceWidget
| Param | Type | Description |
| --- | --- | --- |
| code | string | ISO 639-1 |
Example
javascript
config.setLanguage('en');
``objectKind: global constant
| Param | Type | Default |
| --- | --- | --- |
| AFTER_LOAD | string | "afterLoad" |
| SYSTEM_ERROR | string | "systemError" |
| SELECT | string | "select" |
| UNSELECT | string | "unselect" |
| NEXT | string | "next" |
| PREV | string | "prev" |
| META_CHANGE | string | "metaChange" |
| RESIZE | string | "resize" |
objectKind: global constant
| Param | Type | Default |
| --- | --- | --- |
| BACKGROUND_COLOR | string | "background_color" |
| BACKGROUND_ACTIVE_COLOR | string | "background_active_color" |
| TEXT_COLOR | string | "text_color" |
| BORDER_COLOR | string | "border_color" |
| ICON_SIZE | string | "icon_size" |
| FONT_SIZE | string | "font_size" |
objectKind: global constant
| Param | Type | Default |
| --- | --- | --- |
| CARD | string | "card" |
| BANK_ACCOUNT | string | "bank_account" |
| CHECKOUT | string | "checkout" |
functionKind: global typedef
| Param | Type |
| --- | --- |
| response | IEventData \| IEventSelectData \| IEventPaginationData \| IEventAfterLoadData |
You can find description of all methods and parameters [here](https://www.npmjs.com/package/@paydock/client-sdk#cb_