Skip to content
/
Framework examples
Last updated

Framework examples

The SDK is framework-agnostic. In every example, sessionId and token come from your backend's call to POST /v3/public/cashier/session, and baseUrl is the checkout domain Omno assigned to you (default https://checkout.omno.com).

ℹ️ SSR note. The SDK runs client-side only. In Next.js, Nuxt or SvelteKit, create and use CashierSDK inside client-side lifecycle code, never during server rendering.

Vanilla JS (ESM)

<button id="pay">Deposit</button>
<script type="module">
  import CashierSDK, { CashierEmitEvent } from "@omno-payment/checkout-js";

  const cashier = new CashierSDK({ baseUrl: "https://checkout.omno.com" });
  cashier.on(CashierEmitEvent.PAYMENT_SUCCESS, (d) => console.log(d));

  document.getElementById("pay").addEventListener("click", async () => {
    const { sessionId, token } = await fetch("/api/cashier-session").then((r) => r.json());
    cashier.open({ sessionId, token });
  });
</script>

React

import { useEffect, useRef } from "react";
import CashierSDK, { CashierEmitEvent } from "@omno-payment/checkout-js";

export function DepositButton() {
  const cashier = useRef<CashierSDK>();

  useEffect(() => {
    cashier.current = new CashierSDK({ baseUrl: "https://checkout.omno.com" });
    cashier.current.on(CashierEmitEvent.PAYMENT_SUCCESS, (d) => console.log(d));
    return () => cashier.current?.destroy();
  }, []);

  async function open() {
    const { sessionId, token } = await fetch("/api/cashier-session").then((r) => r.json());
    cashier.current?.open({ sessionId, token });
  }

  return <button onClick={open}>Deposit</button>;
}

Vue

<script setup lang="ts">
import { onMounted, onBeforeUnmount } from "vue";
import CashierSDK, { CashierEmitEvent } from "@omno-payment/checkout-js";

let cashier: CashierSDK;
onMounted(() => {
  cashier = new CashierSDK({ baseUrl: "https://checkout.omno.com" });
  cashier.on(CashierEmitEvent.PAYMENT_SUCCESS, (d) => console.log(d));
});
onBeforeUnmount(() => cashier?.destroy());

async function open() {
  const { sessionId, token } = await fetch("/api/cashier-session").then((r) => r.json());
  cashier.open({ sessionId, token });
}
</script>

<template>
  <button @click="open">Deposit</button>
</template>

Angular

import { Component, OnDestroy, OnInit } from "@angular/core";
import CashierSDK, { CashierEmitEvent } from "@omno-payment/checkout-js";

@Component({ selector: "app-deposit", template: `<button (click)="open()">Deposit</button>` })
export class DepositComponent implements OnInit, OnDestroy {
  private cashier!: CashierSDK;

  ngOnInit() {
    this.cashier = new CashierSDK({ baseUrl: "https://checkout.omno.com" });
    this.cashier.on(CashierEmitEvent.PAYMENT_SUCCESS, (d) => console.log(d));
  }
  ngOnDestroy() { this.cashier?.destroy(); }

  async open() {
    const { sessionId, token } = await fetch("/api/cashier-session").then((r) => r.json());
    this.cashier.open({ sessionId, token });
  }
}

Svelte

<script lang="ts">
  import { onMount, onDestroy } from "svelte";
  import CashierSDK, { CashierEmitEvent } from "@omno-payment/checkout-js";

  let cashier: CashierSDK;
  onMount(() => {
    cashier = new CashierSDK({ baseUrl: "https://checkout.omno.com" });
    cashier.on(CashierEmitEvent.PAYMENT_SUCCESS, (d) => console.log(d));
  });
  onDestroy(() => cashier?.destroy());

  async function open() {
    const { sessionId, token } = await fetch("/api/cashier-session").then((r) => r.json());
    cashier.open({ sessionId, token });
  }
</script>

<button on:click={open}>Deposit</button>

Build it →

TypeScript

Versions & compatibility