This module registers with a Vue app the TikiReceipt component and a singleton instance of the TikiService. Define a TikiOptions.Options object to specify licensing keys, styling, and content overrides.

This library is available for both Vue 2 (2.7.14) and Vue 3 (>=3.0.0).

• For Vue 3 use the package: @mytiki/receipt-capacitor.
• For Vue 2 use the package @mytiki/receipt-capacitor-vue2.

Example

Vue >=3.0.0 Registration

import { createApp } from "vue";
import App from "@/app.vue";
import Tiki from "@mytiki/receipt-capacitor";

createApp(App)
 .use(Tiki, {
   company: {
     name: "Company Inc.",
     jurisdiction: "Tennessee, USA",
     privacy: "https://your-co.com/privacy",
     terms: "https://your-co.com/terms",
   },
   key: {
     publishingId: "YOUR TIKI PUBLISHING ID",
     android: "YOUR MICROBLINK ANDROID LICENSE KEY",
     ios: "YOUR MICROBLINK IOS LICENSE KEY",
     product: "YOUR MICROBLINK PRODUCT INTELLIGENCE KEY",
   }
 })
 .mount("#app");
Copy

Example

Vue >=2.7.14 Registration

import { createApp } from "vue";
import App from "@/app.vue";
import Tiki from "@mytiki/receipt-capacitor-vue2";

Vue.use(Tiki, {
   company: {
     name: "Company Inc.",
     jurisdiction: "Tennessee, USA",
     privacy: "https://your-co.com/privacy",
     terms: "https://your-co.com/terms",
   },
   key: {
     publishingId: "YOUR TIKI PUBLISHING ID",
     android: "YOUR MICROBLINK ANDROID LICENSE KEY",
     ios: "YOUR MICROBLINK IOS LICENSE KEY",
     product: "YOUR MICROBLINK PRODUCT INTELLIGENCE KEY",
   }
 })

new Vue({ render: (h) => h(App) }).$mount("#app");
Copy

Next, add the stylesheet for the component to your primary stylesheet (e.g. main.css) Example: For Vue >=3.0.0

@import "@mytiki/receipt-capacitor/dist/receipt-capacitor.css";
Copy

Example: For Vue 2.7.14

@import "@mytiki/receipt-capacitor-vue2/dist/receipt-capacitor.css";
Copy

Once the TikiService is initialized, add the TikiReceipt component to your template and set the html boolean property present to display the UI (e.g. :present="true").

NOTE: present implements a two-way binding and for most use cases we recommend using a named (Vue 3) v-model instead of a standard property binding. This ensures the Ref stays in-sync with the UI state —the user can close the popup at anytime.

Example

For Vue >=3.0.0:

<script setup lang="ts">
    import { inject, ref } from "vue";
    import { TikiReceipt, type TikiService } from "@mytiki/receipt-capacitor";

    const tiki: TikiService | undefined = inject("Tiki");
    tiki?.initialize("USER ID")

    const present = ref(false);
</script>

<template>
    <div>
       <button @click="present = !present">present</button>
       <tiki-receipt v-model:present="present" />
    </div>
</template>
Copy

Example

For Vue >=2.7.14:

<script setup lang="ts">
    import { inject, ref } from "vue";
    import { TikiReceipt, type TikiService } from "@mytiki/receipt-capacitor";

    const tiki: TikiService | undefined = inject("Tiki");
    tiki?.initialize("USER ID")

    const present = ref(false);
</script>

<template>
    <div>
       <button @click="present = !present">present</button>
       <tiki-receipt :present="present" @update:present="(val) => (present = val)"/>
    </div>
</template>
Copy