Hokodo.js

Using Hokodo’s JS SDK within your project:

Installation

Using npm:

npm install @hokodo/hokodo-js

Using Yarn:

yarn add @hokodo/hokodo-js

Using ES Modules (via Skypack):

<script type="module">
  import Hokodo from "https://cdn.skypack.dev/@hokodo/hokodo-js";
</script>

Using in the browser (via unpkg):

<script src="https://unpkg.com/@hokodo/hokodo-js" />

Package Versions

Each installation option supports versioning. Please refer to the module repository or CDN documentation for information on how to specify different versions.

Usage

Import / Namespace

Import using ES6 module syntax:

import Hokodo from "@hokodo/hokodo-js";

Or using CommonJS syntax:

const Hokodo = require("@hokodo/hokodo-js");

For a browser based approach, the Hokodo namespace is declared globally against the window object:

window.Hokodo;
// or
Hokodo;

Getting Started

To start using the Hokodo SDK you must first initialise an instance as per the below example. Once initialised you can then access the rest of the SDK via the newly created variable.

var hokodo = Hokodo();

Elements

To create and mount Hokodo elements, an instance of elements must first be initialised from the newly created Hokodo instance (via the previous step):

var elements = hokodo.elements();

elements.getElement()

The getElements method can be used to access previously created elements from memory. This is ideal if you can no longer access the assigned element variable due function encapsulation or for other reasons.

const dialog = elements.getElement("dialog");

elements.create(“dialog”)

The dialog component provides a HTML dialog containing the Hokodo buy now pay late form. This allows for a more seamless integration within your existing checkout.

To create this component you must first acquire the payment_url from the /payment/offers/ API endpoint. This value is then passed to the dialog options object as per the below example:

var dialog = elements.create("dialog", {
  paymentUrl: "http://pay.hokodo.co/...",
});

dialog.mount()

Mounting the dialog element inserts the previously created dialog within your application DOM. There are two options when mounting this element, either via a target (using a css selector as the value) or with no specified target.

When no target is provided the element appends to your document body. This is the recommended approach for implementation and the target option is only provided for edge cases.

dialog.mount(TARGET);

dialog.unmount()

The unmount() method can be used to remove an element from the DOM. This approach retains all existing on() event handlers and the elements state in memory. This allows for the element to be remounted again if desired.

dialog.unmount();

dialog.destroy()

Similar to unmount(), the destroy() method removes the element from the DOM but in addition, preforms cleanup tasks, removing all event handlers and the element from memory. Once this method has been called the component will no longer exist in the DOM or in memory and would need to be recreated before it can be mounted again.

dialog.destroy();

dialog.on()

There are several on() events that allow for communication between the Hokodo element and your application. Each event must have the event name and a handler function.

dialog.on(EVENT, HANDLER);

Events

• ready - when the element has fully loaded after being mounted
• success - on successful submission of the buy now pay later form
• failure - when there has been a fatal error when loading the element
• cancel - when the used has closed the element

Example:

dialog.on("cancel", function () {
  console.info("The user has closed the Hokodo dialog element");
});