Setting up a new webapp

How Webapps Are Embedded

Webapps run inside an iframe and are embedded into host pages using kasko-js, a JavaScript SDK. The basic embedding looks like:

<div id="kasko-app"></div>
<script src="https://js.kasko.io/v2/kasko.js"></script>
<script>
Kasko.Setup({
  key: 'pk_test_xxxxx',      // Your publishable key
  touchpoint: 'tp_xxxxx',    // Your touchpoint ID
  mode: 'webview',
  container: 'kasko-app'
});
</script>

See the kasko-js documentation for all configuration options including data prefilling, event callbacks, and display modes.

As a 3rd party

To start, we need to create all the database entities required for a new product: items, touchpoints, payment providers, contents, etc. Most likely this will be done by the KASKO team and you should receive only the touchpoint id, public key, plugin id and private key for publishing the application to KASKO platform. Please reach out to the KASKO team if you are missing any of these!

Afterward, you can proceed with cloning either the external example app (react). This will serve as the base for the project.

Assuming that the external example app will be used as the base, these are the next steps:

1. create .env file and copy .env.example file's content to it

2. change the WEBAPP_PUBLIC_KEY variable in .env file (maybe WEBAPP_LANGUAGE as well)

3. change product id and integration id in product.json file

4. change project name in package.json and README.md

5. start developing!

Further information - how to test, lint and deploy the code can be found in README.md of the external example app project.

As a KASKO employee

Warning: this guide is targeted to internal KASKO developers.

Step-by-step guide

1. Create a new repository

   • Open fe-projects-tf

   • Copy & paste the webapp TF template into a new webapp file (the filename must follow this pattern: *-web-app)

   • Commit the file and create a new PR

   • Once the PR is approved and merged, follow on to step 2

2. Copy the demo app

   • Open the example app

   • Copy & paste all the files & folders to the newly created repository

   • Commit the initial codebase in a feature branch

   • Create a PR (this PR should have NO custom changes; it should be just copy&paste)

   • Get your new webapp's plugin id and change it in kasko.yaml file

   • Once the PR is approved and merged, follow on to step 3

3. Develop

   • This is where the fun begins :)

But before you do - remember to change the application name in README, package.json and other files as well as the touchpoint ID and public key in .env.example.