@paydock/client-sdk

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

    Widget advanced example

    Customization

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

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

    Customization from html

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

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

    Settings

    widget.setRefId('id'); // your unique identifier to identify the data
    
    widget.setFormFields(['phone', 'email']); // add additional fields for form of widget
    
    widget.setSupportedCardIcons(['mastercard', 'visa']); // add icons of supported card types

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

    Full example

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Title</title>
    	<style>iframe {border: 0;width: 100%;height: 400px;}</style>
    </head>
    <body>
    <form id="paymentForm">
        <div id="widget"
            widget-style="text-color: #FFFFAA; border-color: #yellow"
            title="Payment form"
            finish-text="Payment resource was successfully accepted"></div>
    </form>
    
    <script src="https://widget.paydock.com/sdk/latest/widget.umd.js" ></script>
    <script>
    	var widget = new paydock.HtmlWidget('#widget', 'publicKey', 'gatewayId');
    	
    	widget.setSupportedCardIcons(['mastercard', 'visa']);
    	widget.setFormFields(['phone', 'email']);
    	widget.setRefId('custom-ref-id');
        widget.onFinishInsert('input[name="payment_source_token"]', 'payment_source');z
    	
    	widget.load();
    </script>
    </script>
    </body>
    </html>

    Classes

    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

    VAULT_DISPLAY_EVENT : object

    List of available event's name

    PAYMENT_TYPE : object

    List of available payment source types

    PURPOSE : object

    Purposes

    FORM_FIELD : object

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

    STYLE : object

    List of available style params for widget

    TEXT : object

    List of available text item params for widget

    ELEMENT : object

    List of available params for hide elements

    SUPPORTED_CARD_TYPES : object

    The list of available parameters for showing card icons

    STYLABLE_ELEMENT : object

    Current constant include available type of element for styling

    STYLABLE_ELEMENT_STATE : object

    Current constant include available states of element for styling

    TRIGGER : object

    List of available triggers

    Interfaces

    IFormValidation

    Interface of data from validation event.

    IEventMetaData

    Interface of data from event.

    IEventAfterLoadData

    Interface of data from event.

    IEventFinishData

    Interface of data from event.

    IPayPalMeta

    Interface for PayPal checkout meta information

    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.

    IElementStyleTitleDescription

    Interface for styling title_description element.

    ITriggerData

    Interface for classes that represent a trigger data.

    IFormValidation

    Interface of data from validation event.

    Kind: global interface

    Param Type Description
    event string Event name
    purpose string System variable. Purpose of event
    message_source string System variable. Event source
    [ref_id] string Custom value for identify result of processed operation
    [form_valid] boolean Form is valid
    [invalid_fields] array Invalid form fields
    [invalid_showed_fields] array List of fields on which the error is already displayed
    [validators] array List of validators with fields

    IEventMetaData

    Interface of data from event.

    Kind: global interface

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

    IEventAfterLoadData

    Interface of data from event.

    Kind: global interface

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

    IEventFinishData

    Interface of data from event.

    Kind: global interface

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

    IPayPalMeta

    Interface for PayPal checkout meta information

    Kind: global interface

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

    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
    [title_h1] string
    [title_h2] string
    [title_h3] string
    [title_h4] string
    [title_h5] string
    [title_h6] string
    [finish_text] string
    [title_description] string
    [submit_button] string
    [submit_button_processing] string

    IElementStyleInput

    Interface for styling input element.

    Kind: global interface

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

    IElementStyleSubmitButton

    Interface for styling submit_button element.

    Kind: global interface

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

    IElementStyleLabel

    Interface for styling label element.

    Kind: global interface

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

    IElementStyleTitle

    Interface for styling title element.

    Kind: global interface

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

    IElementStyleTitleDescription

    Interface for styling title_description element.

    Kind: global interface

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

    ITriggerData

    Interface for classes that represent a trigger data.

    Kind: global interface

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

    HtmlWidget ⇐ HtmlMultiWidget

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

    Kind: global class
    Extends: HtmlMultiWidget, MultiWidget

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

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

    Example

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

    htmlWidget.setWebHookDestination(url)

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

    Kind: instance method of HtmlWidget

    Param Type Description
    url string Your endpoint for post request.

    Example

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

    htmlWidget.setSuccessRedirectUrl(url)

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

    Kind: instance method of HtmlWidget

    Param Type
    url string

    Example

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

    htmlWidget.setErrorRedirectUrl(url)

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

    Kind: instance method of HtmlWidget

    Param Type
    url string

    Example

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

    htmlWidget.setFormFields(fields)

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

    Kind: instance method of HtmlWidget

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

    Example

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

    htmlWidget.setFormElements(elements)

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

    Kind: instance method of HtmlWidget
    Overrides: setFormElements

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

    Example

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

    htmlWidget.setMeta(object)

    The method to set meta information for the checkout page

    Kind: instance method of HtmlWidget

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

    Example

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

    htmlWidget.load()

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

    Kind: instance method of HtmlWidget

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

    Listen to events of widget

    Kind: instance method of HtmlWidget

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

    Example

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

    htmlWidget.trigger(triggers, data)

    This callback will be called for every trigger

    Kind: instance method of HtmlWidget

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

    htmlWidget.getValidationState() ⇒ IFormValidation

    Using this method you can get validation state information

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

    htmlWidget.isValidForm() ⇒ boolean

    Using this method you can check if the form is valid

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

    htmlWidget.isInvalidField(field) ⇒ boolean

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

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

    Param Type Description
    field string Field name

    htmlWidget.isFieldErrorShowed(field) ⇒ boolean

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

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

    Param Type Description
    field string Field name

    htmlWidget.isInvalidFieldByValidator(field, validator) ⇒ boolean

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

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

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

    htmlWidget.hide([saveSize])

    Using this method you can hide widget after load

    Kind: instance method of HtmlWidget

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

    htmlWidget.show()

    Using this method you can show widget after using hide method

    Kind: instance method of HtmlWidget

    htmlWidget.reload()

    Using this method you can reload widget

    Kind: instance method of HtmlWidget

    htmlWidget.hideElements(elements)

    Using this method you can hide any elements inside widget

    Kind: instance method of HtmlWidget

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

    Example

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

    htmlWidget.showElements(elements)

    Using this method you can show any elements inside widget

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

    Kind: instance method of HtmlWidget

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

    htmlWidget.updateFormValues(fieldValues)

    Method for update values for form fields inside the widget

    Kind: instance method of HtmlWidget

    Param Type Description
    fieldValues IFormValues Fields with values

    Example

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

    htmlWidget.onFinishInsert(selector, dataType)

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

    Kind: instance method of HtmlWidget

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

    htmlWidget.interceptSubmitForm(selector)

    Widget will intercept submit of your form for processing widget

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

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

    Param Type Description
    selector string css selector of your form

    Example

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

    htmlWidget.useCheckoutAutoSubmit()

    This method hides a submit button and automatically execute form submit

    Kind: instance method of HtmlWidget

    htmlWidget.useAutoResize()

    Use this method for resize iFrame according content height

    Kind: instance method of HtmlWidget
    Example

    widget.useAutoResize();

    htmlWidget.setStyles(fields)

    Object contain styles for widget

    Kind: instance method of HtmlWidget

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

    Example

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

    htmlWidget.usePhoneCountryMask([options])

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

    Kind: instance method of HtmlWidget

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

    Example

    widget.usePhoneCountryMask();

    Example

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

    htmlWidget.setTexts(fields)

    Method for set different texts inside the widget

    Kind: instance method of HtmlWidget

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

    Example

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

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

    Method for set styles for different elements and states

    Kind: instance method of HtmlWidget

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

    Example

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

    htmlWidget.setFormValues(fieldValues)

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

    Kind: instance method of HtmlWidget

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

    Example

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

    htmlWidget.setFormLabels(fieldLabels)

    The method to set custom form field labels

    Kind: instance method of HtmlWidget

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

    Example

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

    htmlWidget.setFormPlaceholders(fieldPlaceholders)

    The method to set custom form fields placeholders

    Kind: instance method of HtmlWidget

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

    Example

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

    htmlWidget.setIcons()

    The method to change the widget icons

    Kind: instance method of HtmlWidget
    Todo

    • [ ] DEPRECATED

    htmlWidget.setHiddenElements(elements)

    Using this method you can set hidden elements inside widget

    Kind: instance method of HtmlWidget

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

    Example

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

    htmlWidget.setRefId(refId)

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

    Kind: instance method of HtmlWidget

    Param Type Description
    refId string custom id

    Example

    widget.setRefId('id');

    htmlWidget.useGatewayFieldValidation()

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

    Kind: instance method of HtmlWidget
    Example

    widget.useGatewayFieldValidation();

    htmlWidget.setSupportedCardIcons(elements)

    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, [alias])

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

    Kind: instance method of HtmlWidget

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

    Example

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

    htmlWidget.loadIFrameUrl()

    Method for creating iframe url

    Kind: instance method of HtmlWidget
    Example

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

    htmlWidget.setLanguage(code)

    Method for setting a custom language code

    Kind: instance method of HtmlWidget

    Param Type Description
    code string ISO 639-1

    Example

    config.setLanguage('en');

    HtmlMultiWidget ⇐ MultiWidget

    Class HtmlMultiWidget include method for working with html

    Kind: global class
    Extends: MultiWidget

    new exports.HtmlMultiWidget(selector, publicKey, conf)

    Param Type Description
    selector string Selector of html element. Container for widget
    publicKey string PayDock users public key
    conf Configuration | string | Array.<Configuration> | Array.<string> exemplar[s] Configuration class OR configuration token

    Example

    var widget = new MultiWidget('#widget', 'publicKey','configurationToken'); // With a pre-created configuration token
    
    var widget = new MultiWidget('#widget', 'publicKey',['configurationToken', 'configurationToken2']); // With pre-created configuration tokens
    
    var widget = new MultiWidget('#widget', 'publicKey', new Configuration('gatewayId')); With Configuration
    
    var widget = new MultiWidget('#widget', 'publicKey',[ With Configurations
         Configuration() // default gateway_id,
         Configuration('gatewayId'),
         Configuration('gatewayId', 'bank_account')
    ]);

    htmlMultiWidget.load()

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

    Kind: instance method of HtmlMultiWidget

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

    Listen to events of widget

    Kind: instance method of HtmlMultiWidget

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

    Example

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

    htmlMultiWidget.trigger(triggers, data)

    This callback will be called for every trigger

    Kind: instance method of HtmlMultiWidget

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

    htmlMultiWidget.getValidationState() ⇒ IFormValidation

    Using this method you can get validation state information

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

    htmlMultiWidget.isValidForm() ⇒ boolean

    Using this method you can check if the form is valid

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

    htmlMultiWidget.isInvalidField(field) ⇒ boolean

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

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

    Param Type Description
    field string Field name

    htmlMultiWidget.isFieldErrorShowed(field) ⇒ boolean

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

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

    Param Type Description
    field string Field name

    htmlMultiWidget.isInvalidFieldByValidator(field, validator) ⇒ boolean

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

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

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

    htmlMultiWidget.hide([saveSize])

    Using this method you can hide widget after load

    Kind: instance method of HtmlMultiWidget

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

    htmlMultiWidget.show()

    Using this method you can show widget after using hide method

    Kind: instance method of HtmlMultiWidget

    htmlMultiWidget.reload()

    Using this method you can reload widget

    Kind: instance method of HtmlMultiWidget

    htmlMultiWidget.hideElements(elements)

    Using this method you can hide any elements inside widget

    Kind: instance method of HtmlMultiWidget

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

    Example

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

    htmlMultiWidget.showElements(elements)

    Using this method you can show any elements inside widget

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

    Kind: instance method of HtmlMultiWidget

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

    htmlMultiWidget.updateFormValues(fieldValues)

    Method for update values for form fields inside the widget

    Kind: instance method of HtmlMultiWidget

    Param Type Description
    fieldValues IFormValues Fields with values

    Example

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

    htmlMultiWidget.onFinishInsert(selector, dataType)

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

    Kind: instance method of HtmlMultiWidget

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

    htmlMultiWidget.interceptSubmitForm(selector)

    Widget will intercept submit of your form for processing widget

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

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

    Param Type Description
    selector string css selector of your form

    Example

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

    htmlMultiWidget.useCheckoutAutoSubmit()

    This method hides a submit button and automatically execute form submit

    Kind: instance method of HtmlMultiWidget

    htmlMultiWidget.useAutoResize()

    Use this method for resize iFrame according content height

    Kind: instance method of HtmlMultiWidget
    Example

    widget.useAutoResize();

    htmlMultiWidget.setStyles(fields)

    Object contain styles for widget

    Kind: instance method of HtmlMultiWidget

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

    Example

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

    htmlMultiWidget.usePhoneCountryMask([options])

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

    Kind: instance method of HtmlMultiWidget

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

    Example

    widget.usePhoneCountryMask();

    Example

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

    htmlMultiWidget.setTexts(fields)

    Method for set different texts inside the widget

    Kind: instance method of HtmlMultiWidget

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

    Example

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

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

    Method for set styles for different elements and states

    Kind: instance method of HtmlMultiWidget

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

    Example

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

    htmlMultiWidget.setFormValues(fieldValues)

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

    Kind: instance method of HtmlMultiWidget

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

    Example

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

    htmlMultiWidget.setFormLabels(fieldLabels)

    The method to set custom form field labels

    Kind: instance method of HtmlMultiWidget

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

    Example

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

    htmlMultiWidget.setFormPlaceholders(fieldPlaceholders)

    The method to set custom form fields placeholders

    Kind: instance method of HtmlMultiWidget

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

    Example

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

    htmlMultiWidget.setFormElements(elements)

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

    Kind: instance method of HtmlMultiWidget

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

    Example

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

    htmlMultiWidget.setIcons()

    The method to change the widget icons

    Kind: instance method of HtmlMultiWidget
    Todo

    • [ ] DEPRECATED

    htmlMultiWidget.setHiddenElements(elements)

    Using this method you can set hidden elements inside widget

    Kind: instance method of HtmlMultiWidget

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

    Example

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

    htmlMultiWidget.setRefId(refId)

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

    Kind: instance method of HtmlMultiWidget

    Param Type Description
    refId string custom id

    Example

    widget.setRefId('id');

    htmlMultiWidget.useGatewayFieldValidation()

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

    Kind: instance method of HtmlMultiWidget
    Example

    widget.useGatewayFieldValidation();

    htmlMultiWidget.setSupportedCardIcons(elements)

    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, [alias])

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

    Kind: instance method of HtmlMultiWidget

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

    Example

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

    htmlMultiWidget.loadIFrameUrl()

    Method for creating iframe url

    Kind: instance method of HtmlMultiWidget
    Example

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

    htmlMultiWidget.setLanguage(code)

    Method for setting a custom language code

    Kind: instance method of HtmlMultiWidget

    Param Type Description
    code string ISO 639-1

    Example

    config.setLanguage('en');

    Configuration

    Class Configuration include methods for creating configuration token

    Kind: global class

    new exports.Configuration([gatewayID], paymentType, purpose)

    Param Type Default Description
    [gatewayID] string "default" gateway ID. By default or if put 'default', it will use the selected default gateway
    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, [alias])

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

    Kind: instance method of Configuration

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

    Example

    config.setEnv('production');

    configuration.setLabel(label)

    Title for tab which can be set instead of default

    Kind: instance method of Configuration

    Param Type Description
    label string Text label for tab

    Example

    config.setLabel('custom label');

    configuration.createToken(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',
          title_description: '* indicates required field',
          submit_button: 'Save',
          submit_button_processing: 'Load...',
      });

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

    Method for set styles for different elements and states

    Kind: instance method of MultiWidget

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

    Example

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

    multiWidget.setFormValues(fieldValues)

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

    Kind: instance method of MultiWidget

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

    Example

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

    multiWidget.setFormLabels(fieldLabels)

    The method to set custom form field labels

    Kind: instance method of MultiWidget

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

    Example

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

    multiWidget.setFormPlaceholders(fieldPlaceholders)

    The method to set custom form fields placeholders

    Kind: instance method of MultiWidget

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

    Example

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

    multiWidget.setFormElements(elements)

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

    Kind: instance method of MultiWidget

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

    Example

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

    multiWidget.setIcons()

    The method to change the widget icons

    Kind: instance method of MultiWidget
    Todo

    • [ ] DEPRECATED

    multiWidget.setHiddenElements(elements)

    Using this method you can set hidden elements inside widget

    Kind: instance method of MultiWidget

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

    Example

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

    multiWidget.setRefId(refId)

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

    Kind: instance method of MultiWidget

    Param Type Description
    refId string custom id

    Example

    widget.setRefId('id');

    multiWidget.useGatewayFieldValidation()

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

    Kind: instance method of MultiWidget
    Example

    widget.useGatewayFieldValidation();

    multiWidget.setSupportedCardIcons(elements)

    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, [alias])

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

    Kind: instance method of MultiWidget

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

    Example

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

    multiWidget.loadIFrameUrl()

    Method for creating iframe url

    Kind: instance method of MultiWidget
    Example

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

    multiWidget.setLanguage(code)

    Method for setting a custom language code

    Kind: instance method of MultiWidget

    Param Type Description
    code string ISO 639-1

    Example

    config.setLanguage('en');

    EVENT : object

    List of available event's name

    Kind: global constant

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

    VAULT_DISPLAY_EVENT : object

    List of available event's name

    Kind: global constant

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

    PAYMENT_TYPE : object

    List of available payment source types

    Kind: global constant

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

    PURPOSE : object

    Purposes

    Kind: global constant

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

    FORM_FIELD : object

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

    Kind: global constant

    Param Type Default
    CARD_NAME string "card_name"
    CARD_NUMBER string "card_number"
    EXPIRE_MONTH string "expire_month"
    EXPIRE_YEAR string "expire_year"
    CARD_CCV string "card_ccv"
    ACCOUNT_NAME string "account_name"
    ACCOUNT_BSB string "account_bsb"
    ACCOUNT_NUMBER string "account_number"
    ACCOUNT_ROUTING string "account_routing"
    ACCOUNT_HOLDER_TYPE string "account_holder_type"
    ACCOUNT_BANK_NAME string "account_bank_name"
    ACCOUNT_TYPE string "account_type"
    FIRST_NAME string "first_name"
    LAST_NAME string "last_name"
    EMAIL string "email"
    PHONE string "phone"
    PHONE2 string "phone2"
    ADDRESS_LINE1 string "address_line1"
    ADDRESS_LINE2 string "address_line2"
    ADDRESS_STATE string "address_state"
    ADDRESS_COUNTRY string "address_country"
    ADDRESS_CITY string "address_city"
    ADDRESS_POSTCODE string "address_postcode"
    ADDRESS_COMPANY string "address_company"

    STYLE : object

    List of available style params for widget

    Kind: global constant

    Param Type Default
    BACKGROUND_COLOR string "background_color"
    TEXT_COLOR string "text_color"
    BORDER_COLOR string "border_color"
    BUTTON_COLOR string "button_color"
    ERROR_COLOR string "error_color"
    SUCCESS_COLOR string "success_color"
    FONT_SIZE string "font_size"
    FONT_FAMILY string "font_family"

    TEXT : object

    List of available text item params for widget

    Kind: global constant

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

    ELEMENT : object

    List of available params for hide elements

    Kind: global constant

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

    SUPPORTED_CARD_TYPES : object

    The list of available parameters for showing card icons

    Kind: global constant

    Param Type Default
    AMEX string "amex"
    AUSBC string "ausbc"
    DINERS string "diners"
    DISCOVER string "discover"
    JAPCB string "japcb"
    LASER string "laser"
    MASTERCARD string "mastercard"
    SOLO string "solo"
    VISA string "visa"
    VISA_WHITE string "visa_white"

    STYLABLE_ELEMENT : object

    Current constant include available type of element for styling

    Kind: global constant

    Param Type Default Description
    INPUT string "input." These states are available: STYLABLE_ELEMENT_STATE.ERROR, STYLABLE_ELEMENT_STATE.FOCUS. These styles are available IElementStyleInput
    SUBMIT_BUTTON string "submit_button" These states are available: STYLABLE_ELEMENT_STATE.HOVER. These styles are available IElementStyleSubmitButton
    LABEL string "label." These styles are available IElementStyleLabel
    TITLE string "title." These styles are available IElementStyleTitle
    TITLE_DESCRIPTION string "title_description." These styles are available IElementStyleTitleDescription

    STYLABLE_ELEMENT_STATE : object

    Current constant include available states of element for styling

    Kind: global constant

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

    TRIGGER : object

    List of available triggers

    Kind: global constant

    Param Type Default
    SUBMIT_FORM string "submit_form"
    CHANGE_TAB string "tab"
    HIDE_ELEMENTS string "hide_elements"
    SHOW_ELEMENTS string "show_elements"
    REFRESH_CHECKOUT string "refresh_checkout"
    UPDATE_FORM_VALUES string "update_form_values"
    INIT_CHECKOUT string "init_checkout"

    Payment sources widget

    You can find description of all methods and parameters here

    This widget provides a list of previously added (saved) payment-sources by customer_id or reference. The widget provides an opportunity to use events to track the process of selecting payment-sources and provide meta information about the payment-sources.

    Payment-source requires a query_token that represents a pre-generated and secure token for limiting the list payment-sources, for a specific user or reference.

    In order to generate this token, you need to send a GET request to getCustomerList where required query parameter must be id or reference. In response you get response.query_token which you can use in the widget.

    Payment sources simple example

    Container

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

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

    Initialization

    var list = new paydock.HtmlPaymentSourceWidget('#list', 'publicKey', 'queryToken');
    list.load();
    // ES2015 | TypeScript
    
    import { HtmlPaymentSourceWidget } from '@paydock/client-sdk/widget';
        
    var list = new HtmlPaymentSourceWidget('#list', 'publicKey', 'queryToken');
    list.load();
    

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

    Full example

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

    Payment sources advanced example

    Customization

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

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

    Settings

    list.filterByTypes(['card', 'checkout']); // filter by any payment source types
    list.filterByGatewayIds(['gateway1']); // also other filters
    
    list.setRefId('id'); // your unique identifier to identify the data
    
    list.setLimit(4); // Pagination elements will show if count of elements more then argument passed
    
    list.onSelectInsert('input[name="ps_id"]', 'payment_source_id'); // insert one-time-token to your input after finish checkout
    
    list.on('select', function(data) {
        console.log(data);
    });

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

    Full example

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

    Classes

    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, [alias])

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

    Kind: instance method of HtmlPaymentSourceWidget

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

    Example

    widget.setEnv('production');

    htmlPaymentSourceWidget.getIFrameUrl()

    Method for getting iframe's url

    Kind: instance method of HtmlPaymentSourceWidget

    htmlPaymentSourceWidget.filterByGatewayIds(ids)

    Show payment source inside widget only with requested gateway ids

    Kind: instance method of HtmlPaymentSourceWidget

    Param Type Description
    ids [ 'Array' ].<string> List of 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

    htmlPaymentSourceWidget.setLanguage(code)

    Method for setting a custom language code

    Kind: instance method of HtmlPaymentSourceWidget

    Param Type Description
    code string ISO 639-1

    Example

    config.setLanguage('en');

    PaymentSourceWidget

    Class PaymentSourceWidget include method for for creating iframe url

    Kind: global class

    new exports.PaymentSourceWidget(publicKey, customer, [useReference])

    Param Type Default Description
    publicKey string PayDock users public key
    customer string PayDock's customer_id or customer_reference (In order to use the customer_reference, you must explicitly specify useReference as true)
    [useReference] boolean false

    Example

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

    paymentSourceWidget.setStyles(fields)

    Object contain styles for widget

    Kind: instance method of PaymentSourceWidget

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

    Example

    widget.setStyles({
          background_color: 'rgb(0, 0, 0)',
          border_color: 'yellow',
          text_color: '#FFFFAA',
          icon_size: 'small',
          font_size: '20px'
      });

    paymentSourceWidget.setRefId(refId)

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

    Kind: instance method of PaymentSourceWidget

    Param Type Description
    refId string custom id

    Example

    widget.setRefId('id');

    paymentSourceWidget.setLimit(count)

    Current method can set limit for payment sources count. In case when limit sets less then general count will be shown pagination buttons prev and next.

    Kind: instance method of PaymentSourceWidget

    Param Type Description
    count string payment source count

    paymentSourceWidget.setEnv(env, [alias])

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

    Kind: instance method of PaymentSourceWidget

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

    Example

    widget.setEnv('production');

    paymentSourceWidget.getIFrameUrl()

    Method for getting iframe's url

    Kind: instance method of PaymentSourceWidget

    paymentSourceWidget.filterByGatewayIds(ids)

    Show payment source inside widget only with requested gateway ids

    Kind: instance method of PaymentSourceWidget

    Param Type Description
    ids [ 'Array' ].<string> List of 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

    paymentSourceWidget.setLanguage(code)

    Method for setting a custom language code

    Kind: instance method of PaymentSourceWidget

    Param Type Description
    code string ISO 639-1

    Example

    config.setLanguage('en');

    EVENT : object

    List of available event's name

    Kind: global constant

    Param Type Default
    AFTER_LOAD string "afterLoad"
    SYSTEM_ERROR string "systemError"
    SELECT string "select"
    UNSELECT string "unselect"
    NEXT string "next"
    PREV string "prev"
    META_CHANGE string "metaChange"
    RESIZE string "resize"

    STYLE : object

    List of available style params for widget

    Kind: global constant

    Param Type Default
    BACKGROUND_COLOR string "background_color"
    BACKGROUND_ACTIVE_COLOR string "background_active_color"
    TEXT_COLOR string "text_color"
    BORDER_COLOR string "border_color"
    ICON_SIZE string "icon_size"
    FONT_SIZE string "font_size"

    PAYMENT_SOURCE_TYPE : object

    List of available payment source types

    Kind: global constant

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

    listener--PaymentSourceWidget : function

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

    Kind: global typedef

    Param Type
    response IEventData | IEventSelectData | IEventPaginationData | IEventAfterLoadData

    Checkout button

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

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

    Checkout button simple example

    Container

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

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

    Initialization

    var button = new paydock.PaypalCheckoutButton('#button', 'publicKey', 'gatewayId');
    // ES2015 | TypeScript
    
        
    var button = new PaypalCheckoutButton('#button', 'publicKey');
    

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

    Full example

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

    Checkout button advanced example

    Optional methods

    button.onFinishInsert('input[name="pst"]', 'payment_source_token'); // insert one-time-token to your input after finish checkout
    
    button.setMeta({
           brand_name: 'Paydock',
           reference: '15',
           first_name: 'receiver-name',
           last_name: 'receiver-last-name',
           phone: '9379992'}); // settings for checkout pages
    
    button.on('finish', function (data) { // Add handler of event
           console.log('on:finish', data);
    });

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

    Full Paypal example

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Title</title>
    </head>
    <body>
    <form id="paymentForm">
        <button type="button" id="button">
            <img src="https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif" align="left" style="margin-right:7px;">
        </button>
    </form>
    
    <input type="text" name="pst" />
    
    <script src="https://widget.paydock.com/sdk/latest/widget.umd.js" ></script>
    <script>
    	var button = new paydock.PaypalCheckoutButton('#button', 'publicKey', 'gatewayId');
    	button.onFinishInsert('input[name="pst"]', 'payment_source_token');
        button.setMeta({
               brand_name: 'Paydock',
               reference: '15',
               first_name: 'Joshua',
               last_name: 'Wood',
               phone: '0231049872'}); 
        
        button.on('finish', function (data) { 
               console.log('on:finish', data);
        });
    </script>
    </body>
    </html>

    Full ZipMoney example

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Title</title>
    </head>
    <body>
    <form id="paymentForm">
        <button type="button" id="button">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVrrEYxDmq4WXv7hfHygKD9ltnOqv0K6soSAhmbKNllPNYWiLiJA" align="left" style="margin-right:7px;">
        </button>
    </form>
    
    <input type="text" name="pst" />
    
    <script src="https://widget.paydock.com/sdk/latest/widget.umd.js" ></script>
    <script>
    	var button = new paydock.ZipmoneyCheckoutButton('#button', 'publicKey', 'gatewayId');
    	button.onFinishInsert('input[name="pst"]', 'payment_source_token');
        button.setMeta("first_name": "Joshua",
           "tokenize": true,
           "last_name": "Wood",
           "email":"joshuawood@hotmail.com.au",
           "gender": "male",
           "charge": {
               "amount": "4",
               "currency":"AUD",
               "shipping_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. Redirect after referred checkout

    Kind: instance method of CheckoutButton

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

    checkoutButton.turnOffBackdrop()

    Method for disable backdrop on the page.

    Kind: instance method of CheckoutButton
    Example

    button.turnOffBackdrop();

    ZipmoneyCheckoutButton ⇐ CheckoutButton

    Class ZipmoneyCheckoutButton is wrapper of CheckoutButton transform usual button into checkout

    Kind: global class
    Extends: CheckoutButton

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

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

    Example

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

    zipmoneyCheckoutButton.setSuspendedRedirectUri(string)

    Method for setting suspended redirect uri. Redirect after referred checkout

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

    Kind: instance method of ZipmoneyCheckoutButton
    Overrides: setSuspendedRedirectUri

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

    zipmoneyCheckoutButton.on(eventName, cb)

    Listen to events of widget

    Kind: instance method of ZipmoneyCheckoutButton

    Param Type Description
    eventName string Available event names CHECKOUT_BUTTON_EVENT
    cb listener

    Example

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

    zipmoneyCheckoutButton.close()

    Close popup window forcibly

    Kind: instance method of ZipmoneyCheckoutButton

    zipmoneyCheckoutButton.onFinishInsert(selector, dataType)

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

    Kind: instance method of ZipmoneyCheckoutButton

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

    zipmoneyCheckoutButton.setMeta(meta)

    Method for setting meta information for checkout page

    Kind: instance method of ZipmoneyCheckoutButton

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

    Example

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

    zipmoneyCheckoutButton.setBackdropDescription(text)

    Method for setting backdrop description

    Kind: instance method of ZipmoneyCheckoutButton

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

    Example

    button.setBackdropDescription('Custom description');

    zipmoneyCheckoutButton.setBackdropTitle(string)

    Method for setting backdrop title

    Kind: instance method of ZipmoneyCheckoutButton

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

    Example

    button.setBackdropTitle('Custom title');

    zipmoneyCheckoutButton.turnOffBackdrop()

    Method for disable backdrop on the page.

    Kind: instance method of ZipmoneyCheckoutButton
    Example

    button.turnOffBackdrop();

    PaypalCheckoutButton ⇐ CheckoutButton

    Class PaypalCheckoutButton is wrapper of CheckoutButton transform usual button into checkout

    Kind: global class
    Extends: CheckoutButton

    new exports.PaypalCheckoutButton(selector, publicKey, [gatewayId])

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

    Example

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

    paypalCheckoutButton.on(eventName, cb)

    Listen to events of widget

    Kind: instance method of PaypalCheckoutButton

    Param Type Description
    eventName string Available event names CHECKOUT_BUTTON_EVENT
    cb listener

    Example

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

    paypalCheckoutButton.close()

    Close popup window forcibly

    Kind: instance method of PaypalCheckoutButton

    paypalCheckoutButton.onFinishInsert(selector, dataType)

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

    Kind: instance method of PaypalCheckoutButton

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

    paypalCheckoutButton.setMeta(meta)

    Method for setting meta information for checkout page

    Kind: instance method of PaypalCheckoutButton

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

    Example

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

    paypalCheckoutButton.setBackdropDescription(text)

    Method for setting backdrop description

    Kind: instance method of PaypalCheckoutButton

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

    Example

    button.setBackdropDescription('Custom description');

    paypalCheckoutButton.setBackdropTitle(string)

    Method for setting backdrop title

    Kind: instance method of PaypalCheckoutButton

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

    Example

    button.setBackdropTitle('Custom title');

    paypalCheckoutButton.setSuspendedRedirectUri(string)

    Method for setting suspended redirect uri. Redirect after referred checkout

    Kind: instance method of PaypalCheckoutButton

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

    paypalCheckoutButton.turnOffBackdrop()

    Method for disable backdrop on the page.

    Kind: instance method of PaypalCheckoutButton
    Example

    button.turnOffBackdrop();

    AfterpayCheckoutButton ⇐ CheckoutButton

    Class AfterpayCheckoutButton is wrapper of CheckoutButton transform usual button into checkout

    Kind: global class
    Extends: CheckoutButton

    new exports.AfterpayCheckoutButton(selector, 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. Redirect after referred checkout

    Kind: instance method of AfterpayCheckoutButton

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

    afterpayCheckoutButton.turnOffBackdrop()

    Method for disable backdrop on the page.

    Kind: instance method of AfterpayCheckoutButton
    Example

    button.turnOffBackdrop();

    CHECKOUT_BUTTON_EVENT : object

    Kind: global constant

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

    listener : function

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

    Kind: global typedef

    Api

    You can find description of all methods and parameters here

    This wrapper helps you to work with paydock api emdpoints

    Get browser details

    var browserDetails = await new paydock.Api('publicKey').setEnv('env').getBrowserDetails();
    // ES2015 | TypeScript
    
    import { Api } from '@paydock/client-sdk/api';
        
    var browserDetails = await new paydock.Api('publicKey').setEnv('env').getBrowserDetails();
    

    Initialization

    var response = await new paydock.Api('publicKey').setEnv('env').charge().preAuth({
          amount: 100,
          currency: 'AUD',
          token: 'token',
        });
    // ES2015 | TypeScript
    
    import { Api } from '@paydock/client-sdk/api';
        
    var response = await new Api('publicKey').setEnv('env').charge().preAuth({
          amount: 100,
          currency: 'AUD',
          token: 'token',
        });
    

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

    Initialization full example

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

    Canvas3ds

    You can find description of all methods and parameters here

    This widget provides you to integrate 3d Secure

    Canvas3ds simple example

    Container

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

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

    Initialization

    var canvas3ds = new paydock.Canvas3ds('#widget', 'token');
    canvas3ds.load();
    // ES2015 | TypeScript
    
    import { Canvas3ds } from '@paydock/client-sdk/canvas3ds';
    
    var list = new Canvas3ds('#widget', 'token');
    list.load();
    

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

    Full example

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

    Canvas3ds advanced example

    Settings

    canvas3ds.setEnv('sandbox'); // set enviroment
    
    canvas3ds.hide(); // hide widget
    
    canvas3ds.show(); // show widget
    
    canvas3ds.on('chargeAuthSuccess', function (data) {
      console.log(data);
    });
    canvas3ds.on('chargeAuthReject', function (data) {
      console.log(data);
    });
    canvas3ds.on('chargeAuthCancelled', function (data) {
      console.log(data);
    });
    canvas3ds.on('additionalDataCollectSuccess', function (data) {
      console.log(data);
    });
    canvas3ds.on('additionalDataCollectReject', function (data) {
      console.log(data);
    });
    canvas3ds.on('chargeAuth', function (data) {
      console.log(data);
    });

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

    Full example

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

    Full example with pre authorization

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

    Vault Display Widget

    You can find description of all methods and parameters here

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

    Vault Display Widget simple example

    Container

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

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

    Initialization

    var widget = new paydock.VaultDisplayWidget('#widget', 'token');
    widget.load();
    // ES2015 | TypeScript
    
    import { VaultDisplayWidget } from '@paydock/client-sdk/vault-display-widget';
        
    var widget = new VaultDisplayWidget('#widget', 'token');
    widget.load();
    

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

    Full example

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

    Widget advanced example

    Customization

    widget.setEnv('sandbox');
    
    widget.on('after_load', function (data) {
      console.log(data);
    });
    
    widget.on('cvv_secure_code_requested', function (data) {
      console.log(data);
    });
    
    widget.on('card_number_secure_code_requested', function (data) {
      console.log(data);
    });
    
    widget.setStyles({
        background_color: 'rgb(0, 0, 0)',
        border_color: 'yellow',
        text_color: '#FFFFAA',
        button_color: 'rgba(255, 255, 255, 0.9)',
        font_size: '20px'
    });

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

    Full example

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>iframe {border: 0;width: 40%;height: 450px;}</style>
    </head>
    <body>
            
        <div id="widget"></div>
       
        <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
        <script>
            var widget = new paydock.VaultDisplayWidget('#widget', 'token');
    
            widget.setEnv('sandbox');
            
            widget.on('after_load', function (data) {
              console.log(data);
            });
            
            widget.on('cvv_secure_code_requested', function (data) {
              console.log(data);
            });
            
            widget.on('card_number_secure_code_requested', function (data) {
              console.log(data);
            });
            
            widget.setStyles({
                background_color: 'rgb(0, 0, 0)',
                border_color: 'yellow',
                text_color: '#FFFFAA',
                button_color: 'rgba(255, 255, 255, 0.9)',
                font_size: '20px'
            });
    
            widget.load();
        </script>
    </body>
    </html>

    VaultDisplayWidget

    Class VaultDisplayWidget include method for working on html

    Kind: global class

    new exports.VaultDisplayWidget(selector, token)

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

    Example

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

    vaultDisplayWidget.setEnv(env, [alias])

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

    Kind: instance method of VaultDisplayWidget

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

    Example

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

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

    Listen to events of widget

    Kind: instance method of VaultDisplayWidget

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

    Example

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

    vaultDisplayWidget.setStyles(fields)

    Object contain styles for widget

    Kind: instance method of VaultDisplayWidget

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

    Example

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

    vaultDisplayWidget.load()

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

    Kind: instance method of VaultDisplayWidget

    Classes

    WalletButtons

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

    Constants

    EVENT : object

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

    Interfaces

    IWalletMeta : object

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

    IShippingOption : object

    Interface of Shipping Options.

    IWalletMeta : object

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

    Kind: global interface

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

    IShippingOption : object

    Interface of Shipping Options.

    Kind: global interface

    Param Type Description
    [id] string Identifier of the Shipping Option. Required.
    [label] string Identifier of the Shipping Option. Required.
    [amount] string Amount of the Shipping Option. Required.
    [detail] string Details of the Shipping Option. Optional.
    [currency] string Currency of the Shipping Option. Optional.
    [type] string Type of the Shipping Option. Optional.

    WalletButtons

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

    Kind: global class

    new exports.WalletButtons(selector, chargeToken, object)

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

    Example

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

    walletButtons.load()

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

    Kind: instance method of WalletButtons
    Example

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

    walletButtons.update()

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

    Kind: instance method of WalletButtons
    Example

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

    Example

    // ApplePay via MPGS example:
    var button = new WalletButtons(
         '#buttons',
         token,
         {
             amount_label: 'Total',
             country: 'AU',
             ...
         }
     );
     button.on('update', (data) => {
         updateChargeAmountInBackend(data);
         button.update({
            success: true,
            body: {
                 amount: 15,
                 shipping_options: [
                      {
                         id: "NEW-FreeShip",
                          label: "NEW - Free Shipping",
                          detail: "Arrives in 3 to 5 days",
                          amount: "0.00"
                      },
                      {
                          id: "NEW - FastShip",
                          label: "NEW - Fast Shipping",
                          detail: "Arrives in less than 1 day",
                          amount: "10.00"
                      }
                  ]
             }
          });
     });

    walletButtons.setEnv(env, [alias])

    Current method can change environment. By default environment = sandbox. Also we can change domain alias for this environment. By default domain_alias = paydock.com Bear in mind that you must set an environment before calling button.load().

    Kind: instance method of WalletButtons

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

    Example

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

    walletButtons.close()

    Closes the checkout forcibly. Currently supported in Flypay wallet.

    Kind: instance method of WalletButtons
    Example

    button.close();

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

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

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

    Kind: instance method of WalletButtons

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

    Example

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

    walletButtons.onUnavailable([handler])

    User to subscribe to the no button available event. This method is used after loading when the button is not available. Important: Do not perform thread blocking operations in callback such as window.alert() calls.

    Kind: instance method of WalletButtons

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

    Example

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

    Example

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

    walletButtons.onUpdate([handler])

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

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

    Kind: instance method of WalletButtons

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

    Example

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

    Example

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

    walletButtons.onPaymentSuccessful([handler])

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

    Kind: instance method of WalletButtons

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

    Example

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

    Example

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

    walletButtons.onPaymentInReview([handler])

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

    Kind: instance method of WalletButtons

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

    Example

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

    Example

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

    walletButtons.onPaymentError([handler])

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

    Kind: instance method of WalletButtons

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

    Example

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

    Example

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

    EVENT : object

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

    Kind: global constant

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

    Wallet Buttons

    You can find description of all methods and parameters here

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

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

    Wallet Buttons simple example

    Container

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

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

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

    Initialization

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

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

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

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

    Setting environment

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

    button.setEnv('sandbox');

    Full example

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

    Wallet Buttons advanced example

    Checking for button availability

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

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

    Forcibly closing the checkout

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

    button.close();

    Performing actions when shipping info is updated

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

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

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

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

    For ApplePay via MPGS integration specifically, you must return the new amount and new shipping_options If new options are needed based on the updated shipping data. Before the user authorizes the transaction with Touch ID, Face ID, or passcode, you receive redacted address information (address_country, address_city, address_state, address_postcode), this data can be used to recalculate the amount and new shipping options. (https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypayment/1916097-shippingcontact)

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

    Performing actions after the payment is completed

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

    button.onPaymentSuccessful((data) => console.log("The payment was successful"));
    button.onPaymentInReview((data) => console.log("The payment is on fraud review"));
    button.onPaymentError((data) => console.log("The payment was not successful"));

    Events

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

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

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

    Full example

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

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

    Full example

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

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

    Full example

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

    This example shows how to use these functions for ApplePay via MPGS: (Required meta fields: amount_label, country. Optional meta fields: raw_data_initialization, request_shipping, style.button_type)

    Full example

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h2>Payment using PayDock Wallet Button!</h2>
        <div id="widget"></div>
    </body>
    <script src="https://app-sandbox.paydock.com/v1/widget.umd.js" ></script>
    <script>
        let button = new paydock.WalletButtons(
            "#widget",
            charge_token,
            {
                amount_label: "Total",
                country: 'DE',
                request_shipping: true,
                style: {
                    button_type: 'buy',
                },
                shipping_options: [
                    {
                        id: "FreeShip",
                        label: "Free Shipping",
                        detail: "Arrives in 5 to 7 days",
                        amount: "0.00"
                    },
                    {
                        id: "FastShip",
                        label: "Fast Shipping",
                        detail: "Arrives in 1 day",
                        amount: "10.00"
                    }
                ]
            }
        );
        button.setEnv('sandbox');
        button.onUnavailable(() => console.log("No wallet buttons available"));
        button.onPaymentSuccessful((data) => console.log("The payment was successful"));
        button.onPaymentError((data) => console.log("The payment was not successful"));
        button.load();
    </script>
    </html>

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

    Raw data initialization example

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h2>Payment using PayDock Wallet Button!</h2>
        <div id="widget"></div>
    </body>
    <script src="https://app-sandbox.paydock.com/v1/widget.umd.js" ></script>
    <script>
        let button = new paydock.WalletButtons(
            "#widget",
            charge_token,
            {
                raw_data_initialization: {
                    countryCode: "AU",
                    currencyCode: "AUD",
                    merchantCapabilities: ["supports3DS","supportsCredit","supportsDebit"],
                    supportedNetworks: ["visa","masterCard","amex","discover"],
                    requiredBillingContactFields: ["name","postalAddress"],
                    requiredShippingContactFields:["postalAddress","name","phone","email" ],
                    total: {
                        label: "Total",
                        amount: "10",
                        type: "final",
                    }
                },
                amount_label: "Total",
                country: 'DE',
                request_shipping: true,
                style: {
                    button_type: 'buy',
                },
                shipping_options: [
                    {
                        id: "FreeShip",
                        label: "Free Shipping",
                        detail: "Arrives in 5 to 7 days",
                        amount: "0.00"
                    },
                    {
                        id: "FastShip",
                        label: "Fast Shipping",
                        detail: "Arrives in 1 day",
                        amount: "10.00"
                    }
                ]
            }
        );
        button.setEnv('sandbox');
        button.onUnavailable(() => console.log("No wallet buttons available"));
        button.onPaymentSuccessful((data) => console.log("The payment was successful"));
        button.onPaymentError((data) => console.log("The payment was not successful"));
        button.load();
    </script>
    </html>

    License

    Copyright (c) 2017 paydock

    Install

    npm i @paydock/client-sdk

    Homepage

    paydock.com

    DownloadsWeekly Downloads

    1,302

    Version

    1.10.54

    License

    UNLICENSED

    Unpacked Size

    1.48 MB

    Total Files

    261

    Last publish

    Collaborators

    • paydock