JavaScript API

The main JavaScript class of interest is millipay. Product, which encapsulates the state transition management of the payment process and the AJAX requests to the milliPay backend as well.

Cheatsheet

A payment process is instantiated as product per item to be sold. There are three methods to start the payment process:

Method How the payment process is started
Product.registerStartPaymentClick One or more DOM elements trigger .startPayment() on a click event
Product.tryAccessOnLoad $(document).ready is used to call .startPayment() with a special GUI configuration to only re-access content and not trigger a standard pay, sign in, or topup GUI feedback.
Product.startPayment You start the payment process manually in your JavaScript code when calling .startPayment().

The product emits events, once the payment process is triggered. These are collected by EventReactionCollector attributes as follows.

Event
EventReactionCollector
Product Attribute
 Remarks
“start” .onStart Payment Process has started.
“userAbort” .onUserAbort User clicked a close icon.
“error” .onError An error occurred.
“accessAuthorization” .onAccessAuthorization Access is granted due to a successfull payment, or if the item was already paid.

An EvenReactorCollector defines often used recipes, and is bound to the specific event (see above):

Method Effect
.show $(selector).show() is called, i.e. the elements are displayed
.hide $(selector).hide() is called, i.e. the elements are hidden
.navigateTo window.location.href = URLAddress is set, i.e. navigate somewhere
.fetchContentThenCall an AJAX request to an URLAddress is sent, and a function called with the data
.fetchContentThenInject an AJAX request to an URLAddress is sent, and $(selector).html(data) applied

An EvenReactorCollector simplifies many standard page interactions that occur in reaction to a payment. E.g. instead of writing

$(myproduct).on("accessAuthorization", function(){$(selector).show();});
$(myproduct).on("accessAuthorization", function(){$(selector).hide();});
$(myproduct).on("accessAuthorization", function(){[fancy-stuff]});

you can use

myproduct.onAccessAuthorization
         .show(selector)
         .hide(selector)
         .call(function(){[fancy-stuff]});