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 SDK package
import { McaSdk } from '@mycoverai/mca-react-sdk'
<McaSdk
pk="MCAPUBK_ENV|your_public_key"
>
Buy Insurance
</McaSdk>
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:
<McaSdk
pk="MCAPUBK_ENV|your_public_key"
>
<button className="w-[300px] h-[56px] bg-green-700 text-white font-medium rounded-md">
Buy Insurance
</button>
</McaSdk>
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
The table below contains the available component props and their descriptions.
| Parameter | Type | Required | Description |
|---|---|---|---|
pk | string | Yes | Your unique Mycover.ai public key. |
action | string | Yes | The action you want to perform. Options: purchase, managePolicy, renewal, claim. |
pid | string | string[] | Yes* | The product ID or an array of product IDs. Required for purchase and claim actions. |
paymentOption | string | Yes* | How the customer will pay. Options: gateway or wallet. Required for purchase and renewal actions. |
reference | string | No | A unique payment reference. Required if using the wallet payment option. |
callback | function | No | A function called upon successful operation (Purchase, Claim, Renewal, etc). Receives success_url (string) and data (object). |
onClose | function | No | A function called when the customer cancels or closes the SDK. Receives close_url (string). |
policyId | string | No | The ID of an existing policy (used for policy management). |
claimId | string | No | The ID of an existing claim (used to resume/track a claim). |