<span class="payment-session">Payment Session Id:</span>  <input type="text" placeholder="payment_session" id="paymentSessionId" value="session_XaAxBAAZLPQa1-ppTvfwfCRh4nd4rpsHm99RBWBiN79fim_42A81DX94ADJ2LoQUyp4-Umz4DD-xDoY4C_55aj6f0M7Y-DuBG_RZ0meTYcpN" class="inputText">
<p>
  <p class="payment-session">Choose components</p> 
  <input class="drops" type="checkbox" value="order-details" checked>
  Order Details
  </input>
  <input class="drops" type="checkbox" value="card" checked>
  Card
  </input>
  <input class="drops" type="checkbox" value="upi">
  UPI
  </input>
  <input class="drops" type="checkbox" value="app">
  Wallets
  </input>
  <input class="drops" type="checkbox" value="netbanking">
  Netbanking
  </input>
<input class="drops" type="checkbox" value="paylater">
  Paylater
  </input>
<input class="drops" type="checkbox" value="credicardemi">
  Credit Card EMI
  </input>
<input class="drops" type="checkbox" value="cardlessemi">
  Cardless EMI
  </input>
</p>
<div class="style-container" style="display:none">
<p class="order-token">Style your Dropin</p> 
  <input class="style-dropin" type="text" 
   id="backgroundColor"      placeholder="Background Color"></input>
<input class="style-dropin" type="text"     id="theme" placeholder="Theme">
<input class="style-dropin" type="text"  id="color" placeholder="Color">
<input class="style-dropin" type="text"  id="errorColor" placeholder="Error Color">
<input class="style-dropin" type="text" id="fontSize" placeholder="Font Size">
<input class="style-dropin" type="text" id="fontFamily" placeholder="Font Family">
</div>
<button class="btn-render" onclick=render()>Render</button>
</div>
<hr>
<div class="dropin-parent" id="drop_in_container">
  Your drop will come here
</div>
body {
  text-align: center;
  font-family: 'Inter';
}
.dropin-parent{
  max-width:420px;
  margin: auto;
  margin-top:20px;
}

.order-token {
  font-weight: 600;
}

.inputText {
  width: 200px;
}
.btn-render {
      border-radius: 6px;
    background-color: rgb(105, 51, 211);
    color: rgb(255, 255, 255);
  border: none;
  font-size: 14px;
   padding: 11px 16px;
}
input {
  padding: 0.67857143em 1em;
  border-radius: 6px;
  border: 1px solid #979797;
}
input:focus {
  outline-color: rgb(105, 51, 211);
}

.style-dropin {
  outline: 0;
  border-width: 0 0 1px;
  border-radius: 0px;
}

.style-dropin:focus {
  border-color: rgb(105, 51, 211);
}

.style-container {
  margin-bottom: 8px;
}
const cbs = function (data) {
  if (data.order && data.order.status == "PAID") {
    alert("order is paid. Call api to verify");
  } 
};
const cbf = function (data) {
  // alert(data.order.errorText)
}
function render() {
  let paymentSessionId = document.getElementById("paymentSessionId").value;
  let parent = document.getElementById("drop_in_container");
  if (paymentSessionId == "") {
    alert("No token specified");
    return
  }
  parent.innerHTML = "";

  const cashfree = new Cashfree(paymentSessionId);
  var checkedValue = [];
  var inputElements = document.getElementsByClassName("drops");
  for (var i = 0; inputElements[i]; ++i) {
    if (inputElements[i].checked) {
      checkedValue.push(inputElements[i].value);
      
    }
  }
  if (checkedValue.length == 0) {
    alert("No drop in specified");
    return;
  }
  var styleElements = document.getElementsByClassName("style-dropin");
  let style = {};
  for(var i=0;i<styleElements.length;i++) {
  if(styleElements[i].value) {
    style[styleElements[i].id] = styleElements[i].value;
  } 
  }
   
  cashfree.drop(parent, {
    onSuccess: cbs,
    onFailure: cbf,
    components: checkedValue,
    style: style,
  });
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://sdk.cashfree.com/js/ui/2.0.0/cashfree.sandbox.js