MyCover AI
Libraries and SDKs

Vue.js

Our Vue.js SDK lets you seamlessly embed insurance in your Vue 3 project.

Installation

Package Manager

npm install @mycoverai/mca-vue-sdk

CDN

<script src="https://unpkg.com/@mycoverai/mca-vue-sdk/dist/umd.js"></script>

Usage

Plugin Registration

import { createApp } from 'vue';
import mca from "@mycoverai/mca-vue-sdk";
import App from './App.vue';

const app = createApp(App);
app.use(mca);
app.mount('#app');

Component Usage

<template>
  <mca 
    action="purchase"
    pk="MCAPUBK_...your_public_key..."
    payment-option="gateway"
    :pid="['<product-id>']"
    :on-close="handleClose" 
    :callback="handleSuccess" 
  />
</template>

<script setup>
function handleClose(close_url) {
  console.log("SDK closed", close_url);
}

function handleSuccess(success_url, data) {
  console.log("Operation successful", success_url, data);
}
</script>

Configuration

The table below contains the available config parameters and their descriptions.

ParameterTypeRequiredDescription
pkstringYesYour unique Mycover.ai public key.
actionstringYesThe action you want to perform. Options: purchase, managePolicy, renewal, claim.
pidstring | string[]Yes*The product ID or an array of product IDs. Required for purchase and claim actions.
payment_optionstringYes*How the customer will pay. Options: gateway or wallet. Required for purchase and renewal actions.
referencestringNoA unique payment reference. Required if using the wallet payment option.
callbackfunctionNoA function called upon successful operation (Purchase, Claim, Renewal, etc). Receives success_url (string) and data (object).
onClosefunctionNoA function called when the customer cancels or closes the SDK. Receives close_url (string).
policy_idstringNoThe ID of an existing policy (used for policy management).
claim_idstringNoThe ID of an existing claim (used to resume/track a claim).