Client-sdk

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

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

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

Other information

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

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

Get started

With package manager

To install with package manager, enter the following command:

npm install @paydock/client-sdk

You can use ES2015 or TypeScript modules

@paydock/client-sdk/widget

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

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

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

// ES2015 / TypeScript

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

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

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

Download from CDN

You should begin by including the library in your page.

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

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

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

Also can download library the production version or the development version

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

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

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

Widget

You can find description of all methods and parameters here

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

Widget simple example

Container

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

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

Initialization

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

// ES2015 | TypeScript

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

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

Full example

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

Widget advanced example

Customization

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

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

Customization from html

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

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

Settings

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

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

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

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

Full example

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

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

Classes

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
TRIGGER : object: List of available triggers

Interfaces

IFormValidation: Interface of data from validation event.
IEventMetaData: Interface of data from event.
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`	Event name
purpose	`string`	System variable. Purpose of event
message_source	`string`	System variable. Event source
[ref_id]	`string`	Custom value for identify result of processed operation
[form_valid]	`boolean`	Form is valid
[invalid_fields]	`array`	Invalid form fields
[invalid_showed_fields]	`array`	List of fields on which the error is already displayed
[validators]	`array`	List of validators with fields

IEventMetaData

Interface of data from event.

Kind: global interface

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

IEventAfterLoadData

Interface of data from event.

Kind: global interface

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

IEventFinishData

Interface of data from event.

Kind: global interface

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

IPayPalMeta

Interface for PayPal checkout meta information

Kind: global interface

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

IStyles

Interface for classes that represent widget's styles.

Kind: global interface

Param	Type
[background_color]	`string`
[text_color]	`string`
[border_color]	`string`
[button_color]	`string`
[error_color]	`string`
[success_color]	`string`
[font_size]	`string`
[font_family]	`string`

ITexts

Interface for classes that represent widget's text.

Kind: global interface

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

IBamboraMeta

Interface for Bamboora meta information

Kind: global interface

Param	Type	Description
[customer_storage_number]	`string`	Customer storage number
[tokenise_algorithm]	`number`	Tokenise algorithm

IElementStyleInput

Interface for styling input element.

Kind: global interface

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

IElementStyleSubmitButton

Interface for styling submit_button element.

Kind: global interface

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

IElementStyleLabel

Interface for styling label element.

Kind: global interface

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

IElementStyleTitle

Interface for styling title element.

Kind: global interface

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

IElementStyleTitleDescription

Interface for styling title_description element.

Kind: global interface

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

ITriggerData

Interface for classes that represent a trigger data.

Kind: global interface

Param	Type
[configuration_token]	`string`
[tab_number]	`string`
[elements]	`string`
[form_values]	`string`

HtmlWidget ⇐ `HtmlMultiWidget`

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

Kind: global class
Extends: HtmlMultiWidget, MultiWidget

HtmlWidget ⇐ HtmlMultiWidget
- new HtmlWidget(selector, publicKey, [gatewayID], [paymentType], [purpose])
- .setWebHookDestination(url)
- .setSuccessRedirectUrl(url)
- .setErrorRedirectUrl(url)
- .setFormFields(fields)
- .setFormElements(elements)
- .setMeta(object)
- .load()
- .on(eventName, [cb]) ⇒ Promise.<(IEventData|IEventMetaData|IEventFinishData|IFormValidation)> | void
- .trigger(triggers, data)
- .getValidationState() ⇒ IFormValidation
- .isValidForm() ⇒ boolean
- .isInvalidField(field) ⇒ boolean
- .isFieldErrorShowed(field) ⇒ boolean
- .isInvalidFieldByValidator(field, validator) ⇒ boolean
- .hide([saveSize])
- .show()
- .reload()
- .hideElements(elements)
- .showElements(elements)
- .updateFormValues(fieldValues)
- .onFinishInsert(selector, dataType)
- .interceptSubmitForm(selector)
- .useCheckoutAutoSubmit()
- .useAutoResize()
- .setStyles(fields)
- .usePhoneCountryMask([options])
- .setTexts(fields)
- .setElementStyle(element, [state], styles)
- .setFormValues(fieldValues)
- .setFormLabels(fieldLabels)
- .setFormPlaceholders(fieldPlaceholders)
- .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 test@example.com',
          label: 'Email for the receipt',
          value: 'predefined@email.com',
      },
  ])

htmlWidget.setMeta(object)

The method to set meta information for the checkout page

Kind: instance method of HtmlWidget

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

Example

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

htmlWidget.load()

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

Kind: instance method of HtmlWidget
Overrides: load

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

Listen to events of widget

Kind: instance method of HtmlWidget
Overrides: on

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

Example

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

htmlWidget.trigger(triggers, data)

This callback will be called for every trigger

Kind: instance method of HtmlWidget
Overrides: trigger

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

htmlWidget.getValidationState() ⇒ `IFormValidation`

Using this method you can get validation state information

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

htmlWidget.isValidForm() ⇒ `boolean`

Using this method you can check if the form is valid

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

htmlWidget.isInvalidField(field) ⇒ `boolean`

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

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

Param	Type	Description
field	`string`	Field name

htmlWidget.isFieldErrorShowed(field) ⇒ `boolean`

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

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

Param	Type	Description
field	`string`	Field name

htmlWidget.isInvalidFieldByValidator(field, validator) ⇒ `boolean`

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

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

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

htmlWidget.hide([saveSize])

Using this method you can hide widget after load

Kind: instance method of HtmlWidget
Overrides: hide

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

htmlWidget.show()

Using this method you can show widget after using hide method

Kind: instance method of HtmlWidget
Overrides: show

htmlWidget.reload()

Using this method you can reload widget

Kind: instance method of HtmlWidget
Overrides: reload

htmlWidget.hideElements(elements)

Using this method you can hide any elements inside widget

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)

Using this method you can show any elements inside widget

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

Kind: instance method of HtmlWidget
Overrides: showElements

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

htmlWidget.updateFormValues(fieldValues)

Method for update values for form fields inside the widget

Kind: instance method of HtmlWidget
Overrides: updateFormValues

Param	Type	Description
fieldValues	`IFormValues`	Fields with values

Example

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

htmlWidget.onFinishInsert(selector, dataType)

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

Kind: instance method of HtmlWidget
Overrides: onFinishInsert

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

htmlWidget.interceptSubmitForm(selector)

Widget will intercept submit of your form for processing widget

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

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

Param	Type	Description
selector	`string`	css selector of your form

Example

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

htmlWidget.useCheckoutAutoSubmit()

This method hides a submit button and automatically execute form submit

Kind: instance method of HtmlWidget
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: 'predefined@email.com',
      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 test@example.com'
  })

htmlWidget.setIcons()

The method to change the widget icons

Kind: instance method of HtmlWidget
Overrides: setIcons
Todo

[ ] DEPRECATED

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

new 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()

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

Kind: instance method of HtmlMultiWidget

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

Listen to events of widget

Kind: instance method of HtmlMultiWidget

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

Example

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

htmlMultiWidget.trigger(triggers, data)

This callback will be called for every trigger

Kind: instance method of HtmlMultiWidget

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

htmlMultiWidget.getValidationState() ⇒ `IFormValidation`

Using this method you can get validation state information

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

htmlMultiWidget.isValidForm() ⇒ `boolean`

Using this method you can check if the form is valid

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

htmlMultiWidget.isInvalidField(field) ⇒ `boolean`

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

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

Param	Type	Description
field	`string`	Field name

htmlMultiWidget.isFieldErrorShowed(field) ⇒ `boolean`

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

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

Param	Type	Description
field	`string`	Field name

htmlMultiWidget.isInvalidFieldByValidator(field, validator) ⇒ `boolean`

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

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

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

htmlMultiWidget.hide([saveSize])

Using this method you can hide widget after load

Kind: instance method of HtmlMultiWidget

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

htmlMultiWidget.show()

Using this method you can show widget after using hide method

Kind: instance method of HtmlMultiWidget

htmlMultiWidget.reload()

Using this method you can reload widget

Kind: instance method of HtmlMultiWidget

htmlMultiWidget.hideElements(elements)

Using this method you can hide any elements inside widget

Kind: instance method of HtmlMultiWidget

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

Example

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

htmlMultiWidget.showElements(elements)

Using this method you can show any elements inside widget

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

Kind: instance method of HtmlMultiWidget

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

htmlMultiWidget.updateFormValues(fieldValues)

Method for update values for form fields inside the widget

Kind: instance method of HtmlMultiWidget

Param	Type	Description
fieldValues	`IFormValues`	Fields with values

Example

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

htmlMultiWidget.onFinishInsert(selector, dataType)

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

Kind: instance method of HtmlMultiWidget

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

htmlMultiWidget.interceptSubmitForm(selector)

Widget will intercept submit of your form for processing widget

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

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

Param	Type	Description
selector	`string`	css selector of your form

Example

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

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: 'predefined@email.com',
      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 test@example.com'
  })

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 test@example.com',
          label: 'Email For Receipt',
          value: 'predefined@email.com',
      },
  ])

htmlMultiWidget.setIcons()

The method to change the widget icons

Kind: instance method of HtmlMultiWidget
Overrides: setIcons
Todo

[ ] DEPRECATED

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)

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: 'wault@paydock.com'
        });

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)

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: 'predefined@email.com',
      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 test@example.com'
  })

multiWidget.setFormElements(elements)

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 test@example.com',
          label: 'Email For Receipt',
          value: 'predefined@email.com',
      },
  ])

multiWidget.setIcons()

The method to change the widget icons

Kind: instance method of MultiWidget
Todo

[ ] DEPRECATED

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

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/payment-source-widget';

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`	Event name
purpose	`string`	System variable. Purpose of event
message_source	`string`	System variable. Event source
[ref_id]	`string`	Custom value for identify result of processed operation
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`	Event name
purpose	`string`	System variable. Purpose of event
message_source	`string`	System variable. Event source
[ref_id]	`string`	Custom value for identify result of processed operation

IEventSizeData

Interface of data from event.

Kind: global interface

Param	Type	Description
event	`number`	Event name
purpose	`number`	System variable. Purpose of event
message_source	`string`	System variable. Event source
[ref_id]	`string`	Custom value for identify 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)

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

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":"joshuawood@hotmail.com.au",
       "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: 'wanda.mertz@example.com',
        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: +12345678901)
[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: +12345678901)
[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])

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: 'wault@paydock.com'
        });

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

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: 'wault@paydock.com'
        });

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

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: 'wault@paydock.com'
        });

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

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: 'wault@paydock.com'
        });

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/api';
    
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/api';
    
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/canvas3ds';

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/vault-display-widget';
    
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, Flypay V2 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();

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 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"));
    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',
        },
	);
    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.onAuthTokensChanged((data) => console.log('Authentication tokens changed'));
    button.load();
</script>
</html>

This example shows how to use these functions for ApplePay via MPGS and GooglePay via MPGS:

(Required meta fields: amount_label, country. Optional meta fields: raw_data_initialization, request_shipping, style.button_type)

ApplePay and GooglePay via MPGS 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',
            request_shipping: true,
            show_billing_address: true,
            style: {
                google: {
                    button_type: 'buy',
                    button_size_mode: 'static',
                    button_color: 'white',
                },
                apple: {
                    button_type: 'buy',
                },
            },
            shipping_options: [
                {
                    id: "FreeShip",
                    label: "Free Shipping",
                    detail: "Arrives in 5 to 7 days",
                    amount: "0.00"
                },
                {
                    id: "FastShip",
                    label: "Fast Shipping",
                    detail: "Arrives in 1 day",
                    amount: "10.00"
                }
            ]
        }
    );
    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.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"
                    }
                ]
            }
        });
    });
    button.load();
</script>
</html>

Also, for ApplePay via MPGS you can initialize the ApplePayPaymentRequest with your own values instead of using the default ones. Below you can see an example on how to initialize the ApplePayPaymentRequest with the raw_data_initialization meta field.

Similarly, for GooglePay via MPGS you can initialize the PaymentMethodSpecification with your own values instead of using the default ones. Below you can see an example on how to initialize the PaymentMethodSpecification with the raw_data_initialization meta field.

ApplePay and GooglePay via MPGS Raw data initialization 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,
        {
            raw_data_initialization: {
                apple: {
                    countryCode: "AU",
                    currencyCode: "AUD",
                    merchantCapabilities: ["supports3DS","supportsCredit","supportsDebit"],
                    supportedNetworks: ["visa","masterCard","amex","discover"],
                    requiredBillingContactFields: ["name","postalAddress"],
                    requiredShippingContactFields:["postalAddress","name","phone","email" ],
                    total: {
                        label: "Total",
                        amount: "10",
                        type: "final",
                    }
                },
                google: {
                    type: "CARD",
                    parameters: {
                        allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
                        allowedCardNetworks: [
                            "AMEX",
                            "DISCOVER",
                            "INTERAC",
                            "JCB",
                            "MASTERCARD",
                            "VISA",
                        ],
                        billingAddressRequired: true,
                    },
                },
            },
            amount_label: "Total",
            country: 'DE',
            request_shipping: true,
            show_billing_address: true,
            style: {
                google: {
                    button_type: 'buy',
                    button_size_mode: 'static',
                    button_color: 'white',
                },
                apple: {
                    button_type: 'buy',
                },
            },
            shipping_options: [
                {
                    id: "FreeShip",
                    label: "Free Shipping",
                    detail: "Arrives in 5 to 7 days",
                    amount: "0.00"
                },
                {
                    id: "FastShip",
                    label: "Fast Shipping",
                    detail: "Arrives in 1 day",
                    amount: "10.00"
                }
            ]
        }
    );
    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.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"
                    }
                ]
            }
        });
    });
    button.load();
</script>
</html>

Classes

WalletButtons: Class WalletButtons to work with different E-Wallets within html

@paydock/client-sdk

Client-sdk

Other information

Get started

With package manager

Download from CDN

Widget

Widget simple example

Container

Initialization

Full example

Widget advanced example

Customization

Customization from html

Settings

Full example

Classes

Constants

Interfaces

IFormValidation

IEventMetaData

IEventAfterLoadData

IEventFinishData

IPayPalMeta

IStyles

ITexts

IBamboraMeta

IElementStyleInput

IElementStyleSubmitButton

IElementStyleLabel

IElementStyleTitle

IElementStyleTitleDescription

ITriggerData

HtmlWidget ⇐ HtmlMultiWidget

new HtmlWidget(selector, publicKey, [gatewayID], [paymentType], [purpose])

htmlWidget.setWebHookDestination(url)

htmlWidget.setSuccessRedirectUrl(url)

htmlWidget.setErrorRedirectUrl(url)

htmlWidget.setFormFields(fields)

htmlWidget.setFormElements(elements)

htmlWidget.setMeta(object)

htmlWidget.load()

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

htmlWidget.trigger(triggers, data)

htmlWidget.getValidationState() ⇒ IFormValidation

htmlWidget.isValidForm() ⇒ boolean

htmlWidget.isInvalidField(field) ⇒ boolean

htmlWidget.isFieldErrorShowed(field) ⇒ boolean

htmlWidget.isInvalidFieldByValidator(field, validator) ⇒ boolean

htmlWidget.hide([saveSize])

htmlWidget.show()

htmlWidget.reload()

htmlWidget.hideElements(elements)

htmlWidget.showElements(elements)

htmlWidget.updateFormValues(fieldValues)

htmlWidget.onFinishInsert(selector, dataType)

htmlWidget.interceptSubmitForm(selector)

htmlWidget.useCheckoutAutoSubmit()

htmlWidget.useAutoResize()

htmlWidget.setStyles(fields)

htmlWidget.usePhoneCountryMask([options])

htmlWidget.setTexts(fields)

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

htmlWidget.setFormValues(fieldValues)

htmlWidget.setFormLabels(fieldLabels)

htmlWidget.setFormPlaceholders(fieldPlaceholders)

htmlWidget.setIcons()

htmlWidget.setHiddenElements(elements)

htmlWidget.setRefId(refId)

htmlWidget.useGatewayFieldValidation()

htmlWidget.setSupportedCardIcons(elements, validateCardNumberInput)

htmlWidget.setEnv(env, [alias])

htmlWidget.loadIFrameUrl()

htmlWidget.setLanguage(code)

HtmlMultiWidget ⇐ MultiWidget

new HtmlMultiWidget(selector, publicKey, conf)

htmlMultiWidget.load()

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

htmlMultiWidget.trigger(triggers, data)

htmlMultiWidget.getValidationState() ⇒ IFormValidation

HtmlWidget ⇐ `HtmlMultiWidget`

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

htmlWidget.getValidationState() ⇒ `IFormValidation`

htmlWidget.isValidForm() ⇒ `boolean`

htmlWidget.isInvalidField(field) ⇒ `boolean`

htmlWidget.isFieldErrorShowed(field) ⇒ `boolean`

htmlWidget.isInvalidFieldByValidator(field, validator) ⇒ `boolean`

HtmlMultiWidget ⇐ `MultiWidget`

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

htmlMultiWidget.getValidationState() ⇒ `IFormValidation`

htmlMultiWidget.isValidForm() ⇒ `boolean`

htmlMultiWidget.isInvalidField(field) ⇒ `boolean`

htmlMultiWidget.isFieldErrorShowed(field) ⇒ `boolean`

htmlMultiWidget.isInvalidFieldByValidator(field, validator) ⇒ `boolean`

EVENT : `object`

VAULT_DISPLAY_EVENT : `object`

PAYMENT_TYPE : `object`

PURPOSE : `object`

FORM_FIELD : `object`

STYLE : `object`

TEXT : `object`

ELEMENT : `object`

SUPPORTED_CARD_TYPES : `object`

STYLABLE_ELEMENT : `object`

STYLABLE_ELEMENT_STATE : `object`

TRIGGER : `object`