advanced simulator documentation

advanced-simulator.md

Simulator API Documentation

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

URLS for SDK

• https://cdn.pagantis.com/js/pg-v2/sdk.js

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