<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Anthony Jekanyika</title>
    <description>The latest articles on DEV Community by Anthony Jekanyika (@jeky1950).</description>
    <link>https://dev.to/jeky1950</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1126845%2F27655368-d05f-4373-a064-51fb4bf8bc57.jpeg</url>
      <title>DEV Community: Anthony Jekanyika</title>
      <link>https://dev.to/jeky1950</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/jeky1950"/>
    <language>en</language>
    <item>
      <title>Using SQLite (Fast SQL) with Drizzle ORM in Capacitor 8</title>
      <dc:creator>Anthony Jekanyika</dc:creator>
      <pubDate>Tue, 09 Jun 2026 14:10:24 +0000</pubDate>
      <link>https://dev.to/jeky1950/using-sqlite-fast-sql-with-drizzle-orm-in-capacitor-8-353e</link>
      <guid>https://dev.to/jeky1950/using-sqlite-fast-sql-with-drizzle-orm-in-capacitor-8-353e</guid>
      <description>&lt;p&gt;In this post we will be looking into how to implement SQLite with Drizzle ORM in Capacitor 8 using Nuxt 4 as our Vite wrapper (You can use any other Vite framework). We will be using the &lt;a href="https://capgo.app/docs/plugins/fast-sql/getting-started/" rel="noopener noreferrer"&gt;Fast SQL&lt;/a&gt; for our Android and iOS implementation and &lt;a href="https://sqlocal.dev/drizzle/setup" rel="noopener noreferrer"&gt;SQLocal&lt;/a&gt; for the Web implementation. This post will also how to manage Drizzle migrations inside Capacitor 8. &lt;/p&gt;

&lt;p&gt;Here is the &lt;a href="https://github.com/jeky1950/capacitor-nuxt-fastsql-drizzle-demo" rel="noopener noreferrer"&gt;demo repo&lt;/a&gt; of the full implementation to compare with.&lt;/p&gt;

&lt;h3&gt;
  
  
  Lets get started
&lt;/h3&gt;

&lt;p&gt;Firstly, we need to create our Nuxt 4 app&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm create nuxt@latest capacitor-nuxt-fastsql-drizzle
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cd &lt;/span&gt;capacitor-nuxt-fastsql-drizzle
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Install core Capacitor and CLI&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm i @capacitor/core &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; npm i &lt;span class="nt"&gt;-D&lt;/span&gt; @capacitor/cli
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Install the plugins&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm i @capacitor/app @capacitor/keyboard @capacitor/splash-screen @capacitor/status-bar @capacitor/preferences
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Initialize Capacitor with our project details&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx cap init my-app com.example.myapp &lt;span class="nt"&gt;--web-dir&lt;/span&gt; .output/public
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Replace my-app with your app name and com.example.myapp with your app ID (reverse domain notation).&lt;/p&gt;

&lt;p&gt;Update the capacitor.config.ts file with the following configurations&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;CapacitorConfig&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@capacitor/cli&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;config&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;CapacitorConfig&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;appId&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;com.example.myapp&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;appName&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;my-app&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;webDir&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;.output/public&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;plugins&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;SplashScreen&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;launchShowDuration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;2000&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;launchAutoHide&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;androidScaleType&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;CENTER_CROP&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;splashFullScreen&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;splashImmersive&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="na"&gt;Keyboard&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;resize&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;body&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;resizeOnFullScreen&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="na"&gt;StatusBar&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;overlaysWebView&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;style&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;dark&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;backgroundColor&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;#ffffffff&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;config&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Install native platforms&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm i @capacitor/ios @capacitor/android
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Add the native platform folders&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx cap add ios
npx cap add android
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Capacitor will create ios and android folders at the root of your project containing the native projects.&lt;/p&gt;

&lt;p&gt;To build the Android project, you need &lt;a href="https://developer.android.com/studio" rel="noopener noreferrer"&gt;Android Studio&lt;/a&gt;. For iOS, you need a Mac with &lt;a href="https://developer.apple.com/xcode/" rel="noopener noreferrer"&gt;Xcode&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Add these scripts to your &lt;code&gt;package.json&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"scripts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"dev"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"nuxt dev"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"nuxt build"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"generate"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"nuxt generate"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"preview"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"nuxt preview"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"mobile"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"npm run generate &amp;amp;&amp;amp; npx cap sync"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"mobile:ios"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"npm run mobile &amp;amp;&amp;amp; npx cap open ios"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"mobile:android"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"npm run mobile &amp;amp;&amp;amp; npx cap open android"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Lets test if we did the setup correctly&lt;br&gt;
For Android&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm run mobile:android
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For iOS&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm run mobile:ios
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Build and run the app&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Farmp4rujiidnyxmhcejz.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Farmp4rujiidnyxmhcejz.PNG" alt="Android Studio" width="800" height="405"&gt;&lt;/a&gt;&lt;br&gt;
In Android Studio, wait for the project to be ready, and then click on the “Run” button to deploy the app to a connected device or emulator.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fduua3pbot0l9rutxqsvw.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fduua3pbot0l9rutxqsvw.webp" alt="Xcode" width="800" height="519"&gt;&lt;/a&gt;&lt;br&gt;
In Xcode, set up your signing account to deploy the app to a real device. If you haven’t done this before, Xcode will guide you through the process (note that you need to be enrolled in the Apple Developer Program). Once set up, click on the “Play” button to run the app on your connected device.&lt;/p&gt;

&lt;p&gt;If you have been successful you should see this on your device. If not go over the steps again and try again.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu1niu53a369sub82bv0i.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu1niu53a369sub82bv0i.webp" alt="Test" width="556" height="1024"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  Setup
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://sqlocal.dev/guide/introduction" rel="noopener noreferrer"&gt;SQLocal&lt;/a&gt; makes it easy to run SQLite3 in the browser, backed by the &lt;a href="https://web.dev/articles/origin-private-file-system" rel="noopener noreferrer"&gt;Origin Private File System&lt;/a&gt; which provides high-performance read/write access to a SQLite database file stored on the user's device. We will be this for the web implementation of our application.&lt;/p&gt;

&lt;p&gt;Install SQLocal, Fast SQL and Drizzle&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm i sqlocal drizzle-orm@1.0.0-beta.22 drizzle-kit@1.0.0-beta.22 @noble/hashes
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;At the time of writing this blog v1.0.0-beta.22 is the latest version of Drizzle.&lt;/p&gt;

&lt;p&gt;In order to persist data to the &lt;em&gt;Origin Private File System&lt;/em&gt;, SQLocal relies on APIs that require &lt;a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/crossOriginIsolated" rel="noopener noreferrer"&gt;cross-origin&lt;/a&gt; isolation, so we have to globally add the these headers to all the pages of our application:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight http"&gt;&lt;code&gt;&lt;span class="err"&gt;Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We will do this by updating our &lt;code&gt;nuxt.config.ts&lt;/code&gt; file to the following:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;sqlocal&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;sqlocal/vite&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nf"&gt;defineNuxtConfig&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;vite&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;plugins&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
      &lt;span class="nf"&gt;sqlocal&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
    &lt;span class="p"&gt;],&lt;/span&gt;
    &lt;span class="na"&gt;server&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;headers&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Cross-Origin-Opener-Policy&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;same-origin&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Cross-Origin-Embedder-Policy&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;require-corp&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
      &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="na"&gt;optimizeDeps&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;exclude&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@sqlite.org/sqlite-wasm&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="na"&gt;assetsInclude&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
      &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;**/*.sql&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
    &lt;span class="p"&gt;]&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For Android and iOS we will be using &lt;a href="https://capgo.app/docs/plugins/fast-sql/getting-started/" rel="noopener noreferrer"&gt;Fast SQL&lt;/a&gt; a high-performance SQLite Database that locally hosts an HTTP server on your device to greatly increase the speed and throughput of our SQL queries.&lt;/p&gt;

&lt;p&gt;Install Fast SQL and sync capacitor&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm i @capgo/capacitor-fast-sql
npx cap &lt;span class="nb"&gt;sync&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Add Fast SQL configurations to &lt;code&gt;capacitor.config.ts&lt;/code&gt; file&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;CapacitorConfig&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@capacitor/cli&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;config&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;CapacitorConfig&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;appId&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;com.example.myapp&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;appName&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;my-app&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;webDir&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;.output/public&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;plugins&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;SplashScreen&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;launchShowDuration&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;2000&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;launchAutoHide&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;androidScaleType&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;CENTER_CROP&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;splashFullScreen&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;splashImmersive&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="na"&gt;Keyboard&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;resize&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;body&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;resizeOnFullScreen&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="na"&gt;StatusBar&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;overlaysWebView&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;style&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;dark&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;backgroundColor&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;#ffffffff&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="na"&gt;CapacitorSQLite&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;iosDatabaseLocation&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Library/CapacitorDatabase&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;iosIsEncryption&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;iosKeychainPrefix&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;nuxt-sqlocal-capacitor&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;iosBiometric&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="na"&gt;biometricAuth&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;biometricTitle&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Biometric login for capacitor sqlite&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
      &lt;span class="p"&gt;},&lt;/span&gt;
      &lt;span class="na"&gt;androidIsEncryption&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;androidBiometric&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="na"&gt;biometricAuth&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;biometricTitle&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Biometric login for capacitor sqlite&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;biometricSubTitle&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Log in using your biometric&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
      &lt;span class="p"&gt;},&lt;/span&gt;
      &lt;span class="na"&gt;electronIsEncryption&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;electronWindowsLocation&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;C:&lt;/span&gt;&lt;span class="se"&gt;\\&lt;/span&gt;&lt;span class="s2"&gt;ProgramData&lt;/span&gt;&lt;span class="se"&gt;\\&lt;/span&gt;&lt;span class="s2"&gt;CapacitorDatabases&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;electronMacLocation&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/Volumes/Development_Lacie/Development/Databases&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;electronLinuxLocation&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Databases&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;config&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Sync capacitor&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx cap &lt;span class="nb"&gt;sync&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Create the Drizzle Schema
&lt;/h3&gt;

&lt;p&gt;Create the &lt;code&gt;db/schema.ts&lt;/code&gt; file and add the following:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;sqliteTable&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;int&lt;/span&gt; &lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;text&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;drizzle-orm/sqlite-core&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;groceries&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;sqliteTable&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;groceries&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;int&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;id&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;primaryKey&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;autoIncrement&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="p"&gt;}),&lt;/span&gt;
    &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;text&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;name&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;notNull&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt;
    &lt;span class="na"&gt;quantity&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;int&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;quantity&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;notNull&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;See &lt;a href="https://orm.drizzle.team/docs/sql-schema-declaration" rel="noopener noreferrer"&gt;Drizzle Documentation&lt;/a&gt; to see how to define your schema using the functions that Drizzle ORM provides.&lt;/p&gt;

&lt;h3&gt;
  
  
  Instantiate Drizzle
&lt;/h3&gt;

&lt;p&gt;This will allow us to use only one instance of Drizzle in our application and to have it defined globally across our application without needing to import it.&lt;/p&gt;

&lt;p&gt;Create the file &lt;code&gt;app/utils/db.ts&lt;/code&gt; and copy add the following:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;SQLocalDrizzle&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;sqlocal/drizzle&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;SqliteRemoteDatabase&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;drizzle&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;drizzle-orm/sqlite-proxy&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Capacitor&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@capacitor/core&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;FastSQL&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@capgo/capacitor-fast-sql&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;db&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;SqliteRemoteDatabase&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nb"&gt;Record&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;never&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kr"&gt;any&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;DATABASE_NAME&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;database&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;Capacitor&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getPlatform&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;web&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;driver&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;batchDriver&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;SQLocalDrizzle&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;database.sqlite3&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nx"&gt;db&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;drizzle&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;driver&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;batchDriver&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;conn&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;FastSQL&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;connect&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;database&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;DATABASE_NAME&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;

        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;driver&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="na"&gt;sql&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;params&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kr"&gt;string&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;)[],&lt;/span&gt; &lt;span class="na"&gt;method&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;get&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;all&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;values&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;run&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;conn&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;execute&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;sql&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;params&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

                &lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;method&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;get&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;rows&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;rows&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;flatMap&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;row&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;values&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;row&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
                &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;rows&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;rows&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;row&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;values&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;row&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
                &lt;span class="p"&gt;}&lt;/span&gt;
            &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="na"&gt;e&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;any&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                &lt;span class="nf"&gt;alert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Error from sqlite proxy server: &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
                &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;rows&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[]&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
            &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;

        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;batchDriver&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="na"&gt;queries&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;sql&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;params&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;any&lt;/span&gt;&lt;span class="p"&gt;[],&lt;/span&gt; &lt;span class="na"&gt;method&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;all&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;run&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;get&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;values&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;}[])&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;conn&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;executeBatch&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;
                    &lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="nx"&gt;queries&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;(({&lt;/span&gt; &lt;span class="nx"&gt;sql&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;params&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt;
                        &lt;span class="na"&gt;statement&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;sql&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
                        &lt;span class="nx"&gt;params&lt;/span&gt;
                    &lt;span class="p"&gt;}))&lt;/span&gt;
                &lt;span class="p"&gt;]);&lt;/span&gt;

                &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt;
            &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="na"&gt;e&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;any&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                &lt;span class="nf"&gt;alert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Error from sqlite proxy server: &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
                &lt;span class="k"&gt;throw&lt;/span&gt; &lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
            &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;

        &lt;span class="nx"&gt;db&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;drizzle&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;driver&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;batchDriver&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nf"&gt;alert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;db&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Add Pages
&lt;/h3&gt;

&lt;p&gt;Replace the contents of your &lt;code&gt;app/app.vue&lt;/code&gt; file with this&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;template&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;NuxtPage&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/template&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Create the folder &lt;code&gt;app/pages&lt;/code&gt; and then add the file &lt;code&gt;app/pages/index.vue&lt;/code&gt; and add the following contents&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;template&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;main&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;h2&amp;gt;&lt;/span&gt;Create Groceries&lt;span class="nt"&gt;&amp;lt;/h2&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;form&lt;/span&gt; &lt;span class="err"&gt;@&lt;/span&gt;&lt;span class="na"&gt;submit.prevent=&lt;/span&gt;&lt;span class="s"&gt;"createGroceries"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;div&amp;gt;&lt;/span&gt;
                &lt;span class="nt"&gt;&amp;lt;input&lt;/span&gt; &lt;span class="na"&gt;v-model=&lt;/span&gt;&lt;span class="s"&gt;"name"&lt;/span&gt; &lt;span class="na"&gt;placeholder=&lt;/span&gt;&lt;span class="s"&gt;"Enter the name"&lt;/span&gt; &lt;span class="na"&gt;required&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;div&amp;gt;&lt;/span&gt;
                &lt;span class="nt"&gt;&amp;lt;input&lt;/span&gt; &lt;span class="na"&gt;v-model=&lt;/span&gt;&lt;span class="s"&gt;"quantity"&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"number"&lt;/span&gt; &lt;span class="na"&gt;placeholder=&lt;/span&gt;&lt;span class="s"&gt;"Enter the quantity"&lt;/span&gt; &lt;span class="na"&gt;validate&lt;/span&gt; &lt;span class="na"&gt;required&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;button&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"submit"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Submit&lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;/form&amp;gt;&lt;/span&gt;

        &lt;span class="nt"&gt;&amp;lt;h2&amp;gt;&lt;/span&gt;Grocery List ({{ grocery_list.length }})&lt;span class="nt"&gt;&amp;lt;/h2&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;div&amp;gt;&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;input&lt;/span&gt; &lt;span class="na"&gt;v-model=&lt;/span&gt;&lt;span class="s"&gt;"search_query"&lt;/span&gt; &lt;span class="na"&gt;placeholder=&lt;/span&gt;&lt;span class="s"&gt;"Search"&lt;/span&gt; &lt;span class="na"&gt;validate&lt;/span&gt; &lt;span class="na"&gt;required&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;table&amp;gt;&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;thead&amp;gt;&lt;/span&gt;
                &lt;span class="nt"&gt;&amp;lt;tr&amp;gt;&lt;/span&gt;
                    &lt;span class="nt"&gt;&amp;lt;th&amp;gt;&lt;/span&gt;ID&lt;span class="nt"&gt;&amp;lt;/th&amp;gt;&lt;/span&gt;
                    &lt;span class="nt"&gt;&amp;lt;th&amp;gt;&lt;/span&gt;Name&lt;span class="nt"&gt;&amp;lt;/th&amp;gt;&lt;/span&gt;
                    &lt;span class="nt"&gt;&amp;lt;th&amp;gt;&lt;/span&gt;Quantity&lt;span class="nt"&gt;&amp;lt;/th&amp;gt;&lt;/span&gt;
                &lt;span class="nt"&gt;&amp;lt;/tr&amp;gt;&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;/thead&amp;gt;&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;tbody&amp;gt;&lt;/span&gt;
                &lt;span class="nt"&gt;&amp;lt;tr&lt;/span&gt; &lt;span class="na"&gt;v-for=&lt;/span&gt;&lt;span class="s"&gt;"{ id, name, quantity} of grocery_list"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
                    &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;{{ id }}&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
                    &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;{{ name }}&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
                    &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;{{ quantity }}&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
                &lt;span class="nt"&gt;&amp;lt;/tr&amp;gt;&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;/tbody&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;/table&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/main&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/template&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;setup&lt;/span&gt; &lt;span class="na"&gt;lang=&lt;/span&gt;&lt;span class="s"&gt;"ts"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;like&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;drizzle-orm&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;groceries&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;~~/db/schema&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;migrate&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;~~/db/migrator&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;ref&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;string&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;""&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;quantity&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;ref&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;number&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;search_query&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;ref&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;string&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;grocery_list&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;ref&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="nx"&gt;groceries&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;$inferInsert&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;([]);&lt;/span&gt;

    &lt;span class="nf"&gt;watch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;search_query&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;search&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;

    &lt;span class="nf"&gt;onMounted&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;migrate&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
        &lt;span class="nx"&gt;grocery_list&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;db&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;select&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="k"&gt;from&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;groceries&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;})&lt;/span&gt;

    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;createGroceries&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;db&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;insert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;groceries&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;values&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
                &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
                &lt;span class="na"&gt;quantity&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;quantity&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;
            &lt;span class="p"&gt;})&lt;/span&gt;

            &lt;span class="nx"&gt;grocery_list&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;db&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;select&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
                &lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;groceries&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
                &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;groceries&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
                &lt;span class="na"&gt;quantity&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;groceries&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;quantity&lt;/span&gt;
            &lt;span class="p"&gt;})&lt;/span&gt;
            &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;from&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;groceries&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

            &lt;span class="c1"&gt;// Clear the form&lt;/span&gt;
            &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;""&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
            &lt;span class="nx"&gt;quantity&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nf"&gt;alert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;search&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;query&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;string&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="kc"&gt;undefined&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;search_query&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;grocery_list&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;db&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;select&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
                &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;from&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;groceries&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
                &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;where&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;like&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;groceries&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s2"&gt;`%&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt; &lt;span class="nx"&gt;query&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;%`&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;grocery_list&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;db&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;select&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="k"&gt;from&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;groceries&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Drizzle Migrations
&lt;/h3&gt;

&lt;p&gt;When ever you change the Drizzle schema &lt;code&gt;db/schema.ts&lt;/code&gt;. You need to create the migration files. You can do this by first creating the &lt;code&gt;drizzle.config.ts&lt;/code&gt; file in your project's root directory and then adding the following:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;defineConfig&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;drizzle-kit&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nf"&gt;defineConfig&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;out&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./db/migrations&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;schema&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./db/schema.ts&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;dialect&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;sqlite&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Update the scripts in your &lt;code&gt;package.json&lt;/code&gt; to the following:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"scripts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"dev"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"nuxt dev"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"nuxt build"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"generate"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"nuxt generate"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"preview"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"nuxt preview"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"mobile"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"npm run generate &amp;amp;&amp;amp; npx cap sync"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"mobile:ios"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"npm run mobile &amp;amp;&amp;amp; npx cap open ios"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"mobile:android"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"npm run mobile &amp;amp;&amp;amp; npx cap open android"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"drizzle:generate"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"drizzle-kit generate --dialect=sqlite --driver=durable-sqlite --schema=./db/schema.ts --out=./db/migrations"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then to generate the migration files you need to run the following:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm run drizzle:generate
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will create SQL migration files in the &lt;code&gt;db/migrations&lt;/code&gt; directory.&lt;/p&gt;

&lt;h3&gt;
  
  
  Drizzle Client-Side Migration
&lt;/h3&gt;

&lt;p&gt;Drizzle does not have an in-built system to track migration files on the client-side of your add as &lt;code&gt;drizzle-kit&lt;/code&gt;, the Drizzle migration management CLI tool, doesn't run on the client-side. We are going to have to implement our own custom solution to apply the migration files and keep track of the migrations that have already been applied in a &lt;code&gt;_drizzle_migrations&lt;/code&gt; table. To do this we need to create the &lt;code&gt;db/migrator.ts&lt;/code&gt; file and add the following:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;sha256&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;@noble/hashes/sha2.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Buffer&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;buffer&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;sql&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;drizzle-orm&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;db&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;../app/utils/db&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;migration_summary&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;./migrations/migrations.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;migrate&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Create the migration table to keep track of all the applied migrations&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;MIGRATIONS_TABLE_NAME&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;sql&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;identifier&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;_drizzle_migrations&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;db&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;run&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="nx"&gt;sql&lt;/span&gt;&lt;span class="s2"&gt;`
          CREATE TABLE IF NOT EXISTS &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt; &lt;span class="nx"&gt;MIGRATIONS_TABLE_NAME&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; (
            id INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,
            name TEXT NOT NULL,
            hash TEXT NOT NULL,
            created_at INTEGER NOT NULL
          );
        `&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;AppliedMigration&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;hash&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;created_at&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;appliedMigrations&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;db&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;all&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;sql&lt;/span&gt;&lt;span class="s2"&gt;`SELECT * FROM &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt; &lt;span class="nx"&gt;MIGRATIONS_TABLE_NAME&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;;`&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="k"&gt;for&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;migration_name&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;keys&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;migration_summary&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;migrations&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="c1"&gt;// Get migration file a raw text&lt;/span&gt;
        &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;migration_sql&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="k"&gt;import&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`./migrations/&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt; &lt;span class="nx"&gt;migration_name&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;/migration.sql?raw`&lt;/span&gt;&lt;span class="p"&gt;)).&lt;/span&gt;&lt;span class="k"&gt;default&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

        &lt;span class="c1"&gt;// Change CREATE TABLE to CREATE TABLE IF NOT EXISTS&lt;/span&gt;
        &lt;span class="nx"&gt;migration_sql&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;migration_sql&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;replace&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sr"&gt;/CREATE TABLE/gm&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;CREATE TABLE IF NOT EXISTS&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

        &lt;span class="c1"&gt;// Generate a hash of the migration file&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;hash&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;Buffer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;from&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;sha256&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;Buffer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;from&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;migration_sql&lt;/span&gt;&lt;span class="p"&gt;))).&lt;/span&gt;&lt;span class="nf"&gt;toString&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;hex&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

        &lt;span class="c1"&gt;// Check if the migration file was applied to the SQLite DB  &lt;/span&gt;
        &lt;span class="c1"&gt;// @ts-ignore&lt;/span&gt;
        &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;appliedMigrations&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;some&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;applied_migration&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;applied_migration&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;at&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nx"&gt;hash&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="k"&gt;continue&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

        &lt;span class="c1"&gt;// Now run the migration on to the SQLite DB&lt;/span&gt;
        &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;query_statements&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;migration_sql&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;split&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sr"&gt;/--&amp;gt; statement-breakpoint/gm&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

            &lt;span class="k"&gt;for&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;query&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="nx"&gt;query_statements&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;db&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;run&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;query&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
            &lt;span class="p"&gt;}&lt;/span&gt;

            &lt;span class="c1"&gt;// Log this migration as applied onto the SQLite DB&lt;/span&gt;
            &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;db&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;run&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
                &lt;span class="nx"&gt;sql&lt;/span&gt;&lt;span class="s2"&gt;`
                    INSERT INTO &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt; &lt;span class="nx"&gt;MIGRATIONS_TABLE_NAME&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; ("name", "hash", "created_at") VALUES (
                    &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt; &lt;span class="nx"&gt;sql&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;raw&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`'&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt; &lt;span class="nx"&gt;migration_name&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;'`&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;,
                    &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt; &lt;span class="nx"&gt;sql&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;raw&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`'&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt; &lt;span class="nx"&gt;hash&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;'`&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;,
                    &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt; &lt;span class="nx"&gt;sql&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;raw&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt; &lt;span class="nb"&gt;Date&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;now&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;
                    );
                `&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nf"&gt;alert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Deploy
&lt;/h3&gt;

&lt;p&gt;Now that we are done creating our app, let us generate the static files for our app and deploy them to either Android Studio or Xcode&lt;/p&gt;

&lt;p&gt;For Android Studio&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm run mobile:android
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For Xcode&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm run mobile:ios
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If you have been successful, you should have an app that you can use to store grocery lists like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcroos7awwuwxc7qeaiuh.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcroos7awwuwxc7qeaiuh.jpeg" alt="Grocery List Appp" width="800" height="1689"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Checkout the &lt;a href="https://github.com/jeky1950/capacitor-nuxt-fastsql-drizzle-demo" rel="noopener noreferrer"&gt;demo repo&lt;/a&gt; with everything that we have discussed above.&lt;/p&gt;

&lt;p&gt;Feel free to ask me any questions in the comments section below and I will try to respond to them as quickly as I can. Thank you guys and have a great day.&lt;/p&gt;

&lt;p&gt;Reference List&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;a href="https://www.reddit.com/r/vuejs/comments/1hnhqre/is_sqlite_wasm_the_future_of_offlinefirst_vue_apps/" rel="noopener noreferrer"&gt;Is SQLite WASM the future of offline-first Vue apps?&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://sqlocal.dev/drizzle/setup" rel="noopener noreferrer"&gt;SQLocal Drizzle Setup&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://capgo.app/blog/building-a-native-mobile-app-with-nuxt-and-capacitor/#building-and-deploying-native-apps" rel="noopener noreferrer"&gt;Convert Your Nuxt App to iOS &amp;amp; Android with Capacitor 8&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://orm.drizzle.team/docs/connect-drizzle-proxy" rel="noopener noreferrer"&gt;Drizzle Proxy&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/drizzle-team/drizzle-orm/issues/1009#issuecomment-4536459046" rel="noopener noreferrer"&gt;Using Durable Objects to generate drizzle migration files&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/drizzle-team/drizzle-orm/issues/1009#issuecomment-3239501757" rel="noopener noreferrer"&gt;Client-Side Drizzle Migrations&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://stackoverflow.com/a/76511649" rel="noopener noreferrer"&gt;Importing assets as string in Vite&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;

</description>
      <category>sqlite</category>
      <category>capacitor</category>
      <category>drizzle</category>
      <category>fastsql</category>
    </item>
    <item>
      <title>Using Server-Sent Events (SSE) in Capacitor 8 with Nuxt 4</title>
      <dc:creator>Anthony Jekanyika</dc:creator>
      <pubDate>Sun, 31 May 2026 08:39:59 +0000</pubDate>
      <link>https://dev.to/jeky1950/using-server-sent-events-sse-in-capacitor-8-with-nuxt-4-4e63</link>
      <guid>https://dev.to/jeky1950/using-server-sent-events-sse-in-capacitor-8-with-nuxt-4-4e63</guid>
      <description>&lt;p&gt;Using Server-Sent Events using &lt;a href="https://developer.mozilla.org/en-US/docs/Web/API/EventSource" rel="noopener noreferrer"&gt;EventSource&lt;/a&gt; or microsoft's popular &lt;a href="https://github.com/Azure/fetch-event-source" rel="noopener noreferrer"&gt;fetchEventSource&lt;/a&gt; library does work in Capacitor 8 as was clearly detailed in &lt;a href="https://github.com/ionic-team/capacitor/issues/6582" rel="noopener noreferrer"&gt;#6582&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Special thanks to the brilliant work done by the &lt;a href="https://github.com/chatboxai" rel="noopener noreferrer"&gt;chatboxai&lt;/a&gt; team for their library &lt;a href="https://github.com/chatboxai/capacitor-stream-http" rel="noopener noreferrer"&gt;capacitor-stream-http&lt;/a&gt; and for &lt;a href="https://www.jsdelivr.com/?query=author%3A%20mbmaas3-tech" rel="noopener noreferrer"&gt;mbmaas3-tech&lt;/a&gt; who forked it and updated it to support Capacitor 8 with &lt;a href="https://www.jsdelivr.com/package/npm/capacitor-stream-http-v2" rel="noopener noreferrer"&gt;capacitor-stream-http-v2&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;This is a demostration on how to do Server-Sent Events (SSE) in Capacitor 8 using Nuxt 4 (You can achieve the same with other Vite based frameworks).&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 1
&lt;/h3&gt;

&lt;p&gt;Clone the repo&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git clone https://github.com/jeky1950/capacitor-nuxt-sse-demo.git
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Step 2
&lt;/h2&gt;

&lt;p&gt;Install packages&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm Install
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Step 3
&lt;/h2&gt;

&lt;p&gt;Sync the capacitor plugins&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npx cap sync
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Step 4
&lt;/h3&gt;

&lt;p&gt;Build the static files&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm run generate
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Step 5
&lt;/h3&gt;

&lt;p&gt;Copy the static files to Capacitor&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npx cap copy
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Step 6
&lt;/h3&gt;

&lt;p&gt;Open Android Studio (or Xcode if you are building for iOS)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npx cap open android
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Step 7
&lt;/h3&gt;

&lt;p&gt;Run the app in Android Studio (or Xcode if you are building for iOS)&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 8
&lt;/h3&gt;

&lt;p&gt;Switch on the Nuxt Development Server with the public flag&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npx nuxi dev --public
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Make sure that the &lt;code&gt;Network&lt;/code&gt; url on the command line output matches the &lt;code&gt;url&lt;/code&gt; ref on line 18 in file &lt;code&gt;/app/pages/index.vue&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo1n8cgzhe8e78gegpjk5.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo1n8cgzhe8e78gegpjk5.PNG" alt="Command Line" width="800" height="445"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9bbj6aozcse8ccarffyn.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9bbj6aozcse8ccarffyn.PNG" alt="VS Code" width="744" height="287"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  App Structure
&lt;/h3&gt;

&lt;p&gt;On the app there are two buttons, the one on the left demonstrates the current functionality of trying the use SSE in Capacitor 8 that is detailed in &lt;a href="https://github.com/ionic-team/capacitor/issues/6582" rel="noopener noreferrer"&gt;#6582&lt;/a&gt;. The button on the right shows SSE working with the help of &lt;a href="https://www.jsdelivr.com/package/npm/capacitor-stream-http-v2" rel="noopener noreferrer"&gt;capacitor-stream-http-v2&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcsr9p3k862k907jg6ge7.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcsr9p3k862k907jg6ge7.jpeg" alt="App Structure" width="800" height="1689"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>sse</category>
      <category>nuxt</category>
      <category>vite</category>
      <category>capacitor</category>
    </item>
    <item>
      <title>Creating your first ZIMRA Fiscal Invoice with Panier: A Step By Step Guide</title>
      <dc:creator>Anthony Jekanyika</dc:creator>
      <pubDate>Thu, 26 Feb 2026 16:13:46 +0000</pubDate>
      <link>https://dev.to/jeky1950/creating-your-first-zimra-fiscal-invoice-with-panier-a-step-by-step-guide-1f1a</link>
      <guid>https://dev.to/jeky1950/creating-your-first-zimra-fiscal-invoice-with-panier-a-step-by-step-guide-1f1a</guid>
      <description>&lt;p&gt;Now that your ZIMRA Fiscalisation integration is now live, let's create our very first &lt;strong&gt;Fiscal Tax Invoice&lt;/strong&gt; on &lt;a href="https://panier.app" rel="noopener noreferrer"&gt;Panier&lt;/a&gt;. If you want to apply for ZIMRA Fiscalisation on Panier see &lt;a href="https://panier.app/login" rel="noopener noreferrer"&gt;Appling for ZIMRA Fiscalisation with Panier: A Step By Step Guide&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Create Invoice
&lt;/h3&gt;

&lt;p&gt;Go to the &lt;strong&gt;Invoices&lt;/strong&gt; page of your Panier company and click &lt;strong&gt;Create&lt;/strong&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Add a customer
&lt;/h3&gt;

&lt;p&gt;Click &lt;strong&gt;Add Customer&lt;/strong&gt; in order to create a new customer.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7d5cc65vq89k9wkhipht.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7d5cc65vq89k9wkhipht.PNG" alt="Panier add customer to invoice" width="800" height="402"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Then after click &lt;strong&gt;Create&lt;/strong&gt; in order to add our new customer to our invoice.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9q4y45a66srfu2x6seda.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9q4y45a66srfu2x6seda.PNG" alt="Panier create customer on the create invoice page" width="800" height="402"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Add Additional Information
&lt;/h3&gt;

&lt;p&gt;Now we add the &lt;strong&gt;Payment information&lt;/strong&gt;, &lt;strong&gt;Terms and Conditions&lt;/strong&gt; and &lt;strong&gt;Payment Due&lt;/strong&gt; date. However the Payment information and; Terms and Conditions are optional fields and can be skipped.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2tsctavkjfsyilmiaemi.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2tsctavkjfsyilmiaemi.PNG" alt="Panier add additional information on create invoice page" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Add a product
&lt;/h3&gt;

&lt;p&gt;Now click &lt;strong&gt;Add Product&lt;/strong&gt; in order to create a new product&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fujuy2jxhj86ujzbhkfx3.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fujuy2jxhj86ujzbhkfx3.PNG" alt="Panier add product to invoice" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now we create our product making sure to put the &lt;strong&gt;HS Code&lt;/strong&gt; and &lt;strong&gt;ZIMRA Tax&lt;/strong&gt; which in this case is Standard Rated 15.5%. Panier can also help you find your product's HS Code if you add a product description and click &lt;strong&gt;Help me find an HS Code&lt;/strong&gt;. An HS Code is a unique identifiers that can be used to describe any kind of physical product and as of 2025 is now a pre-requisite if you want to create a Fiscal Tax Invoice.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flpoo4mu7dxrf3odzb48b.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flpoo4mu7dxrf3odzb48b.PNG" alt="Panier add product on the create invoice page" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  ZIMRA Fiscalise
&lt;/h3&gt;

&lt;p&gt;Now we click the checkbox on the bottom left labelled &lt;strong&gt;ZIMRA Fiscalise&lt;/strong&gt; and click &lt;strong&gt;Create&lt;/strong&gt;.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Finqyhthbxf9mzkrtyaf6.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Finqyhthbxf9mzkrtyaf6.PNG" alt="Panier click ZIMRA Fiscalise checkbox" width="800" height="409"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Preview Invoice
&lt;/h3&gt;

&lt;p&gt;A preview of the Fiscal Tax Invoice will popup. &lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F93jiak16ra1dkx8nzf3p.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F93jiak16ra1dkx8nzf3p.PNG" alt="Panier invoice preview" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Panier also allows you choose from 30 background templates.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhe5c3ixksx8zknx077fn.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhe5c3ixksx8zknx077fn.PNG" alt="Panier background templates" width="800" height="401"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And 22 color palettes in order to customize your invoice.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmjy5edbirv91v9wcmx2h.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmjy5edbirv91v9wcmx2h.PNG" alt="Panier color palettes" width="800" height="399"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now we click &lt;strong&gt;Continue&lt;/strong&gt; when we are satisfied with our invoice.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feq8l1mxxkz8m0umcr8av.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feq8l1mxxkz8m0umcr8av.PNG" alt="Panier fiscalise invoice" width="800" height="399"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Et Voila 🎉
&lt;/h3&gt;

&lt;p&gt;And if you followed the instructions carefully you should have successfully created your very first Fiscal Tax Invoice.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft729my8ba3zv31gjw09e.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft729my8ba3zv31gjw09e.PNG" alt="Panier Fiscal Tax Invoice 1" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg5pwrtddo7k7cyrj1nn9.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg5pwrtddo7k7cyrj1nn9.PNG" alt="Panier Fiscal Tax Invoice 2" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F48hule7s81emwvpxdhf6.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F48hule7s81emwvpxdhf6.PNG" alt="Panier Fiscal Tax Invoice 3" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I want you to pay close attention to the QR Code in the center. That is confirmation that our invoice has been fiscalised and if we click the verify link next to it. We will be redirected this ZIMRA portal.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz7pztxabnvjeag7245d3.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz7pztxabnvjeag7245d3.jpeg" alt="Panier ZIMRA Fiscalisation Verify QR Code" width="800" height="401"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now lets go back to our invoice page and try to download our Fiscal Tax Invoice.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flc2gmmz14mkyt1skon0e.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flc2gmmz14mkyt1skon0e.PNG" alt="Panier Download ZIMRA Fiscalised Invoice" width="800" height="399"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Your Fiscal Tax Invoice should look something like this:&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2tw48a750gdh9fbtw5sa.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2tw48a750gdh9fbtw5sa.jpg" alt="Panier ZIMRA Fiscal Invoice Example" width="800" height="1130"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you have any questions, please contact me on &lt;a href="mailto:support@panier.app"&gt;support@panier.app&lt;/a&gt; or on &lt;a href="https://web.whatsapp.com/send/?phone=263783836915&amp;amp;text=Hello+from+your+Panier+dev.to+tutorial"&gt;WhatsApp on +263783836915&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>panier</category>
      <category>zimra</category>
      <category>fiscalisation</category>
      <category>invoice</category>
    </item>
    <item>
      <title>Smile &amp; Pay and ZIMRA Fiscalisation Integration with the Panier API: a Step-by-Step Guide</title>
      <dc:creator>Anthony Jekanyika</dc:creator>
      <pubDate>Mon, 25 Aug 2025 13:54:29 +0000</pubDate>
      <link>https://dev.to/jeky1950/smile-pay-and-zimra-fiscalisation-integration-with-the-panier-api-a-step-by-step-guide-2mdf</link>
      <guid>https://dev.to/jeky1950/smile-pay-and-zimra-fiscalisation-integration-with-the-panier-api-a-step-by-step-guide-2mdf</guid>
      <description>&lt;p&gt;Today we will learn how we can use &lt;a href="https://zbnet.zb.co.zw/merchant_gateway/signup" rel="noopener noreferrer"&gt;Smile &amp;amp; Pay&lt;/a&gt; to receive an instant &lt;strong&gt;Ecocash&lt;/strong&gt;, &lt;strong&gt;Innbucks&lt;/strong&gt;, &lt;strong&gt;O'mari&lt;/strong&gt; or &lt;strong&gt;Smile Cash&lt;/strong&gt; payment and automatically create and send a &lt;strong&gt;ZIMRA Fiscal Invoice&lt;/strong&gt; using &lt;strong&gt;a single &lt;a href="https://panier.app/api-documentation" rel="noopener noreferrer"&gt;Panier API&lt;/a&gt; call&lt;/strong&gt; 💪.&lt;/p&gt;

&lt;p&gt;First you need to have a &lt;a href="https://panier.app/" rel="noopener noreferrer"&gt;Panier&lt;/a&gt; account that has been setup with &lt;strong&gt;ZIMRA Fiscalisation&lt;/strong&gt;. If you don't have one, please follow &lt;a href="https://dev.to/jeky1950/zimra-fiscalisation-with-the-panier-api-a-step-by-step-guide-1jgj"&gt;this tutorial&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Setup Smile &amp;amp; Pay Account
&lt;/h2&gt;

&lt;ol&gt;
   &lt;li&gt;Register a Smile Cash account &lt;a href="https://zbnet.zb.co.zw/merchant_gateway/signup" rel="noopener noreferrer"&gt;here&lt;/a&gt;
&lt;/li&gt;
    &lt;li&gt;Once you have gotten your account approved, go to the &lt;a href="https://zbnet.zb.co.zw/merchant_gateway/settings/api-keys" rel="noopener noreferrer"&gt;API Keys&lt;/a&gt; section&lt;/li&gt;
    &lt;li&gt;Next, we go to the &lt;a href="https://zbnet.zb.co.zw/merchant_gateway/payment-methods" rel="noopener noreferrer"&gt;Payment Methods&lt;/a&gt; page to select who bearers the transaction cost for each payment method and then click the &lt;strong&gt;Save Configurations&lt;/strong&gt;
&lt;/li&gt;
    &lt;li&gt;Next, click the &lt;strong&gt;Generate API Key&lt;/strong&gt; button and then copy the &lt;strong&gt;API Key&lt;/strong&gt; and &lt;strong&gt;API Secret&lt;/strong&gt; into the fields below and then click &lt;strong&gt;Test Integration&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv02bbb3v7yycs1vu61mr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv02bbb3v7yycs1vu61mr.png" alt="Panier Payment Providers" width="800" height="449"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;When your Smile &amp;amp; Pay integration is now live your Payment Provider page should look like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnzvgcosmju5qsd34ca0u.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnzvgcosmju5qsd34ca0u.png" alt="Live Panier Smile &amp;amp; Pay Payment Provider Page" width="800" height="449"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Make an Ecocash Payment
&lt;/h2&gt;

&lt;p&gt;Now lets do an Ecocash payment and automatically create a &lt;strong&gt;ZIMRA Fiscal Invoice&lt;/strong&gt;. You need to go to the &lt;a href="https://panier.app/api-documentation#tag/sales/POST/sale/create" rel="noopener noreferrer"&gt;Create Sale&lt;/a&gt; endpoint and use this payload, making sure to replace the &lt;code&gt;customer_id&lt;/code&gt;, &lt;code&gt;product&lt;/code&gt; and &lt;code&gt;phone&lt;/code&gt; with ones from your &lt;a href="https://panier.app" rel="noopener noreferrer"&gt;Panier&lt;/a&gt; account:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "data": {
    "customer_id": "cmaccp0vy0000zmksubook8hd",
    "products": [
        {
          "id": "cma5e7aca0000zm1x9aiabiil",
          "selling_price": 0.10,
          "quantity": 1
        }
     ]
  },
  "zimra_fiscalize": true,
  "payment_method": {
    "type": "SMILE_PAY_ECOCASH",
    "phone": "0772000001",
    "email": "youremail@gmail.com"
  }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You should get the following response:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "instructions": "Dial *151*2*7# and enter your EcoCash PIN. Once you have authorized the payment via your handset, please click Check For Payment below to conclude this transaction",
  "pollurl": "https://panier.app/api/v1/payment-provider/check-payment-status?pollurl=https://zbnet.zb.co.zw/wallet_gateway/payments-gateway/payments/transaction/cmeo4ca3r0000v1f8p5wzc99e/status/check"
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You need to get your customer to follow the &lt;code&gt;instructions&lt;/code&gt; on how to make the Ecocash payment. Use the &lt;code&gt;pollurl&lt;/code&gt; or &lt;a href="https://panier.app/api-documentation#tag/sales/GET/payment-provider/check-payment-status" rel="noopener noreferrer"&gt;Check Payment Status&lt;/a&gt; endpoint to check the payment status at regular intervals of about 5 seconds.&lt;/p&gt;

&lt;p&gt;When the payment is successful you should get a response like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "merchantId": "20250711113952",
  "reference": "GZSZ1181TOCP",
  "orderReference": "cmepw25l9000lv1s07w1gyci9",
  "itemName": null,
  "amount": 0.10,
  "currency": "USD",
  "paymentOption": "ECOCASH",
  "status": "Completed",
  "createdDate": "2025-08-24T18:14:26.416946",
  "returnUrl": "https://panier.app?orderReference=cmepw25l9000lv1s07w1gyci9&amp;amp;transactionReference=GZSZ1181TOCP&amp;amp;status=PENDING",
  "resultUrl": "https://panier.app/api/v1/payment-provider/smile-pay/webhook",
  "clientFee": 0,
  "merchantFee": 0,
  "pollurl": "https://zbnet.zb.co.zw/wallet_gateway/payments-gateway/payments/transaction/cmeo4ca3r0000v1f8p5wzc99e/status/check",
  "sale": {
    "id": "cmaxpey550004zm3nthcoocph",
    "receipt_number": "IPID5V3JJ87E",
    "phone": "0772000001",
    "email": "john@cornerbakery.com",
    "currency": {
      "symbol": "$",
      "name": "US Dollar",
      "symbol_native": "$",
      "decimal_digits": 2,
      "rounding": 0,
      "code": "USD",
      "name_plural": "US dollars",
      "exchange_rate": 1
    },
    "products": [
      {
        "id": "cma5e7aca0000zm1x9aiabiil",
        "name": "Eggs",
        "description": "One dozen large eggs",
        "buying_price": 2.51,
        "sku": "",
        "hs_code": "0808.01.01",
        "is_inventory_item": true,
        "applicable_tax": {
          "id": "cmac8znbu0005zm0gdy8xxoi6",
          "name": "VAT Exempt",
          "percentage": null,
          "code": null,
          "zimra_tax_id": 1
        },
        "_selling_price": 0.10,
        "_quantity": 1,
        "_discount": 0,
        "_total_excluding_tax": 0.10,
        "_tax": 0,
        "_total_including_tax": 0.10
      }
    ],
    "total": 0.01,
    "discount": 0,
    "is_refunded": false,
    "refunded_at": null,
    "is_voided": false,
    "voided_at": null,
    "template_preference": {
      "template": 1,
      "color": "no_color",
      "table_layout": "Plain"
    },
    "updated_at": "2025-05-21T08:51:45.145Z",
    "created_at": "2025-05-21T08:51:45.109Z",
    "customer": {
      "id": "cmaccp0vy0000zmksubook8hd",
      "name": "Corner Bakery",
      "contact_person": "John Smith",
      "phone": "0772000001",
      "email": "john@cornerbakery.com",
      "address": "123 Road Drive, City, Country",
      "fax": "02888881",
      "website": "https://example.com",
      "tax_reg_number": "",
      "company_reg_number": "",
      "tin_number": "",
      "vat_number": ""
    },
    "invoice": {
      "id": "cmaxpey460002zm3nryg5glz1",
      "number": "SSK2BURLOLDA",
      "date_format": "dd/mm/yy",
      "date_issued": "2025-05-21T08:51:45.073Z",
      "recipients": [
        "john@cornerbakery.com"
      ],
      "payment_due": "2025-05-21T08:51:45.073Z",
      "currency": {
        "symbol": "$",
        "name": "US Dollar",
        "symbol_native": "$",
        "decimal_digits": 2,
        "rounding": 0,
        "code": "USD",
        "name_plural": "US dollars",
        "exchange_rate": 1
      },
      "products": [
        {
          "id": "cma5e7aca0000zm1x9aiabiil",
          "name": "Eggs",
          "description": "One dozen large eggs",
          "buying_price": 2.51,
          "sku": "",
          "hs_code": "0808.01.01",
          "is_inventory_item": true,
          "applicable_tax": {
            "id": "cmac8znbu0005zm0gdy8xxoi6",
            "name": "VAT Exempt",
            "percentage": null,
            "code": null,
            "zimra_tax_id": 1
          },
          "_selling_price": 0.10,
          "_quantity": 1,
          "_discount": 0,
          "_total_excluding_tax": 0.10,
          "_tax": 0,
          "_total_including_tax": 0.10
        }
      ],
      "total": 0.10,
      "discount": 0,
      "payment_information": null,
      "terms_n_conditions": null,
      "sending_status": "Send Email Notification",
      "quotation_id": null,
      "template_preference": {
        "template": 1,
        "color": "no_color",
        "table_layout": "Plain"
      },
      "is_paid": true,
      "updated_at": "2025-05-21T08:51:45.077Z",
      "created_at": "2025-05-21T08:51:45.077Z",
      "zimra_receipt": {
        "id": "cmaxpey350001zm3n20cv98iv",
        "device_id": 24455,
        "device_serial_number": "HQAUR8QVG29BBY33",
        "receipt_type": "FISCALINVOICE",
        "receipt_currency": "USD",
        "receipt_counter": 2,
        "receipt_global_no": 14,
        "receipt_date": "2025-05-21T10:51:44",
        "receipt_total": 0.10,
        "receipt_taxes": [
          {
            "taxID": 1,
            "taxAmount": 0,
            "salesAmountWithTax": 0.10
          }
        ],
        "previous_receipt_hash": "RNlOmC9SFzBf1f6teHf1sdRvndEBxRrsLmgTEzs2VEw=",
        "result_used_to_hash": "24455FISCALINVOICEUSD142025-05-21T10:51:44101RNlOmC9SFzBf1f6teHf1sdRvndEBxRrsLmgTEzs2VEw=",
        "receipt_hash": "O325QgESIiw1oe+91aHtTlHsVrZDYU1QLqcPYTaiGHI=",
        "signature": "PZuW4HH4x1fkYwKdMj8YQGVI76IF3eP51cpUHdiq42xnZi1SPEGBN7h5rtECOOLkl6egUhlXWXr35Q+TtBgDHitYuc/2J13iJwhdy3xdZCSlz8NV29d73/lziH80AjBYsOC6fV+vJToSWcYuqdSKeIbgBDcOj6CFvCCQegmU9G0mY/e3uqnmXb29TfhiTUQUNz5Y3X2RRWCCfrpFGEZk/S9PeWnjKY7RxJNrKcl11Yp+9GXYjtpsyrbP42JF6gLcGjPbj436ihUmScDoouNdKLEbWabt5FOjtmdUkJ1Xxv1aEpfjt7Nv03d6zofuQ79otLM41bisn0sFMtIjSLGGow==",
        "qr_code_url": "https://fdmstest.zimra.co.zw/0000024455210520250000000014067E79C20E8CEFCE",
        "verification_code": "067E-79C2-0E8C-EFCE",
        "receipt_data": {
          "receipt": {
            "receiptType": "FiscalInvoice",
            "receiptCurrency": "USD",
            "receiptCounter": 2,
            "receiptGlobalNo": 14,
            "receiptDate": "2025-05-21T10:51:44",
            "receiptLinesTaxInclusive": false,
            "receiptLines": [
              {
                "receiptLineType": "Sale",
                "receiptLineNo": 1,
                "receiptLineHSCode": "08080101",
                "receiptLineName": "Eggs",
                "receiptLinePrice": 0.10,
                "receiptLineQuantity": 1,
                "receiptLineTotal": 0.10,
                "taxID": 1
              }
            ],
            "receiptTaxes": [
              {
                "taxID": 1,
                "taxAmount": 0,
                "salesAmountWithTax": 0.10
              }
            ],
            "receiptPayments": [
              {
                "moneyTypeCode": "MobileWallet",
                "paymentAmount": 0.10
              }
            ],
            "receiptTotal": 0.10,
            "receiptPrintForm": "InvoiceA4",
            "receiptDeviceSignature": {
              "hash": "O325QgESIiw1oe+91aHtTlHsVrZDYU1QLqcPYTaiGHI=",
              "signature": "PZuW4HH4x1fkYwKdMj8YQGVI76IF3eP51cpUHdiq42xnZi1SPEGBN7h5rtECOOLkl6egUhlXWXr35Q+TtBgDHitYuc/2J13iJwhdy3xdZCSlz8NV29d73/lziH80AjBYsOC6fV+vJToSWcYuqdSKeIbgBDcOj6CFvCCQegmU9G0mY/e3uqnmXb29TfhiTUQUNz5Y3X2RRWCCfrpFGEZk/S9PeWnjKY7RxJNrKcl11Yp+9GXYjtpsyrbP42JF6gLcGjPbj436ihUmScDoouNdKLEbWabt5FOjtmdUkJ1Xxv1aEpfjt7Nv03d6zofuQ79otLM41bisn0sFMtIjSLGGow=="
            },
            "invoiceNo": "SSK2BURLOLDA"
          }
        },
        "server_response": {
          "receiptID": 5960796,
          "serverDate": "2025-05-21T10:51:44",
          "receiptServerSignature": {
            "certificateThumbprint": "F9B295CA65BA22B94F6D4B27E48D08BF6CD7F7C8",
            "hash": "IESbgGq5bHwGtZnm4lzknj785mCkcfTG24hZWP7L65M=",
            "signature": "gZC4ZSmOqDiBtXmxaIJF0jTunrFBnRfk9dizbBpGVp62i4+0jopEbkmgjjsShXDGv8NtxNjoeJ6Pi65IdrL7UhQ9dEbeA9x9Lmp8dzko138uMg9Ey9WVYMmHoISSwdHSUuetHUk0x6x2RvyUjaV32RlotHMDoyPhvEjDxkZu/+ar58n+9dCvl5hBP6u2yaFGe5QX6wrr5WxhgPZhkLAqyayPTow2m6LNVVP5GK66VZdC+xRFxealMx2BdbPrxpzHNOb5GmMACfqHz5wvPpMYuZL8LEzSYAJzKzQFbNgRgqNg5YNHKRp2L+vQbEbcy/hszjVn0v3UysFo3xTlYkzXDg=="
          },
          "validationErrors": [],
          "operationID": "0HNCDUV5BOVT4:00000001"
        },
        "validation_errors": [],
        "fiscal_day_no": 4,
        "updated_at": "2025-05-21T08:51:45.077Z",
        "created_at": "2025-05-21T08:51:45.041Z"
      }
    }
  }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Make an Innbucks Payment
&lt;/h2&gt;

&lt;p&gt;Now lets do an Innbucks payment and automatically create a &lt;strong&gt;ZIMRA Fiscal Invoice&lt;/strong&gt;. You need to go to the &lt;a href="https://panier.app/api-documentation#tag/sales/POST/sale/create" rel="noopener noreferrer"&gt;Create Sale&lt;/a&gt; endpoint and use this payload, making sure to replace the &lt;code&gt;customer_id&lt;/code&gt;, &lt;code&gt;product&lt;/code&gt; and &lt;code&gt;phone&lt;/code&gt; with ones from your &lt;a href="https://panier.app" rel="noopener noreferrer"&gt;Panier&lt;/a&gt; account:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "data": {
    "customer_id": "cmaccp0vy0000zmksubook8hd",
    "products": [
        {
          "id": "cma5e7aca0000zm1x9aiabiil",
          "selling_price": 0.10,
          "quantity": 1
        }
     ]
  },
  "zimra_fiscalize": true,
  "payment_method": {
    "type": "SMILE_PAY_INNBUCKS",
    "phone": "0772000001",
    "email": "youremail@gmail.com"
  }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You should get the following response:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "innbucksPaymentCode": "601822521",
  "deep_link_url": "schinn.wbpycode://innbucks.co.zw?pymInnCode=601822521",
  "qr_code": "https://chart.googleapis.com/chart?cht=qr&amp;amp;chs=200x200&amp;amp;chl=601822521",
  "innbucks_expires_at": "21-May-2025 12:19",
  "pollurl": "https://panier.app/api/v1/payment-provider/check-payment-status?pollurl=https://zbnet.zb.co.zw/wallet_gateway/payments-gateway/payments/transaction/cmepw25l9000lv1s07w1gyci9/status/check",
  "responseMessage": "success",
  "responseCode": "00",
  "status": "AWAITING_PAYMENT",
  "orderReference": "cmepw25l9000lv1s07w1gyci9",
  "transactionReference": "GZSZ1181TOCP"
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You need to get your customer to follow the &lt;code&gt;instructions&lt;/code&gt; on how to make the Innbucks payment. Use the &lt;code&gt;pollurl&lt;/code&gt; or &lt;a href="https://panier.app/api-documentation#tag/sales/GET/payment-provider/check-payment-status" rel="noopener noreferrer"&gt;Check Payment Status&lt;/a&gt; endpoint to check the payment status at regular intervals of about 5 seconds.&lt;/p&gt;

&lt;p&gt;When the payment is successful you should get a response like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "merchantId": "20250711113952",
  "reference": "GZSZ1181TOCP",
  "orderReference": "cmepw25l9000lv1s07w1gyci9",
  "itemName": null,
  "amount": 0.10,
  "currency": "USD",
  "paymentOption": "ECOCASH",
  "status": "Completed",
  "createdDate": "2025-08-24T18:14:26.416946",
  "returnUrl": "https://panier.app?orderReference=cmepw25l9000lv1s07w1gyci9&amp;amp;transactionReference=GZSZ1181TOCP&amp;amp;status=PENDING",
  "resultUrl": "https://panier.app/api/v1/payment-provider/smile-pay/webhook",
  "clientFee": 0,
  "merchantFee": 0,
  "pollurl": "https://zbnet.zb.co.zw/wallet_gateway/payments-gateway/payments/transaction/cmepw25l9000lv1s07w1gyci9/status/check",
  "sale": {
    "id": "cmaxsdzpl000rzm0dqilmlkh0",
    "receipt_number": "KMY7WYXEMOM9",
    "phone": "0772000001",
    "email": "john@cornerbakery.com",
    "currency": {
      "symbol": "$",
      "name": "US Dollar",
      "symbol_native": "$",
      "decimal_digits": 2,
      "rounding": 0,
      "code": "USD",
      "name_plural": "US dollars",
      "exchange_rate": 1
    },
    "products": [
      {
        "id": "cma5e7aca0000zm1x9aiabiil",
        "name": "Eggs",
        "description": "One dozen large eggs",
        "buying_price": 2.51,
        "sku": "",
        "hs_code": "0808.01.01",
        "is_inventory_item": true,
        "applicable_tax": {
          "id": "cmac8znbu0005zm0gdy8xxoi6",
          "name": "VAT Exempt",
          "percentage": null,
          "code": null,
          "zimra_tax_id": 1
        },
        "_selling_price": 0.01,
        "_quantity": 1,
        "_discount": 0,
        "_total_excluding_tax": 0.01,
        "_tax": 0,
        "_total_including_tax": 0.01
      }
    ],
    "total": 0.01,
    "discount": 0,
    "is_refunded": false,
    "refunded_at": null,
    "is_voided": false,
    "voided_at": null,
    "template_preference": {
      "template": 1,
      "color": "no_color",
      "table_layout": "Plain"
    },
    "updated_at": "2025-05-21T10:14:59.357Z",
    "created_at": "2025-05-21T10:14:59.338Z",
    "customer": {
      "id": "cmaccp0vy0000zmksubook8hd",
      "name": "Corner Bakery",
      "contact_person": "John Smith",
      "phone": "0772000001",
      "email": "john@cornerbakery.com",
      "address": "123 Road Drive, City, Country",
      "fax": "02888881",
      "website": "https://example.com",
      "tax_reg_number": "",
      "company_reg_number": "",
      "tin_number": "",
      "vat_number": ""
    },
    "invoice": {
      "id": "cmaxsdzor000pzm0dnh8cfbtl",
      "number": "39DC6U5EM65J",
      "date_format": "dd/mm/yy",
      "date_issued": "2025-05-21T10:14:59.305Z",
      "recipients": [
        "john@cornerbakery.com"
      ],
      "payment_due": "2025-05-21T10:14:59.305Z",
      "currency": {
        "symbol": "$",
        "name": "US Dollar",
        "symbol_native": "$",
        "decimal_digits": 2,
        "rounding": 0,
        "code": "USD",
        "name_plural": "US dollars",
        "exchange_rate": 1
      },
      "products": [
        {
          "id": "cma5e7aca0000zm1x9aiabiil",
          "name": "Eggs",
          "description": "One dozen large eggs",
          "buying_price": 2.51,
          "sku": "",
          "hs_code": "0808.01.01",
          "is_inventory_item": true,
          "applicable_tax": {
            "id": "cmac8znbu0005zm0gdy8xxoi6",
            "name": "VAT Exempt",
            "percentage": null,
            "code": null,
            "zimra_tax_id": 1
          },
          "_selling_price": 0.01,
          "_quantity": 1,
          "_discount": 0,
          "_total_excluding_tax": 0.01,
          "_tax": 0,
          "_total_including_tax": 0.01
        }
      ],
      "total": 0.01,
      "discount": 0,
      "payment_information": null,
      "terms_n_conditions": null,
      "sending_status": "Send Email Notification",
      "quotation_id": null,
      "template_preference": {
        "template": 1,
        "color": "no_color",
        "table_layout": "Plain"
      },
      "is_paid": true,
      "updated_at": "2025-05-21T10:14:59.307Z",
      "created_at": "2025-05-21T10:14:59.307Z",
      "zimra_receipt": {
        "id": "cmaxsdzoc000ozm0dee2jtytg",
        "device_id": 24455,
        "device_serial_number": "HQAUR8QVG29BBY33",
        "receipt_type": "FISCALINVOICE",
        "receipt_currency": "USD",
        "receipt_counter": 4,
        "receipt_global_no": 16,
        "receipt_date": "2025-05-21T12:14:58",
        "receipt_total": 0.01,
        "receipt_taxes": [
          {
            "taxID": 1,
            "taxAmount": 0,
            "salesAmountWithTax": 0.01
          }
        ],
        "previous_receipt_hash": "fNFmaw6tK30NEVJP/bF0wIp5S0xWMrRu6EG8EFOJ/ss=",
        "result_used_to_hash": "24455FISCALINVOICEUSD162025-05-21T12:14:58101fNFmaw6tK30NEVJP/bF0wIp5S0xWMrRu6EG8EFOJ/ss=",
        "receipt_hash": "qUk5/6/cdCyoo/T2FTk9mq2tPHDDp1tNgo/pG11fwoU=",
        "signature": "AfuRWXk1X2Hw5wjjiPizGQAdug6M+e5+jQ7iSFXabPgmXTGRzhcw3EH6LEiAX6B/MN+c2l15x0DTBqN51C0Z97MvL+DPhq0+skb0CJoFydLJBAzYhR/nf6tZvIIcokYWHl6rtSVr3bgF8XNpEB8Q6foN+dn2CpLlvZdwB4eqRu5o8oxjoTH/VKbChDdGeWYwjuwYiMPGPdB2Ov1sFSIcNNHL2qkmhoE4balSugYvjhagNLDca27r2S2uXJSHZh+70BregHuxYr5xuWUNbiP6NmeZl8T8VB8lm8i/oDl7WC22sTePYObggygOkbjvguk0kp2mktwahDlY3tqELnk9fg==",
        "qr_code_url": "https://fdmstest.zimra.co.zw/0000024455210520250000000016737506EB7E49AE71",
        "verification_code": "7375-06EB-7E49-AE71",
        "receipt_data": {
          "receipt": {
            "receiptType": "FiscalInvoice",
            "receiptCurrency": "USD",
            "receiptCounter": 4,
            "receiptGlobalNo": 16,
            "receiptDate": "2025-05-21T12:14:58",
            "receiptLinesTaxInclusive": false,
            "receiptLines": [
              {
                "receiptLineType": "Sale",
                "receiptLineNo": 1,
                "receiptLineHSCode": "08080101",
                "receiptLineName": "Eggs",
                "receiptLinePrice": 0.01,
                "receiptLineQuantity": 1,
                "receiptLineTotal": 0.01,
                "taxID": 1
              }
            ],
            "receiptTaxes": [
              {
                "taxID": 1,
                "taxAmount": 0,
                "salesAmountWithTax": 0.01
              }
            ],
            "receiptPayments": [
              {
                "moneyTypeCode": "MobileWallet",
                "paymentAmount": 0.01
              }
            ],
            "receiptTotal": 0.01,
            "receiptPrintForm": "InvoiceA4",
            "receiptDeviceSignature": {
              "hash": "qUk5/6/cdCyoo/T2FTk9mq2tPHDDp1tNgo/pG11fwoU=",
              "signature": "AfuRWXk1X2Hw5wjjiPizGQAdug6M+e5+jQ7iSFXabPgmXTGRzhcw3EH6LEiAX6B/MN+c2l15x0DTBqN51C0Z97MvL+DPhq0+skb0CJoFydLJBAzYhR/nf6tZvIIcokYWHl6rtSVr3bgF8XNpEB8Q6foN+dn2CpLlvZdwB4eqRu5o8oxjoTH/VKbChDdGeWYwjuwYiMPGPdB2Ov1sFSIcNNHL2qkmhoE4balSugYvjhagNLDca27r2S2uXJSHZh+70BregHuxYr5xuWUNbiP6NmeZl8T8VB8lm8i/oDl7WC22sTePYObggygOkbjvguk0kp2mktwahDlY3tqELnk9fg=="
            },
            "invoiceNo": "39DC6U5EM65J"
          }
        },
        "server_response": {
          "receiptID": 5961141,
          "serverDate": "2025-05-21T12:14:59",
          "receiptServerSignature": {
            "certificateThumbprint": "F9B295CA65BA22B94F6D4B27E48D08BF6CD7F7C8",
            "hash": "aWJBHwqQR2M40iWgiVEAqtc8UtrFBKkz0eRoBkGPXdc=",
            "signature": "F35BHzB5BHurc3jEBsVeexZNkl8kwpQn4Sp8K1xGr13SjEqKdF6WkkPo9xqBBAJ8jQHZunnINrX0nluPbMUmJIte5Cea9esth95nH68fiMWhSdtWR3ikmrQ61+KxJKSCGX9rLzVcQzvYDX7jjVO8WEU5tLymrM0uCMZWMQ4npDsNK9aLRekcbf9L+2kFJLnMqs4qf2/PMvFsvIRCFdrQXOYYFzPDm8LuKpCx3yybS9RIG/7b4JmQ4auOmrEQxaGH+TWUPlxtjeJTFM8nUY7G/Afhpe7txJGs/X3ksHgw0CzdCgz5eEZC23tjfAs1UBKtyWowP7LTuL6CxkbhFYfnVg=="
          },
          "validationErrors": [],
          "operationID": "0HNCDUV5BQ539:00000001"
        },
        "validation_errors": [],
        "fiscal_day_no": 4,
        "updated_at": "2025-05-21T10:14:59.307Z",
        "created_at": "2025-05-21T10:14:59.292Z"
      }
    }
  }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If your customer was created with an email address in your Panier account, they will receive a PDF attached email like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foqqtpo9l53ruw9nnygb4.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foqqtpo9l53ruw9nnygb4.jpg" alt="Panier ZIMRA Fiscal Invoice PDF Sample" width="800" height="1129"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Closing Statement
&lt;/h2&gt;

&lt;p&gt;We also recommend that you go over our article on &lt;a href="https://dev.to/jeky1950/zimra-fiscalisation-with-the-panier-api-a-step-by-step-guide-1jgj"&gt;ZIMRA Fiscalisation with the Panier API: A Step-by-Step Guide&lt;/a&gt; so that you can also learn how to &lt;a href="https://panier.app/api-documentation#tag/credit-notes/POST/credit-note/create" rel="noopener noreferrer"&gt;Create Credit Notes&lt;/a&gt; and &lt;a href="https://panier.app/api-documentation#tag/debit-notes/POST/debit-note/create" rel="noopener noreferrer"&gt;Create Debit Notes&lt;/a&gt;. If you have any questions feel free to ask in the comments section or contact me directly on &lt;a href="mailto:support@panier.app"&gt;support@panier.app&lt;/a&gt; and I will get back to you has quickly as I can.&lt;/p&gt;

</description>
      <category>zimra</category>
      <category>fiscalisation</category>
      <category>panier</category>
      <category>smilepay</category>
    </item>
    <item>
      <title>Paynow and ZIMRA Fiscalisation Integration with the Panier API: a Step-by-Step Guide</title>
      <dc:creator>Anthony Jekanyika</dc:creator>
      <pubDate>Wed, 21 May 2025 14:29:05 +0000</pubDate>
      <link>https://dev.to/jeky1950/paynow-and-zimra-fiscalisation-integration-with-the-panier-api-a-step-by-step-guide-586g</link>
      <guid>https://dev.to/jeky1950/paynow-and-zimra-fiscalisation-integration-with-the-panier-api-a-step-by-step-guide-586g</guid>
      <description>&lt;p&gt;Today we will learn how we can use &lt;a href="https://paynow.co.zw/" rel="noopener noreferrer"&gt;Paynow&lt;/a&gt; to receive an instant &lt;strong&gt;Ecocash&lt;/strong&gt; or &lt;strong&gt;Innbucks&lt;/strong&gt; payment and automatically create and send a &lt;strong&gt;ZIMRA Fiscal Invoice&lt;/strong&gt; using &lt;strong&gt;a single &lt;a href="https://panier.app/api-documentation" rel="noopener noreferrer"&gt;Panier API&lt;/a&gt; call&lt;/strong&gt; 💪.&lt;/p&gt;

&lt;p&gt;First you need to have a &lt;a href="https://panier.app/" rel="noopener noreferrer"&gt;Panier&lt;/a&gt; account that has been setup with &lt;strong&gt;ZIMRA Fiscalisation&lt;/strong&gt;. If you don't have one, please follow &lt;a href="https://dev.to/jeky1950/zimra-fiscalisation-with-the-panier-api-a-step-by-step-guide-1jgj"&gt;this tutorial&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Setup Paynow Account
&lt;/h2&gt;

&lt;ol&gt;
    &lt;li&gt;Register as a Paynow &lt;strong&gt;Merchant&lt;/strong&gt; &lt;a href="https://www.paynow.co.zw/Customer/Register" rel="noopener noreferrer"&gt;here&lt;/a&gt;
&lt;/li&gt;
    &lt;li&gt;Go to the &lt;a href="https://www.paynow.co.zw/PaymentMethod" rel="noopener noreferrer"&gt;Payment Methods&lt;/a&gt; section and then add &lt;strong&gt;Ecocash (USD)&lt;/strong&gt; and &lt;strong&gt;Innbucks (USD)&lt;/strong&gt; payment methods (Panier currently only supports these payment methods and only in USD)&lt;/li&gt;
    &lt;li&gt;Next, go to the &lt;a href="https://www.paynow.co.zw/ExternalSite/Create" rel="noopener noreferrer"&gt;Create 3rd Party Shopping Cart or Link&lt;/a&gt; section and fill out the form, making sure to select all the previously added payment methods, that is, &lt;strong&gt;Ecocash&lt;/strong&gt; and &lt;strong&gt;Innbucks&lt;/strong&gt;
&lt;/li&gt;
    &lt;li&gt;Unselect the &lt;strong&gt;Require Customer Name&lt;/strong&gt; and &lt;strong&gt;Require Customer Phone&lt;/strong&gt; check boxes (You can enter anything that you want under &lt;strong&gt;name&lt;/strong&gt;)&lt;/li&gt;
    &lt;li&gt;Click &lt;strong&gt;Save&lt;/strong&gt; to complete the form&lt;/li&gt;
    &lt;li&gt;Go to the &lt;strong&gt;Payment Provider&lt;/strong&gt; page of your Panier account and copy down the &lt;strong&gt;Email&lt;/strong&gt; that you used to create the Paynow merchant account, &lt;strong&gt;Integration ID&lt;/strong&gt; and &lt;strong&gt;Integration Key&lt;/strong&gt; into the fields in the image below and then click &lt;strong&gt;Test Transaction&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbfvv3t52r4lduukfa36w.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbfvv3t52r4lduukfa36w.PNG" alt="Panier Payment Providers" width="800" height="402"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;When your Paynow integration is now live your Payment Provider page should look like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbed73woamu36d20lizuc.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbed73woamu36d20lizuc.PNG" alt="Live Panier Paynow Payment Provider Page" width="800" height="402"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Make an Ecocash Payment
&lt;/h2&gt;

&lt;p&gt;Now lets do an Ecocash payment and automatically create a &lt;strong&gt;ZIMRA Fiscal Invoice&lt;/strong&gt;. You need to go to the &lt;a href="https://panier.app/api-documentation#tag/sales/POST/sale/create" rel="noopener noreferrer"&gt;Create Sale&lt;/a&gt; endpoint and use this payload, making sure to replace the &lt;code&gt;customer_id&lt;/code&gt;, &lt;code&gt;product&lt;/code&gt; and &lt;code&gt;phone&lt;/code&gt; with ones from your &lt;a href="https://panier.app" rel="noopener noreferrer"&gt;Panier&lt;/a&gt; account:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "data": {
    "customer_id": "cmaccp0vy0000zmksubook8hd",
    "products": [
        {
          "id": "cma5e7aca0000zm1x9aiabiil",
          "selling_price": 0.10,
          "quantity": 1
        }
     ]
  },
  "zimra_fiscalize": true,
  "payment_method": {
    "type": "PAYNOW_ECOCASH",
    "phone": "0772000001",
    "email": "youremail@gmail.com"
  }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You should get the following response:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "instructions": "Dial *151*2*7# and enter your EcoCash PIN. Once you have authorized the payment via your handset, please click Check For Payment below to conclude this transaction",
  "pollurl": "https://panier.app/api/v1/payment-provider/paynow/check-payment-status?pollurl=https://www.paynow.co.zw/Interface/CheckPayment/?guid=c3909f34-7a1f-4dda-a99c-2954cfa67e11"
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You need to get your customer to follow the &lt;code&gt;instructions&lt;/code&gt; on how to make the Ecocash payment. Use the &lt;code&gt;pollurl&lt;/code&gt; or &lt;a href="https://panier.app/api-documentation#tag/sales/GET/payment-provider/paynow/check-payment-status" rel="noopener noreferrer"&gt;Check Payment Status&lt;/a&gt; endpoint to check the payment status at regular intervals of about 5 seconds.&lt;/p&gt;

&lt;p&gt;When the payment is successful you should get a response like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "reference": "cmaxpemg40007zm1gd5x5jng7",
  "paynowreference": "25107608",
  "amount": "0.10",
  "status": "Completed",
  "pollurl": "https%3a%2f%2fwww.paynow.co.zw%2fInterface%2fCheckPayment%2f%3fguid%3daf008834-edf0-4e41-aea1-5e0422095fae",
  "hash": "C06C9AB2B90823B0D39B1CD058D0943C944DD75FC2EE1BA4D66F506FE8F6DD4C0D7F3925DF667D20EB4A4C10AA1C511AF327D06D059FCE691B9140545468BA00",
  "direct_paynow_pollurl": "https://www.paynow.co.zw/Interface/CheckPayment/?guid=af008834-edf0-4e41-aea1-5e0422095fae",
  "sale": {
    "id": "cmaxpey550004zm3nthcoocph",
    "receipt_number": "IPID5V3JJ87E",
    "phone": "0772000001",
    "email": "john@cornerbakery.com",
    "currency": {
      "symbol": "$",
      "name": "US Dollar",
      "symbol_native": "$",
      "decimal_digits": 2,
      "rounding": 0,
      "code": "USD",
      "name_plural": "US dollars",
      "exchange_rate": 1
    },
    "products": [
      {
        "id": "cma5e7aca0000zm1x9aiabiil",
        "name": "Eggs",
        "description": "One dozen large eggs",
        "buying_price": 2.51,
        "sku": "",
        "hs_code": "0808.01.01",
        "is_inventory_item": true,
        "applicable_tax": {
          "id": "cmac8znbu0005zm0gdy8xxoi6",
          "name": "VAT Exempt",
          "percentage": null,
          "code": null,
          "zimra_tax_id": 1
        },
        "_selling_price": 0.10,
        "_quantity": 1,
        "_discount": 0,
        "_total_excluding_tax": 0.10,
        "_tax": 0,
        "_total_including_tax": 0.10
      }
    ],
    "total": 0.01,
    "discount": 0,
    "is_refunded": false,
    "refunded_at": null,
    "is_voided": false,
    "voided_at": null,
    "template_preference": {
      "template": 1,
      "color": "no_color",
      "table_layout": "Plain"
    },
    "updated_at": "2025-05-21T08:51:45.145Z",
    "created_at": "2025-05-21T08:51:45.109Z",
    "customer": {
      "id": "cmaccp0vy0000zmksubook8hd",
      "name": "Corner Bakery",
      "contact_person": "John Smith",
      "phone": "0772000001",
      "email": "john@cornerbakery.com",
      "address": "123 Road Drive, City, Country",
      "fax": "02888881",
      "website": "https://example.com",
      "tax_reg_number": "",
      "company_reg_number": "",
      "tin_number": "",
      "vat_number": ""
    },
    "invoice": {
      "id": "cmaxpey460002zm3nryg5glz1",
      "number": "SSK2BURLOLDA",
      "date_format": "dd/mm/yy",
      "date_issued": "2025-05-21T08:51:45.073Z",
      "recipients": [
        "john@cornerbakery.com"
      ],
      "payment_due": "2025-05-21T08:51:45.073Z",
      "currency": {
        "symbol": "$",
        "name": "US Dollar",
        "symbol_native": "$",
        "decimal_digits": 2,
        "rounding": 0,
        "code": "USD",
        "name_plural": "US dollars",
        "exchange_rate": 1
      },
      "products": [
        {
          "id": "cma5e7aca0000zm1x9aiabiil",
          "name": "Eggs",
          "description": "One dozen large eggs",
          "buying_price": 2.51,
          "sku": "",
          "hs_code": "0808.01.01",
          "is_inventory_item": true,
          "applicable_tax": {
            "id": "cmac8znbu0005zm0gdy8xxoi6",
            "name": "VAT Exempt",
            "percentage": null,
            "code": null,
            "zimra_tax_id": 1
          },
          "_selling_price": 0.10,
          "_quantity": 1,
          "_discount": 0,
          "_total_excluding_tax": 0.10,
          "_tax": 0,
          "_total_including_tax": 0.10
        }
      ],
      "total": 0.10,
      "discount": 0,
      "payment_information": null,
      "terms_n_conditions": null,
      "sending_status": "Send Email Notification",
      "quotation_id": null,
      "template_preference": {
        "template": 1,
        "color": "no_color",
        "table_layout": "Plain"
      },
      "is_paid": true,
      "updated_at": "2025-05-21T08:51:45.077Z",
      "created_at": "2025-05-21T08:51:45.077Z",
      "zimra_receipt": {
        "id": "cmaxpey350001zm3n20cv98iv",
        "device_id": 24455,
        "device_serial_number": "HQAUR8QVG29BBY33",
        "receipt_type": "FISCALINVOICE",
        "receipt_currency": "USD",
        "receipt_counter": 2,
        "receipt_global_no": 14,
        "receipt_date": "2025-05-21T10:51:44",
        "receipt_total": 0.10,
        "receipt_taxes": [
          {
            "taxID": 1,
            "taxAmount": 0,
            "salesAmountWithTax": 0.10
          }
        ],
        "previous_receipt_hash": "RNlOmC9SFzBf1f6teHf1sdRvndEBxRrsLmgTEzs2VEw=",
        "result_used_to_hash": "24455FISCALINVOICEUSD142025-05-21T10:51:44101RNlOmC9SFzBf1f6teHf1sdRvndEBxRrsLmgTEzs2VEw=",
        "receipt_hash": "O325QgESIiw1oe+91aHtTlHsVrZDYU1QLqcPYTaiGHI=",
        "signature": "PZuW4HH4x1fkYwKdMj8YQGVI76IF3eP51cpUHdiq42xnZi1SPEGBN7h5rtECOOLkl6egUhlXWXr35Q+TtBgDHitYuc/2J13iJwhdy3xdZCSlz8NV29d73/lziH80AjBYsOC6fV+vJToSWcYuqdSKeIbgBDcOj6CFvCCQegmU9G0mY/e3uqnmXb29TfhiTUQUNz5Y3X2RRWCCfrpFGEZk/S9PeWnjKY7RxJNrKcl11Yp+9GXYjtpsyrbP42JF6gLcGjPbj436ihUmScDoouNdKLEbWabt5FOjtmdUkJ1Xxv1aEpfjt7Nv03d6zofuQ79otLM41bisn0sFMtIjSLGGow==",
        "qr_code_url": "https://fdmstest.zimra.co.zw/0000024455210520250000000014067E79C20E8CEFCE",
        "verification_code": "067E-79C2-0E8C-EFCE",
        "receipt_data": {
          "receipt": {
            "receiptType": "FiscalInvoice",
            "receiptCurrency": "USD",
            "receiptCounter": 2,
            "receiptGlobalNo": 14,
            "receiptDate": "2025-05-21T10:51:44",
            "receiptLinesTaxInclusive": false,
            "receiptLines": [
              {
                "receiptLineType": "Sale",
                "receiptLineNo": 1,
                "receiptLineHSCode": "08080101",
                "receiptLineName": "Eggs",
                "receiptLinePrice": 0.10,
                "receiptLineQuantity": 1,
                "receiptLineTotal": 0.10,
                "taxID": 1
              }
            ],
            "receiptTaxes": [
              {
                "taxID": 1,
                "taxAmount": 0,
                "salesAmountWithTax": 0.10
              }
            ],
            "receiptPayments": [
              {
                "moneyTypeCode": "MobileWallet",
                "paymentAmount": 0.10
              }
            ],
            "receiptTotal": 0.10,
            "receiptPrintForm": "InvoiceA4",
            "receiptDeviceSignature": {
              "hash": "O325QgESIiw1oe+91aHtTlHsVrZDYU1QLqcPYTaiGHI=",
              "signature": "PZuW4HH4x1fkYwKdMj8YQGVI76IF3eP51cpUHdiq42xnZi1SPEGBN7h5rtECOOLkl6egUhlXWXr35Q+TtBgDHitYuc/2J13iJwhdy3xdZCSlz8NV29d73/lziH80AjBYsOC6fV+vJToSWcYuqdSKeIbgBDcOj6CFvCCQegmU9G0mY/e3uqnmXb29TfhiTUQUNz5Y3X2RRWCCfrpFGEZk/S9PeWnjKY7RxJNrKcl11Yp+9GXYjtpsyrbP42JF6gLcGjPbj436ihUmScDoouNdKLEbWabt5FOjtmdUkJ1Xxv1aEpfjt7Nv03d6zofuQ79otLM41bisn0sFMtIjSLGGow=="
            },
            "invoiceNo": "SSK2BURLOLDA"
          }
        },
        "server_response": {
          "receiptID": 5960796,
          "serverDate": "2025-05-21T10:51:44",
          "receiptServerSignature": {
            "certificateThumbprint": "F9B295CA65BA22B94F6D4B27E48D08BF6CD7F7C8",
            "hash": "IESbgGq5bHwGtZnm4lzknj785mCkcfTG24hZWP7L65M=",
            "signature": "gZC4ZSmOqDiBtXmxaIJF0jTunrFBnRfk9dizbBpGVp62i4+0jopEbkmgjjsShXDGv8NtxNjoeJ6Pi65IdrL7UhQ9dEbeA9x9Lmp8dzko138uMg9Ey9WVYMmHoISSwdHSUuetHUk0x6x2RvyUjaV32RlotHMDoyPhvEjDxkZu/+ar58n+9dCvl5hBP6u2yaFGe5QX6wrr5WxhgPZhkLAqyayPTow2m6LNVVP5GK66VZdC+xRFxealMx2BdbPrxpzHNOb5GmMACfqHz5wvPpMYuZL8LEzSYAJzKzQFbNgRgqNg5YNHKRp2L+vQbEbcy/hszjVn0v3UysFo3xTlYkzXDg=="
          },
          "validationErrors": [],
          "operationID": "0HNCDUV5BOVT4:00000001"
        },
        "validation_errors": [],
        "fiscal_day_no": 4,
        "updated_at": "2025-05-21T08:51:45.077Z",
        "created_at": "2025-05-21T08:51:45.041Z"
      }
    }
  }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Make an Innbucks Payment
&lt;/h2&gt;

&lt;p&gt;Now lets do an Innbucks payment and automatically create a &lt;strong&gt;ZIMRA Fiscal Invoice&lt;/strong&gt;. You need to go to the &lt;a href="https://panier.app/api-documentation#tag/sales/POST/sale/create" rel="noopener noreferrer"&gt;Create Sale&lt;/a&gt; endpoint and use this payload, making sure to replace the &lt;code&gt;customer_id&lt;/code&gt;, &lt;code&gt;product&lt;/code&gt; and &lt;code&gt;phone&lt;/code&gt; with ones from your &lt;a href="https://panier.app" rel="noopener noreferrer"&gt;Panier&lt;/a&gt; account:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "data": {
    "customer_id": "cmaccp0vy0000zmksubook8hd",
    "products": [
        {
          "id": "cma5e7aca0000zm1x9aiabiil",
          "selling_price": 0.10,
          "quantity": 1
        }
     ]
  },
  "zimra_fiscalize": true,
  "payment_method": {
    "type": "PAYNOW_INNBUCKS",
    "phone": "0772000001",
    "email": "youremail@gmail.com"
  }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You should get the following response:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "instructions": "Dial *569#. Log into your Innbucks Account. Select Pay and enter 601822521 as your 2D Code.",
  "authorizationcode": "601822521",
  "deep_link_url": "schinn.wbpycode://innbucks.co.zw?pymInnCode=601822521",
  "qr_code": "https://chart.googleapis.com/chart?cht=qr&amp;amp;chs=200x200&amp;amp;chl=601822521",
  "expires_at": "21-May-2025 12:19",
  "pollurl": "https://panier.app/api/v1/payment-provider/paynow/check-payment-status?pollurl=https://www.paynow.co.zw/Interface/CheckPayment/?guid=b73f9d55-4a9d-46b6-a221-b0bca0d9ef47"
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You need to get your customer to follow the &lt;code&gt;instructions&lt;/code&gt; on how to make the Innbucks payment. Use the &lt;code&gt;pollurl&lt;/code&gt; or &lt;a href="https://panier.app/api-documentation#tag/sales/GET/payment-provider/paynow/check-payment-status" rel="noopener noreferrer"&gt;Check Payment Status&lt;/a&gt; endpoint to check the payment status at regular intervals of about 5 seconds.&lt;/p&gt;

&lt;p&gt;When the payment is successful you should get a response like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "reference": "cmaxsceop0005zm1fe8ue6bte",
  "paynowreference": "25111200",
  "amount": "0.01",
  "status": "Completed",
  "pollurl": "https%3a%2f%2fwww.paynow.co.zw%2fInterface%2fCheckPayment%2f%3fguid%3d252399f2-ea8b-4a25-989d-0f7e1baefff0",
  "hash": "C7C85B344262A1B2A8C10FB154151C71D01FB62CF0CC8397964F879B3CAEB2D3BE29EEA82EF43BD997B870A0ECC24F4BEFAA9328748876F5D0E919F493865805",
  "direct_paynow_pollurl": "https://www.paynow.co.zw/Interface/CheckPayment/?guid=252399f2-ea8b-4a25-989d-0f7e1baefff0",
  "sale": {
    "id": "cmaxsdzpl000rzm0dqilmlkh0",
    "receipt_number": "KMY7WYXEMOM9",
    "phone": "0772000001",
    "email": "john@cornerbakery.com",
    "currency": {
      "symbol": "$",
      "name": "US Dollar",
      "symbol_native": "$",
      "decimal_digits": 2,
      "rounding": 0,
      "code": "USD",
      "name_plural": "US dollars",
      "exchange_rate": 1
    },
    "products": [
      {
        "id": "cma5e7aca0000zm1x9aiabiil",
        "name": "Eggs",
        "description": "One dozen large eggs",
        "buying_price": 2.51,
        "sku": "",
        "hs_code": "0808.01.01",
        "is_inventory_item": true,
        "applicable_tax": {
          "id": "cmac8znbu0005zm0gdy8xxoi6",
          "name": "VAT Exempt",
          "percentage": null,
          "code": null,
          "zimra_tax_id": 1
        },
        "_selling_price": 0.01,
        "_quantity": 1,
        "_discount": 0,
        "_total_excluding_tax": 0.01,
        "_tax": 0,
        "_total_including_tax": 0.01
      }
    ],
    "total": 0.01,
    "discount": 0,
    "is_refunded": false,
    "refunded_at": null,
    "is_voided": false,
    "voided_at": null,
    "template_preference": {
      "template": 1,
      "color": "no_color",
      "table_layout": "Plain"
    },
    "updated_at": "2025-05-21T10:14:59.357Z",
    "created_at": "2025-05-21T10:14:59.338Z",
    "customer": {
      "id": "cmaccp0vy0000zmksubook8hd",
      "name": "Corner Bakery",
      "contact_person": "John Smith",
      "phone": "0772000001",
      "email": "john@cornerbakery.com",
      "address": "123 Road Drive, City, Country",
      "fax": "02888881",
      "website": "https://example.com",
      "tax_reg_number": "",
      "company_reg_number": "",
      "tin_number": "",
      "vat_number": ""
    },
    "invoice": {
      "id": "cmaxsdzor000pzm0dnh8cfbtl",
      "number": "39DC6U5EM65J",
      "date_format": "dd/mm/yy",
      "date_issued": "2025-05-21T10:14:59.305Z",
      "recipients": [
        "john@cornerbakery.com"
      ],
      "payment_due": "2025-05-21T10:14:59.305Z",
      "currency": {
        "symbol": "$",
        "name": "US Dollar",
        "symbol_native": "$",
        "decimal_digits": 2,
        "rounding": 0,
        "code": "USD",
        "name_plural": "US dollars",
        "exchange_rate": 1
      },
      "products": [
        {
          "id": "cma5e7aca0000zm1x9aiabiil",
          "name": "Eggs",
          "description": "One dozen large eggs",
          "buying_price": 2.51,
          "sku": "",
          "hs_code": "0808.01.01",
          "is_inventory_item": true,
          "applicable_tax": {
            "id": "cmac8znbu0005zm0gdy8xxoi6",
            "name": "VAT Exempt",
            "percentage": null,
            "code": null,
            "zimra_tax_id": 1
          },
          "_selling_price": 0.01,
          "_quantity": 1,
          "_discount": 0,
          "_total_excluding_tax": 0.01,
          "_tax": 0,
          "_total_including_tax": 0.01
        }
      ],
      "total": 0.01,
      "discount": 0,
      "payment_information": null,
      "terms_n_conditions": null,
      "sending_status": "Send Email Notification",
      "quotation_id": null,
      "template_preference": {
        "template": 1,
        "color": "no_color",
        "table_layout": "Plain"
      },
      "is_paid": true,
      "updated_at": "2025-05-21T10:14:59.307Z",
      "created_at": "2025-05-21T10:14:59.307Z",
      "zimra_receipt": {
        "id": "cmaxsdzoc000ozm0dee2jtytg",
        "device_id": 24455,
        "device_serial_number": "HQAUR8QVG29BBY33",
        "receipt_type": "FISCALINVOICE",
        "receipt_currency": "USD",
        "receipt_counter": 4,
        "receipt_global_no": 16,
        "receipt_date": "2025-05-21T12:14:58",
        "receipt_total": 0.01,
        "receipt_taxes": [
          {
            "taxID": 1,
            "taxAmount": 0,
            "salesAmountWithTax": 0.01
          }
        ],
        "previous_receipt_hash": "fNFmaw6tK30NEVJP/bF0wIp5S0xWMrRu6EG8EFOJ/ss=",
        "result_used_to_hash": "24455FISCALINVOICEUSD162025-05-21T12:14:58101fNFmaw6tK30NEVJP/bF0wIp5S0xWMrRu6EG8EFOJ/ss=",
        "receipt_hash": "qUk5/6/cdCyoo/T2FTk9mq2tPHDDp1tNgo/pG11fwoU=",
        "signature": "AfuRWXk1X2Hw5wjjiPizGQAdug6M+e5+jQ7iSFXabPgmXTGRzhcw3EH6LEiAX6B/MN+c2l15x0DTBqN51C0Z97MvL+DPhq0+skb0CJoFydLJBAzYhR/nf6tZvIIcokYWHl6rtSVr3bgF8XNpEB8Q6foN+dn2CpLlvZdwB4eqRu5o8oxjoTH/VKbChDdGeWYwjuwYiMPGPdB2Ov1sFSIcNNHL2qkmhoE4balSugYvjhagNLDca27r2S2uXJSHZh+70BregHuxYr5xuWUNbiP6NmeZl8T8VB8lm8i/oDl7WC22sTePYObggygOkbjvguk0kp2mktwahDlY3tqELnk9fg==",
        "qr_code_url": "https://fdmstest.zimra.co.zw/0000024455210520250000000016737506EB7E49AE71",
        "verification_code": "7375-06EB-7E49-AE71",
        "receipt_data": {
          "receipt": {
            "receiptType": "FiscalInvoice",
            "receiptCurrency": "USD",
            "receiptCounter": 4,
            "receiptGlobalNo": 16,
            "receiptDate": "2025-05-21T12:14:58",
            "receiptLinesTaxInclusive": false,
            "receiptLines": [
              {
                "receiptLineType": "Sale",
                "receiptLineNo": 1,
                "receiptLineHSCode": "08080101",
                "receiptLineName": "Eggs",
                "receiptLinePrice": 0.01,
                "receiptLineQuantity": 1,
                "receiptLineTotal": 0.01,
                "taxID": 1
              }
            ],
            "receiptTaxes": [
              {
                "taxID": 1,
                "taxAmount": 0,
                "salesAmountWithTax": 0.01
              }
            ],
            "receiptPayments": [
              {
                "moneyTypeCode": "MobileWallet",
                "paymentAmount": 0.01
              }
            ],
            "receiptTotal": 0.01,
            "receiptPrintForm": "InvoiceA4",
            "receiptDeviceSignature": {
              "hash": "qUk5/6/cdCyoo/T2FTk9mq2tPHDDp1tNgo/pG11fwoU=",
              "signature": "AfuRWXk1X2Hw5wjjiPizGQAdug6M+e5+jQ7iSFXabPgmXTGRzhcw3EH6LEiAX6B/MN+c2l15x0DTBqN51C0Z97MvL+DPhq0+skb0CJoFydLJBAzYhR/nf6tZvIIcokYWHl6rtSVr3bgF8XNpEB8Q6foN+dn2CpLlvZdwB4eqRu5o8oxjoTH/VKbChDdGeWYwjuwYiMPGPdB2Ov1sFSIcNNHL2qkmhoE4balSugYvjhagNLDca27r2S2uXJSHZh+70BregHuxYr5xuWUNbiP6NmeZl8T8VB8lm8i/oDl7WC22sTePYObggygOkbjvguk0kp2mktwahDlY3tqELnk9fg=="
            },
            "invoiceNo": "39DC6U5EM65J"
          }
        },
        "server_response": {
          "receiptID": 5961141,
          "serverDate": "2025-05-21T12:14:59",
          "receiptServerSignature": {
            "certificateThumbprint": "F9B295CA65BA22B94F6D4B27E48D08BF6CD7F7C8",
            "hash": "aWJBHwqQR2M40iWgiVEAqtc8UtrFBKkz0eRoBkGPXdc=",
            "signature": "F35BHzB5BHurc3jEBsVeexZNkl8kwpQn4Sp8K1xGr13SjEqKdF6WkkPo9xqBBAJ8jQHZunnINrX0nluPbMUmJIte5Cea9esth95nH68fiMWhSdtWR3ikmrQ61+KxJKSCGX9rLzVcQzvYDX7jjVO8WEU5tLymrM0uCMZWMQ4npDsNK9aLRekcbf9L+2kFJLnMqs4qf2/PMvFsvIRCFdrQXOYYFzPDm8LuKpCx3yybS9RIG/7b4JmQ4auOmrEQxaGH+TWUPlxtjeJTFM8nUY7G/Afhpe7txJGs/X3ksHgw0CzdCgz5eEZC23tjfAs1UBKtyWowP7LTuL6CxkbhFYfnVg=="
          },
          "validationErrors": [],
          "operationID": "0HNCDUV5BQ539:00000001"
        },
        "validation_errors": [],
        "fiscal_day_no": 4,
        "updated_at": "2025-05-21T10:14:59.307Z",
        "created_at": "2025-05-21T10:14:59.292Z"
      }
    }
  }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If your customer was created with an email address in your Panier account, they will receive a PDF attached email like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foqqtpo9l53ruw9nnygb4.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foqqtpo9l53ruw9nnygb4.jpg" alt="Panier ZIMRA Fiscal Invoice PDF Sample" width="800" height="1129"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Closing Statement
&lt;/h2&gt;

&lt;p&gt;We also recommend that you go over our article on &lt;a href="https://dev.to/jeky1950/zimra-fiscalisation-with-the-panier-api-a-step-by-step-guide-1jgj"&gt;ZIMRA Fiscalisation with the Panier API: A Step-by-Step Guide&lt;/a&gt; so that you can also learn how to &lt;a href="https://panier.app/api-documentation#tag/credit-notes/POST/credit-note/create" rel="noopener noreferrer"&gt;Create Credit Notes&lt;/a&gt; and &lt;a href="https://panier.app/api-documentation#tag/debit-notes/POST/debit-note/create" rel="noopener noreferrer"&gt;Create Debit Notes&lt;/a&gt;. If you have any questions feel free to ask in the comments section or contact me directly on &lt;a href="mailto:support@panier.app"&gt;support@panier.app&lt;/a&gt; and I will get back to you has quickly as I can.&lt;/p&gt;

</description>
      <category>zimra</category>
      <category>paynow</category>
      <category>panier</category>
      <category>api</category>
    </item>
    <item>
      <title>ZIMRA Fiscalisation with the Panier API: A Step-by-Step Guide</title>
      <dc:creator>Anthony Jekanyika</dc:creator>
      <pubDate>Tue, 06 May 2025 12:27:02 +0000</pubDate>
      <link>https://dev.to/jeky1950/zimra-fiscalisation-with-the-panier-api-a-step-by-step-guide-1jgj</link>
      <guid>https://dev.to/jeky1950/zimra-fiscalisation-with-the-panier-api-a-step-by-step-guide-1jgj</guid>
      <description>&lt;p&gt;&lt;a href="https://panier.app" rel="noopener noreferrer"&gt;Panier&lt;/a&gt; is a system built for small business with features including Point of Sale, Invoices, Credit Notes, Debit Notes, Delivery Notes, Quotations, Multi-Currency, Stock Management, Profit and Loss and much more. Panier also includes the ability to &lt;a href="https://www.zimra.co.zw/domestic-taxes/corporate/fiscalisation-explained" rel="noopener noreferrer"&gt;ZIMRA Fiscalize&lt;/a&gt; and extends this ability to the &lt;a href="https://panier.app/api-documentation" rel="noopener noreferrer"&gt;Panier API&lt;/a&gt; allowing you to integrate with it from your project. In this article we will show you how you can integrate your project with &lt;a href="https://www.zimra.co.zw/news/22-taxmans-corner/2307-compliance-with-the-zimra-fiscalisation-data-management-system-fdms" rel="noopener noreferrer"&gt;ZIMRA's FDMS&lt;/a&gt; through the &lt;a href="https://panier.app/api-documentation" rel="noopener noreferrer"&gt;Panier API&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Setup Panier
&lt;/h2&gt;

&lt;p&gt;First you need to register an account on &lt;a href="https://panier.app" rel="noopener noreferrer"&gt;Panier&lt;/a&gt; and create a company if you don't already have one. You will get a &lt;strong&gt;14 day FREE trial&lt;/strong&gt; when you register, after which you will have to pay a &lt;strong&gt;US$4.99 monthly subscription&lt;/strong&gt; for each company that you have.&lt;/p&gt;

&lt;p&gt;Next navigate to the &lt;strong&gt;Developer API&lt;/strong&gt; page of your company and generate the API Credentials.&lt;/p&gt;

&lt;p&gt;Next go to the &lt;strong&gt;API Credentials&lt;/strong&gt; tab and copy down the &lt;strong&gt;APP ID&lt;/strong&gt; and &lt;strong&gt;API KEY&lt;/strong&gt;, we are going to need them later.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F25qd320xxad99rvvb81e.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F25qd320xxad99rvvb81e.PNG" alt="Panier API Credentials Tab" width="800" height="476"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  ZIMRA Fiscalisation Integration
&lt;/h2&gt;

&lt;p&gt;We are now going to generate a &lt;strong&gt;ZIMRA Virtual Fiscal Device&lt;/strong&gt; by going to the &lt;strong&gt;ZIMRA Fisc&lt;/strong&gt; page of our company and filling in the form with your ZIMRA VAT information. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjxcb1pjw8zr0py513omz.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjxcb1pjw8zr0py513omz.PNG" alt="Panier ZIMRA Fiscalisation Setup Form" width="800" height="491"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This will automatically generate the virtual fiscal device for you in about 5 minutes (depending on your internet connection) and automatically submit it for approval to ZIMRA (This might take up to 3 working days). &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8hw33j5wuf44ydzth9h9.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8hw33j5wuf44ydzth9h9.PNG" alt="Panier ZIMRA Integration Progress Page" width="800" height="425"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Whilst you wait for your virtual fiscal device to be approved and put into production, you can use the API inside &lt;strong&gt;ZIMRA's test environment&lt;/strong&gt;, which is what we will be doing today.&lt;/p&gt;

&lt;h2&gt;
  
  
  ZIMRA Taxes
&lt;/h2&gt;

&lt;p&gt;When generate a virtual fiscal device, ZIMRA will send us a list of applicable taxes that you can use. We then add these ZIMRA Taxes, as &lt;code&gt;readonly&lt;/code&gt; taxes on your company's &lt;strong&gt;Taxes&lt;/strong&gt; page.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwfd7rln1z3bmpyerx3kj.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwfd7rln1z3bmpyerx3kj.PNG" alt="Panier ZIMRA Taxes list" width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;All the products you create must be linked to one of these ZIMRA Taxes in order to fiscalize. &lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Setup API Credentials
&lt;/h2&gt;

&lt;p&gt;You need to open the &lt;a href="https://panier.app/api-documentation" rel="noopener noreferrer"&gt;Panier API Documentation&lt;/a&gt; and add the &lt;strong&gt;APP ID&lt;/strong&gt; and &lt;strong&gt;API KEY&lt;/strong&gt; in order to get access to the API.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhaybu6bhpfc6jo78gavw.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhaybu6bhpfc6jo78gavw.PNG" alt="Panier API Credentials" width="800" height="357"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Get the ZIMRA Taxes
&lt;/h2&gt;

&lt;p&gt;Go to &lt;a href="https://panier.app/api-documentation#tag/taxes/POST/tax/search" rel="noopener noreferrer"&gt;Search Taxes&lt;/a&gt; endpoint and run the request, with the following payload so that we get all the taxes associated with your company:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "data": {
    "query": "*"
  }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If everything went well, you should get a response similar to this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "searched": [
    {
      "id": "cmac8znc00008zm0gxrwpm55t",
      "name": "VAT",
      "percentage": 5,
      "code": null,
      "zimra_tax_id": 514,
      "updated_at": "2025-05-06T08:28:53.673Z",
      "created_at": "2025-05-06T08:28:47.712Z"
    },
    {
      "id": "cmac8znby0006zm0gppkcd15d",
      "name": "VAT",
      "percentage": 0,
      "code": null,
      "zimra_tax_id": 2,
      "updated_at": "2025-05-06T08:28:53.658Z",
      "created_at": "2025-05-06T08:28:47.710Z"
    },
    {
      "id": "cmac8znby0007zm0gilfcssvi",
      "name": "VAT",
      "percentage": 15,
      "code": null,
      "zimra_tax_id": 3,
      "updated_at": "2025-05-06T08:28:53.656Z",
      "created_at": "2025-05-06T08:28:47.710Z"
    },
    {
      "id": "cmac8znbu0005zm0gdy8xxoi6",
      "name": "VAT Exempt",
      "percentage": null,
      "code": null,
      "zimra_tax_id": 1,
      "updated_at": "2025-05-06T08:28:53.653Z",
      "created_at": "2025-05-06T08:28:47.707Z"
    }
  ]
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Notice that &lt;strong&gt;ZIMRA Taxes&lt;/strong&gt; have a non-null &lt;code&gt;zimra_tax_id&lt;/code&gt;.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Create a Product
&lt;/h2&gt;

&lt;p&gt;Go to the &lt;a href="https://panier.app/api-documentation#tag/products/POST/product/create" rel="noopener noreferrer"&gt;Create Product&lt;/a&gt; endpoint and create a product. Making sure to link one of the ZIMRA Taxes above. For this example we will use the &lt;code&gt;id&lt;/code&gt; of the ZIMRA &lt;strong&gt;VAT Exempt&lt;/strong&gt; tax as the &lt;code&gt;applicable_tax_id&lt;/code&gt; in the following payload:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "data": [
    {
      "name": "Eggs",
      "description": "One dozen large eggs",
      "buying_price": 2.51,
      "selling_price": 5.81,
      "initial_quantity": 100,
      "hs_code": "0808.01.01",
      "is_inventory_item": true,
      "applicable_tax_id": "cmac8znbu0005zm0gdy8xxoi6"
    }
  ],
  "overwrite_duplicates": true
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;According to the &lt;a href="https://www.zimra.co.zw/news/2308-use-of-harmonized-system-codes-hs-codes-under-domestic-taxes-in-recording-of-sales-transactions-using-fiscal-devices" rel="noopener noreferrer"&gt;ZIMRA Guidelines&lt;/a&gt; all products now need to have an &lt;a href="https://en.wikipedia.org/wiki/Harmonized_System" rel="noopener noreferrer"&gt;HS Code&lt;/a&gt; in order to fiscalize.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;You should get a similar response to this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "created": [
    {
      "id": "cma5e7aca0000zm1x9aiabiil",
      "name": "Eggs",
      "description": "One dozen large eggs",
      "buying_price": 2.51,
      "sku": "",
      "hs_code": "0808.01.01",
      "selling_price": 5.81,
      "quantity": 100,
      "is_inventory_item": true,
      "updated_at": "2025-05-06T09:26:12.407Z",
      "created_at": "2025-05-01T13:20:18.970Z",
      "applicable_tax": {
        "id": "cmac8znbu0005zm0gdy8xxoi6",
        "name": "VAT Exempt",
        "percentage": null,
        "code": null,
        "zimra_tax_id": 1
      }
    }
  ],
  "excluded_duplicates": []
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Create a Customer
&lt;/h2&gt;

&lt;p&gt;Now let's create a customer by going to the &lt;a href="https://panier.app/api-documentation#tag/customers/POST/customer/create" rel="noopener noreferrer"&gt;Create Customer&lt;/a&gt; endpoint and using the following payload:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "data": [
    {
      "name": "Corner Bakery",
      "contact_person": "John Smith",
      "phone": "0772000001",
      "email": "john@cornerbakery.com",
      "address": "123 Road Drive, City, Country",
      "fax": "02888881",
      "website": "https://example.com",
      "tax_reg_number": "",
      "company_reg_number": "",
      "tin_number": "",
      "vat_number": ""
    }
  ],
  "overwrite_duplicates": true
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You should get a similar response to this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "created": [
    {
      "id": "cmaccp0vy0000zmksubook8hd",
      "name": "Corner Bakery",
      "contact_person": "John Smith",
      "phone": "0772000001",
      "email": "john@cornerbakery.com",
      "address": "123 Road Drive, City, Country",
      "fax": "02888881",
      "website": "https://example.com",
      "tax_reg_number": "",
      "company_reg_number": "",
      "tin_number": "",
      "vat_number": "",
      "updated_at": "2025-05-06T10:12:30.527Z",
      "created_at": "2025-05-06T10:12:30.527Z"
    }
  ],
  "excluded_duplicates": []
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Create a ZIMRA Fiscal Invoice
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://panier.app" rel="noopener noreferrer"&gt;Panier&lt;/a&gt; has a smart automated &lt;strong&gt;ZIMRA Open day&lt;/strong&gt; and &lt;strong&gt;Close day&lt;/strong&gt; feature, so it will first check if the fiscal day is opened or not, if not it automatically open it before it creates a Fiscal Invoice. In addition, if the fiscal day has been opened for close to 24 hours, it will automatically close the fiscal day for you. However if you wish to manually open or close the fiscal day you can use the &lt;a href="https://panier.app/api-documentation#tag/zimra-fiscalisation/GET/zimra/open-day" rel="noopener noreferrer"&gt;ZIMRA Open Day&lt;/a&gt; and &lt;a href="https://panier.app/api-documentation#tag/zimra-fiscalisation/GET/zimra/close-day" rel="noopener noreferrer"&gt;ZIMRA Close Day&lt;/a&gt; endpoints on the &lt;a href="https://panier.app/api-documentation" rel="noopener noreferrer"&gt;Panier API&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Now let us create a &lt;strong&gt;Fiscal Invoice&lt;/strong&gt; by going to the &lt;a href="https://panier.app/api-documentation#tag/invoices/POST/invoice/create" rel="noopener noreferrer"&gt;Create Invoice&lt;/a&gt; endpoint and using the following payload:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "data": [
    {
      "customer_id": "cmaccp0vy0000zmksubook8hd",
      "products": [
        {
          "id": "cma5e7aca0000zm1x9aiabiil",
          "quantity": 1
        }
      ],
      "date_format": "dd/mm/yy",
      "payment_due": "2025-04-18T15:40:00.546Z",
      "payment_information": "Please make all payments to our CBZ Bank Account XXXXXXXXXXX",
      "terms_n_conditions": "This invoice will be considered invalid when the payment due date has lapsed"
    }
  ],
  "zimra_fiscalize": true
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Et voila, here is our &lt;strong&gt;ZIMRA Fiscal Invoice&lt;/strong&gt; 💪&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "created": [
    {
      "id": "cmacdp73c0005zmjpdime2h47",
      "number": "WGYM9GMJ639N",
      "date_format": "dd/mm/yy",
      "date_issued": "2025-05-06T10:40:30.102Z",
      "recipients": [],
      "payment_due": "2025-04-18T15:40:00.546Z",
      "currency": {
        "symbol": "$",
        "name": "US Dollar",
        "symbol_native": "$",
        "decimal_digits": 2,
        "rounding": 0,
        "code": "USD",
        "name_plural": "US dollars",
        "exchange_rate": 1
      },
      "products": [
        {
          "id": "cma5e7aca0000zm1x9aiabiil",
          "name": "Eggs",
          "description": "One dozen large eggs",
          "buying_price": 2.51,
          "sku": "",
          "hs_code": "0808.01.01",
          "is_inventory_item": true,
          "applicable_tax": {
            "id": "cmac8znbu0005zm0gdy8xxoi6",
            "name": "VAT Exempt",
            "percentage": null,
            "code": null,
            "zimra_tax_id": 1
          },
          "_selling_price": 5.81,
          "_quantity": 1,
          "_discount": 0,
          "_total_excluding_tax": 5.81,
          "_tax": 0,
          "_total_including_tax": 5.81
        }
      ],
      "total": 5.81,
      "discount": 0,
      "payment_information": "Please make all payments to our CBZ Bank Account XXXXXXXXXXX",
      "terms_n_conditions": "This invoice will be considered invalid when the payment due date has lapsed",
      "sending_status": "Do not send",
      "template_preference": {
        "template": 1,
        "color": "primary",
        "table_layout": "Plain"
      },
      "is_paid": false,
      "updated_at": "2025-05-06T10:40:38.185Z",
      "created_at": "2025-05-06T10:40:38.185Z",
      "zimra_receipt": {
        "id": "cmacdp72x0004zmjpchd3veni",
        "device_id": 24455,
        "device_serial_number": "HQAUR8QVG29BBY33",
        "receipt_type": "FISCALINVOICE",
        "receipt_currency": "USD",
        "receipt_counter": 1,
        "receipt_global_no": 4,
        "receipt_date": "2025-05-06T12:40:34",
        "receipt_total": 5.81,
        "receipt_taxes": [
          {
            "taxID": 1,
            "taxAmount": 0,
            "salesAmountWithTax": 5.81
          }
        ],
        "previous_receipt_hash": "",
        "result_used_to_hash": "24455FISCALINVOICEUSD72025-05-06T12:40:345810581",
        "receipt_hash": "oDCrjJ5wjYdt+DjjqEJ6Z9zEtjttpb5OYLlYh9Avsic=",
        "signature": "rsMdb9briDnowH7cVyu67heYdZgVzImYQSCz+tLo4LWhS/+lkGQOoPIHUmsnv+y6PAjKR2HMP9hwKesViGQRf3xeqryzwM2+Yb6QtRh9ZfwRvj7qbM99pbd+111CStGimwrXuWRYhBRJpKbaSi0awD2rlOq4ZIAdM2tHVXb8Zvw+Xc6bZk8KmmY6Wa+RlzpGCP9m2rc3bep+sT5FHLf5CzOkCUtpNvJJBcjEowGSuU6nbe8peRMxX7gVifup7+pwmYnh6oShK4oyIlWvbzYVtdI9H50hlzomTy7EOs9eLoZH1iEXumHejCuI09mGqPjaLTTzpgX7CdVjvNwkJdf04w==",
        "qr_code_url": "https://fdmstest.zimra.co.zw/000002445506052025000000000724F42D4F3579D932",
        "verification_code": "24F4-2D4F-3579-D932",
        "receipt_data": {
          "receipt": {
            "receiptType": "FiscalInvoice",
            "receiptCurrency": "USD",
            "receiptCounter": 1,
            "receiptGlobalNo": 4,
            "receiptDate": "2025-05-06T12:40:34",
            "receiptLinesTaxInclusive": false,
            "receiptLines": [
              {
                "receiptLineType": "Sale",
                "receiptLineNo": 1,
                "receiptLineHSCode": "08080101",
                "receiptLineName": "Eggs",
                "receiptLinePrice": 5.81,
                "receiptLineQuantity": 1,
                "receiptLineTotal": 5.81,
                "taxID": 1
              }
            ],
            "receiptTaxes": [
              {
                "taxID": 1,
                "taxAmount": 0,
                "salesAmountWithTax": 5.81
              }
            ],
            "receiptPayments": [
              {
                "moneyTypeCode": "Cash",
                "paymentAmount": 5.81
              }
            ],
            "receiptTotal": 5.81,
            "receiptPrintForm": "InvoiceA4",
            "receiptDeviceSignature": {
              "hash": "oDCrjJ5wjYdt+DjjqEJ6Z9zEtjttpb5OYLlYh9Avsic=",
              "signature": "rsMdb9briDnowH7cVyu67heYdZgVzImYQSCz+tLo4LWhS/+lkGQOoPIHUmsnv+y6PAjKR2HMP9hwKesViGQRf3xeqryzwM2+Yb6QtRh9ZfwRvj7qbM99pbd+111CStGimwrXuWRYhBRJpKbaSi0awD2rlOq4ZIAdM2tHVXb8Zvw+Xc6bZk8KmmY6Wa+RlzpGCP9m2rc3bep+sT5FHLf5CzOkCUtpNvJJBcjEowGSuU6nbe8peRMxX7gVifup7+pwmYnh6oShK4oyIlWvbzYVtdI9H50hlzomTy7EOs9eLoZH1iEXumHejCuI09mGqPjaLTTzpgX7CdVjvNwkJdf04w=="
            },
            "invoiceNo": "WGYM9GMJ639N"
          }
        },
        "server_response": {
          "receiptID": 5856878,
          "serverDate": "2025-05-06T12:40:37",
          "receiptServerSignature": {
            "certificateThumbprint": "F9B295CA65BA22B94F6D4B27E48D08BF6CD7F7C8",
            "hash": "n40uljhSBpFdAJ2RTDkh1QQ2hpoEQ/vN+pxVjLQQdTk=",
            "signature": "DHzjt+sNDnS86CTY7iCl0IapitZEmpFoNTaY1h/UfXsi95KXLyEHh3Aqu/v40Y5bld8OrCBRph7+Ro91ADe3iJcP1Hn6MeOKDPw9NWqWoSayBlMX/HAfjzKMgV/88W/CGFBGLrAoAU4XsOo2MNOODqtXMHHa0RpaCjgjoPW8gZT5GywQWhkQMwXVF+eNUpb+9uwUL+ZAxwQhXbjm+Wp3K2SEg3dMPmRZuSiYeIWoCmRmrxCj8DRe/UOo6/+kHWRclk4ej90q8kgq6dhxG6R8Y4R0jwB5D/KvB1Qn2RFzLprgW6qS86fuC0l4QDpQsvCpqfQz3mCUwAdf6tdZbb9iKQ=="
          },
          "validationErrors": [],
          "operationID": "0HNBSPOBISK2Q:00000001"
        },
        "validation_errors": [],
        "fiscal_day_no": 2,
        "updated_at": "2025-05-06T10:40:38.185Z",
        "created_at": "2025-05-06T10:40:38.170Z"
      },
      "customer": {
        "id": "cmaccp0vy0000zmksubook8hd",
        "name": "Corner Bakery",
        "contact_person": "John Smith",
        "phone": "0772000001",
        "email": "john@cornerbakery.com",
        "address": "123 Road Drive, City, Country",
        "fax": "02888881",
        "website": "https://example.com",
        "tax_reg_number": "",
        "company_reg_number": "",
        "tin_number": "",
        "vat_number": ""
      }
    }
  ]
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Create a Credit Note
&lt;/h2&gt;

&lt;p&gt;Now the we have created a &lt;strong&gt;ZIMRA Fiscal Invoice&lt;/strong&gt; let now create a credit note. We do this by going to the &lt;a href="https://panier.app/api-documentation#tag/credit-notes/POST/credit-note/create" rel="noopener noreferrer"&gt;Create Credit Note&lt;/a&gt; endpoint and use this payload (Pay close attention to the &lt;code&gt;invoice_id&lt;/code&gt;):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "data": [
    {
      "invoice_id": "cmacdp73c0005zmjpdime2h47",
      "products": [
        {
          "id": "cma5e7aca0000zm1x9aiabiil",
          "quantity": 1
        }
      ]
    }
  ],
  "zimra_fiscalize": true
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You should get the following response:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "created": {
    "id": "cmace14zn0000zmktr4vcujs4",
    "number": "KXI20Y8G4TRV",
    "invoice_id": "cmacdp73c0005zmjpdime2h47",
    "created_by": null,
    "recipients": [],
    "currency": {
      "symbol": "$",
      "name": "US Dollar",
      "symbol_native": "$",
      "decimal_digits": 2,
      "rounding": 0,
      "code": "USD",
      "name_plural": "US dollars",
      "exchange_rate": 1
    },
    "products": [
      {
        "id": "cma5e7aca0000zm1x9aiabiil",
        "name": "Eggs",
        "description": "One dozen large eggs",
        "buying_price": 2.51,
        "sku": "",
        "hs_code": "0808.01.01",
        "is_inventory_item": true,
        "applicable_tax": {
          "id": "cmac8znbu0005zm0gdy8xxoi6",
          "name": "VAT Exempt",
          "percentage": null,
          "code": null,
          "zimra_tax_id": 1
        },
        "_selling_price": 5.81,
        "_credited_quantity": 1,
        "_total_excluding_tax": 5.81,
        "_tax": 0,
        "_total_including_tax": 5.81
      }
    ],
    "total": 5.81,
    "template_preference": {
      "template": 1,
      "color": "primary",
      "table_layout": "Plain"
    },
    "created_at": "2025-05-06T10:49:55.329Z",
    "zimra_receipt": {
      "id": "cmace7eng0000zmmu6uj06lxy",
      "device_id": 24455,
      "device_serial_number": "HQAUR8QVG29BBY33",
      "receipt_type": "CREDITNOTE",
      "receipt_currency": "USD",
      "receipt_counter": 2,
      "receipt_global_no": 5,
      "receipt_date": "2025-05-06T12:54:46",
      "receipt_total": -5.81,
      "receipt_taxes": [
        {
          "taxID": 1,
          "taxAmount": 0,
          "salesAmountWithTax": -5.81
        }
      ],
      "previous_receipt_hash": "oDCrjJ5wjYdt+DjjqEJ6Z9zEtjttpb5OYLlYh9Avsic=",
      "result_used_to_hash": "24455CREDITNOTEUSD82025-05-06T12:54:46-5810-581oDCrjJ5wjYdt+DjjqEJ6Z9zEtjttpb5OYLlYh9Avsic=",
      "receipt_hash": "F7ZV6q3zDkgKK2/d2970TkxtrwyyQwg9AUXeu6b1Pr8=",
      "signature": "f1GUv50l0ttvlunQ++qcRvHYOpKIaasEQxTC5UZRNVq3xdwB5lKkbdffn4NB6/9rwMvVHKJSQ2MhaSJ8U43JiU23NR1U/4vel0NTjfwsespeuuSStN2L4HEkYoEYrTXVM4xm/5GNhHefCX4q8uimoawZvqfAgSL05QvUS6gA2nDP/QUp78KUkOzz52yjAmc5rXHFvbLOLYsvqNgnuQibOaUlfTDfkF3Ywq1cYHawcp3vVgxFC+xR1zEXAvDK2cE/Bnsm8p8GVvmYZEQD/wuTgKvLznm/rDEZBSAwcTsTGHTF6+QMKah42vsZpbk2S4FoDDN9p73ZvsHec5kBdcu96g==",
      "qr_code_url": "https://fdmstest.zimra.co.zw/000002445506052025000000000862174C46EF1A3EB0",
      "verification_code": "6217-4C46-EF1A-3EB0",
      "receipt_data": {
        "receipt": {
          "receiptType": "CreditNote",
          "receiptCurrency": "USD",
          "receiptCounter": 2,
          "receiptGlobalNo": 5,
          "receiptDate": "2025-05-06T12:54:46",
          "receiptLinesTaxInclusive": false,
          "receiptLines": [
            {
              "receiptLineType": "Sale",
              "receiptLineNo": 1,
              "receiptLineHSCode": "08080101",
              "receiptLineName": "Eggs",
              "receiptLinePrice": -5.81,
              "receiptLineQuantity": 1,
              "receiptLineTotal": -5.81,
              "taxID": 1
            }
          ],
          "receiptTaxes": [
            {
              "taxID": 1,
              "taxAmount": 0,
              "salesAmountWithTax": -5.81
            }
          ],
          "receiptPayments": [
            {
              "moneyTypeCode": "Cash",
              "paymentAmount": -5.81
            }
          ],
          "receiptTotal": -5.81,
          "receiptPrintForm": "InvoiceA4",
          "receiptDeviceSignature": {
            "hash": "F7ZV6q3zDkgKK2/d2970TkxtrwyyQwg9AUXeu6b1Pr8=",
            "signature": "f1GUv50l0ttvlunQ++qcRvHYOpKIaasEQxTC5UZRNVq3xdwB5lKkbdffn4NB6/9rwMvVHKJSQ2MhaSJ8U43JiU23NR1U/4vel0NTjfwsespeuuSStN2L4HEkYoEYrTXVM4xm/5GNhHefCX4q8uimoawZvqfAgSL05QvUS6gA2nDP/QUp78KUkOzz52yjAmc5rXHFvbLOLYsvqNgnuQibOaUlfTDfkF3Ywq1cYHawcp3vVgxFC+xR1zEXAvDK2cE/Bnsm8p8GVvmYZEQD/wuTgKvLznm/rDEZBSAwcTsTGHTF6+QMKah42vsZpbk2S4FoDDN9p73ZvsHec5kBdcu96g=="
          },
          "invoiceNo": "MMKAJ3ZXM8LJ",
          "creditDebitNote": {
            "receiptID": 5856878,
            "deviceID": 24455,
            "receiptGlobalNo": 5,
            "fiscalDayNo": 2
          },
          "receiptNotes": "This is a Credit Note for Fiscal Invoice No. MMKAJ3ZXM8LJ"
        }
      },
      "server_response": {
        "receiptID": 5856906,
        "serverDate": "2025-05-06T12:54:47",
        "receiptServerSignature": {
          "certificateThumbprint": "F9B295CA65BA22B94F6D4B27E48D08BF6CD7F7C8",
          "hash": "PLOzmw3mkeODBlAd3GR8gUHMZmcfRTvz73ON5jZTpp4=",
          "signature": "YsI0+mo0mjSbZfVkiGkCJ2SDjXbiIqdSDk3+sYgxjshMledi3BZWiEk8SSm4d3iyH3cHoEP3gJIv39obh7x2SrGztWNHbFbCNQ34k46DI3niGBiuxyXkn9MhYJAWvY5UcMqBrOKIcLQ5x8LL/DjTJbmPAS5ts4cDuLRFjn7SvkEISzJ638GFCWhe2TyKfniS12JS3jYW8NpHojt4U5bgHrgaXhhp09NV+7Gvi9GISVFyMfLo6h43MDdQdnSx9SpzoUDjUfnXpYi7hs8VNkYrJbh+R4fnRYjh6syr3wl5GF8Qz/GbTHCzgPeTI6J3flUgZ7qK5sQxooHsUumrCFtGwg=="
        },
        "validationErrors": [],
        "operationID": "0HNBSPOBISO8M:00000001"
      },
      "validation_errors": [],
      "fiscal_day_no": 2,
      "updated_at": "2025-05-06T10:54:47.801Z",
      "created_at": "2025-05-06T10:54:47.788Z"
    },
    "customer": {
      "id": "cmaccp0vy0000zmksubook8hd",
      "name": "Corner Bakery",
      "contact_person": "John Smith",
      "phone": "0772000001",
      "email": "john@cornerbakery.com",
      "address": "123 Road Drive, City, Country",
      "fax": "02888881",
      "website": "https://example.com",
      "tax_reg_number": "",
      "company_reg_number": "",
      "tin_number": "",
      "vat_number": ""
    }
  }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Create a Debit Note
&lt;/h2&gt;

&lt;p&gt;To create a debit note we need to go to the &lt;a href="https://panier.app/api-documentation#tag/debit-notes/POST/debit-note/create" rel="noopener noreferrer"&gt;Create Debit Note&lt;/a&gt; endpoint and use this payload:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "data": [
    {
      "invoice_id": "cmacdp73c0005zmjpdime2h47",
      "products": [
        {
          "id": "cma5e7aca0000zm1x9aiabiil",
          "quantity": 1
        }
      ]
    }
  ],
  "zimra_fiscalize": true
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You should get the following response:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "created": [
    {
      "id": "cmacels1a0001zmly40q7xwxn",
      "number": "VFPS372JJPWL",
      "invoice_id": "cmacdp73c0005zmjpdime2h47",
      "recipients": [],
      "currency": {
        "symbol": "$",
        "name": "US Dollar",
        "symbol_native": "$",
        "decimal_digits": 2,
        "rounding": 0,
        "code": "USD",
        "name_plural": "US dollars",
        "exchange_rate": 1
      },
      "products": [
        {
          "id": "cma5e7aca0000zm1x9aiabiil",
          "name": "Eggs",
          "description": "One dozen large eggs",
          "buying_price": 2.51,
          "sku": "",
          "hs_code": "0808.01.01",
          "is_inventory_item": true,
          "applicable_tax": {
            "id": "cmac8znbu0005zm0gdy8xxoi6",
            "name": "VAT Exempt",
            "percentage": null,
            "code": null,
            "zimra_tax_id": 1
          },
          "_selling_price": 5.81,
          "_debited_quantity": 1,
          "_total_excluding_tax": 5.81,
          "_tax": 0,
          "_total_including_tax": 5.81
        }
      ],
      "total": 5.81,
      "template_preference": {
        "template": 7,
        "color": "primary",
        "table_layout": "Plain"
      },
      "created_at": "2025-05-06T11:05:58.319Z",
      "zimra_receipt": {
        "id": "cmacels0s0000zmly29jdl0sb",
        "device_id": 24455,
        "device_serial_number": "HQAUR8QVG29BBY33",
        "receipt_type": "DEBITNOTE",
        "receipt_currency": "USD",
        "receipt_counter": 3,
        "receipt_global_no": 9,
        "receipt_date": "2025-05-06T13:05:57",
        "receipt_total": 5.81,
        "receipt_taxes": [
          {
            "taxID": 1,
            "taxAmount": 0,
            "salesAmountWithTax": 5.81
          }
        ],
        "previous_receipt_hash": "F7ZV6q3zDkgKK2/d2970TkxtrwyyQwg9AUXeu6b1Pr8=",
        "result_used_to_hash": "24455DEBITNOTEUSD92025-05-06T13:05:575810581F7ZV6q3zDkgKK2/d2970TkxtrwyyQwg9AUXeu6b1Pr8=",
        "receipt_hash": "IOAf+DHOzM7J0aXRdkz30YGImwmBBARWFbQhPJKZ/UY=",
        "signature": "NKR4qaZcvwB9D0so9zglc905UdWHR3yPbqWs5UYHNiwb0xKkVyoutMqT1vfx5DLzYl67BmegX7TQfoMz7p8b//x5abDRCP6+hcOuDQbHV6UMgPhMWlcMpLpNTgPhIH8/vOCIWy80IMw9Ae20DbejQ+ARhc2bFGFiwVxG7DFnBD7HUFxqcLlLkbnhMYWipOG/cf8TYjz6nEGWRpbGNyIuqs+ksOMye2jGIL3qezpAuf6MdXtbqiEhff1moEin79TpPWRvUO8ThL/yw2YqO6x6r0NahlycpY6xzVBGa7eXrI3tKWAh56HyjP2AY0pygVrFjqXsVinY3wArZViZKalc/g==",
        "qr_code_url": "https://fdmstest.zimra.co.zw/000002445506052025000000000954386E38A698E4DB",
        "verification_code": "5438-6E38-A698-E4DB",
        "receipt_data": {
          "receipt": {
            "receiptType": "DebitNote",
            "receiptCurrency": "USD",
            "receiptCounter": 3,
            "receiptGlobalNo": 9,
            "receiptDate": "2025-05-06T13:05:57",
            "receiptLinesTaxInclusive": false,
            "receiptLines": [
              {
                "receiptLineType": "Sale",
                "receiptLineNo": 1,
                "receiptLineHSCode": "08080101",
                "receiptLineName": "Eggs",
                "receiptLinePrice": 5.81,
                "receiptLineQuantity": 1,
                "receiptLineTotal": 5.81,
                "taxID": 1
              }
            ],
            "receiptTaxes": [
              {
                "taxID": 1,
                "taxAmount": 0,
                "salesAmountWithTax": 5.81
              }
            ],
            "receiptPayments": [
              {
                "moneyTypeCode": "Cash",
                "paymentAmount": 5.81
              }
            ],
            "receiptTotal": 5.81,
            "receiptPrintForm": "InvoiceA4",
            "receiptDeviceSignature": {
              "hash": "IOAf+DHOzM7J0aXRdkz30YGImwmBBARWFbQhPJKZ/UY=",
              "signature": "NKR4qaZcvwB9D0so9zglc905UdWHR3yPbqWs5UYHNiwb0xKkVyoutMqT1vfx5DLzYl67BmegX7TQfoMz7p8b//x5abDRCP6+hcOuDQbHV6UMgPhMWlcMpLpNTgPhIH8/vOCIWy80IMw9Ae20DbejQ+ARhc2bFGFiwVxG7DFnBD7HUFxqcLlLkbnhMYWipOG/cf8TYjz6nEGWRpbGNyIuqs+ksOMye2jGIL3qezpAuf6MdXtbqiEhff1moEin79TpPWRvUO8ThL/yw2YqO6x6r0NahlycpY6xzVBGa7eXrI3tKWAh56HyjP2AY0pygVrFjqXsVinY3wArZViZKalc/g=="
            },
            "invoiceNo": "VFPS372JJPWL",
            "creditDebitNote": {
              "receiptID": 5856878,
              "deviceID": 24455,
              "receiptGlobalNo": 8,
              "fiscalDayNo": 2
            },
            "receiptNotes": "This is a Debit Note for Fiscal Invoice No. VFPS372JJPWL"
          }
        },
        "server_response": {
          "receiptID": 5856938,
          "serverDate": "2025-05-06T13:05:58",
          "receiptServerSignature": {
            "certificateThumbprint": "F9B295CA65BA22B94F6D4B27E48D08BF6CD7F7C8",
            "hash": "3gHhVyHCPRBILq7JwGZd5rXFA8VQUunQBdqUvMxmZFA=",
            "signature": "cFCHQvgcVcTxamUTqING1q7MJgnqZdf4WbtRagCSB2ISG7Ezv3Gnd6hDb7RdzL+C5/6uAZgNjf+XnwStde4zZzlZ9PBvRyvPhCQp3qb84FriSGpn+LQanrh9KLuQybDwPDIlWj42GXEv+PN0IqVKZnEUkNkWJiVMeIV8pZd/SnLgyhd8FR5uXt0RT9ofE7HdfYdNPk9jpXRp+KNSgu1riEREneTuwyGEW1wokE8H6waiA0i63HEZ5Qkab+v5uB/gBt1WmNHZvSu0a6b8lWKysWNWNLPXMo/Jco61QKnoxwRTFSPL0ZTJvfq7HvqPmRKguYuWki3K0Cvdl0f2mLs+KQ=="
          },
          "validationErrors": [],
          "operationID": "0HNBSPOBISSDG:00000001"
        },
        "validation_errors": [],
        "fiscal_day_no": 2,
        "updated_at": "2025-05-06T11:05:58.319Z",
        "created_at": "2025-05-06T11:05:58.300Z"
      },
      "customer": {
        "id": "cmaccp0vy0000zmksubook8hd",
        "name": "Corner Bakery",
        "contact_person": "John Smith",
        "phone": "0772000001",
        "email": "john@cornerbakery.com",
        "address": "123 Road Drive, City, Country",
        "fax": "02888881",
        "website": "https://example.com",
        "tax_reg_number": "",
        "company_reg_number": "",
        "tin_number": "",
        "vat_number": ""
      }
    }
  ]
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Fiscalizing an existing Invoice, Credit Note or Debit Note
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://panier.app" rel="noopener noreferrer"&gt;Panier&lt;/a&gt; allows you to create an invoice, credit note or debit note then fiscalize it later. This can be done by using the &lt;a href="https://panier.app/api-documentation#tag/zimra-fiscalisation/POST/zimra/fiscalize" rel="noopener noreferrer"&gt;Fiscalize&lt;/a&gt; endpoint.&lt;/p&gt;

&lt;h2&gt;
  
  
  Closing Remarks
&lt;/h2&gt;

&lt;p&gt;This API is based on the official &lt;a href="https://www.zimra.co.zw/downloads/category/9-domestic-taxes?download=3807:fiscalisation-api-documentation" rel="noopener noreferrer"&gt;ZIMRA Fiscal Device Gateway API Specs v7.2&lt;/a&gt; and so we recommend that you get acquainted with it in order to get the most out of this API.&lt;/p&gt;

&lt;p&gt;If you have any questions. Feel free to ask us in the comments sections of this article or email us directly on &lt;a href="mailto:support@panier.app"&gt;support@panier.app&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>zimra</category>
      <category>fiscalisation</category>
      <category>api</category>
      <category>documentation</category>
    </item>
    <item>
      <title>Vue 3: Extending entire CSS/SCSS files to the children of a scoped parent component using :deep()</title>
      <dc:creator>Anthony Jekanyika</dc:creator>
      <pubDate>Sat, 18 May 2024 10:32:27 +0000</pubDate>
      <link>https://dev.to/jeky1950/vue-3-extending-entire-cssscss-files-to-the-children-of-a-scoped-parent-component-using-deep-3dgo</link>
      <guid>https://dev.to/jeky1950/vue-3-extending-entire-cssscss-files-to-the-children-of-a-scoped-parent-component-using-deep-3dgo</guid>
      <description>&lt;p&gt;Lets say for some reason you have now come to the realisation that you know have to isolate the CSS in a specific component from rest of the your project. Then, like the great Vue developer that you are you confidently scroll to your component's opening style tag and add the &lt;code&gt;scoped&lt;/code&gt; attribute then call it a day. You check the project to confirm that your fix worked but you forgot that your component has its own child components which no longer inherit the CSS from the parent component because its now &lt;code&gt;scoped&lt;/code&gt;. How do we fix this?&lt;/p&gt;

&lt;p&gt;Enter the &lt;code&gt;:deep()&lt;/code&gt; pseudo-class&lt;/p&gt;

&lt;p&gt;The deep selector allows us to share CSS classes between a scoped parent and its child components. Today I am going to show you how to do it with entire CSS/SCSS files.&lt;/p&gt;

&lt;p&gt;First install SASS into your project with the following code in your terminal &lt;code&gt;npm i -D sass sass-loader&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Here is an example of how a parent component will extend its imported CSS files to its child components:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;template&amp;gt;
   &amp;lt;Child-1 /&amp;gt;
   &amp;lt;Child-2 /&amp;gt;
   &amp;lt;Child-2 /&amp;gt;
&amp;lt;/template&amp;gt;

&amp;lt;style lang="scss" scoped&amp;gt;
  :deep() {
    @import "./css/style-1";
    @import "./css/style-2";
  }
&amp;lt;/style&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Important Note. Remember in SASS when importing a CSS/SCSS file you don't add the &lt;code&gt;.css&lt;/code&gt;, &lt;code&gt;.scss&lt;/code&gt; or &lt;code&gt;.sass&lt;/code&gt; extension.&lt;/p&gt;

</description>
      <category>vue</category>
      <category>javascript</category>
      <category>css</category>
      <category>nuxt</category>
    </item>
    <item>
      <title>Using performance.now() instead of Date.now() to prevent timestamp collisions</title>
      <dc:creator>Anthony Jekanyika</dc:creator>
      <pubDate>Fri, 11 Aug 2023 09:45:54 +0000</pubDate>
      <link>https://dev.to/jeky1950/using-performancenow-instead-of-datenow-to-prevent-timestamp-collisions-2819</link>
      <guid>https://dev.to/jeky1950/using-performancenow-instead-of-datenow-to-prevent-timestamp-collisions-2819</guid>
      <description>&lt;p&gt;Say you have an array of data entries and you need to attach a unique identifier to each entry. The popular approach would be use Date.now() as a unique identifier. The problem with this approach is that there is a chance of two or more entries having the same identifier. This is because the timestamps returned by Date.now() have a resolution of one-millisecond. Thus it is highly probably that you could have collisions between the unique identifiers of the data entries. Let us consider the following example that loops 5 times, printing out a Date.now() timestamp every loop. Let's open up our command prompt and let's run the following code in node (to enter node just type the word node in your command prompt assuming that you already have it in your environment).&lt;/p&gt;

&lt;p&gt;CODE:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;for (let index = 0; index &amp;lt; 5; index++) {
    console.log(Date.now())
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;OUTPUT:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1691741535783
1691741535784
1691741535785 &amp;lt; Identical
1691741535785 &amp;lt; Identical
1691741535785 &amp;lt; Identical
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As you can see in the output that the last three outputs were the same, so if you where using these as unique identifiers you would have collisions. &lt;/p&gt;

&lt;p&gt;Enter performance.now()&lt;/p&gt;

&lt;p&gt;Unlike Date.now() the timestamps returned by performance.now() represent floating point numbers with a resolution of up to 5 microsecond rather than the one-millisecond resolution of Date.now() timestamps. Also performance.now() timestamps always increase at a constant rate being independent of the system clock which can be manually adjusted or susceptible to change by software such as the Network Time Protocol. Lets see the same example that we did above but this time with performance.now().&lt;/p&gt;

&lt;p&gt;CODE:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;for (let index = 0; index &amp;lt; 5; index++) {
    console.log(performance.now())
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;OUTPUT:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;7908.96749997139
7910.144699931145
7910.284399986267
7910.412899971008
7910.533899903297
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Let's test performance.now() further by logging two timestamps at the same time.&lt;/p&gt;

&lt;p&gt;CODE:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;console.log(`${ performance.now() } ${ performance.now() }`)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;OUTPUT:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;773756.6698999405 773756.6811999083
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As you can see that even when you log it at the same time the timestamps are different thus there is no chance of collisions occurring. I highly recommend that you take a look at the MDN docs for performance.now() if you want to read more about it (&lt;a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance/now"&gt;https://developer.mozilla.org/en-US/docs/Web/API/Performance/now&lt;/a&gt;).&lt;/p&gt;

</description>
      <category>timestamps</category>
      <category>performance</category>
      <category>javascript</category>
    </item>
  </channel>
</rss>
