Cards

const cardNumber = TBDropin.create("tb_cardNumber", {
  placeholder: "Enter card number",
});

{
  element: "tb_cardNumber",
  value: {
    brand: null,
    cvvLength: 3
  },
  isValid: false,
  error: null,
  componentUrl: "https://dropin.transactbridge.com/cardNumber"
}

const TBDropin = window.TBDropin();

await TBDropin.init({
  mode: "sandbox", //  sandbox mode or Production mode
  publishKey: "", // your publish key goes here
  popupConfig: popupOptions,
});
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));

const cardHolder = TBDropin.create("tb_cardHolder", {
  placeholder: "Card holder name",
});

{
  element: "tb_cardHolder",
  value: {
    cardHolder: "Test User"
  },
  isValid: true,
  error: null
}

const TBDropin = window.TBDropin();

await TBDropin.init({
  mode: "sandbox", //  sandbox mode or Production mode
  publishKey: "", // your publish key goes here
  popupConfig: popupOptions,
});
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));

const cardExp = TBDropin.create("tb_cardExp");

{
  element: "tb_cardExp",
  value: {
    cardExp: ""
  },
  isValid: false,
  error: {
    message: "INCOMPLETE_EXP",
    code: "INCOMPLETE_EXP"
  },
  componentUrl: "https://dropin.transactbridge.com/cardExp"
}

const TBDropin = window.TBDropin();

await TBDropin.init({
  mode: "sandbox", //  sandbox mode or Production mode
  publishKey: "", // your publish key goes here
  popupConfig: popupOptions,
});
cardCvvComp = TBDropin.create("tb_cardCvv", {
  styles: inputStyle,
  frameStyle: frameStyle,
  fonts,
});
cardCvvComp.mount(`#cardCvv${type.toUpperCase()}`);

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

const cardCvv = TBDropin.create("tb_cardCvv");

{
  element: "tb_cardCvv",
  value: {
    cardCvv: ""
  },
  isValid: false,
  error: {
    message: "INVALID_CVV_LENGTH",
    code: "INVALID_CVV_LENGTH"
  },
  componentUrl: "https://dropin.transactbridge.com/cardCvv"
}

const TBDropin = window.TBDropin();

await TBDropin.init({
  mode: "sandbox", //  sandbox mode or Production mode
  publishKey: "", // your publish key goes here
  popupConfig: popupOptions,
});
cardExpComp = TBDropin.create("tb_cardExp", {
  styles: inputStyle,
  frameStyle: frameStyle,
  fonts,
});
cardExpComp.mount(`#cardExp${type.toUpperCase()}`);

cardExpComp.on("change", (data) => console.log("cardExp", data));