Web SDK template

A highly adaptable JavaScript package for web development, compatible with all major frameworks, and easily customizable to fit your project's unique requirements.

Installation

using npm

npm install @aycom366/web-sdk-template

Note

• This package should only be used on the client side.
• The setup() method should be invoked before any other method.

Usage

with React

import CorePackage, { MessageEvents } from "@aycom366/web-sdk-template";

function App() {
  const openWidget = useCallback(() => {
    const widgetPackage = new CorePackage({
      onEvent(event, data) {
        switch (event) {
          case MessageEvents.WIDGET_LOADED:
            console.log("loaded", data);
            break;
          case MessageEvents.WIDGET_CLOSED:
            console.log("closed", data);
            break;
          case MessageEvents.WIDGET_OPENED:
            console.log("widget opened", data);
            break;
          case MessageEvents.WIDGET_LOAD_ERROR:
            console.log("widget load error", data);
            break;
        }
      },
      //sdk requires always key, so this is an example
      publicKey: "Ayomide",

      //The meta below could be anything
      meta: {
        order_ref: "kjdjkdjkdjds",
        custom: "pass anything",
      },
    });
    //setup should be called before any other method is invoked.
    widgetPackage.setup();
    widgetPackage.open();
  }, []);

  return (
    <>
      <button onClick={openWidget}>open widget</button>
    </>
  );
}

with Vue

<script setup lang="ts">
import CorePackage, { MessageEvents } from '@aycom366/web-sdk-template'

function openWidget() {
  const widgetPackage = new CorePackage({
    onEvent(event, data) {
      switch (event) {
        case MessageEvents.WIDGET_LOADED:
          console.log('loaded', data)
          break
        case MessageEvents.WIDGET_CLOSED:
          console.log('closed', data)
          break
        case MessageEvents.WIDGET_OPENED:
          console.log('widget opened', data)
          break
        case MessageEvents.WIDGET_LOAD_ERROR:
          console.log('widget load error', data)
          break
      }
    },
    publicKey: 'Ayomide',
    meta: {
      order_ref: 'kjdjkdjkdjds',
      custom: 'pass anything'
    }
  })
  widgetPackage.setup()
  widgetPackage.open()
}
</script>

<template>
  <button @click="openWidget">Open Widget</button>
</template>

Examples

see more examples here