Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@paydock/client-sdk

1.3.2 • 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 (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.interceptSubmitForm('#paymentForm');
        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.interceptSubmitForm('#paymentForm');
    widget.onFinishInsert('input[name="payment_source_token"]', 'payment_source');z
    
    widget.load();
</script> 
</script>
</body>
</html>

Classes

HtmlWidgetHtmlMultiWidget

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

HtmlMultiWidgetMultiWidget

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

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

IBamboraMeta

Interface for Bamboora meta information

IStyles

Interface for classes that represent widget's styles.

ITexts

Interface for classes that represent widget's text.

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.

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

IBamboraMeta

Interface for Bamboora meta information

Kind: global interface

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

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
[finish_text] string

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

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

Example

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

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

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

Current method can set icons of supported card types

Kind: instance method of HtmlWidget

Param Type Description
elements [ 'Array' ].<string> SUPPORTED_CARD_TYPES

Example

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

htmlWidget.setEnv(env)

Current method can change environment. By default environment = sandbox

Kind: instance method of HtmlWidget

Param Type Description
env string sandbox, production

Example

widget.setEnv('production');

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

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

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

Current method can set icons of supported card types

Kind: instance method of HtmlMultiWidget

Param Type Description
elements [ 'Array' ].<string> SUPPORTED_CARD_TYPES

Example

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

htmlMultiWidget.setEnv(env)

Current method can change environment. By default environment = sandbox

Kind: instance method of HtmlMultiWidget

Param Type Description
env string sandbox, production

Example

widget.setEnv('production');

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

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

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)

Current method can change environment. By default environment = sandbox

Kind: instance method of Configuration

Param Type Description
env string sandbox, production

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(publicKey, cb, errorCb)

createToken - method which exactly create payment one time token

Kind: instance method of Configuration

Param Type Description
publicKey string Customer 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(publicKey, conf)

Param Type Description
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('publicKey','configurationToken'); // With a pre-created configuration token
 
var widget = new MultiWidget('publicKey',['configurationToken', 'configurationToken2']); // With pre-created configuration tokens
 
var widget = new MultiWidget('publicKey', new Configuration('gatewayId')); With Configuration
 
var widget = new MultiWidget('publicKey',[ 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'
  });

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

Current method can set icons of supported card types

Kind: instance method of MultiWidget

Param Type Description
elements [ 'Array' ].<string> SUPPORTED_CARD_TYPES

Example

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

multiWidget.setEnv(env)

Current method can change environment. By default environment = sandbox

Kind: instance method of MultiWidget

Param Type Description
env string sandbox, production

Example

widget.setEnv('production');

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

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"

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"

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

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"

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

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

HtmlPaymentSourceWidgetPaymentSourceWidget

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)

Current method can change environment. By default environment = sandbox

Kind: instance method of HtmlPaymentSourceWidget

Param Type Description
env string sandbox, production

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

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)

Current method can change environment. By default environment = sandbox

Kind: instance method of PaymentSourceWidget

Param Type Description
env string sandbox, production

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

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('#widget', 'publicKey');

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>
</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_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.setMeta({
        amount: "5",
        currency: "AUD",
        brand_name: 'Paydock',
        reference: '15',
        email: 'joshuawood@hotmail.com.au',
        hdr_img: 'https://media.licdn.com/mpr/mpr/AAEAAQAAAAAAAAy4AAAAJDFmZTk5ZjJjLTE0MWYtNDI5OS1hMmUwLWJhOTlhNzQ2MDFhZA.jpg',
        logo_img: 'https://media.licdn.com/mpr/mpr/AAEAAQAAAAAAAAy4AAAAJDFmZTk5ZjJjLTE0MWYtNDI5OS1hMmUwLWJhOTlhNzQ2MDFhZA.jpg',
        first_name: 'Joshua',
        last_name: 'Wood',
        address_line: 'Suite 660',
        address_line2: '822 Ruiz Square',
        address_city: 'Sydney',
        address_postcode: '2671',
        hide_shipping_address: '1',
        phone: '0231049872'});
    
    button.on('finish', function (data) { 
           console.log('on:finish', data);
    });
</script> 
</body>
</html>

Classes

CheckoutButton

Class CheckoutButton transform usual button into checkout

ZipmoneyCheckoutButtonCheckoutButton

Class ZipmoneyCheckoutButton is wrapper of CheckoutButton transform usual button into checkout

PaypalCheckoutButtonCheckoutButton

Class PaypalCheckoutButton is wrapper of CheckoutButton transform usual button into checkout

AfterpayCheckoutButtonCheckoutButton

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.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_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, publicKey, [gatewayId], [type])

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
[type] string "PaypalClassic" Type of gateway (PaypalClassic, Zipmoney)

Example

var widget = new CheckoutButton('#button', 'publicKey','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 (specific for Zipmoney). Redirect after referred checkout

Query string will include 'status' (success, declined) and 'external_checkout_token' after redirect

Kind: instance method of CheckoutButton

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

Example

button.setBackdropTitle('Custom title');

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.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.setSuspendedRedirectUri(string)

Method for setting suspended redirect uri (specific for Zipmoney). Redirect after referred checkout

Query string will include 'status' (success, declined) and 'external_checkout_token' after redirect

Kind: instance method of ZipmoneyCheckoutButton

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

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 (specific for Zipmoney). Redirect after referred checkout

Query string will include 'status' (success, declined) and 'external_checkout_token' after redirect

Kind: instance method of PaypalCheckoutButton

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

Example

button.setBackdropTitle('Custom title');

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, 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 AfterpayCheckoutButton('#button', 'publicKey','gatewayId');

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 (specific for Zipmoney). Redirect after referred checkout

Query string will include 'status' (success, declined) and 'external_checkout_token' after redirect

Kind: instance method of AfterpayCheckoutButton

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

Example

button.setBackdropTitle('Custom title');

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

License

Copyright (c) 2017 paydock

Install

npm i @paydock/client-sdk

DownloadsWeekly Downloads

399

Version

1.3.2

License

UNLICENSED

Unpacked Size

1.13 MB

Total Files

202

Homepage

paydock.com

Last publish

Collaborators

  • avatar