Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
advanced simulator documentation

Simulator API Documentation

This module allows merchants to show a simulator under their page.

URLS for SDK

Getting Started

Import PMT Javascript Client SDK library to your website.

Constants

Positions

Constants used to position the simulator widget

> pmtSDK.simulator.positions.INNER
> pmtSDK.simulator.positions.BEFORE
> pmtSDK.simulator.positions.AFTER

Types

Constants used to change the simulator type

> pmtSDK.simulator.types.SIMPLE  (Default simulator)
> pmtSDK.simulator.types.SELECTABLE    (Dropdown simulator type)
> pmtSDK.simulator.types.TEXT      (Only text simulator)
> pmtSDK.simulator.types.MARKETING   (Default simulator wrapped with marketing stuff)

Skins

Constants used to change the simulator skin

> pmtSDK.simulator.skins.BLUE  (Blue simulator)
> pmtSDK.simulator.skins.GREY    (Greyed simulator)
> pmtSDK.simulator.skins.NEUTRAL   (Neutral / duotone simulator)

Available methods for pmtSDK.simulator

pmtSDK.simulator.init(options)

  • Returns A simulatorId (string)

  • Description: Instantiates a new simulator widget.

    NOTE about amounts: You can use multiple combinations as amounts since we worked hard on our priceParser. This means you can use strings like: '350.32€', 'precio 12€', '164.23', 25

    NOTE about CSS selectors: You can use whatever CSS selector compatible with HTML5 document.querySelector(). Also you can track multiple DOM element types, like divs, spans, inputs, selects, and so on.

  • Parameters:

    • options (object):

      • publicKey | string | Required | Merchant PK / TK.
      • selector | string | Default: 'body' | CSS Selector to inject the widget. (Example: '#simulator', '.simulator')
      • position | position | Default: pmtSDK.simulator.positions.INNER | Could be: INNER, BEFORE, AFTER. The position where the simulator widget will be injected. Refer to constants section for further information.
      • numInstalments | integer | Default: 3 | This is the num instalments to be shown if the user doesn't selected any previous instalment value.
      • type | types | Default: pmtSDK.simulator.types.SIMPLE | Could be: SIMPLE, SELECTABLE, TEXT, MARKETING. Refer to constants section for further information.
      • skin | skin | Default: pmtSDK.simulator.skins.BLUE | Could be: BLUE, GREY, NEUTRAL. Refer to constants section for further information.
      • totalAmount | string / number | Default: 0 | total amount to calculate the instalments
      • totalPromotedAmount | string / number | Default: 0 | Total promoted amount
      • itemAmount | string / number | Default: 0 | Amount per item
      • itemPromotedAmount | string / number | Default: 0 | Promoted amount per item.
      • itemQuantity | string / number | Default: 1 | Number of items
      • totalAmountSelector | string | CSS selector with DOM element having totalAmount value.
      • totalPromotedAmountSelector | string | CSS selector with DOM element having totalPromotedAmount value.
      • itemAmountSelector | string | CSS selector with DOM element having itemAmount value.
      • itemPromotedAmountSelector | string | CSS selector with DOM element having itemPromotedAmount value.
      • itemQuantitySelector | string | CSS selector with DOM element having itemQuantity value.

pmtSDK.simulator.reload(simulatorId)

  • Description: Force a full reload for a fiven simulatorId,
  • Parameters:
    • simulatorId (string)

pmtSDK.simulator.reloadAll()

  • Description: Force a full reload in all instantiated simulators.
  • Parameters:
    • none

pmtSDK.simulator.update(simulatorId, options)

  • Description: Removes a simulator given a simulatorId.
  • Parameters:
    • options (object): Refer to init() method.

pmtSDK.simulator.remove(simulatorId)

  • Description: Removes a simulator given a simulatorId.
  • Parameters:
    • simulatorId (string)

pmtSDK.simulator.openModal(options, modalOptions)

  • Description: Opens a marketing type simulator on a modal when called.
  • Parameters:
    • options (object): Refer to init() method.
    • modalOptions (object): Refer to options object passed on Modal init documentation.

Examples

Example 1 (Simulator type simple injected on .pmtSimulator placeholder)

pmtSDK.simulator.init({
  publicKey: '[YOUR_PUBLIC_KEY]',
  selector: '.pmtSimulator',
  totalAmount: '300€',
});

Example 2 (Simulator type simple injected after #financing placeholder with skin neutral and with totalAmount 365.2€ and totalPromoted amount 50€)

pmtSDK.simulator.init({
  publicKey: '[YOUR_PUBLIC_KEY]',
  selector: '#financing',
  position: pmtSDK.simulator.positions.AFTER,
  totalAmount: 365.2,
  totalPromotedAmount: 50,
});

Example 3 (Let's say we want to keep track of a Dom element already present having totalAmount value we would need to use totalAmountSelector instead of totalAmount attribute)

pmtSDK.simulator.init({
  publicKey: '[YOUR_PUBLIC_KEY]',
  selector: '#financing',
  position: pmtSDK.simulator.positions.AFTER,
  totalAmountSelector: '.css_selector_to_find_totalAmount',
});

Example 4 (Advanced example. A simulator tracking items values from DOM with selectors, with type text and 6 installments by default)

pmtSDK.simulator.init({
  publicKey: '[YOUR_PUBLIC_KEY]',
  selector: '#financing',
  position: pmtSDK.simulator.positions.INNER,
  type: pmtSDK.simulator.types.TEXT,
  numInstalments: 6,
  itemAmountSelector: '#css_selector_to_find_itemAmount',
  itemQuantitySelector: '#css_selector_to_find_itemQuantity',
  itemPromotedAmountSelector: '#css_selector_to_find_itemPromotedAmount',
});

Example 5 (Update a simulator total amount)

var simulatorId = pmtSDK.simulator.init({
  publicKey: '[YOUR_PUBLIC_KEY]',
  selector: '.pmtSimulator',
  totalAmount: '300€',
});

// Later you can update the amount or other parameters via .update() method

pmtSDK.simulator.update(simulatorId, {
  totalAmount: '625.25€',
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.