Introduction

The “Pay with Knoma” function allows your students to quickly secure funding for any course, provided they are accepted as a member by Knoma. Our product allows the student to spread the cost of the courses, smoothing out their cashflow, without incurring any interest or fees.

With our javascript web SDK you can easily add the Knoma finance option to your website, which has proven to result in better conversion and retention at the shopping cart.

Prerequisites

To add 'Pay with Knoma' you must be already approved by the Knoma team and have a 'provider ID'. If you have not yet applied, you can do it here.

'Pay with Knoma' should be placed on all course pages allowing students to quickly apply for the Knoma financing option within your course page. We request the “Pay with Knoma” button is added next to the action button allowing the student to apply to the course.

You will need writable access to these pages. If you do not have writable access, please contact your system administrator to secure the necessary access. 


Getting Started

Implementing 'Pay with Knoma' on your page is very easy and (we hope) anyone can do it!

First, you will need to add our Javascript Library and CSS style guide. Simply copy and paste the following code between <head> and </head> your course page.

We also recommend that you set the following 'viewport' meta-tag (if not already set). Without this the widget will not scale to the full size of the browser on mobile devices

Next, we need to add a few tags to key pieces of information about the course, this includes course name and price. This is required to make sure we have the most up to date information, which is crucial for the checkout process. This also means all your courses will be added to our course marketplace.

An example of this looks like...

Please add the following ID attributes to the relevant information. 

Value ID Attribute
Course Name k-c-name
Total Cost k-c-price
Course Start Date k-c-startdate
Length of Course (days) k-c-days
Length of Course (weeks) k-c-weeks
Campus Location or "Remote" k-c-campus
Commitment k-c-commitment

Finally, the 'Pay with Knoma' action itself! Simply copy the following. Please make sure that the
k-provider-id and the k-course-id.

The k-provider-id can be found in your welcome email. Please contact us if you cannot find this. The k-course-id is a unique key or reference of the course provided by you, the provider. This should be a value that does not change.

Callbacks

It is always good practice to handle any errors or events that can happen. For this, we have built a very simple callback function that will notify you when an event occurs. This function will return an event name (all are listed below) and a dictionary of information related to the event, like if it was opened in a new tab, error codes and even the country code of the request.

Event Description
kapplication.initialized Called when the script is initialized on the page
kapplication.launched Called when the Pay with Knoma is triggered and launches the loan application sucessfully
kapplication.dismissed Called when the Pay with Knoma window is dismissed by the user
kapplication.unsupported Called when the Pay with Knoma is triggered but fails due to the users location
kapplication.failed Called on initilization if an error occurs. Information about the error can be found in the payload
Event
(leading with 'kapplication.')
Description
initialized Called when the script is initialized on the page
launched Called when the Pay with Knoma is triggered and launches the loan application sucessfully
dismissed Called when the Pay with Knoma window is dismissed by the user
unsupported Called when the Pay with Knoma is triggered but fails due to the users location
failed Called on initilization if an error occurs. Information about the error can be found in the payload

Customisation

The 'Pay with Knoma' action button can be set to either Blue (#2e5cff), Green (#00fcb5) or White (#ffffff). This can be changed by setting the k-custom attribute within the button. 

The 'Pay with Knoma' cannot be resized. The size of this set to 145px x 25px. To reposition this within your page we suggest placing it within a div and adding the appropriate style properties. An example of this can be found below. 


We do not allow any further customisation to the button, or the launcher. This falls outside of our brand guidelines. 


Example

We have created a testing environment with JSFiddle where a course page example can be created, tested and implemented using the 'Pay with Knoma' Web SDK. 

This example can also be viewed in full screen using this example.