React.js
Installation
Package Manager
npm install @mycoverai/mca-react-sdk
pnpm add @mycoverai/mca-react-sdk
yarn add @mycoverai/mca-react-sdk
bun add @mycoverai/mca-react-sdk
CDN
<script src="https://unpkg.com/@mycoverai/mca-react-sdk/dist/umd.js"></script>
Usage
Import in your template and setup your business configuration by supplying your public key. If product_id is not provided or is an empty array, the SDK will display a list of insurance products for the customer to choose from. You can supply an array of strings, where each string represents an insurance product's id, for the user to select from.
//import package
import { Mca } from '@mycoverai/mca-react-sdk'
<Mca
pk="MCAPUBK_TEST|1acf339a-d36f-47e7-8e1b-fd0b86b61b0d"
>
Buy Insurance
</Mca>
Styling
The Mca component is flexible and lets you add any element as children or parent. To style your CTA, see this example using TailwindCSS:
<Mca
pk="MCAPUBK_TEST|1acf339a-d36f-47e7-8e1b-fd0b86b61b0d"
>
<button className="w-[300px] h-[56px] bg-green-700 text-white font-medium rounded-md">
Buy Insurance
</button>
</Mca>
Next.js
By default, Next uses universal (client-side + server-side) rendering to render your application. Client rendering is opt-in, meaning you have to explicitly decide what components React should render on the client. If you attempt to render the Mca component without using the "use client" directive, it will result in an error. See documentation for more information.
Component props
| Parameter | Description | Type | Required | Default |
|---|---|---|---|---|
| pid | Product's uuid. If pid is empty or not provided, the SDK displays a list of actions that the customer can take. | array | No | [] |
| pk | Your unique Mycover.ai public key | string | Yes | - |
| paymentOption | Set to 'wallet' or 'gateway' to define default payment option | gateway | wallet | Yes | gateway |
| callback | A function to call after the user has completed a purchase, claim, or inspection | function | No | - |
| onClose | A function to call after the user closes without completing a purchase, activation or inspection | function | No | - |
| action | Sets what action is to be taken on the initialization of the SDK. | purchase | inspection | claim | inspectionAsService | claimAsService | Yes | purchase |
| landingUrls | Supply landing page urls if you want your users to be re-routed to your custom web page after completing a purchase or claim. It takes in a maximum of two urls. The first url is called after a purchase. The second url is called after a claim. If you don't specify a url, your users will be redirected to Mycover.ai by default. | array | No | - |
interface Config {
pid?: Array<String>
pk: string,
callback?: () => void,
onClose?: () => void,
landingUrls?: string[];
}