Terms and conditions - TransactBridge Developer Kit

Use the TNC component to display Terms & Conditions and capture user consent before initiating payment. The TNC Component allows merchants to display Terms & Conditions and obtain customer consent before starting a payment. It is a non-payable UI component that integrates seamlessly with other payment components like Card and UPI.

tb_tnc

A component used to render Terms & Conditions text, an acceptance checkbox, and a configurable Pay button label.

const tnc = TBDropin.create("tb_tnc", {
  buttonText: "Pay",
  styles: {
    fontFamily: fontRoboto,
    fontSize: "12px",
    color: "gray",
  },

  checkboxStyle: {
    WebkitAppearance: 'none',
    MozAppearance: 'none',
    appearance: 'none',
    minWidth: '20px',
    height: '20px',
    borderRadius: '4px',
    accentColor: 'red',
    border: '1px solid red',
    overflow: 'hidden',
    [':checked']: {
      ['::before']: {
        content: '"✓"',
        display: 'block',
        textAlign: 'center',
        color: 'blue',
        backgroundColor: 'red',
        fontSize: '16px',
      },
    },
  },

  link: {
    color: "blue",
    ":hover": {
      color: "red",
    },
  },
  fonts,
});

tnc.mount("#tnc");

Checkbox

The TNC component includes an acceptance checkbox that allows the customer to provide consent to the Terms & Conditions. The checkbox can be customized using checkboxStyle. By default, the checkbox is displayed.

Returned Value

tb_tnc returns a TNC Component Object.

{
  element: "tb_tnc",
  value: {
    accepted: true
  },
  isValid: true,
  error: null,
  componentUrl: "https://dropin.transactbridge.com/tnc"
}

TNC Properties

Field	Type	Description
accepted	`boolean`	Indicates whether the user has accepted the Terms & Conditions

Ensure that you initialize the SDK with a valid Publishable Key. If the publishable key is invalid or incorrect, the T&C component will return accepted: false and isValid: false.