Usage
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>casava widget Example</title>
<script src="https://widget.sandbox.casava.co/v1/inline.js"></script>
<style>
.paynow{
background: red;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
border: none;
padding: 10px;
cursor: pointer;
margin-top: 20px;
width: 400px;
background: #FFFFFF;
border: 1px solid #E0E6ED;
}
.fpctr{
background: #FFFFFF;
border: 1px solid #E0E6ED;
border-radius: 8px;
width: 400px;
height: 44px;
margin-bottom: 10px;
padding: 10px;
}
.dcenter{
width: 100%;
margin: 10px auto;
flex-direction: column;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<h1>Test widget payload</h1>
<div class="dcenter">
<input placeholder="Enter Name" class="fpctr name" type="text">
<input placeholder="Enter Email" class="fpctr email" type="text">
<input placeholder="Enter Phone number" class="fpctr phone" type="text">
<input placeholder="Enter Salary" class="fpctr salary" type="text">
<input placeholder="Enter Company Name" class="fpctr companyName" type="text">
<input placeholder="Enter Company Address" class="fpctr companyAddress" type="text">
<input placeholder="Enter Partner Key" class="fpctr key" type="text">
<button class="paynow">Buy Insurance</button>
</div>
<script>
const myButton = document.querySelector(".paynow")
myButton.addEventListener("click", ()=>{
const name = document.querySelector(".name").value
const email = document.querySelector(".email").value
const phone = document.querySelector(".phone").value
const salary = document.querySelector(".salary").value
const companyName = document.querySelector(".companyName").value
const companyAddress = document.querySelector(".companyAddress").value
const key = document.querySelector(".key").value
CasavaCheckout({
name: name,
email: email,
phone:phone,
salary: salary,
companyName: companyName,
companyAddress: companyAddress,
key: key,
onClose: (data)=>{
console.log(data);
},
callback: (data)=>{
console.log(data);
},
onError: (data)=>{
console.log(data);
}
})
})
</script>
</body>
</html>
Key things to point out on this code:
First, you include the Casava Inline library with a script tag:
<script src="https://widget.sandbox.casava.co/v1/inline.js"></script>
Next, Get your partner public key from your partner sandbox dashboard at https://partner.sandbox.casava.co
Now setup your button to call the Casava widget. CasavaCheckout() with your partner public key and other custom parameters
Calling CasavaCheckout()
The key is your Casava public key. This is the only compulsory parameter when calling this checkout function.
The name is your customer name. This can also be first name and last name separated with space in this format John Doe
The email is your customer email
The phone is your customer phone number
The salary is your customer salary
The companyName is your customer company name
The companyAddress is your customer company address
The onClose is a method that is called when the modal is closed
The callback is a method that is called once the customer buys a policy
The onError is a method that is called once an error occurs
