@paydock/client-sdk

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

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.

With package manager

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.

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.

// module import - CommonJS/Node projects ✅
const paydock = require('@paydock/client-sdk')
const api = new paydock.Api('publicKey');

// named import - ESM projects or TypeScript projects ✅
import { HtmlWidget } from '@paydock/client-sdk'
const widget = new HtmlWidget('#selector', 'publicKey', 'gatewayId');

// namespaced import - ESM projects or TypeScript projects ✅
import * as Paydock from '@paydock/client-sdk'
const widget = new Paydock.HtmlWidget('#selector', 'publicKey', 'gatewayId');

// default import - We do not provide default exports. They are handled differently by different tools!
 ❌
import paydock from '@paydock/client-sdk'
>>> "Uncaught SyntaxError: The requested module does not provide an export named 'default'"

Download from CDN

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, and, the development version here.

For more advanced use-cases, the library has UMD format that 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';

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

HtmlWidget ⇐ HtmlMultiWidget

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

HtmlMultiWidget ⇐ MultiWidget

Class HtmlMultiWidget include method for working with html

Configuration

Class Configuration include methods for creating configuration token

MultiWidget

Class MultiWidget include method for for creating iframe url

Constants

EVENT : object

List of available event's name

VAULT_DISPLAY_EVENT : object

List of available event's name

PAYMENT_TYPE : object

List of available payment source types

PURPOSE : object

Purposes

FORM_FIELD : object

Current constant include available type of fields which can be included to widget

STYLE : object

List of available style params for widget

TEXT : object

List of available text item params for widget

ELEMENT : object

List of available params for hide elements

SUPPORTED_CARD_TYPES : object

The list of available parameters for showing card icons

STYLABLE_ELEMENT : object

Current constant include available type of element for styling

STYLABLE_ELEMENT_STATE : object

Current constant include available states of element for styling

CARD_VALIDATORS : Record.<string, string>

List of available form field validators dedicated to cards and their definition

GENERIC_VALIDATORS : Record.<string, string>

List of available generic form field validators and their definition

TRIGGER : object

List of available triggers

Interfaces

IFormValidation

Interface of data from validation event.

IEventMetaData

Contains basic information associated with the event and additional meta data specific to the event. E.g., card info, gateway info, etc.

IEventAfterLoadData

Interface of data from event.

IEventFinishData

Interface of data from event.

IPayPalMeta

Interface for PayPal checkout meta information

IStyles

Interface for classes that represent widget's styles.

ITexts

Interface for classes that represent widget's text.

IBamboraMeta

Interface for Bamboora meta information

IElementStyleInput

Interface for styling input element.

IElementStyleSubmitButton

Interface for styling submit_button element.

IElementStyleLabel

Interface for styling label element.

IElementStyleTitle

Interface for styling title element.

IElementStyleTitleDescription

Interface for styling title_description element.

ITriggerData

Interface for classes that represent a trigger data.

 

IFormValidation

Interface of data from validation event.

Kind: global interface

Param	Type	Description
event	string	The name of the event.
message_source	string	A system variable that identifies the event source.
purpose	string	A system variable that states the purpose of the event.
[ref_id]	string	Custom unique value that identifies result of processed operation.
[form_valid]	boolean	Indicates wether or not the form is valid.
[invalid_fields]	Array.<string>	Names of form fields with invalid data.
[invalid_showed_fields]	Array.<string>	Names of invalid form fields which are already displaying the error.
[validators]	Partial.<Record.<(CardValidatorValue|GenericValidatorValue), Array.<string>>>	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 and Card Validators,

 

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	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.
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, e.g., (Visa, Mastercard and American Express (AmEx))
[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	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.

 

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.
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: [phone])
[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 HtmlWidget(selector, publicKey, [gatewayID], [paymentType], [purpose])
  • .setWebHookDestination(url)
  • .setSuccessRedirectUrl(url)
  • .setErrorRedirectUrl(url)
  • .setFormFields(fields)
  • .setFormElements(elements)
  • .setMeta(object)
  • .load()
  • .afterLoad()
  • .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)
  • .updateFormValue(key, value)
  • .onFinishInsert(selector, dataType)
  • .interceptSubmitForm(selector)
  • .useCheckoutAutoSubmit()
  • .useAutoResize()
  • .setStyles(fields)
  • .usePhoneCountryMask([options])
  • .setTexts(fields)
  • .setElementStyle(element, [state], styles)
  • .setFormValues(fieldValues)
  • .setFormLabels(fieldLabels)
  • .setFormPlaceholders(fieldPlaceholders)
  • .setIcons()
  • .setHiddenElements(elements)
  • .setRefId(refId)
  • .useGatewayFieldValidation()
  • .setSupportedCardIcons(elements, validateCardNumberInput)
  • .setEnv(env, [alias])
  • .loadIFrameUrl()
  • .setLanguage(code)

 

new 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 [e-mail]',
          label: 'Email for the receipt',
          value: '[e-mail]',
      },
  ])

 

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: '[e-mail]'
        });

 

htmlWidget.load()

Loads the widget.

Calling this method results in an iframe element being inserted and rendered in the DOM.

Kind: instance method of HtmlWidget
Overrides: load
 

htmlWidget.afterLoad()

Registers a form validation callback for validation events.

Kind: instance method of HtmlWidget
Overrides: afterLoad
 

htmlWidget.trigger(triggers, data)

Registers callback that will be invoked for every trigger.

Kind: instance method of HtmlWidget
Overrides: trigger

Param	Type	Description
triggers	'submit_form' | 'tab'	The Widget element identifier that caused the trigger.
data	ITriggerData	Data that will be sent to the widget when the trigger occurs.

 

htmlWidget.getValidationState() ⇒ 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 HtmlWidget
Overrides: getValidationState
Returns: IFormValidation - Form validation object
 

htmlWidget.isValidForm() ⇒ boolean

Checks if a given form is valid.

A form is valid if all form fields are valid.

Kind: instance method of HtmlWidget
Overrides: isValidForm
Returns: boolean - Indicates wether or not 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
Overrides: isInvalidField
Returns: boolean - Field is invalid

Param	Type	Description
field	string	Field name

 

htmlWidget.isFieldErrorShowed(field) ⇒ boolean

Checks if a given form field is displaying an error.

Kind: instance method of HtmlWidget
Overrides: isFieldErrorShowed
Returns: boolean - Indicates wether or not the Error message is being displayed on the associated field.

Param	Type	Description
field	string	The form field name

 

htmlWidget.isInvalidFieldByValidator(field, validator) ⇒ boolean

Checks if a given form field is valid or invalid by name.

Kind: instance method of HtmlWidget
Overrides: isInvalidFieldByValidator
Returns: boolean - Indicates wether or not the field is invalid based on validator intepretation.

Param	Type	Description
field	string	The form field name
validator		The name of the validator.

 

htmlWidget.hide([saveSize])

Hides the widget.

E.g., use this method to hide the widget after it loads.

Kind: instance method of HtmlWidget
Overrides: hide

Param	Type	Default	Description
[saveSize]	boolean	false	Wether the original iframe element size should be saved before being hidden.

 

htmlWidget.show()

Shows the widget.

E.g., use this method to show the widget after it was explicitly hidden.

Kind: instance method of HtmlWidget
Overrides: show
 

htmlWidget.reload()

Reloads the widget.

Kind: instance method of HtmlWidget
Overrides: reload
 

htmlWidget.hideElements(elements)

Hides the specified Widget elements by their identifier.

Kind: instance method of HtmlWidget
Overrides: hideElements

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

Example

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

 

htmlWidget.showElements(elements)

Shows the specified Widget elements by their identifier.

Kind: instance method of HtmlWidget
Overrides: showElements

Param	Type	Description
elements	Array.<string>	List of elements which can be showed ELEMENT

Example

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

 

htmlWidget.updateFormValues(fieldValues)

Updates the form field values inside the widget.

Kind: instance method of HtmlWidget
Overrides: updateFormValues

Param	Type	Description
fieldValues	IFormValues	Fields with values

Example

widget.updateFormValues({
  email: '[e-mail]',
  card_name: 'Houston'
});

 

htmlWidget.updateFormValue(key, value)

Updates a single form field values inside the widget by the form field name.

Kind: instance method of HtmlWidget
Overrides: updateFormValue

Param	Type	Description
key	string	The form field name
value	string	The form field value

Example

widget.updateFormValue("card_name", "John Doe");

 

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

Param	Type	Description
selector	string	A CSS selector. E.g., ".my-class", "#my-id", or others
dataType	string	The data type of IEventData object.

 

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 HtmlWidget
Overrides: interceptSubmitForm
Note: The widget's submit button will be hidden.

Param	Type	Description
selector	string	css selector of your form

Example

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

 

htmlWidget.useCheckoutAutoSubmit()

This method hides a submit button and automatically execute form submit

Kind: instance method of HtmlWidget
Overrides: useCheckoutAutoSubmit
 

htmlWidget.useAutoResize()

Use this method for resize iFrame according content height

Kind: instance method of HtmlWidget
Overrides: useAutoResize
Example

widget.useAutoResize();

 

htmlWidget.setStyles(fields)

Object contain styles for widget

Kind: instance method of HtmlWidget
Overrides: setStyles

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
Overrides: usePhoneCountryMask

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
Overrides: setTexts

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
Overrides: setElementStyle

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
Overrides: setFormValues

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: '[e-mail]',
      card_name: 'Houston'
  });

 

htmlWidget.setFormLabels(fieldLabels)

The method to set custom form field labels

Kind: instance method of HtmlWidget
Overrides: setFormLabels

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
Overrides: setFormPlaceholders

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 [e-mail]'
  })

 

htmlWidget.setIcons()

Deprecated

The method to change the widget icons

Kind: instance method of HtmlWidget
Overrides: setIcons
 

htmlWidget.setHiddenElements(elements)

Using this method you can set hidden elements inside widget

Kind: instance method of HtmlWidget
Overrides: setHiddenElements

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

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
Overrides: setRefId

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
Overrides: useGatewayFieldValidation
Example

widget.useGatewayFieldValidation();

 

htmlWidget.setSupportedCardIcons(elements, validateCardNumberInput)

Current method can set icons of supported card types

Kind: instance method of HtmlWidget
Overrides: setSupportedCardIcons

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
Overrides: setEnv

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
Overrides: loadIFrameUrl
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
Overrides: setLanguage

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 HtmlMultiWidget(selector, publicKey, conf)
  • .load()
  • .afterLoad()
  • .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)
  • .updateFormValue(key, value)
  • .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 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>	exemplar[s] 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()

Loads the widget.

Calling this method results in an iframe element being inserted and rendered in the DOM.

Kind: instance method of HtmlMultiWidget
 

htmlMultiWidget.afterLoad()

Registers a form validation callback for validation events.

Kind: instance method of HtmlMultiWidget
 

htmlMultiWidget.trigger(triggers, data)

Registers callback that will be invoked for every trigger.

Kind: instance method of HtmlMultiWidget

Param	Type	Description
triggers	'submit_form' | 'tab'	The Widget element identifier that caused the trigger.
data	ITriggerData	Data that will be sent to the widget when the trigger occurs.

 

htmlMultiWidget.getValidationState() ⇒ 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 HtmlMultiWidget
Returns: IFormValidation - Form validation object
 

htmlMultiWidget.isValidForm() ⇒ boolean

Checks if a given form is valid.

A form is valid if all form fields are valid.

Kind: instance method of HtmlMultiWidget
Returns: boolean - Indicates wether or not 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

Checks if a given form field is displaying an error.

Kind: instance method of HtmlMultiWidget
Returns: boolean - Indicates wether or not the Error message is being displayed on the associated field.

Param	Type	Description
field	string	The form field name

 

htmlMultiWidget.isInvalidFieldByValidator(field, validator) ⇒ boolean

Checks if a given form field is valid or invalid by name.

Kind: instance method of HtmlMultiWidget
Returns: boolean - Indicates wether or not the field is invalid based on validator intepretation.

Param	Type	Description
field	string	The form field name
validator		The name of the validator.

 

htmlMultiWidget.hide([saveSize])

Hides the widget.

E.g., use this method to hide the widget after it loads.

Kind: instance method of HtmlMultiWidget

Param	Type	Default	Description
[saveSize]	boolean	false	Wether the original iframe element size should be saved before being hidden.

 

htmlMultiWidget.show()

Shows the widget.

E.g., use this method to show the widget after it was explicitly hidden.

Kind: instance method of HtmlMultiWidget
 

htmlMultiWidget.reload()

Reloads the widget.

Kind: instance method of HtmlMultiWidget
 

htmlMultiWidget.hideElements(elements)

Hides the specified Widget elements by their identifier.

Kind: instance method of HtmlMultiWidget

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

Example

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

 

htmlMultiWidget.showElements(elements)

Shows the specified Widget elements by their identifier.

Kind: instance method of HtmlMultiWidget

Param	Type	Description
elements	Array.<string>	List of elements which can be showed ELEMENT

Example

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

 

htmlMultiWidget.updateFormValues(fieldValues)

Updates the form field values inside the widget.

Kind: instance method of HtmlMultiWidget

Param	Type	Description
fieldValues	IFormValues	Fields with values

Example

widget.updateFormValues({
  email: '[e-mail]',
  card_name: 'Houston'
});

 

htmlMultiWidget.updateFormValue(key, value)

Updates a single form field values inside the widget by the form field name.

Kind: instance method of HtmlMultiWidget

Param	Type	Description
key	string	The form field name
value	string	The form field value

Example

widget.updateFormValue("card_name", "John Doe");

 

htmlMultiWidget.onFinishInsert(selector, dataType)

Inserts the event data (after finish event) onto the input field associated with the provided CSS selector.

Kind: instance method of HtmlMultiWidget

Param	Type	Description
selector	string	A CSS selector. E.g., ".my-class", "#my-id", or others
dataType	string	The data type of IEventData object.

 

htmlMultiWidget.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 HtmlMultiWidget
Note: The widget's submit button will be hidden.

Param	Type	Description
selector	string	css selector of your form

Example

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

 

htmlMultiWidget.useCheckoutAutoSubmit()

This method hides a submit button and automatically execute form submit

Kind: instance method of HtmlMultiWidget
 

htmlMultiWidget.useAutoResize()

Use this method for resize iFrame according content height

Kind: instance method of HtmlMultiWidget
Example

widget.useAutoResize();

 

htmlMultiWidget.setStyles(fields)

Object contain styles for widget

Kind: instance method of HtmlMultiWidget
Overrides: setStyles

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

 

htmlMultiWidget.usePhoneCountryMask([options])

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

Kind: instance method of HtmlMultiWidget
Overrides: usePhoneCountryMask

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

 

htmlMultiWidget.setTexts(fields)

Method for set different texts inside the widget

Kind: instance method of HtmlMultiWidget
Overrides: setTexts

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

 

htmlMultiWidget.setElementStyle(element, [state], styles)

Method for set styles for different elements and states

Kind: instance method of HtmlMultiWidget
Overrides: setElementStyle

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

 

htmlMultiWidget.setFormValues(fieldValues)

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

Kind: instance method of HtmlMultiWidget
Overrides: setFormValues

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: '[e-mail]',
      card_name: 'Houston'
  });

 

htmlMultiWidget.setFormLabels(fieldLabels)

The method to set custom form field labels

Kind: instance method of HtmlMultiWidget
Overrides: setFormLabels

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

 

htmlMultiWidget.setFormPlaceholders(fieldPlaceholders)

The method to set custom form fields placeholders

Kind: instance method of HtmlMultiWidget
Overrides: setFormPlaceholders

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 [e-mail]'
  })

 

htmlMultiWidget.setFormElements(elements)

The method to set the full configuration for the all specific form elements (label, placeholder, value) You can also use the other method for the partial configuration like: setFormValues, setFormPlaceholder, setFormLabel

Kind: instance method of HtmlMultiWidget
Overrides: setFormElements

Param	Type	Description
elements	string	The list of elements
elements[].field	string	Field name of the element FORM_FIELD
elements[].placeholder	string	Set custom form field placeholder
elements[].label	string	Set custom labels near 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 [e-mail]',
          label: 'Email For Receipt',
          value: '[e-mail]',
      },
  ])

 

htmlMultiWidget.setIcons()

Deprecated

The method to change the widget icons

Kind: instance method of HtmlMultiWidget
Overrides: setIcons
 

htmlMultiWidget.setHiddenElements(elements)

Using this method you can set hidden elements inside widget

Kind: instance method of HtmlMultiWidget
Overrides: setHiddenElements

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

Example

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

 

htmlMultiWidget.setRefId(refId)

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

Kind: instance method of HtmlMultiWidget
Overrides: setRefId

Param	Type	Description
refId	string	custom id

Example

widget.setRefId('id');

 

htmlMultiWidget.useGatewayFieldValidation()

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

Kind: instance method of HtmlMultiWidget
Overrides: useGatewayFieldValidation
Example

widget.useGatewayFieldValidation();

 

htmlMultiWidget.setSupportedCardIcons(elements, validateCardNumberInput)

Current method can set icons of supported card types

Kind: instance method of HtmlMultiWidget
Overrides: setSupportedCardIcons

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

 

htmlMultiWidget.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 HtmlMultiWidget
Overrides: setEnv

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

Example

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

 

htmlMultiWidget.loadIFrameUrl()

Method for creating iframe url

Kind: instance method of HtmlMultiWidget
Overrides: loadIFrameUrl
Example

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

 

htmlMultiWidget.setLanguage(code)

Method for setting a custom language code

Kind: instance method of HtmlMultiWidget
Overrides: setLanguage

Param	Type	Description
code	string	ISO 639-1

Example

config.setLanguage('en');

 

Configuration

Class Configuration include methods for creating configuration token

Kind: global class

• Configuration
  • new Configuration([gatewayID], paymentType, purpose)
  • .setWebHookDestination(url)
  • .setSuccessRedirectUrl(url)
  • .setErrorRedirectUrl(url)
  • .setFormFields(fields)
  • .setMeta(object)
  • .setEnv(env, [alias])
  • .setLabel(label)
  • .createToken(accessToken, cb, errorCb)

 

new Configuration([gatewayID], paymentType, purpose)

Param	Type	Default	Description
[gatewayID]	string	"default"	gateway ID. 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		Type of payment source which shows in widget form. Available parameters PAYMENT_TYPE
purpose	string		Param which describes payment purpose. By default uses Available parameters PURPOSE

Example

var config = new Configuration('gatewayId'); // short

var config = new Configuration('gatewayId', 'bank_account', 'paymentSource'); // extend

var config = new Configuration('not_configured'); // without gateway

 

configuration.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 Configuration

Param	Type	Description
url	string	Your endpoint for post request.

Example

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

 

configuration.setSuccessRedirectUrl(url)

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

Kind: instance method of Configuration

Param	Type
url	string

Example

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

 

configuration.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 Configuration

Param	Type
url	string

Example

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

 

configuration.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 Configuration

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

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

 

configuration.setMeta(object)

Method for setting meta information for checkout page

Kind: instance method of Configuration

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

Example

config.setMeta({
            brand_name: 'paydock',
            reference: '15',
            email: '[e-mail]'
        });

 

configuration.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 Configuration

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

Example

config.setEnv('production');

 

configuration.setLabel(label)

Title for tab which can be set instead of default

Kind: instance method of Configuration

Param	Type	Description
label	string	Text label for tab

Example

config.setLabel('custom label');

 

configuration.createToken(accessToken, cb, errorCb)

createToken - method which exactly create payment one time token

Kind: instance method of Configuration

Param	Type	Description
accessToken	string	Customer access token or public key which provided for each client
cb	createToken~requestCallback	The callback that handles the success response.
errorCb	createToken~requestCallback	The callback that handles the failed response.

Example

config.createToken('582035346f65cdd57ee81192d6e5w65w4e5',
 function (data) {
     console.log(data);
 }, function (error) {
     console.log(error);
});

 

MultiWidget

Class MultiWidget include method for for creating iframe url

Kind: global class

• MultiWidget
  • new MultiWidget(accessToken, conf)
  • .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 MultiWidget(accessToken, conf)

Param	Type	Description
accessToken	string	PayDock users access token or public key
conf	Configuration | string | Array.<Configuration> | Array.<string>	exemplar[s] Configuration class OR configuration token

Example

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

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

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

var widget = new MultiWidget('accessToken',[ With Configurations
     Configuration('gatewayId'),
     Configuration('gatewayId', 'bank_account')
]);

 

multiWidget.setStyles(fields)

Object contain styles for widget

Kind: instance method of MultiWidget

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

 

multiWidget.usePhoneCountryMask([options])

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

Kind: instance method of MultiWidget

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

 

multiWidget.setTexts(fields)

Method for set different texts inside the widget

Kind: instance method of MultiWidget

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

 

multiWidget.setElementStyle(element, [state], styles)

Method for set styles for different elements and states

Kind: instance method of MultiWidget

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

 

multiWidget.setFormValues(fieldValues)

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

Kind: instance method of MultiWidget

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: '[e-mail]',
      card_name: 'Houston'
  });

 

multiWidget.setFormLabels(fieldLabels)

The method to set custom form field labels

Kind: instance method of MultiWidget

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

 

multiWidget.setFormPlaceholders(fieldPlaceholders)

The method to set custom form fields placeholders

Kind: instance method of MultiWidget

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 [e-mail]'
  })

 

multiWidget.setFormElements(elements)

The method to set the full configuration for the all specific form elements (label, placeholder, value) You can also use the other method for the partial configuration like: setFormValues, setFormPlaceholder, setFormLabel

Kind: instance method of MultiWidget

Param	Type	Description
elements	string	The list of elements
elements[].field	string	Field name of the element FORM_FIELD
elements[].placeholder	string	Set custom form field placeholder
elements[].label	string	Set custom labels near 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 [e-mail]',
          label: 'Email For Receipt',
          value: '[e-mail]',
      },
  ])

 

multiWidget.setIcons()

Deprecated

The method to change the widget icons

Kind: instance method of MultiWidget
 

multiWidget.setHiddenElements(elements)

Using this method you can set hidden elements inside widget

Kind: instance method of MultiWidget

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

Example

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

 

multiWidget.setRefId(refId)

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

Kind: instance method of MultiWidget

Param	Type	Description
refId	string	custom id

Example

widget.setRefId('id');

 

multiWidget.useGatewayFieldValidation()

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

Kind: instance method of MultiWidget
Example

widget.useGatewayFieldValidation();

 

multiWidget.setSupportedCardIcons(elements, validateCardNumberInput)

Current method can set icons of supported card types

Kind: instance method of MultiWidget

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

 

multiWidget.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 MultiWidget

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

Example

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

 

multiWidget.loadIFrameUrl()

Method for creating iframe url

Kind: instance method of MultiWidget
Example

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

 

multiWidget.setLanguage(code)

Method for setting a custom language code

Kind: instance method of MultiWidget

Param	Type	Description
code	string	ISO 639-1

Example

config.setLanguage('en');

 

EVENT : object

List of available event's name

Kind: global constant

Param	Type	Default
AFTER_LOAD	string	"afterLoad"
SUBMIT	string	"submit"
FINISH	string	"finish"
VALIDATION	string	"validation"
VALIDATION_ERROR	string	"validationError"
SYSTEM_ERROR	string	"systemError"
META_CHANGE	string	"metaChange"
RESIZE	string	"resize"

 

VAULT_DISPLAY_EVENT : object

List of available event's name

Kind: global constant

Param	Type	Default
AFTER_LOAD	string	"afterLoad"
SYSTEM_ERROR	string	"system_error"
CVV_SECURE_CODE_REQUESTED	string	"cvv_secure_code_requested"
CARD_NUMBER_SECURE_CODE_REQUESTED	string	"card_number_secure_code_requested"
ACCESS_FORBIDDEN	string	"access_forbidden"
SESSION_EXPIRED	string	"systemError"
SYSTEM_ERROR	string	"session_expired"
OPERATION_FORBIDDEN	string	"operation_forbidden"

 

PAYMENT_TYPE : object

List of available payment source types

Kind: global constant

Param	Type	Default
CARD	string	"card"
BANK_ACCOUNT	string	"bank_account"
CHECKOUT	string	"checkout"

 

PURPOSE : object

Purposes

Kind: global constant

Param	Type	Default
PAYMENT_SOURCE	string	"payment_source"
CARD_PAYMENT_SOURCE_WITH_CVV	string	"card_payment_source_with_cvv"
CARD_PAYMENT_SOURCE_WITHOUT_CVV	string	"card_payment_source_without_cvv"

 

FORM_FIELD : object

Current constant include available type of fields which can be included to widget

Kind: 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"

 

STYLE : object

List of available style params for widget

Kind: 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"

 

TEXT : object

List of available text item params for widget

Kind: global constant

Param	Type	Default
TITLE	string	"title"
FINISH	string	"finish_text"

 

ELEMENT : object

List of available params for hide elements

Kind: global constant

Param	Type	Default
SUBMIT_BUTTON	string	"submit_button"
TABS	string	"tabs"

 

SUPPORTED_CARD_TYPES : object

The list of available parameters for showing card icons

Kind: 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"

 

STYLABLE_ELEMENT : object

Current constant include available type of element for styling

Kind: 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

 

STYLABLE_ELEMENT_STATE : object

Current constant include available states of element for styling

Kind: global constant

Param	Type	Default	Description
ERROR	string	"error"	client
FOCUS	string	"focus"	focus. This state applies to: input
HOVER	string	"hover"	focus. This state applies to: submit_button

 

CARD_VALIDATORS : Record.<string, string>

List of available form field validators dedicated to cards and their definition

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

 

GENERIC_VALIDATORS : Record.<string, string>

List of available generic form field validators and their definition

Kind: global constant

Param	Type	Default	Description
REQUIRED	string	"required"	Asserts the input or form field has a value defined truthy value

 

TRIGGER : object

List of available triggers

Kind: 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"

Payment sources widget

You can find description of all methods and parameters here

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.

Payment sources simple example

Container

<div id="list"></div>

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

Initialization

var list = new paydock.HtmlPaymentSourceWidget('#list', 'publicKey', 'queryToken');
list.load();

// ES2015 | TypeScript

import { 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

Full example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>iframe {border: 0;width: 40%;height: 300px;}</style>
</head>
<body>
    <div id="list"></div>
    <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
    <script>
        var list = new paydock.HtmlPaymentSourceWidget('#list', 'publicKey', 'queryToken');
        list.load();
    </script>
</body>
</html>

Payment sources advanced example

Customization

list.setStyles({
    icon_size: 'small'
});

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

Settings

list.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

Full example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>iframe {border: 0;width: 40%;height: 300px;}</style>
</head>
<body>
    <div id="list"></div>
    <input type="text" name="ps_id" />
    <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
    <script>
        var list = new paydock.HtmlPaymentSourceWidget('#list', 'publicKey', 'queryToken');
        list.filterByTypes(['card', 'checkout']);
        list.filterByGatewayIds(['gateway1']);
        list.setRefId('id');
        list.setLimit(4);
        list.setStyles({
            icon_size: 'small'
        });

        list.load();

        list.onSelectInsert('input[name="ps_id"]', 'payment_source_id');
        list.on('select', function(data) {
            console.log(data);
        });
    </script>
</body>
</html>

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 html

Kind: global class
Extends: PaymentSourceWidget

• HtmlPaymentSourceWidget ⇐ PaymentSourceWidget
  • new HtmlPaymentSourceWidget(selector, publicKey, queryToken)
  • .load()
  • .on(eventName, cb)
  • .hide([saveSize])
  • .show()
  • .reload()
  • .onSelectInsert(selector, dataType)
  • .setStyles(fields)
  • .setRefId(refId)
  • .setLimit(count)
  • .setEnv(env, [alias])
  • .getIFrameUrl()
  • .filterByGatewayIds(ids)
  • .filterByTypes(types)
  • .setLanguage(code)

 

new HtmlPaymentSourceWidget(selector, publicKey, queryToken)

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

* var widget = new HtmlPaymentSourceWidget('#widget', 'publicKey','queryToken');

 

htmlPaymentSourceWidget.load()

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

Kind: instance method of HtmlPaymentSourceWidget
 

htmlPaymentSourceWidget.on(eventName, cb)

Listen to events of widget

Kind: instance method of HtmlPaymentSourceWidget

Param	Type	Description
eventName	string	Available event names EVENT
cb	listener--PaymentSourceWidget

Example

widget.on('select', function (data) {
     console.log(data);
});

 

htmlPaymentSourceWidget.hide([saveSize])

Using this method you can hide widget after load

Kind: instance method of HtmlPaymentSourceWidget

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

 

htmlPaymentSourceWidget.show()

Using this method you can show widget after using hide method

Kind: instance method of HtmlPaymentSourceWidget
 

htmlPaymentSourceWidget.reload()

Using this method you can reload widget

Kind: instance method of HtmlPaymentSourceWidget
 

htmlPaymentSourceWidget.onSelectInsert(selector, dataType)

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.

 

htmlPaymentSourceWidget.setStyles(fields)

Object contain styles for widget

Kind: instance method of HtmlPaymentSourceWidget
Overrides: setStyles

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',
      icon_size: 'small',
      font_size: '20px'
  });

 

htmlPaymentSourceWidget.setRefId(refId)

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

Kind: instance method of HtmlPaymentSourceWidget
Overrides: setRefId

Param	Type	Description
refId	string	custom id

Example

widget.setRefId('id');

 

htmlPaymentSourceWidget.setLimit(count)

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

 

htmlPaymentSourceWidget.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 HtmlPaymentSourceWidget
Overrides: setEnv

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

Example

widget.setEnv('production');

 

htmlPaymentSourceWidget.getIFrameUrl()

Method for getting iframe's url

Kind: instance method of HtmlPaymentSourceWidget
Overrides: getIFrameUrl
 

htmlPaymentSourceWidget.filterByGatewayIds(ids)

Show payment source inside widget only with requested gateway ids

Kind: instance method of HtmlPaymentSourceWidget
Overrides: filterByGatewayIds

Param	Type	Description
ids	Array.<string>	List of gateway_id

 

htmlPaymentSourceWidget.filterByTypes(types)

Show payment source inside widget only with requested payment source types

Kind: instance method of HtmlPaymentSourceWidget
Overrides: filterByTypes

Param	Description
types	List of payment source types. Available parameters PAYMENT_TYPE

 

htmlPaymentSourceWidget.setLanguage(code)

Method for setting a custom language code

Kind: instance method of HtmlPaymentSourceWidget
Overrides: setLanguage

Param	Type	Description
code	string	ISO 639-1

Example

config.setLanguage('en');

 

PaymentSourceWidget

Class PaymentSourceWidget include method for for creating iframe url

Kind: global class

• PaymentSourceWidget
  • new PaymentSourceWidget(publicKey, customer, [useReference])
  • .setStyles(fields)
  • .setRefId(refId)
  • .setLimit(count)
  • .setEnv(env, [alias])
  • .getIFrameUrl()
  • .filterByGatewayIds(ids)
  • .filterByTypes(types)
  • .setLanguage(code)

 

new PaymentSourceWidget(publicKey, customer, [useReference])

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

var widget = new PaymentSourceWidget('publicKey','customerId');
// or
var widget = new PaymentSourceWidget('publicKey', customerReference, true);

 

paymentSourceWidget.setStyles(fields)

Object contain styles for widget

Kind: instance method of PaymentSourceWidget

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',
      icon_size: 'small',
      font_size: '20px'
  });

 

paymentSourceWidget.setRefId(refId)

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

Kind: instance method of PaymentSourceWidget

Param	Type	Description
refId	string	custom id

Example

widget.setRefId('id');

 

paymentSourceWidget.setLimit(count)

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

 

paymentSourceWidget.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 PaymentSourceWidget

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

Example

widget.setEnv('production');

 

paymentSourceWidget.getIFrameUrl()

Method for getting iframe's url

Kind: instance method of PaymentSourceWidget
 

paymentSourceWidget.filterByGatewayIds(ids)

Show payment source inside widget only with requested gateway ids

Kind: instance method of PaymentSourceWidget

Param	Type	Description
ids	Array.<string>	List of gateway_id

 

paymentSourceWidget.filterByTypes(types)

Show payment source inside widget only with requested payment source types

Kind: instance method of PaymentSourceWidget

Param	Description
types	List of payment source types. Available parameters PAYMENT_TYPE

 

paymentSourceWidget.setLanguage(code)

Method for setting a custom language code

Kind: instance method of PaymentSourceWidget

Param	Type	Description
code	string	ISO 639-1

Example

config.setLanguage('en');

 

EVENT : object

List of available event's name

Kind: 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"

 

STYLE : object

List of available style params for widget

Kind: 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"

 

PAYMENT_SOURCE_TYPE : object

List of available payment source types

Kind: global constant

Param	Type	Default
CARD	string	"card"
BANK_ACCOUNT	string	"bank_account"
CHECKOUT	string	"checkout"

 

listener--PaymentSourceWidget : function

This callback will be called for each event in payment source widget

Kind: global typedef

Param	Type
response	IEventData | IEventSelectData | IEventPaginationData | IEventAfterLoadData

Checkout button

You can find description of all methods and parameters here PayPal meta parameters description here Zipmoney meta parameters description here

This widget allows you to turn your button into a full Checkout Button. As a result, you will be able to receive a one-time token for charges, subscriptions etc. And other data given to the user by the payment gateway.

Checkout button simple example

Container

<button type="button" id="button">
    checkout
</button>

You must create a button to turn it into checkout-button

Initialization

var button = new paydock.PaypalCheckoutButton('#button', 'publicKey', 'gatewayId');

// ES2015 | TypeScript


var button = new PaypalCheckoutButton('#button', 'publicKey');

Then write only need 1 line of code in js to initialize widget

Full example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button type="button" id="button">checkout</button>
    <script src="https://widget.paydock.com/sdk/latest/widget.umd.js" ></script>
    <script>
        var button = new paydock.PaypalCheckoutButton('#button', 'publicKey');
    </script>
</body>
</html>

Checkout button advanced example

Optional methods

button.onFinishInsert('input[name="pst"]', 'payment_source_token'); // insert one-time-token to your input after finish checkout

button.setMeta({
       brand_name: 'Paydock',
       reference: '15',
       first_name: 'receiver-name',
       last_name: 'receiver-last-name',
       phone: '9379992'}); // settings for checkout pages

button.on('finish', function (data) { // Add handler of event
       console.log('on:finish', data);
});

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

Full Paypal example

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<form id="paymentForm">
    <button type="button" id="button">
        <img src="https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif" align="left" style="margin-right:7px;">
    </button>
</form>

<input type="text" name="pst" />

<script src="https://widget.paydock.com/sdk/latest/widget.umd.js" ></script>
<script>
	var button = new paydock.PaypalCheckoutButton('#button', 'publicKey', 'gatewayId');
	button.onFinishInsert('input[name="pst"]', 'payment_source_token');
    button.setMeta({
           brand_name: 'Paydock',
           reference: '15',
           first_name: 'Joshua',
           last_name: 'Wood',
           phone: '0231049872'});

    button.on('finish', function (data) {
           console.log('on:finish', data);
    });
</script>
</body>
</html>

Full ZipMoney example

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<form id="paymentForm">
    <button type="button" id="button">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVrrEYxDmq4WXv7hfHygKD9ltnOqv0K6soSAhmbKNllPNYWiLiJA" align="left" style="margin-right:7px;">
    </button>
</form>

<input type="text" name="pst" />

<script src="https://widget.paydock.com/sdk/latest/widget.umd.js" ></script>
<script>
	var button = new paydock.ZipmoneyCheckoutButton('#button', 'publicKey', 'gatewayId');
	button.onFinishInsert('input[name="pst"]', 'payment_source_token');
    button.setMeta("first_name": "Joshua",
       "tokenize": true,
       "last_name": "Wood",
       "email":"[e-mail]",
       "gender": "male",
       "charge": {
           "amount": "4",
           "currency":"AUD",
           "shipping_type": "delivery",
           "shipping_address": {
               "first_name": "Joshua",
               "last_name": "Wood",
               "line1": "Suite 660",
               "line2": "822 Ruiz Square",
               "country": "AU",
               "postcode": "3223",
               "city": "Sydney",
               "state": "LA"
           },
           "billing_address": {
               "first_name": "Joshua",
               "last_name": "Wood",
               "line1": "Suite 660",
               "line2": "test",
               "country": "AU",
               "postcode": "3223",
               "city": "Sydney",
               "state": "LA"
           },
           "items": [
               {
                   "name":"ACME Toolbox",
                   "amount":"2",
                   "quantity": 1,
                   "reference":"Fuga consequuntur sint ab magnam"
               },
               {
                   "name":"Device 42",
                   "amount":"2",
                   "quantity": 1,
                   "reference":"Fuga consequuntur sint ab magnam"
               }
           ]
       },

       "statistics": {
           "account_created": "2017-05-05",
           "sales_total_number": "5",
           "sales_total_amount": "4",
           "sales_avg_value": "45",
           "sales_max_value": "400",
           "refunds_total_amount": "21",
           "previous_chargeback": "true",
           "currency": "AUD",
           "last_login": "2017-06-01"
       });

    button.on('finish', function (data) {
           console.log('on:finish', data);
    });
</script>
</body>
</html>

Full Aftepay example

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<button type="button" id="button">
    <img src="https://daepxvbfwwgd0.cloudfront.net/assets/logo_scroll-0c43312c5845a0dcd7a3373325da6402bc1d635d3415af28ed40d6c1b48e3d5c.png" align="left" style="margin-right:7px;">
</button>

<input type="text" name="pst" />

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

	button.onFinishInsert('input[name="pst"]', 'payment_source_token');
    button.showEnhancedTrackingProtectionPopup(true);
    button.setMeta({
        amount: "100",
        currency: "AUD",
        reference: 'Vitae commodi provident assumenda',
        email: '[e-mail]',
        first_name: 'Wanda',
        last_name: 'Mertz',
        address_line: '61426 Osvaldo Plains',
        address_line2: 'Apt. 276',
        address_city: 'Lake Robyn',
        address_state: 'WY',
        address_postcode: '07396',
        address_country: 'Australia',
        phone: '0412345678',
    });

    button.on('finish', function (data) {
           console.log('on:finish', data);
    });
</script>
</body>
</html>

Classes

CheckoutButton

Class CheckoutButton transform usual button into checkout

ZipmoneyCheckoutButton ⇐ CheckoutButton

Class ZipmoneyCheckoutButton is wrapper of CheckoutButton transform usual button into checkout

PaypalCheckoutButton ⇐ CheckoutButton

Class PaypalCheckoutButton is wrapper of CheckoutButton transform usual button into checkout

AfterpayCheckoutButton ⇐ CheckoutButton

Class AfterpayCheckoutButton is wrapper of CheckoutButton transform usual button into checkout

Members

CHECKOUT_MODE : object

GATEWAY_TYPE : object

Constants

CHECKOUT_BUTTON_EVENT : object

Typedefs

listener : function

This callback will be called for each event in payment source widget

Interfaces

IEventCheckoutFinishData

IPayPalMeta

Interface for PayPal checkout meta information

IZipmoneyMeta

Interface for ZipMoney checkout meta information

IAfterpayMeta

Interface for Afterpay checkout meta information

 

IEventCheckoutFinishData

Kind: global interface

Param	Type
[payment_source_token]	string

 

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: [phone])
[hide_shipping_address]	boolean	Determines whether PayPal displays shipping address fields on the PayPal pages

 

IZipmoneyMeta

Interface for ZipMoney checkout meta information

Kind: global interface

Param	Type	Description
first_name	string	First name for the customer
last_name	string	Last name for the customer
[phone]	string	The consumer’s phone number in E.164 international notation (Example: [phone])
[tokenize]	boolean	Controls whether to tokenize the zip pay / zip money account, defaults to ‘false’
email	string	The consumer’s email
[gender]	string	Gender name for the customer
[date_of_birth]	string	Date of birth name for the customer
charge.amount	number	Amount to be paid
[charge.currency]	string	Currency code
[charge.reference]	string	Reference
charge.items	array	Collections of orders
charge.items[].name	string	Name of the item
charge.items[].amount	number	Amount of the item
charge.items[].quantity	integer	Quantity of the item
[charge.items[].type]	string	type of the item, values can be: ‘sku’, ‘tax’, ‘shipping’, ‘discount’
[charge.items[].reference]	string	reference of the item
[charge.items[].item_uri]	string	url of the item in your store
[charge.items[].image_url]	string	url of the image in your store
[charge.shipping_type]	string	Shipping type, values can be: ‘pickup’, ‘delivery’, defaults to ‘delivery’
[charge.shipping_address]	string	Object with shipping address details
[charge.shipping_address.first_name]	string	Shipping first name
[charge.shipping_address.last_name]	string	Shipping last name
charge.shipping_address.line1	string	Shipping address line 1
charge.shipping_address.line2	string	Shipping address line 2
charge.shipping_address.city	string	Shipping city
charge.shipping_address.state	string	Shipping state
charge.shipping_address.postcode	string	Shipping postcode
charge.shipping_address.country	string	Shipping country
charge.billing_address	string	Object with billing address details
[charge.billing_address.first_name]	string	Billing first name
[charge.billing_address.last_name]	string	Billing last name
charge.billing_address.line1	string	Billing address line 1
[charge.billing_address.line2]	string	Billing address line 1
charge.billing_address.city	string	Billing city
charge.billing_address.state	string	Billing state
charge.billing_address.postcode	string	Billing postcode
charge.billing_address.country	string	Billing country

 

IAfterpayMeta

Interface for Afterpay checkout meta information

Kind: global interface

Param	Type
[amount]	number
[currency]	number
[first_name]	string
[last_name]	string
[email]	string
[address_line]	string
[address_line2]	string
[address_city]	string
[address_state]	string
[address_postcode]	string
[address_country]	string
[phone]	string

 

CheckoutButton

Class CheckoutButton transform usual button into checkout

Kind: global class

• CheckoutButton
  • new CheckoutButton(selector, aceessToken, [gatewayId], [type])
  • .on(eventName, cb)
  • .close()
  • .onFinishInsert(selector, dataType)
  • .setMeta(meta)
  • .setBackdropDescription(text)
  • .setBackdropTitle(string)
  • .setSuspendedRedirectUri(string)
  • .setRedirectUrl(string)
  • .turnOffBackdrop()

 

new CheckoutButton(selector, aceessToken, [gatewayId], [type])

Param	Type	Default	Description
selector	string		Selector of html element.
aceessToken	string		PayDock access token or users public key
[gatewayId]	string	"default"	PayDock's gatewayId. By default or if put 'default', it will use the selected default gateway
[type]	string	"PaypalClassic"	Type of gateway (PaypalClassic, Zipmoney)

Example

var widget = new CheckoutButton('#button', 'accessToken','gatewayId');

 

checkoutButton.on(eventName, cb)

Listen to events of widget

Kind: instance method of CheckoutButton

Param	Type	Description
eventName	string	Available event names CHECKOUT_BUTTON_EVENT
cb	listener

Example

widget.on('click', function () {

});

 

checkoutButton.close()

Close popup window forcibly. Only for 'contextual' mode.

Kind: instance method of CheckoutButton
 

checkoutButton.onFinishInsert(selector, dataType)

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

Kind: instance method of CheckoutButton

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

 

checkoutButton.setMeta(meta)

Method for setting meta information for checkout page

Kind: instance method of CheckoutButton

Param	Type	Description
meta	IPayPalMeta | IAfterpayMeta | IZipmoneyMeta	Data which can be shown on checkout page IPayPalMeta IZipmoneyMeta IAfterpayMeta

Example

button.setMeta({
            brand_name: 'paydock',
            reference: '15',
            email: '[e-mail]'
        });

 

checkoutButton.setBackdropDescription(text)

Method for setting backdrop description. Only for 'contextual' mode.

Kind: instance method of CheckoutButton

Param	Type	Description
text	string	description which can be shown in overlay of back side checkout page

Example

button.setBackdropDescription('Custom description');

 

checkoutButton.setBackdropTitle(string)

Method for setting backdrop title. Only for 'contextual' mode.

Kind: instance method of CheckoutButton

Param	Type	Description
string	text	title which can be shown in overlay of back side checkout page

Example

button.setBackdropTitle('Custom title');

 

checkoutButton.setSuspendedRedirectUri(string)

Method for setting suspended redirect uri. Redirect after referred checkout. Only for 'contextual' mode.

Kind: instance method of CheckoutButton

Param	Type	Description
string	uri	uri for redirect (by default)

 

checkoutButton.setRedirectUrl(string)

Method for setting the merchant redirect URL. Merchant's customers redirect after successfull checkout. Only for 'redirect' mode.

Kind: instance method of CheckoutButton

Param	Type	Description
string	url	redirect url

 

checkoutButton.turnOffBackdrop()

Method for disable backdrop on the page. Only for 'contextual' mode.

Kind: instance method of CheckoutButton
Example

button.turnOffBackdrop();

 

ZipmoneyCheckoutButton ⇐ CheckoutButton

Class ZipmoneyCheckoutButton is wrapper of CheckoutButton transform usual button into checkout

Kind: global class
Extends: CheckoutButton

• ZipmoneyCheckoutButton ⇐ CheckoutButton
  • new ZipmoneyCheckoutButton(selector, publicKey, [gatewayId], [gatewayId])
  • .setSuspendedRedirectUri(string)
  • .setRedirectUrl(string)
  • .on(eventName, cb)
  • .close()
  • .onFinishInsert(selector, dataType)
  • .setMeta(meta)
  • .setBackdropDescription(text)
  • .setBackdropTitle(string)
  • .turnOffBackdrop()

 

new ZipmoneyCheckoutButton(selector, publicKey, [gatewayId], [gatewayId])

Param	Type	Default	Description
selector	string		Selector of html element.
publicKey	string		PayDock users public key
[gatewayId]	string	"default"	PayDock's gatewayId. By default or if put 'default', it will use the selected default gateway
[gatewayId]	string	"default"	Checkout mode, it could be set to 'contextual' or 'redirect'. By default it 'contextual'

Example

var widget = new ZipmoneyCheckoutButton('#button', 'publicKey','gatewayId');

 

zipmoneyCheckoutButton.setSuspendedRedirectUri(string)

Method for setting suspended redirect uri. Redirect after referred checkout

The URI is used for a redirect after the checkout is complete. This can be provided, even if using in-context checkout (sdk). By default, the standard styled page will be used. If using in-context (sdk) we will not automatically redirect to this URI.

Kind: instance method of ZipmoneyCheckoutButton
Overrides: setSuspendedRedirectUri

Param	Type	Description
string	uri	uri for suspended redirect (by default)

 

zipmoneyCheckoutButton.setRedirectUrl(string)

Method for setting the merchant redirect URL. The merchant's customers would be redirected to the specified URL at the end of ZipMoney checkout flow.

Once the redirect URL would be set, the checkout flow would be immediately switched from 'contextual' mode to the 'redirect' mode. The merchant's customer would be automatically redirected to this URL after the checkout is complete.

Kind: instance method of ZipmoneyCheckoutButton
Overrides: setRedirectUrl

Param	Type	Description
string	url	URL for redirect

 

zipmoneyCheckoutButton.on(eventName, cb)

Listen to events of widget

Kind: instance method of ZipmoneyCheckoutButton
Overrides: on

Param	Type	Description
eventName	string	Available event names CHECKOUT_BUTTON_EVENT
cb	listener

Example

widget.on('click', function () {

});

 

zipmoneyCheckoutButton.close()

Close popup window forcibly. Only for 'contextual' mode.

Kind: instance method of ZipmoneyCheckoutButton
Overrides: close
 

zipmoneyCheckoutButton.onFinishInsert(selector, dataType)

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

Kind: instance method of ZipmoneyCheckoutButton
Overrides: onFinishInsert

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

 

zipmoneyCheckoutButton.setMeta(meta)

Method for setting meta information for checkout page

Kind: instance method of ZipmoneyCheckoutButton
Overrides: setMeta

Param	Type	Description
meta	IPayPalMeta | IAfterpayMeta | IZipmoneyMeta	Data which can be shown on checkout page IPayPalMeta IZipmoneyMeta IAfterpayMeta

Example

button.setMeta({
            brand_name: 'paydock',
            reference: '15',
            email: '[e-mail]'
        });

 

zipmoneyCheckoutButton.setBackdropDescription(text)

Method for setting backdrop description. Only for 'contextual' mode.

Kind: instance method of ZipmoneyCheckoutButton
Overrides: setBackdropDescription

Param	Type	Description
text	string	description which can be shown in overlay of back side checkout page

Example

button.setBackdropDescription('Custom description');

 

zipmoneyCheckoutButton.setBackdropTitle(string)

Method for setting backdrop title. Only for 'contextual' mode.

Kind: instance method of ZipmoneyCheckoutButton
Overrides: setBackdropTitle

Param	Type	Description
string	text	title which can be shown in overlay of back side checkout page

Example

button.setBackdropTitle('Custom title');

 

zipmoneyCheckoutButton.turnOffBackdrop()

Method for disable backdrop on the page. Only for 'contextual' mode.

Kind: instance method of ZipmoneyCheckoutButton
Overrides: turnOffBackdrop
Example

button.turnOffBackdrop();

 

PaypalCheckoutButton ⇐ CheckoutButton

Class PaypalCheckoutButton is wrapper of CheckoutButton transform usual button into checkout

Kind: global class
Extends: CheckoutButton

• PaypalCheckoutButton ⇐ CheckoutButton
  • new PaypalCheckoutButton(selector, publicKey, [gatewayId])
  • .on(eventName, cb)
  • .close()
  • .onFinishInsert(selector, dataType)
  • .setMeta(meta)
  • .setBackdropDescription(text)
  • .setBackdropTitle(string)
  • .setSuspendedRedirectUri(string)
  • .setRedirectUrl(string)
  • .turnOffBackdrop()

 

new PaypalCheckoutButton(selector, publicKey, [gatewayId])

Param	Type	Default	Description
selector	string		Selector of html element.
publicKey	string		PayDock users public key
[gatewayId]	string	"default"	PayDock's gatewayId. By default or if put 'default', it will use the selected default gateway

Example

var widget = new PaypalCheckoutButton('#button', 'publicKey','gatewayId');

 

paypalCheckoutButton.on(eventName, cb)

Listen to events of widget

Kind: instance method of PaypalCheckoutButton
Overrides: on

Param	Type	Description
eventName	string	Available event names CHECKOUT_BUTTON_EVENT
cb	listener

Example

widget.on('click', function () {

});

 

paypalCheckoutButton.close()

Close popup window forcibly. Only for 'contextual' mode.

Kind: instance method of PaypalCheckoutButton
Overrides: close
 

paypalCheckoutButton.onFinishInsert(selector, dataType)

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

Kind: instance method of PaypalCheckoutButton
Overrides: onFinishInsert

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

 

paypalCheckoutButton.setMeta(meta)

Method for setting meta information for checkout page

Kind: instance method of PaypalCheckoutButton
Overrides: setMeta

Param	Type	Description
meta	IPayPalMeta | IAfterpayMeta | IZipmoneyMeta	Data which can be shown on checkout page IPayPalMeta IZipmoneyMeta IAfterpayMeta

Example

button.setMeta({
            brand_name: 'paydock',
            reference: '15',
            email: '[e-mail]'
        });

 

paypalCheckoutButton.setBackdropDescription(text)

Method for setting backdrop description. Only for 'contextual' mode.

Kind: instance method of PaypalCheckoutButton
Overrides: setBackdropDescription

Param	Type	Description
text	string	description which can be shown in overlay of back side checkout page

Example

button.setBackdropDescription('Custom description');

 

paypalCheckoutButton.setBackdropTitle(string)

Method for setting backdrop title. Only for 'contextual' mode.

Kind: instance method of PaypalCheckoutButton
Overrides: setBackdropTitle

Param	Type	Description
string	text	title which can be shown in overlay of back side checkout page

Example

button.setBackdropTitle('Custom title');

 

paypalCheckoutButton.setSuspendedRedirectUri(string)

Method for setting suspended redirect uri. Redirect after referred checkout. Only for 'contextual' mode.

Kind: instance method of PaypalCheckoutButton
Overrides: setSuspendedRedirectUri

Param	Type	Description
string	uri	uri for redirect (by default)

 

paypalCheckoutButton.setRedirectUrl(string)

Method for setting the merchant redirect URL. Merchant's customers redirect after successfull checkout. Only for 'redirect' mode.

Kind: instance method of PaypalCheckoutButton
Overrides: setRedirectUrl

Param	Type	Description
string	url	redirect url

 

paypalCheckoutButton.turnOffBackdrop()

Method for disable backdrop on the page. Only for 'contextual' mode.

Kind: instance method of PaypalCheckoutButton
Overrides: turnOffBackdrop
Example

button.turnOffBackdrop();

 

AfterpayCheckoutButton ⇐ CheckoutButton

Class AfterpayCheckoutButton is wrapper of CheckoutButton transform usual button into checkout

Kind: global class
Extends: CheckoutButton

• AfterpayCheckoutButton ⇐ CheckoutButton
  • new AfterpayCheckoutButton(selector, accessToken, [gatewayId])
  • .showEnhancedTrackingProtectionPopup(boolean)
  • .on(eventName, cb)
  • .close()
  • .onFinishInsert(selector, dataType)
  • .setMeta(meta)
  • .setBackdropDescription(text)
  • .setBackdropTitle(string)
  • .setSuspendedRedirectUri(string)
  • .setRedirectUrl(string)
  • .turnOffBackdrop()

 

new AfterpayCheckoutButton(selector, accessToken, [gatewayId])

Param	Type	Default	Description
selector	string		Selector of html element.
accessToken	string		PayDock access-token or users public key
[gatewayId]	string	"default"	PayDock's gatewayId. By default or if put 'default', it will use the selected default gateway

Example

var widget = new AfterpayCheckoutButton('#button', 'access-token','gatewayId');

 

afterpayCheckoutButton.showEnhancedTrackingProtectionPopup(boolean)

Method which toggles the "Enhanced Tracking Protection" warning popup to 'on' mode.

This popup with a warning about "Enhanced Tracking Protection" limitations would be shown in the Mozilla Firefox browser version 100+

By default, the popup would not be shown, until the flag would be set to true

Kind: instance method of AfterpayCheckoutButton

Param	Type	Description
boolean	doShow	flag which toggle the popup visibility

 

afterpayCheckoutButton.on(eventName, cb)

Listen to events of widget

Kind: instance method of AfterpayCheckoutButton
Overrides: on

Param	Type	Description
eventName	string	Available event names CHECKOUT_BUTTON_EVENT
cb	listener

Example

widget.on('click', function () {

});

 

afterpayCheckoutButton.close()

Close popup window forcibly. Only for 'contextual' mode.

Kind: instance method of AfterpayCheckoutButton
Overrides: close
 

afterpayCheckoutButton.onFinishInsert(selector, dataType)

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

Kind: instance method of AfterpayCheckoutButton
Overrides: onFinishInsert

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

 

afterpayCheckoutButton.setMeta(meta)

Method for setting meta information for checkout page

Kind: instance method of AfterpayCheckoutButton
Overrides: setMeta

Param	Type	Description
meta	IPayPalMeta | IAfterpayMeta | IZipmoneyMeta	Data which can be shown on checkout page IPayPalMeta IZipmoneyMeta IAfterpayMeta

Example

button.setMeta({
            brand_name: 'paydock',
            reference: '15',
            email: '[e-mail]'
        });

 

afterpayCheckoutButton.setBackdropDescription(text)

Method for setting backdrop description. Only for 'contextual' mode.

Kind: instance method of AfterpayCheckoutButton
Overrides: setBackdropDescription

Param	Type	Description
text	string	description which can be shown in overlay of back side checkout page

Example

button.setBackdropDescription('Custom description');

 

afterpayCheckoutButton.setBackdropTitle(string)

Method for setting backdrop title. Only for 'contextual' mode.

Kind: instance method of AfterpayCheckoutButton
Overrides: setBackdropTitle

Param	Type	Description
string	text	title which can be shown in overlay of back side checkout page

Example

button.setBackdropTitle('Custom title');

 

afterpayCheckoutButton.setSuspendedRedirectUri(string)

Method for setting suspended redirect uri. Redirect after referred checkout. Only for 'contextual' mode.

Kind: instance method of AfterpayCheckoutButton
Overrides: setSuspendedRedirectUri

Param	Type	Description
string	uri	uri for redirect (by default)

 

afterpayCheckoutButton.setRedirectUrl(string)

Method for setting the merchant redirect URL. Merchant's customers redirect after successfull checkout. Only for 'redirect' mode.

Kind: instance method of AfterpayCheckoutButton
Overrides: setRedirectUrl

Param	Type	Description
string	url	redirect url

 

afterpayCheckoutButton.turnOffBackdrop()

Method for disable backdrop on the page. Only for 'contextual' mode.

Kind: instance method of AfterpayCheckoutButton
Overrides: turnOffBackdrop
Example

button.turnOffBackdrop();

 

CHECKOUT_MODE : object

Kind: global variable

Param	Type	Default
CONTEXTUAL	string	"contextual"
REDIRECT	string	"redirect"

 

GATEWAY_TYPE : object

Kind: global variable

Param	Type	Default
ZIPMONEY	string	"Zipmoney"
PAYPAL	string	"PaypalClassic"
AFTERPAY	string	"Afterpay"

 

CHECKOUT_BUTTON_EVENT : object

Kind: global constant

Param	Type	Default
CLICK	string	"click"
POPUP_REDIRECT	string	"popup_redirect"
ERROR	string	"error"
ACCEPTED	string	"accepted"
FINISH	string	"finish"
CLOSE	string	"close"

 

listener : function

This callback will be called for each event in payment source widget

Kind: global typedef

Api

You can find description of all methods and parameters here

This wrapper helps you to work with paydock api emdpoints

Get browser details

var browserDetails = await new paydock.Api('publicKey').setEnv('env').getBrowserDetails();

// ES2015 | TypeScript

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

var browserDetails = await new paydock.Api('publicKey').setEnv('env').getBrowserDetails();

Initialization

var response = await new paydock.Api('publicKey').setEnv('env').charge().preAuth({
      amount: 100,
      currency: 'AUD',
      token: 'token',
    });

// ES2015 | TypeScript

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

var response = await new Api('publicKey').setEnv('env').charge().preAuth({
      amount: 100,
      currency: 'AUD',
      token: 'token',
    });

Then write only need 2 lines of code in js to make request

Initialization full example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style></style>
</head>
<body>
    <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
    <script>
         (async function() {
            var response = await new Api('publicKey').setEnv('env').charge().preAuth({
                amount: 100,
                currency: 'AUD',
                token: 'token',
            });
        })();
    </script>
</body>
</html>

Canvas3ds

You can find description of all methods and parameters here

This widget provides you to integrate 3d Secure

Canvas3ds 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 canvas3ds = new paydock.Canvas3ds('#widget', 'token');
canvas3ds.load();

// ES2015 | TypeScript

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

var list = new Canvas3ds('#widget', 'token');
list.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: 40%;height: 300px;}</style>
</head>
<body>
    <div id="widget"></div>
    <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js"></script>
    <script>
        var canvas3ds = new paydock.Canvas3ds('#widget', 'token');
        canvas3ds.load();
    </script>
</body>
</html>

Canvas3ds advanced example

Settings

canvas3ds.setEnv('sandbox'); // set enviroment

canvas3ds.hide(); // hide widget

canvas3ds.show(); // show widget

canvas3ds.on('chargeAuthSuccess', function (data) {
  console.log(data);
});
canvas3ds.on('chargeAuthReject', function (data) {
  console.log(data);
});
canvas3ds.on('chargeAuthCancelled', function (data) {
  console.log(data);
});
canvas3ds.on('additionalDataCollectSuccess', function (data) {
  console.log(data);
});
canvas3ds.on('additionalDataCollectReject', function (data) {
  console.log(data);
});
canvas3ds.on('chargeAuth', function (data) {
  console.log(data);
});

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: 40%;height: 450px;}</style>
</head>
<body>
    <div id="widget3ds"></div>
    <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js"></script>
    <script>
        var canvas3ds = new paydock.Canvas3ds('#widget3ds', 'token');
        canvas3ds.on('chargeAuthSuccess', function (data) {
            console.log('chargeAuthSuccess', data);
        });
        canvas3ds.on('chargeAuthReject', function (data) {
            console.log('chargeAuthReject', data);
        });
        canvas3ds.load();
    </script>
</body>
</html>

Full example with pre authorization

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>iframe {border: 0;width: 40%;height: 450px;}</style>
</head>
<body>
    <div id="widget"></div>
    <div id="widget3ds"></div>
    <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js"></script>
    <script>
        (async function () {
            var htmlWidget = new paydock.HtmlWidget('#widget', 'publicKey', 'gatewayId');
            htmlWidget.load();
            var {payment_source} = await htmlWidget.on('finish');
            var preAuthResp = await new paydock.Api('publicKey').setEnv('sandbox').charge().preAuth({
                  amount: 100,
                  currency: 'AUD',
                  token: payment_source,
                });
            var canvas = new paydock.Canvas3ds('#widget3ds', preAuthResp._3ds.token);
            canvas.load();
            var chargeAuthEvent = await canvas.on('chargeAuth');
            console.log('chargeAuthEvent', chargeAuthEvent);
        })()
    </script>
</body>
</html>

Canvas 3ds for Standalone 3ds charges

After you initialized the standalone 3ds charge via v1/charges/standalone-3ds API endpoint, you get a token used to initialize the Canvas3ds. All above information regarding setup, loading and initialization still apply.

Full example

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Title</title>
        <style>
            iframe {
                border: 0;
                width: 40%;
                height: 450px;
            }
        </style>
    </head>
    <body>
        <div id="widget3ds"></div>
        <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js"></script>
        <script>
            var canvas3ds = new paydock.Canvas3ds("#widget3ds", "token");
            canvas3ds.on("chargeAuthSuccess", function (data) {
                console.log(data);
            });
            canvas3ds.on("chargeAuthReject", function (data) {
                console.log(data);
            });
            canvas3ds.on("chargeAuthChallenge", function (data) {
                console.log(data);
            });
            canvas3ds.on("chargeAuthDecoupled", function (data) {
                console.log(data.result.description);
            });
            canvas3ds.on("chargeAuthInfo", function (data) {
                console.log(data.info);
            });
            canvas3ds.on("error", function ({ charge_3ds_id, error }) {
                console.log(error);
            });
            canvas3ds.load();
        </script>
    </body>
</html>

• The chargeAuthSuccess event is executed both for frictionless flow, or for challenge flow after the customer has correctly authenticated with the bank using whatever challenge imposed.
• The chargeAuthReject event is executed when the authorization was rejected or when a timeout was received by the underlying system:
  • A data.status of AuthTimedOut will be received for timeouts.
  • A data.status of rejected will be received when the authorization was rejected.
  • A data.status of invalid_event will be received for unhandled situations.
• The chargeAuthChallenge event is sent before starting a challenge flow (i.e. opening an IFrame for the customer to complete a challenge with ther bank). Once the end customer performs the challenge, the Canvas3ds will be able to identify the challenge result and will either produce a chargeAuthSuccess or chargeAuthReject event.
• The chargeAuthDecoupled event is sent when the flow is a decoupled challenge, alongside a data.result.description field that you must show to the customer, indicating the method the user must use to authenticate. For example this may happen by having the cardholder authenticating directly with their banking app through biometrics. Once the end customer does this, the Canvas3ds will be able to recognize the challenge result is ready and will either produce a chargeAuthSuccess or chargeAuthReject event.
• The error event is sent if an unexpected issue with the client library occurs. In such scenarios, you should consider the autentication process as interrupted:
  • When getting this event, you will get on data.error the full error object.

Events and Values

Event Value	Type	Description
chargeAuthSuccess	object	Instance of ChargeEventResponse
chargeAuthReject	object	Instance of ChargeEventResponse
chargeAuthChallenge	object	Instance of ChargeEventResponse
chargeAuthDecoupled	object	Instance of ChargeEventResponse
chargeAuthInfo	object	Instance of ChargeEventResponse
error	object	Instance of chargeError

Response Values

ChargeEventResponse

Param	Type	Description
status	string	status for the event transaction
charge_3ds_id	string	Universal unique transaction identifier to identify the transaction
info	string	info field for chargeAuthInfo event
result.description	string [Optional]	field that you must show to the customer, indicating the method the user must use to authenticate during the decoupled challenge flow.

ChargeError

Param	Type	Description
error	object	error response
charge_3ds_id	string	Universal unique transaction identifier to identify the transaction

Vault Display Widget

You can find description of all methods and parameters here

The vault display form allows viewing card number and CVV. The form can be customised according to your needs. You can set styles as well as subscribe to widget events that help monitor user’s actions in real time.

Vault Display 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.VaultDisplayWidget('#widget', 'token');
widget.load();

// ES2015 | TypeScript

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

var widget = new VaultDisplayWidget('#widget', 'token');
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>

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

    <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
    <script>
        var widget = new paydock.VaultDisplayWidget('#widget', 'token');
        widget.load();
    </script>
</body>
</html>

Widget advanced example

Customization

widget.setEnv('sandbox');

widget.on('after_load', function (data) {
  console.log(data);
});

widget.on('cvv_secure_code_requested', function (data) {
  console.log(data);
});

widget.on('card_number_secure_code_requested', function (data) {
  console.log(data);
});

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 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: 40%;height: 450px;}</style>
</head>
<body>

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

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

        widget.setEnv('sandbox');

        widget.on('after_load', function (data) {
          console.log(data);
        });

        widget.on('cvv_secure_code_requested', function (data) {
          console.log(data);
        });

        widget.on('card_number_secure_code_requested', function (data) {
          console.log(data);
        });

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

        widget.load();
    </script>
</body>
</html>

 

VaultDisplayWidget

Class VaultDisplayWidget include method for working on html

Kind: global class

• VaultDisplayWidget
  • new VaultDisplayWidget(selector, token)
  • .setEnv(env, [alias])
  • .on(eventName, [cb]) ⇒ Promise.<(IEventData|void)>
  • .setStyles(fields)
  • .load()

 

new VaultDisplayWidget(selector, token)

Param	Type	Description
selector	string	Selector of html element. Container for widget
token	string	One time token

Example

var widget = new VaultDisplayWidget('#widget', 'token');

 

vaultDisplayWidget.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 VaultDisplayWidget

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

Example

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

 

vaultDisplayWidget.on(eventName, [cb]) ⇒ Promise.<(IEventData|void)>

Listen to events of widget

Kind: instance method of VaultDisplayWidget

Param	Type	Description
eventName	string	Available event names VAULT_DISPLAY_EVENT
[cb]	listener

Example

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

 

vaultDisplayWidget.setStyles(fields)

Object contain styles for widget

Kind: instance method of VaultDisplayWidget

Param	Type	Description
fields	VaultDisplayStyle	name of styles which can be shown in widget VAULT_DISPLAY_STYLE

Example

widget.setStyles({
      background_color: '#fff',
      border_color: 'yellow',
      text_color: '#FFFFAA',
      button_color: 'rgba(255, 255, 255, 0.9)',
      font_size: '20px',
      fort_family: 'fantasy'
  });

 

vaultDisplayWidget.load()

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

Kind: instance method of VaultDisplayWidget

Wallet Buttons

You can find description of all methods and parameters here

Wallet Buttons allow you to easily integrate different E-Wallets into your checkout. Currently supports ApplePay, Google Pay, Google Pay and Apple Pay via Stripe, Flypay and Flypay V2 checkout, Paypal Smart Buttons Checkout and Afterpay.

If available in your client environment, you will display a simple button that upon clicking it the user will follow the standard flow for the appropriate Wallet. If not available an event will be raised and no button will be displayed.

Wallet Buttons simple example

Container

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

You must create a container for the Wallet Buttons. Inside this tag, the button will be initialized.

Before initializing the button, you must perform a POST request to charges/wallet from a secure environment like your server. This call will return a token that is required to load the button and securely complete the payment. You can find the documentation to this call in the PayDock API documentation.

Initialization

The following is the minimum required initialization parameters for Apple Pay and Google Pay via Stripe:

let button = new paydock.WalletButtons(
    "#widget",
    token,
    {
        amount_label: "Total",
        country: "DE",
    }
);
button.load();

// ES2015 | TypeScript
import { WalletButtons } from '@paydock/client-sdk';

var button = new WalletButtons(
    '#widget',
    token,
    {
        amount_label: 'Total',
        country: 'DE',
    }
);
button.load();

Flypay and Paypal wallets do not require any meta sent to the wallet, so the following is enough for initialization:

let button = new paydock.WalletButtons(
    "#widget",
    token,
    {}
);
button.load();

// ES2015 | TypeScript
import { WalletButtons } from '@paydock/client-sdk';

var button = new WalletButtons(
    '#widget',
    token,
    {}
);
button.load();

For Afterpay wallet, the country code is required:

let button = new paydock.WalletButtons(
    "#widget",
    token,
    {
        country: "AU",
    }
);
button.load();

// ES2015 | TypeScript
import { WalletButtons } from '@paydock/client-sdk';

var button = new WalletButtons(
    '#widget',
    token,
    {
        country: 'AU',
    }
);
button.load();

For Flypay v2 wallet, the client_id is required:

let button = new paydock.WalletButtons(
    "#widget",
    token,
    {
        client_id: "client_id",
    }
);
button.load();

// ES2015 | TypeScript
import { WalletButtons } from '@paydock/client-sdk';

var button = new WalletButtons(
    '#widget',
    token,
    {
        client_id: "client_id",
    }
);
button.load();

Setting environment

Current method can change environment. By default environment = sandbox. Bear in mind that you must set an environment before calling button.load().

button.setEnv('sandbox');

Full example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>Payment using PayDock Wallet Button!</h2>
    <div id="widget"></div>
</body>
<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
<script>
        let button = new paydock.WalletButtons(
            "#widget",
            token,
            {
                amount_label: "Total",
                country: "DE",
            }
        );
        button.load();
</script>
</html>

Wallet Buttons advanced example

Checking for button availability

If the customer's browser is not supported, or the customer does not have any card added to their Google Pay or Apple Pay wallets, the button will not load. In this case the callback onUnavailable() will be called. You can define the behavior of this function before loading the button.

button.onUnavailable(() => console.log("No wallet buttons available"));

Forcibly closing the checkout

In some situations you may want to forcibly close the checkout so that your user is back in your checkout screen, fow which you can use this method. Currently supported by Flypay wallet only.

button.close();

Performing actions when the wallet button is clicked

In some situations you may want to perform some validations or actions when the user clicks on the wallet button, for which you can use this method. Currently supported by Paypal, ApplePay and GooglePay wallets.

button.onClick(() => console.log("Perform actions on button click"));

Performing actions when shipping info is updated

In Flypay, Paypal, ApplePay via MPGS and GooglePay via MPGS integrations after each shipping info update the onUpdate(data) will be called with the selected shipping address information, plus selected shipping method when applicable for Paypal, ApplePay and GooglePay. Merchants should handle this callback, recalculate shipping costs in their server by analyzing the new data, and submit a backend to backend request to POST charges/:id with the new total amount and shipping amount (you can find the documentation of this call in the PayDock API documentation).

For Paypal integration specifically, if shipping is enabled for the wallet button and different shipping methods were provided in the create wallet charge call, Merchants must ensure that the posted shipping.amount to POST charges/:id matches the selected shipping option amount (value sent in when initializing the wallet charge). In other words, when providing shipping methods the shipping amount is bound to being one of the provided shipping method amount necessarily. Bear in mind that the total charge amount must include the shipping.amount, since it represents the full amount to be charged to the customer.

After analyzing the new shipping information, and making the post with the updated charge and shipping amounts if necessary, the button.update({ success: true/false }) wallet button method needs to be called to resume the interactions with the customer. Not calling this will result in unexpected behavior.

button.onUpdate((data) => {
    console.log("Updating amount via a backend to backend call to POST charges/:id");
     // call `POST charges/:id` to modify charge
     button.update({ success: true });
});

For ApplePay via MPGS and GooglePay via MPGS integrations, you can also return a new amount and new shipping_options in case new options are needed based on the updated shipping data. Before the user authorizes the transaction, you receive redacted address information (address_country, address_city, address_state, address_postcode), and this data can be used to recalculate the new amount and new shipping options.

button.onUpdate((data) => {
    console.log("Updating amount via a backend to backend call to POST charges/:id");
     // call `POST charges/:id` to modify charge
     button.update({
        success: true,
        body: {
            amount: 15,
            shipping_options: [
                {
                    id: "NEW-FreeShip",
                    label: "NEW - Free Shipping",
                    detail: "Arrives in 3 to 5 days",
                    amount: "0.00"
                },
                {
                    id: "NEW-FastShip",
                    label: "NEW - Fast Shipping",
                    detail: "Arrives in less than 1 day",
                    amount: "10.00"
                }
            ]
        }
    });
});

Performing actions after the payment is completed

After the payment is completed, the onPaymentSuccessful(data) will be called if the payment was successful. If the payment was not successful, the function onPaymentError(data) will be called. If fraud check is active for the gateway, a fraud body was sent in the wallet charge initialize call and the fraud service left the charge in review, then the onPaymentInReview(data) will be called. All three callbacks return relevant data according to each one of the scenarios.

Note that these callbacks will not trigger for Afterpay wallet since the payment completion for it is done via Redirect method, and therefore this SDK won't be loaded once the payment is completed at checkout.

button.onPaymentSuccessful((data) => console.log("The payment was successful"));

button.onPaymentInReview((data) => console.log("The payment is on fraud review"));

button.onPaymentError((data) => console.log("The payment was not successful"));

Events

The above events can be used in a more generic way via de on function, and making use of the corresponding event names.

button.on(EVENT.UNAVAILABLE, () => console.log("No wallet buttons available"));
button.on(EVENT.UPDATE, (data) => console.log("Updating amount via a backend to backend call to POST charges/:id");
button.on(EVENT.PAYMENT_SUCCESSFUL, (data) => console.log("The payment was successful"));
button.on(EVENT.PAYMENT_ERROR, (data) => console.log("The payment was not successful"));

This example shows how to use these functions for Apple and Google Pay via Stripe: (Required meta fields: amount_label, country. Optional meta fields: wallets)

Apple and Google Pay via Stripe Full example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>Payment using PayDock Wallet Button!</h2>
    <div id="widget"></div>
</body>
<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
<script>
    let button = new paydock.WalletButtons(
        "#widget",
        charge_token,
        {
            amount_label: "Total",
            country: "DE",
            wallets: ["google", "apple"],
        }
    );
    button.setEnv('sandbox');
    button.onUnavailable(() => console.log("No wallet buttons available"));
    button.onPaymentSuccessful((data) => console.log("The payment was successful"));
    button.onPaymentError((data) => console.log("The payment was not successful"));
    button.onPaymentInReview((data) => console.log("The payment is on fraud review"));
    button.load();
</script>
</html>

This example shows how to use these functions for Paypal Smart Checkout Buttons: (Required meta fields: - . Optional meta fields: request_shipping, pay_later, standalone, style)

Paypal Smart Checkout Buttons Full example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>Payment using PayDock Wallet Button!</h2>
    <div id="widget"></div>
</body>
<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
<script>
    let button = new paydock.WalletButtons(
        "#widget",
        charge_token,
        {
            request_shipping: true,
            pay_later: true,
            standalone: false,
            style: {
                layout: 'horizontal',
                color: 'blue',
                shape: 'rect',
                label: 'paypal',
            },
        }
    );
    button.setEnv('sandbox');
    button.onUnavailable(() => console.log("No wallet buttons available"));
    button.onUpdate((data) => {
        console.log("Updating amount via a backend to backend call to POST charges/:id");
        // call `POST charges/:id` to modify charge
        button.update({ success: true });
    });
    button.onPaymentSuccessful((data) => console.log("The payment was successful"));
    button.onPaymentError((data) => console.log("The payment was not successful"));
    button.onPaymentInReview((data) => console.log("The payment is on fraud review"));

    // Example 1: Asynchronous onClick handler
    const asyncLogic = async () => {
        // Perform asynchronous logic. Expectation is that a Promise is returned and attached to response via `attachResult`,
        // and resolve or reject of it will dictate how wallet behaves.
    }

    button.onClick(({ data: { attachResult } }) => {
        // Promise is attached to the result. On Paypal, when promise is resolved, the user Journey will continue.
        // If no promise is attached then the Paypal journey will not depend on the promise being resolved or rejected
        attachResult(asyncLogic());
    });

    // Example 2: Synchronous onClick handler
    // button.onClick(({ data: { attachResult } }) => {
    //     // Perform synchronous logic
    //     console.log("Synchronous onClick: Button clicked");
    //     // Optionally return a boolean flag to halt the operation
    //     attachResult(false);
    // });

    button.load();
</script>
</html>

This example shows how to use these functions for Flypay v1 Wallet. (Required meta fields: - . Optional meta fields: request_shipping, pay_later, style)

Flypay Full example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>Payment using PayDock Wallet Button!</h2>
    <div id="widget"></div>
</body>
<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
<script>
    let button = new paydock.WalletButtons(
          "#widget",
          charge_token,
          {
               request_shipping: true
          }
     );
    button.setEnv('sandbox');
    button.onUnavailable(() => console.log("No wallet buttons available"));
    button.onUpdate((data) => {
          console.log("Updating amount via a backend to backend call to POST charges/:id");
          // call `POST charges/:id` to modify charge
          button.update({ success: true });
     });
    button.onPaymentSuccessful((data) => console.log("The payment was successful"));
    button.onPaymentError((data) => console.log("The payment was not successful"));
    button.onPaymentInReview((data) => console.log("The payment is on fraud review"));
    button.load();
</script>
</html>

This example shows how to use these functions for Flypay v2 Wallet. (Required meta fields: - . Optional meta fields: -)

Flypay V2 Full example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>Payment using PayDock Wallet Button!</h2>
    <div id="widget"></div>
</body>
<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
<script>
    let button = new paydock.WalletButtons(
		"#widget",
		charge_token,
		{
            access_token: 'TOKEN',
            refresh_token: 'TOKEN',
            client_id: 'CLIENT_ID',
        },
	);
    button.setEnv('sandbox');
    button.onUnavailable((data) => console.