Skip to main content
All sensitive inputs are rendered inside secure iframes, but styling, fonts, layout, icons, and popup behavior can be controlled from the parent page.

​
What Can Be Customized?

You can customize the SDK at three different levels:
  1. Component UI (Inputs & Icons)
  2. Iframe & Layout
  3. Popup / Payment Status UI

​
1. Input Styling (Component Styles)

Each payment component supports custom styles that control the look and feel of the input field. Example 
const inputStyle = {
  fontFamily: '"Roboto", sans-serif',
  padding: "12px",
  color: "darkslategray",
  borderRadius: "8px",
  border: "1px solid #d9d9d9",
  height: "38px",
  margin: "3px",

  [":focus"]: {
    border: "1px solid #007aff",
  },

  [":hover"]: {
    border: "1px solid #007aff",
    outline: "3px solid #007aff40",
  },

  ["::placeholder"]: {
    color: "gray",
  },
};
Supported Styling Features
  • Font family
  • Text color
  • Border & radius
  • Padding & height
  • Hover & focus states
  • Placeholder styles
These styles are applied inside the iframe, ensuring security while giving full UI control.

​
2. Iframe Layout Customization

Each component iframe can be styled independently using frameStyle. Example 
const frameStyle = {
  height: "44px",
  width: "100%",
  borderRadius: "8px",
  border: "none",
};
Use Cases
  • Match your form layout
  • Adjust spacing between fields
  • Fit responsive containers
  • Maintain consistent heights across inputs

​
3. Font Customization

You can load and use custom fonts across all SDK components. Example 
const fonts = [
  {
    cssSrc:
      "https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap",
  },
  {
    cssSrc:
      "https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600&display=swap",
  },
];

styles: {
  fontFamily: '"Roboto", sans-serif';
}
Fonts are injected into the iframe securely and applied consistently.

​
4. Icon Customization

Payment components like Card Number and UPI support icon configuration. Example 
const iconConfig = {
  styles: {
    width: "20px",
    height: "20px",
  },
};
Options
  • Show or hide icons
  • Control icon size
  • Maintain brand consistency

​
5. Popup Customization (Payment Flow)

The SDK popup (used during UPI or redirect flows) is fully customizable using popupConfig. Example 
await TBDropin.init({
  mode: "sandbox",
  publishKey: "<your-key>",
  popupConfig: popupConfigStyle,
});

const popupConfigStyle = {
  fonts,
  components: {
    // Timer
    timer: {
      circle: {
        stroke: "gold !important",
      },
      styles: {
        fontFamily: fontOrbitron,
        color: "dimgray",
        backgroundColor: "white",
      },
    },

    // Status Screens
    success: {
      backgroundColor: "#68c577",
      color: "white",
    },
    failed: {
      backgroundColor: "#e06d6d",
      color: "white",
    },
    processing: {
      backgroundColor: "gold",
      color: "white",
    },

    // Text & Labels
    instruction: {
      fontFamily: fontRoboto,
      color: "gray",
      fontSize: "14px",
    },
    bullet: {
      height: "24px",
      width: "24px",
      backgroundColor: "dimgray",
    },
    label: {
      fontFamily: fontRoboto,
      color: "darkgray",
      fontWeight: "500",
    },
    value: {
      fontFamily: fontRoboto,
      color: "dimgray",
      fontWeight: "normal",
    },
    note: {
      fontFamily: fontRoboto,
      color: "gray",
      fontSize: "10px",
      fontWeight: "500",
    },
    base: {
      fontFamily: fontRoboto,
      backgroundColor: "#fff",
      color: "darkslategray",
    },
    link: {
      color: "blue",
      textDecoration: "none",
      ":hover": {
        cursor: "pointer",
        color: "blueviolet",
      },
    },
    closeButton: {
      color: "darkslategray",
      pointerEvents: "auto",
      backgroundColor: "white",
      height: "24px",
      width: "24px",
    },
  },

  // Popup Frame Styling
  frameStyle: {
    width: "40px",
    height: "60px",
    borderRadius: "15px",
    zIndex: "99999999",
  },
};

​
6. Popup Frame Styling

frameStyle: {
 width: '40px',
 height: '60px',
 borderRadius: '15px',
 zIndex: '99999999'
}
This allows you to:
  • Control popup size
  • Adjust layering (z-index)
  • Match your brand modal design

​
7. Component-Level Customization

Each component can be customized independently. Card Example 
const cardNumber = TBDropin.create("tb_cardNumber", {
  placeholder: "Enter Card Number",
  styles: inputStyle,
  frameStyle,
  icon: iconConfig,
  fonts,
});
UPI Example 
const upi = TBDropin.create("tb_upiCollect", {
  placeholder: "Enter UPI",
  styles: inputStyle,
  icon: iconConfig,
  frameStyle,
  fonts,
});

​
8. UPI Intent (App-Based Payments)

UPI Intent allows users to complete payments directly through installed UPI applications such as PhonePe, Google Pay, Paytm, etc. Instead of entering a UPI ID, the user selects an app and the SDK triggers the UPI intent flow. Example 
const component = TBDropin.create("tb_upiIntent", {
  value: {
    upiAppName: upiApp?.toUpperCase(),,
  },
});

component.mount('#' + upiApp)
Supported UPI Apps The SDK supports the following UPI applications for UPI Intent payments.
upiAppName (upiAppName)Logo URL
PHONEPEhttps://cdn.transactbridge.com/Assets/payment-apps/phonepe.webp
PAYTMhttps://cdn.transactbridge.com/Assets/payment-apps/paytm.webp
GPAYhttps://cdn.transactbridge.com/Assets/payment-apps/gpay.webp
CREDhttps://cdn.transactbridge.com/Assets/payment-apps/cred.webp
MOBIKWIKhttps://cdn.transactbridge.com/Assets/payment-apps/mobikwik.webp
FREECHARGEhttps://cdn.transactbridge.com/Assets/payment-apps/freecharge.webp
JUPITERhttps://cdn.transactbridge.com/Assets/payment-apps/jupiter.webp
NAVIhttps://cdn.transactbridge.com/Assets/payment-apps/navi-money.webp
PAYZAPPhttps://cdn.transactbridge.com/Assets/payment-apps/payzapp.webp
BHIMhttps://cdn.transactbridge.com/Assets/payment-apps/bhim.webp
SUPERMONEYhttps://cdn.transactbridge.com/Assets/payment-apps/super-money.webp
AMAZONPAYhttps://cdn.transactbridge.com/Assets/payment-apps/amazon.webp
SLICEhttps://cdn.transactbridge.com/Assets/payment-apps/slice.webp
OTHERShttps://cdn.transactbridge.com/Assets/payment-apps/bhim.webp
UPI Intent payments only work on mobile devices. This flow will not work on desktop browsers because desktop devices cannot trigger mobile UPI apps.

​
9. Terms & Conditions Component

const tnc = TBDropin.create("tb_tnc", {
  buttonText: "Pay",
  styles: {
    fontFamily: fontRoboto,
    fontSize: "12px",
    color: "gray",
  },
  link: {
    color: "blue",
    ":hover": {
      color: "red",
    },
  },
  fonts,
});
This allows full control over:
  • Text styling
  • Link colors
  • Button labels

​
Summary

  • TB Drop-in SDK provides deep UI customization
  • Works consistently across Card, UPI, and future methods
  • Customization does not compromise security
  • Same integration works across environments