❤
npm
Sign UpSign In

@paydock/client-sdk

1.77.3 • Public • Published

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://app-sandbox.paydock.com/v1/widget.umd.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

 

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

Param Type Default Description
selector string Selector of html element. Container for widget
publicKey string PayDock users public key
[gatewayID] string "default" ID of a gateway connected to PayDock. By default or if put 'default', it will use the selected default gateway. If put 'not_configured', it won’t use gateway to create downstream token.
[paymentType] string "card" Type of payment source which shows in widget form. Available parameters : “card”, “bank_account”.
[purpose] string "payment_source" Purpose of widget form. Available parameters: ‘payment_source’, ‘card_payment_source_with_cvv’, ‘card_payment_source_without_cvv’

Example

var widget = new HtmlWidget('#widget', 'publicKey', 'gatewayID'); // short

var widget = new HtmlWidget('#widget', 'publicKey', 'gatewayID', 'bank_account', 'payment_source'); // extend

var widget = new HtmlWidget('#widget', 'publicKey', 'not_configured'); // without gateway

 

htmlWidget.setWebHookDestination(url)

Destination, where customer will receive all successful responses. Response will contain “data” object with “payment_source” or other parameters, in depending on 'purpose'

Kind: instance method of HtmlWidget

Param Type Description
url string Your endpoint for post request.

Example

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

 

htmlWidget.setSuccessRedirectUrl(url)

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

Kind: instance method of HtmlWidget

Param Type
url string

Example

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

 

htmlWidget.setErrorRedirectUrl(url)

URL to which the Customer will be redirected to if an error is triggered in the process of operation

Kind: instance method of HtmlWidget

Param Type
url string

Example

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

 

htmlWidget.setFormFields(fields)

Set list with widget form field, which will be shown in form. Also you can set the required validation for these fields

Kind: instance method of HtmlWidget

Param Type Description
fields [ 'Array' ].<string> name of fields which can be shown in a widget. If after a name of a field, you put “*”, this field will be required on client-side. (For validation, you can specify any fields, even those that are shown by default: card_number, expiration, etc... ) FORM_FIELD

Example

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

 

htmlWidget.setFormElements(elements)

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

Kind: instance method of HtmlWidget
Overrides: setFormElements

Param Type Description
elements [ 'Array' ].<Object> List of elements
elements[].field string Field name of element. If after a name of a field, you put “*”, this field will be required on client-side. (For validation, you can specify any fields, even those that are shown by default: card_number, expiration, etc... ) FORM_FIELD
elements[].placeholder string Set custom placeholders in form fields
elements[].label string Set a custom labels near the form field
elements[].value string Set predefined values for the form field

Example

widget.setFormElements([
      {
          field:  'card_name*',
          placeholder: 'Input your card holder name...',
          label: 'Card Holder Name',
          value: 'Houston',
      },
      {
          field:  'email',
          placeholder: 'Input your email, like test@example.com',
          label: 'Email for the receipt',
          value: 'predefined@email.com',
      },
  ])

 

htmlWidget.setMeta(object)

The method to set meta information for the checkout page

Kind: instance method of HtmlWidget

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

Example

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

 

htmlWidget.load()

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

Kind: instance method of HtmlWidget
 

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

Listen to events of widget

Kind: instance method of HtmlWidget

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

Example

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

 

htmlWidget.trigger(triggers, data)

This callback will be called for every trigger

Kind: instance method of HtmlWidget

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

 

htmlWidget.getValidationState() ⇒ IFormValidation

Using this method you can get validation state information

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

htmlWidget.isValidForm() ⇒ boolean

Using this method you can check if the form is valid

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

htmlWidget.isInvalidField(field) ⇒ boolean

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

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

Param Type Description
field string Field name

 

htmlWidget.isFieldErrorShowed(field) ⇒ boolean

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

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

Param Type Description
field string Field name

 

htmlWidget.isInvalidFieldByValidator(field, validator) ⇒ boolean

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

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

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

 

htmlWidget.hide([saveSize])

Using this method you can hide widget after load

Kind: instance method of HtmlWidget

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

 

htmlWidget.show()

Using this method you can show widget after using hide method

Kind: instance method of HtmlWidget
 

htmlWidget.reload()

Using this method you can reload widget

Kind: instance method of HtmlWidget
 

htmlWidget.hideElements(elements)

Using this method you can hide any elements inside widget

Kind: instance method of HtmlWidget

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

Example

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

 

htmlWidget.showElements(elements)

Using this method you can show any elements inside widget

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

Kind: instance method of HtmlWidget

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

 

htmlWidget.updateFormValues(fieldValues)

Method for update values for form fields inside the widget

Kind: instance method of HtmlWidget

Param Type Description
fieldValues IFormValues Fields with values

Example

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

 

htmlWidget.onFinishInsert(selector, dataType)

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

Kind: instance method of HtmlWidget

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

 

htmlWidget.interceptSubmitForm(selector)

Widget will intercept submit of your form for processing widget

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

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

Param Type Description
selector string css selector of your form

Example

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

 

htmlWidget.useCheckoutAutoSubmit()

This method hides a submit button and automatically execute form submit

Kind: instance method of HtmlWidget
 

htmlWidget.useAutoResize()

Use this method for resize iFrame according content height

Kind: instance method of HtmlWidget
Example

widget.useAutoResize();

 

htmlWidget.setStyles(fields)

Object contain styles for widget

Kind: instance method of HtmlWidget

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

Example

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

 

htmlWidget.usePhoneCountryMask([options])

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

Kind: instance method of HtmlWidget

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

Example

widget.usePhoneCountryMask();

Example

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

 

htmlWidget.setTexts(fields)

Method for set different texts inside the widget

Kind: instance method of HtmlWidget

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

Example

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

 

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

Method for set styles for different elements and states

Kind: instance method of HtmlWidget

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

Example

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

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

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

 

htmlWidget.setFormValues(fieldValues)

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

Kind: instance method of HtmlWidget

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

Example

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

 

htmlWidget.setFormLabels(fieldLabels)

The method to set custom form field labels

Kind: instance method of HtmlWidget

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

Example

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

 

htmlWidget.setFormPlaceholders(fieldPlaceholders)

The method to set custom form fields placeholders

Kind: instance method of HtmlWidget

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

Example

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

 

htmlWidget.setIcons()

The method to change the widget icons

Kind: instance method of HtmlWidget
Todo

  • [ ] DEPRECATED

 

htmlWidget.setHiddenElements(elements)

Using this method you can set hidden elements inside widget

Kind: instance method of HtmlWidget

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

Example

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

 

htmlWidget.setRefId(refId)

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

Kind: instance method of HtmlWidget

Param Type Description
refId string custom id

Example

widget.setRefId('id');

 

htmlWidget.useGatewayFieldValidation()

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

Kind: instance method of HtmlWidget
Example

widget.useGatewayFieldValidation();

 

htmlWidget.setSupportedCardIcons(elements, validateCardNumberInput)

Current method can set icons of supported card types

Kind: instance method of HtmlWidget

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

Example

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

 

htmlWidget.setEnv(env, [alias])

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

Kind: instance method of HtmlWidget

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

Example

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

 

htmlWidget.loadIFrameUrl()

Method for creating iframe url

Kind: instance method of HtmlWidget
Example

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

 

htmlWidget.setLanguage(code)

Method for setting a custom language code

Kind: instance method of HtmlWidget

Param Type Description
code string ISO 639-1

Example

config.setLanguage('en');

 

HtmlMultiWidget ⇐ MultiWidget

Class HtmlMultiWidget include method for working with html

Kind: global class
Extends: MultiWidget

 

new exports.HtmlMultiWidget(selector, publicKey, conf)

Param Type Description
selector string Selector of html element. Container for widget
publicKey string PayDock users public key
conf Configuration | string | Array.<Configuration> | Array.<string> 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

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

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

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

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

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

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

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

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
Todo

  • [ ] DEPRECATED

 

htmlMultiWidget.setHiddenElements(elements)

Using this method you can set hidden elements inside widget

Kind: instance method of HtmlMultiWidget

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

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
Example

widget.useGatewayFieldValidation();

 

htmlMultiWidget.setSupportedCardIcons(elements, validateCardNumberInput)

Current method can set icons of supported card types

Kind: instance method of HtmlMultiWidget

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

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

Param Type Description
code string ISO 639-1

Example

config.setLanguage('en');

 

Configuration

Class Configuration include methods for creating configuration token

Kind: global class

 

new exports.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

 

new exports.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)

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

Kind: instance method of MultiWidget

Param Type Description
elements string The list of elements
elements[].field string Field name of the element FORM_FIELD
elements[].placeholder string Set custom form field placeholder
elements[].label string Set custom labels near form field
elements[].value string Set predefined values for the form field

Example

widget.setFormElements([
      {
          field:  'card_name',
          placeholder: 'Input your card holder name...',
          label: 'Card Holder Name',
          value: 'Houston',
      },
      {
          field:  'email',
          placeholder: 'Input your email, like 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"
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/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://app-sandbox.paydock.com/v1/widget.umd.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://app-sandbox.paydock.com/v1/widget.umd.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

 

new exports.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

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

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

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

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
 

htmlPaymentSourceWidget.filterByGatewayIds(ids)

Show payment source inside widget only with requested gateway ids

Kind: instance method of HtmlPaymentSourceWidget

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

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

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

 

new exports.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

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

 

new exports.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', 'aceessToken','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

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

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

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

Kind: instance method of CheckoutButton

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

 

checkoutButton.turnOffBackdrop()

Method for disable backdrop on the page.

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

 

new exports.ZipmoneyCheckoutButton(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 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 redirect (by default)

 

zipmoneyCheckoutButton.on(eventName, cb)

Listen to events of widget

Kind: instance method of ZipmoneyCheckoutButton

Param Type Description
eventName string Available event names CHECKOUT_BUTTON_EVENT
cb listener

Example

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

});

 

zipmoneyCheckoutButton.close()

Close popup window forcibly

Kind: instance method of ZipmoneyCheckoutButton
 

zipmoneyCheckoutButton.onFinishInsert(selector, dataType)

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

Kind: instance method of ZipmoneyCheckoutButton

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

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

Kind: instance method of ZipmoneyCheckoutButton

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

Kind: instance method of ZipmoneyCheckoutButton

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.

Kind: instance method of ZipmoneyCheckoutButton
Example

button.turnOffBackdrop();

 

PaypalCheckoutButton ⇐ CheckoutButton

Class PaypalCheckoutButton is wrapper of CheckoutButton transform usual button into checkout

Kind: global class
Extends: CheckoutButton

 

new exports.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

Param Type Description
eventName string Available event names CHECKOUT_BUTTON_EVENT
cb listener

Example

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

});

 

paypalCheckoutButton.close()

Close popup window forcibly

Kind: instance method of PaypalCheckoutButton
 

paypalCheckoutButton.onFinishInsert(selector, dataType)

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

Kind: instance method of PaypalCheckoutButton

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

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

Kind: instance method of PaypalCheckoutButton

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

Kind: instance method of PaypalCheckoutButton

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

Kind: instance method of PaypalCheckoutButton

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

 

paypalCheckoutButton.turnOffBackdrop()

Method for disable backdrop on the page.

Kind: instance method of PaypalCheckoutButton
Example

button.turnOffBackdrop();

 

AfterpayCheckoutButton ⇐ CheckoutButton

Class AfterpayCheckoutButton is wrapper of CheckoutButton transform usual button into checkout

Kind: global class
Extends: CheckoutButton

 

new exports.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

Param Type Description
eventName string Available event names CHECKOUT_BUTTON_EVENT
cb listener

Example

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

});

 

afterpayCheckoutButton.close()

Close popup window forcibly

Kind: instance method of AfterpayCheckoutButton
 

afterpayCheckoutButton.onFinishInsert(selector, dataType)

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

Kind: instance method of AfterpayCheckoutButton

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

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

Kind: instance method of AfterpayCheckoutButton

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

Kind: instance method of AfterpayCheckoutButton

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

Kind: instance method of AfterpayCheckoutButton

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

 

afterpayCheckoutButton.turnOffBackdrop()

Method for disable backdrop on the page.

Kind: instance method of AfterpayCheckoutButton
Example

button.turnOffBackdrop();

 

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://app-sandbox.paydock.com/v1/widget.umd.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://app-sandbox.paydock.com/v1/widget.umd.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://app-sandbox.paydock.com/v1/widget.umd.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://app-sandbox.paydock.com/v1/widget.umd.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 3ds charge via v1/charges/standalone-3ds API endpoint, you get a token used to initialized 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://app-sandbox.paydock.com/v1/widget.umd.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("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 chargeAuthChallenge event is sent before starting a challenge flow (i.e. opening an IFrame for the customer to complete a challenge with ther bank) 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

Event 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
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
result.description string [Optional] field that you must show to the customer, indicating the method the user must use to authenticate.

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

 

new exports.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 and Apple Pay via Stripe, Flypay checkout and Paypal Smart Buttons Checkout.

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

Wallet Buttons simple example

Container

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

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

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

Initialization

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

let button = new paydock.WalletButtons(
    "#widget",
    token,
    {
        amount_label: "Total",
        country: "DE",
    }
);
button.load();
// ES2015 | TypeScript
import { WalletButtons } from '@paydock/client-sdk';

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

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

let button = new paydock.WalletButtons(
    "#widget",
    token,
    {}
);
button.load();
// ES2015 | TypeScript
import { WalletButtons } from '@paydock/client-sdk';

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

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://app-sandbox.paydock.com/v1/widget.umd.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 and ApplePay via MPGS integrations after each shipping info update the onUpdate(data) will be called with the selected shipping address information (plus selected shipping method for Paypal). 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 integration specifically, you must return the new amount and new shipping_options If new options are needed based on the updated shipping data. Before the user authorizes the transaction with Touch ID, Face ID, or passcode, you receive redacted address information (address_country, address_city, address_state, address_postcode), this data can be used to recalculate the amount and new shipping options. (https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypayment/1916097-shippingcontact)

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.

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)

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://app-sandbox.paydock.com/v1/widget.umd.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, style)

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://app-sandbox.paydock.com/v1/widget.umd.js" ></script>
<script>
    let button = new paydock.WalletButtons(
		"#widget",
		charge_token,
		{
			request_shipping: true,
			pay_later: true,
			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 Checkout. (Required meta fields: - . Optional meta fields: request_shipping, pay_later, style)

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://app-sandbox.paydock.com/v1/widget.umd.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 ApplePay via MPGS: (Required meta fields: amount_label, country. Optional meta fields: raw_data_initialization, request_shipping, style.button_type)

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://app-sandbox.paydock.com/v1/widget.umd.js" ></script>
<script>
    let button = new paydock.WalletButtons(
        "#widget",
        charge_token,
        {
            amount_label: "Total",
            country: 'DE',
            request_shipping: true,
            style: {
                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.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:

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://app-sandbox.paydock.com/v1/widget.umd.js" ></script>
<script>
    let button = new paydock.WalletButtons(
        "#widget",
        charge_token,
        {
            raw_data_initialization: {
                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",
                }
            },
            amount_label: "Total",
            country: 'DE',
            request_shipping: true,
            style: {
                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.load();
</script>
</html>

Classes

WalletButtons

Class WalletButtons to work with different E-Wallets within html (currently supports Apple Pay, Google Pay™ and Apple Pay via Stripe, Flypay, Paypal)

Constants

EVENT : object

List of available event's name in the wallet button lifecycle

Interfaces

IWalletMeta : object

Interface of data used by the wallet checkout and payment proccess.

IApplePayShippingOption : object

Interface of Shipping Options for ApplePay

IGooglePayShippingOption : object

Interface of Shipping Options for GooglePay

IPayPalShippingOption : object

Interface of Shipping Options for PayPal

 

IWalletMeta : object

Interface of data used by the wallet checkout and payment proccess.

Kind: global interface

Param Type Description
[amount_label] string Label shown next to the total amount to be paid. Required for [Stripe, ApplePay, GooglePay]. N/A for [FlyPay, PayPal].
[country] string Country of the user. 2 letter ISO code format. Required for [Stripe, ApplePay, GooglePay]. N/A for [FlyPay, PayPal].
[pay_later] string Used to enable Pay Later feature in PayPal Smart Checkout WalletButton integration when available. Optional for [PayPal]. N/A for other wallets.
[show_billing_address] boolean Used to hide/show the billing address on ApplePay and GooglePay popups. Default value is false. Optional for [ApplePay, GooglePay]. N/A for other wallets.
[request_payer_name] boolean Used mainly for fraud purposes - recommended set to true. Optional for [Stripe]. N/A for other wallets.
[request_payer_email] boolean Used mainly for fraud purposes - recommended set to true. Optional for [Stripe]. N/A for other wallets.
[request_payer_phone] boolean Used mainly for fraud purposes - recommended set to true. Optional for [Stripe]. N/A for other wallets.
[request_shipping] boolean Used to request or not shipping address in the Wallet checkout, being able to handle amount changes via the update event. Optional for [FlyPay, PayPal, ApplePay, GooglePay]. N/A for [Stripe].
[shipping_options] Array.<IApplePayShippingOption> | Array.<IPayPalShippingOption> Used to provide available shipping options.(To use shipping_options the request_shipping flag should be true). Optional for [ApplePay]. N/A for the other wallets.
[merchant_name] string Merchant Name used for GooglePay integration via MPGS. Required for [GooglePay]. N/A for other wallets.
[raw_data_initialization] object Used to provide values to initialize wallet with raw data. Optional for [ApplePay]. N/A for the other wallets.
[style] object Used to style PayPal buttons, check possible values at https://developer.paypal.com/docs/business/checkout/reference/style-guide. Also used at ApplePay to select button type. Optional for [PayPal, ApplePay]. N/A for [Stripe, FlyPay].
[style.button_type] object Used to select ApplePay button type (e.g: 'buy','donate', etc), check possible values at https://developer.apple.com/documentation/apple_pay_on_the_web/displaying_apple_pay_buttons_using_css. Optional for [ApplePay]. N/A for other wallets.
[wallets] array By default if this is not sent or empty, we will try to show either Apple Pay or Google Pay buttons. This can be limited sending the following array in this field: ['apple','google]. Optional for [Stripe, ApplePay, GooglePay]. N/A for other wallets.

 

IApplePayShippingOption : object

Interface of Shipping Options for ApplePay

Kind: global interface

Param Type Description
[id] string Identifier of the Shipping Option. Required.
[label] string Identifier of the Shipping Option. Required.
[amount] string Amount of the Shipping Option. Required.
[detail] string Details of the Shipping Option. Required.
[type] string Type of the Shipping Option. Values can be 'ELECTRONIC', 'GROUND', 'NOT_SHIPPED', 'OVERNIGHT', 'PICKUP', 'PRIORITY', 'SAME_DAY'. Optional.

 

IGooglePayShippingOption : object

Interface of Shipping Options for GooglePay

Kind: global interface

Param Type Description
[id] string Identifier of the Shipping Option. Required.
[label] string Identifier of the Shipping Option. Required.
[detail] string Details of the Shipping Option. Optional.
[type] string Type of the Shipping Option. Values can be 'ELECTRONIC', 'GROUND', 'NOT_SHIPPED', 'OVERNIGHT', 'PICKUP', 'PRIORITY', 'SAME_DAY'. Optional.

 

IPayPalShippingOption : object

Interface of Shipping Options for PayPal

Kind: global interface

Param Type Description
[id] string Identifier of the Shipping Option. Required.
[label] string Identifier of the Shipping Option. Required.
[amount] string Amount of the Shipping Option. Required.
[currency] string Currency of the Shipping Option. Required.
[type] string Type of the Shipping Option. Values can be 'SHIPPING' or 'PICKUP'. Required.

 

WalletButtons

Class WalletButtons to work with different E-Wallets within html (currently supports Apple Pay, Google Pay™ and Apple Pay via Stripe, Flypay, Paypal)

Kind: global class

 

new exports.WalletButtons(selector, chargeToken, object)

Param Type Description
selector string Selector of html element. Container for the WalletButtons.
chargeToken string token for the wallet transaction, created with a secure call to POST charges/wallet.
object IWalletMeta data that configures the E-Wallet, which can be shown on checkout page and configures required customer information.

Example

var button = new WalletButtons('#wallet-buttons', 'charge-token', { amount_label: 'Total', country: 'us' });

 

walletButtons.load()

Initializes the availability checks and inserts the button if possible. Otherwise function onUnavailable(handler: VoidFunction) will be called.

Kind: instance method of WalletButtons
Example

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

 

walletButtons.update()

Triggers the update process of the wallet, if available. Currently supported by Flypay, Paypal and ApplePay/GooglePay via MPGS Wallets.

Kind: instance method of WalletButtons
Example

var button = new WalletButtons(
     '#buttons',
     token,
     {
         amount_label: 'Total',
         country: 'DE',
     }
 );
 button.on('update', (data) => {
     updateChargeAmountInBackend(data);
     button.update({ success: true });
 });

Example

// ApplePay via MPGS example:
var button = new WalletButtons(
     '#buttons',
     token,
     {
         amount_label: 'Total',
         country: 'AU',
         ...
     }
 );
 button.on('update', (data) => {
     updateChargeAmountInBackend(data);
     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"
                  }
              ]
         }
      });
 });

 

walletButtons.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 Bear in mind that you must set an environment before calling button.load().

Kind: instance method of WalletButtons

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

Example

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

 

walletButtons.close()

Closes the checkout forcibly. Currently supported in Flypay wallet.

Kind: instance method of WalletButtons
Example

button.close();

 

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

Listen to events of button. unavailable returns no data, paymentSuccessful returns IWalletPaymentSuccessful for Stripe or full response for Flypay, and paymentError an error.

NOTE: when listening for the 'update' event, make sure to call the button.update(result) method on completion.

Kind: instance method of WalletButtons

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

Example

button.on('paymentSuccessful', function (data) {
     console.log(data);
});
// or
button.on('unavailable').then(function () {
     console.log('No button is available);
});

 

walletButtons.onUnavailable([handler])

User to subscribe to the no button available event. This method is used after loading when the button is not available. For MPGS, since can have more than one wallet button configured (ApplePay/GooglePay) you will receive a body (({ wallet: WALLET_TYPE.GOOGLE }) or ({ wallet: WALLET_TYPE.APPLE })) indicating which button is unavailable Important: Do not perform thread blocking operations in callback such as window.alert() calls.

Kind: instance method of WalletButtons

Param Type Description
[handler] listener Function to be called when no button is available.

Example

button.onUnavailable(() => {
     console.log('No wallet buttons available');
});

Example

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

Example

button.onUnavailable(function (data) {console.log('data.wallet :: ', data.wallet)});

 

walletButtons.onUpdate([handler])

If the wallet performs some update in the checkout process, the function passed as parameter will be called.

NOTE: make sure to call the button.update(result) method on handler completion.

Kind: instance method of WalletButtons

Param Type Description
[handler] listener Function to be called when the payment was successful.

Example

button.onUpdate((data) => {
     button.update({ success: true });
});

Example

button.onUpdate().then((data) => throw new Error());

 

walletButtons.onPaymentSuccessful([handler])

If the payment was successful, the function passed as parameter will be called. Important: Do not perform thread blocking operations in callback such as window.alert() calls.

Kind: instance method of WalletButtons

Param Type Description
[handler] listener Function to be called when the payment was successful.

Example

button.onPaymentSuccessful((data) => {
     console.log('Payment successful!');
});

Example

button.onPaymentSuccessful().then((data) => console.log('Payment successful!'));

 

walletButtons.onPaymentInReview([handler])

If the payment was left in fraud review, the function passed as parameter will be called. Important: Do not perform thread blocking operations in callback such as window.alert() calls.

Kind: instance method of WalletButtons

Param Type Description
[handler] listener Function to be called when the payment was left in fraud review status.

Example

button.onPaymentInReview((data) => {
     console.log('Payment in fraud review');
});

Example

button.onPaymentInReview().then((data) => console.log('Payment in fraud review'));

 

walletButtons.onPaymentError([handler])

If the payment was not successful, the function passed as parameter will be called. Important: Do not perform thread blocking operations in callback such as window.alert() calls.

Kind: instance method of WalletButtons

Param Type Description
[handler] listener Function to be called when the payment was not successful.

Example

button.onPaymentError((err) => {
     console.log('Payment not successful');
});

Example

button.onPaymentError().then((err) => console.log('Payment not successful'));

 

EVENT : object

List of available event's name in the wallet button lifecycle

Kind: global constant

Param Type Default
UNAVAILABLE string "unavailable"
UPDATE string "update"
PAYMENT_SUCCESSFUL string "paymentSuccessful"
PAYMENT_ERROR string "paymentError"

Secure Remote Commerce

You can find description of all methods and parameters here.

This widget provides you with the ability to easily integrate with SRC providers. Currently Visa SRC is supported.

SRC simple example

Container

<div id="checkoutButton"></div>
<div id="checkoutIframe"></div>

You must create a container for the initial checkout button, and a different one for the checkout iFrame. Inside the first tag the button will be initialized, and inside the second one the iFrame will be loaded once the button is clicked.

Initialization

var src = new paydock.SRC(
    "#checkoutButton",
    "#checkoutIframe",
    "scheme_service_id",
    "paydock_public_key_or_access_token",
    {}, // meta
);
src.load();
// ES2015 | TypeScript

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

var src = new SRC(
    "#checkoutButton",
    "#checkoutIframe",
    "scheme_service_id",
    "paydock_public_key_or_access_token",
    {}, /

Readme

Keywords

Package Sidebar

Install

npm i @paydock/client-sdk@1.77.3

Homepage

paydock.com

Version

1.77.3

License

UNLICENSED

Unpacked Size

1.76 MB

Total Files

306

Last publish

Collaborators

  • paydock
Try on RunKit
Report malware