search

Javascript Popup Widget

hashtag
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:

Next, Get your partner public key from your partner sandbox dashboard at https://partner.sandbox.casava.coarrow-up-right

Now setup your button to call the Casava widget. CasavaCheckout() with your partner public key and other custom parameters

hashtag
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

PreviousPayment Notifications

Last updated