Verkkokaupan sivuille lisättävällä erämaksulaskurilla ostaja voi kätevästi vertailla erilaisia maksusuunnitelmia, ja voit näyttää tuotesivulla alkaen-hinnan. Voit myös lisätä erämaksulaskurin ostoskoriin, jolloin ostaja voi suunnitella maksuaikataulua etukäteen ennen maksamiseen siirtymistä.

Palveluun kuuluva erämaksulaskuri tekee asiakkaalle sopivan maksusuunnitelman löytämisestä helppoa ja voi auttaa ostopäätöksen tekemisessä sekä kasvattaa keskiostosta, kun asiakkaasi saa joustavasti maksuaikaa hankinnoilleen.

Erämaksulaskurin voi luoda kahdella vaihtoehtoisella tavalla: joko Extranetin Materiaalit-välilehdellä tai voit luoda scriptin tältä sivulta löytyvän ohjeen mukaan. Alla ohjeistetaan molemmat tavat.

Erämaksulaskurin luominen Extranetissä

Voit generoida haluamasi näköisen erämaksulaskurin Extranetissä määrittelemällä laskurin ominaisuudet ja sen jälkeen kopioimalla scriptin verkkokaupan sivuille. Erämaksulaskuri hakee verkkokaupan palvelun tiedot kauppiastunnuksella rajapinnasta ja näyttää mm. kyseiselle palvelulle aktivoidut kampanjat. Uudessa Extranetissä Materiaalit-välilehdellä voi erämaksulaskurin asetuksissa määritellä mm. värit, laskurin tyylin, tekstejä ja oletusmaksuajan.

Erämaksulaskuri luo ja päivittää scriptiä tekemiesi määrittelyjen mukaisesti ja näyttää sivulla koko ajan erämaksulaskurin esikatselun.

Asetukset

Erämaksulaskurin asetuksissa voit määritellä, haluatko erämaksulaskurista kokonaisen vai mini-version. Voit myös asettaa hinnan esimerkinomaisesti. Varsinainen tuotteen hinta välitetään verkkokaupasta data-price parametrina, tai hinta-kentän voi jättää tyhjäksi. Lue lisää tästä: https://sveapayments.atlassian.net/wiki/spaces/PSP/pages/1682767903/Er+maksulaskuri+Part+payment+widget#Tuotteen-hinta-er%C3%A4maksulaskurissa

Voit halutessasi asettaa myös oletusmaksuajalle hintarajoja. Tämä tarkoittaa sitä, minkä maksuajan laskuri näyttää oletuksena tietyille hinnoille. Esimerkiksi tässä 50 euron ja yli tuotteille näytetään oletuksena 3 kuukauden maksuaika, 500 euron ja yli tuotteille näytetään oletuksena 6 kuukauden maksuaika ja 1500 euron ja yli tuotteille näytetään oletuksena 24 kuukauden maksuaika:

Mikäli et aseta hintarajoja, näyttää erämaksulaskuri oletuksena aina pisimmän maksuajan eli alkaen-hinnan.

Ulkoasu

Ulkoasu-parametreilla voit asettaa laskuriin haluamasi värit ja reunaviivan tyylin:

Tekstit

Lisäksi voit määritellä erämaksulaskurissa näytettävät tekstit erilaisissa tilanteissa.

Aluksi voit määritellä erämaksulaskurin kielen. Vaihtoehdot ovat suomi, ruotsi ja englanti. Voit luoda vaikka useamman laskurin eri kielillä, jos tarpeen.

Seuraavissa kohdissa voit määritellä ns. fallback-tekstit eri kielillä. Tämä teksti näytetään, jos esimerkiksi tuotteen hinta ei osu erämaksulle määriteltyjen minimi- ja maksimirajojen sisään, eikä laskuria voida näyttää.

Voit myös määritellä kampanjatekstit eri kielillä. Tämä on teksti, joka näytetään erämaksulaskurin yläosassa (tässä esimerkissä teksti “Tämä on kampanjateksti”):

HTML-script verkkokaupan sivuille

Kun olet tehnyt haluamasi määrittelyt erämaksulaskurille, tuloksena syntyy HTML-script jonka voit kopioida ja käyttää verkkokaupan sivuilla. Näet esikatselun sivulla koko ajan, joten voit tarvittaessa muokata ja kokeilla erilaisia asetuksia ja määrittelyjä. Esimerkiksi:

Tässä esimerkissä tuotteen hinta on 200 €, laskuriin on asetettu oletusmaksuaikoja eri summille, sekä fallback-teksti ja kampanjateksti.

Tuotteen hinta erämaksulaskurissa

Tuotteen hinta, tai ostoskorin hinta jos laskuria käytetään kassalla/ostoskorissa, tulee välittää verkkokaupasta data-price parametrina, tai vaihtoehtoisesti data-price kentän voi jättää tyhjäksi, jolloin käyttäjä voi itse täyttää laskuriin haluamansa summan ja esimerkiksi vertailla maksusuunnitelmia erilaisille summille. Tällöin laskurissa on hinnan sijaan syöttökenttä, johon käyttäjä voi syöttää haluamansa summan:

Javascriptin avulla laskurin summaa voi myös päivittää mikäli käyttäjä muuttaa tuotesivulla tuotteiden kappalemäärää ja haluaa nähdä maksusuunnitelmat niiden yhteissummalle, tai jos käytät laskuria ostoskorissa ja ostoskorin summa muuttuu. Tarkemmat ohjeet javascriptia varten löydät tästä: https://sveapayments.atlassian.net/wiki/spaces/PSP/pages/1682767903/Er+maksulaskuri+Part+payment+widget#Updating-price-and-payment-plan-calculations

Erämaksulaskurin scriptin luominen

Jos et luo erämaksulaskurin “pohjaa” Extranetissä, niin voit halutessasi käyttää alla olevaa ohjetta erämaksulaskurin luomiseen.

Scriptiin voi määritellä seuraavat arvot (lihavoidut ovat pakollisia), arvojen tulee olla lainausmerkeissä:

• src= host-osoite: "https://payments.maksuturva.fi/tools/partpayment/partPayment.js"
  class="svea-pp-widget-part-payment"

• data-sellerid= ko. verkkokaupan Svea Payments -palvelun seller id

• data-layout= voit määritellä käytettäväksi laskurin miniversion, joka näyttää tarvittavat tiedot pienemmässä tilassa, mutta ei ole brändättävissä omilla väreillä. Jos haluat käyttää miniversiota, aseta tähän arvo “mini”.

• data-price= tuotteen hinta, joka välitetään laskuriin kaupasta.

  • Kentän voi jättää myös tyhjäksi, eli tämä arvo ei ole pakollinen - jos arvoa ei ole annettu, laskuri näyttää hinnan syöttökentän, johon käyttäjä voi syöttää haluamansa summan ja vertailla sille maksuaikoja.

• data-locale= laskurin kieli, vaihtoehdot “fi” (suomi) / “sv” (ruotsi) / “en” (englanti)

• data-border-radius= reunaviivan paksuus pikseleinä, esim. "12px"

• data-active-color= aktiivisen tekstin väri HEX-värikoodina, esim. "#00AECE"

• data-text-color= tekstin väri HEX-värikoodina, esim. "#212121"

• data-highlight-color= korostusväri HEX-värikoodina, esim. "#002C50"

• data-border-color= reunaviivan väri HEX-värikoodina, esim. "#DEE1EC"

• data-campaign-text-fi= kampanjateksti suomeksi, joka näkyy laskurin yläreunassa.

  • Muut kielivaihtoehdot ovat data-campaign-text-sv (ruotsi) / data-campaign-text-en (englanti)

• data-fallback-text-fi= teksti, joka näkyy virhetilanteessa.

  • Muut kielivaihtoehdot ovat data-fallback-text-sv (ruotsi) / data-fallback-text-en (englanti)

• data-threshold-prices= voit määritellä, mikä maksuaika/kampanja näytetään oletusarvoisesti eri hinnoilla.

  • Esimerkiksi asetus "[[500, 6], [1000, 12], [1500, 24]]" tarkoittaa, että yli 500 euron tuotteilla näytetään oletusarvoisesti 6 kk maksuaika, yli 1000 euron tuotteilla 12 kk maksuaika, yli 1500 euron tuotteilla 24 kk maksuaika.

Svea Part Payment widget

Widget that shows part payment calculator.

Supported options

·         maksuturva-host (string, can be used in development to change the host where data is fetched from). For example: data-maksuturva-host="https://test1.maksuturva.fi"

·         sellerid (string, required) 

·         layout (string, optional) (if set to “mini“, shows a mini calculator that opens a modal window containing the full calculator when clicked. If this option is not present, shows the full calculator)

·         price (float) (If left empty, shows an input field with which the user can input a price manually)

·         threshold prices (An array of arrays with price and month pairs which determine the starting point of the slider based on the price. Example [500, 6] tells that prices over 500 the starting point of the slider is 6 months. The price points don't need to be in any specific order we go from the lowest value to highest. If the month doesn't exist in the data, the API return we set the default value which is the largest month value.)

·         active color

·         text color

·         highlight color

·         border color

·         border radius

·         locale (enum: fi, sv, en)

·         fallback text (fi, sv, en; static text shown when the API returns no campaigns, which can happen when the price is too low to offer any part payment plans.) 

·         campaign text (fi, sv, en; static text shown on top the widget based on the locale) 

Example, replace values with appropriate ones (optional values are marked with grey text, color values can be used as such if web store does not wish to use own colors):

Updating price and payment plan calculations

The price and payment plan calculations can be updated programmatically by dispatching a javascript event "svea-partpayment-calculator-update-price" with a price value in its detail property.

Example:

document.dispatchEvent(new CustomEvent("svea-partpayment-calculator-update-price", { "detail": { "price": "123.45" } }));

API

Registers top-level constant SveaPartPayment. Available methods:

initializeWidgets(onSuccess): Re-initialized widgets for example after loading new content with AJAX. Takes a callback function which is called after all the widgets have been initialized.

Dynamically construct Part Payment Calculator script

For situations where access to price from API / backend, etc. is not available (for example Shopify).

• Uses javascript to create and append a custom <script> element for the Part Payment Calculator onto the DOM.

• Fetches the price from a meta property (in this example, from: <meta property="og:price:amount" content="..."> Can also fetch the quantity from any other HTML element - just customize the var price_selector = document.querySelector(...); function call to point to the correct element.

• Fetches the quantity from a field (in this example, from: <input name="quantity" type="number" value="..."> Can also fetch the quantity from any other HTML element - just customize the var qty_selector = document.querySelector(...); function call to point to the correct element. Also, injects a change event listener to the quantity field, so that the price is recalculated when the quantity field value is changed.

• The Part Payment Calculator script can be appended to any part of the DOM / shown on any part of the HTML page. See the // Section 3 - Insert Part Payment Calculator section in the source code for an example. This current example appends it after the "product-form" element.

USAGE:

1. Insert the <script> from the source code between <!-- // Part Payment Calculator - create element - BEGIN --> and <!-- // Part Payment Calculator - create element - END --> into a field where you can insert raw html - for example, the product description field in Shopify.

2. Customize the var price_selector = document.querySelector(...); function call to point to the price element.

3. If quantity is present, customize the var qty_selector = document.querySelector(...); function call to point to the quantity element.

4. Customize the // Section 3 - Insert Part Payment Calculator section to append the Part Payment Calculator script to the correct position on the page.

<!-- // Part Payment Calculator - create element - BEGIN -->
<script>
// Section 1 - Selectors to get: price (from the meta property in the page source)
//                               quantity (from a field)
var price_selector = document.querySelector('meta[property="og:price:amount"]');
var qty_selector = document.querySelector('[name="quantity"]');

// Change event listener to calculate total price when quantity is changed
if (qty_selector) {
  qty_selector.addEventListener("change", (e) => {
    var pp_price = "" + calculatePPTotalPrice();
    document.dispatchEvent(new CustomEvent("svea-partpayment-calculator-update-price", { "detail": { "price": pp_price } }));
  }, false);
}

function calculatePPTotalPrice() {
  var pp_price = price_selector.content;
  pp_price = parseFloat(preformatFloat(pp_price));

  // If quantity exists, multiply price with it
  if (qty_selector) {
    var pp_qty = qty_selector.value;
    if (pp_qty)
      pp_price = parseFloat(pp_price * preformatFloat(pp_qty));

  }

  return pp_price;
}

function preformatFloat(e){if(!e)return"";let r=e.indexOf(",");if(-1===r)return e;let t=e.indexOf(".");return -1===t?e.replace(/\,/g,"."):r<t?e.replace(/\,/g,""):e.replace(/\./g,"").replace(",",".")}

function generatePPCalculator() {
  var pp_price = calculatePPTotalPrice();

  // Section 2 - create Part Payment Calculator Script
  const sppScript = document.createElement("script");
  sppScript.src = "https://payments.maksuturva.fi/tools/partpayment/partPayment.js";
  sppScript.setAttribute('class', 'svea-pp-widget-part-payment');
  sppScript.setAttribute('data-sellerid', '<instertsellerid>');
  sppScript.setAttribute('data-price', pp_price);
  sppScript.setAttribute('data-locale', 'fi');
  //sppScript.setAttribute('async', '');
  sppScript.onload = () => {
    document.dispatchEvent(new CustomEvent("svea-partpayment-calculator"));
  };
  
  // Section 3 - Insert Part Payment Calculator - after product-form & before description
  var insertElement = document.getElementsByClassName("product-form")[0];
  insertElement.parentNode.append(sppScript);
}

window.onload = generatePPCalculator();
</script>
<!-- // Part Payment Calculator - create element - END -->

Example of Dynamically constructing Part Payment Calculator script for a product in Shopify