Skip to main content
There are four card components as listed below:

​
cardNumber

A component to accept card number. 
const cardNumber = TBDropin.create("tb_cardNumber", {
  placeholder: "Enter card number",
});
Returned Value cardNumber Card Number Object 
{
  element: "tb_cardNumber",
  value: {
    brand: null,
    cvvLength: 3
  },
  isValid: false,
  error: null,
  componentUrl: "https://dropin.transactbridge.com/cardNumber"
}
FieldType
brandstring
cvvLengthstring
Code Snippet for cardNumer component 
await TBDropin.init({
  mode: "sandbox", //  sandbox mode or Production mode
  publishKey: "", // your publish key goes here
  popupConfig: popupConfigStyle,
});
cardComp = TBDropin.create("tb_cardNumber", {
  placeholder: "Enter Card Number",
  styles: inputStyle,
  frameStyle: frameStyle,
  icon: iconConfig,
  fonts,
});
cardComp.mount(`#cardNumber${type.toUpperCase()}`);

cardComp.on("change", (data) => console.log("cardNumber", data));

​
cardHolder

A component to accept card holder’s name. You can pass values to a component using options cashfree.create(‘componentName’, options) 
const cardHolder = TBDropin.create("tb_cardHolder", {
  placeholder: "Card holder name",
});
Returned Value cardHolder Card Holder Object 
{
  element: "tb_cardHolder",
  value: {
    cardHolder: "Test User"
  },
  isValid: true,
  error: null
}
FieldType
cardHolderstring
Code Snippet for cardHolder component 
await TBDropin.init({
  mode: "sandbox", //  sandbox mode or Production mode
  publishKey: "", // your publish key goes here
  popupConfig: popupConfigStyle,
});
cardHolderComp = TBDropin.create("tb_cardHolder", {
  placeholder: "Enter Card Holder Name",
  styles: inputStyle,
  frameStyle: frameStyle,
  fonts,
});
cardHolderComp.mount(`#cardHolder${type.toUpperCase()}`);

cardHolderComp.on("change", (data) => console.log("cardHolder", data));

​
cardExp

A component to accept card expiry. This component does not accept any parameters. 
const cardExp = TBDropin.create("tb_cardExp");
Returned Value cardExp Card Expirey Object 
{
  element: "tb_cardExp",
  value: {
    cardExp: ""
  },
  isValid: false,
  error: {
    message: "INCOMPLETE_EXP",
    code: "INCOMPLETE_EXP"
  },
  componentUrl: "https://dropin.transactbridge.com/cardExp"
}
FieldType
cardExpstring
Code Snippet for cardHolder component 
await TBDropin.init({
  mode: "sandbox", //  sandbox mode or Production mode
  publishKey: "", // your publish key goes here
  popupConfig: popupConfigStyle,
});
cardCvvComp = TBDropin.create("tb_cardCvv", {
  styles: inputStyle,
  frameStyle: frameStyle,
  fonts,
});
cardCvvComp.mount(`#cardCvv${type.toUpperCase()}`);

cardCvvComp.on("change", (data) => console.log("cardCvv", data));

​
cardCvv

A component to accept card expiry. This component does not accept any parameters. 
const cardCvv = TBDropin.create("tb_cardCvv");
Returned Value cardCvv Card CVV Object 
{
  element: "tb_cardCvv",
  value: {
    cardCvv: ""
  },
  isValid: false,
  error: {
    message: "INVALID_CVV_LENGTH",
    code: "INVALID_CVV_LENGTH"
  },
  componentUrl: "https://dropin.transactbridge.com/cardCvv"
}
FieldType
cardCvvstring
Code Snippet for cardHolder component 
await TBDropin.init({
  mode: "sandbox", //  sandbox mode or Production mode
  publishKey: "", // your publish key goes here
  popupConfig: popupConfigStyle,
});
cardExpComp = TBDropin.create("tb_cardExp", {
  styles: inputStyle,
  frameStyle: frameStyle,
  fonts,
});
cardExpComp.mount(`#cardExp${type.toUpperCase()}`);

cardExpComp.on("change", (data) => console.log("cardExp", data));
Next Steps
  • A Customize component styles
  • Add multiple payment methods using tabs
  • Handle payment confirmation on backend
  • Set up webhooks for payment status
Need Help? Explore the following sections for more details:
  • API Reference
  • Customization
  • Examples
  • FAQ
If you need assistance, our support team is here to help 🚀