Browser SDK Reference

The Browser SDK (Software Development Kit) Reference lists each key and default value to customize the Dynamic iFrame for a seamless payment experience. The Browser SDK allows you to accept card payments from your customers through a TabaPay hosted page without the hassle of meeting PCI-DSS requirements.

📘

Testing Configurations

Clients are recommended to test their desired configuration to help understand each key and its behavior.

cardNumberInput

Customize the entry field for the card number.

keyvaluesdefaultNotes
disableCopytrue or falsefalseDisable the ability for someone to copy what is in the input boxes.
disablePastetrue or falsefalseDisable the ability for someone to paste text into the input boxes.
cardLogoabove, inside, or falseaboveWhen inputing a card number, the iframe tries to display a brand logo.
hideInputtrue or falsefalseHides the card number and creates an eye toggle as it is typed.
hideInputToggleabove, inside, or falsefalseRelocates the hide input eye toggle.
hideInputToggleLeftOfCardLogotrue or falsefalseRelocates the hide input eye toggle
requiredAny StringRequiredThis is an option field, but the default value is the word: Required
separatorsingle space ' ' , double space ' ', dash '-', or empty ''single space ' ' The space in between input numbers, or values.
labelTextAny StringCard NumberCard label description
invalidTextAny StringInvalid card numberInvalid card description
invalidTextPositionbottom-left, bottom-right, and top-rightbottom leftLocation of invalid text
invalidLabelColorEventinput, change, and falsechangeinput will make the label change colors while typing. change will make the label change colors when clicked away.
false disables label color change.
labelInBorderstatic and transposeorfalsefalseWhen static, the label will be in the border on load and will remain there. When ‘transpose’, the label will move from placeholder to the border. Variables transposeHeight and transposeWidth can be used to customize how far the label will transpose on click.
customTransposetrue or falsefalseAllows the user to translate the placeholder when clicking into an input field. Setting this to true allows the user to freely move the placeholder to any spot upon clicking the input field. Variables transposeHeight and transposeWidth can be used to customize how far the label will transpose on click.
invalidSpanEventchange, input falsechangeControls when the invalid span will appear.
placeholderText: Optional(AnyString),Any String

expirationDateInput

Customize the entry field for the expiration date.

KeyValuesDefaultNotes
dropdownsAny NumberOptional
disableCopytrue or falsefalseDisable copy function from fields
disablePastetrue or falsefalseDisable paste function from fields
requiredAny String, falseRequiredLabel as required
labelTextAny StringExpiresOptional
placeholderTextAny String, Max Length of 5MM/YYOptional, Max Length of 5
invalidTextAny StringInvalid dateOptional
invalidTextPositionbottom-left, bottom-right, and top-rightbottom leftLocation of invalid text
invalidLabelColorEventinput, change, and falsechangeinput will make the label change colors while typing.
change will make the label change colors when clicked away.
false disables label color change.
invalidSpanEventchange, input falsechangeControls when the invalid span will appear.
labelInBorderstatic and transposeorfalsefalseWhen static, the label will be in the border on load and will remain there. When ‘transpose’, the label will move from placeholder to the border. Variables transposeHeight and transposeWidth can be used to customize how far the label will transpose on click.
customTransposetrue or falsefalseAllows the user to translate the placeholder when clicking into an input field. Setting this to true allows the user to freely move the placeholder to any spot upon clicking the input field. Variables transposeHeight and transposeWidth can be used to customize how far the label will transpose on click.

cscInput

Customize the entry field for the CSV (also known as CVV).

KeyValuesDefaultNotes
labelTextAny StringOptional
disableCopytrue or falsefalseDisable copy function from fields
disablePastetrue or falsefalseDisable paste function into fields
requiredAny String, falseRequiredLabel as required
invalidTextAny StringInvalid CodeText description when input is invalid
placeholderTextAny String000Optional
invalidTextPositionbottom-left, bottom-right, and top-rightbottom leftLocation of invalid text
invalidInputFillColortrue or falsefalseActivate invalid input color
invalidLabelColorEventinput , change, and falsechangeinput will make the label change colors while typing.
change will make the label change colors when clicked away.
false disables label color change.
labelInBorderstatic and transposeorfalsefalseWhen static, the label will be in the border on load and will remain there. When ‘transpose’, the label will move from placeholder to the border. Variables transposeHeight and transposeWidth can be used to customize how far the label will transpose on click.
hideinputtrue or falsefalseHides a specified input when true with no eye toggle.
invalidSpanEventchange, input falsechangeControls when the invalid span will appear.
customTransposetrue or falsefalseAllows the user to translate the placeholder when clicking into an input field. Setting this to true allows the user to freely move the placeholder to any spot upon clicking the input field. Variables transposeHeight and transposeWidth can be used to customize how far the label will transpose on click.

buttons

KeyValuesDefaultNotes
layoutrow, row-reverse, column, column-reverserow
placementstart’ center, space-between, space-around’, space-evenlystart
gappx value10px

Button Styling

Customize the color and shape of your buttons, you can use these on each button key (submit, reset, cancel)

Note: For disabled features, refer to the Reset and Submit buttons under Label Style.

KeyValuesDefaultNotes
backgroundColorEnabledCSS Color#6bfBackground Color of button
backgroundColorDisabledCSS Color#cccBackground Color of disabled button
backgroundColorHoverCSS Color#8cfColor of button when hovering over
buttonOpacityDisabled0.0 to 1.0.3Opacity of disabled buttons
textColorCSS Color or inheritinheritColor of button text
textColorEnabledinheritColor of disabled text
textColorDisabledinheritColor of disabled text
borderRadiusCSS Units1remRoundness of button
borderColorHoverCSS ColornoneBorder color when hovering
borderCSS UnitsnoneBorder stile
buttonBorderDisabledCSS#fffColor of disabled button
buttonCursorDisablednot-allowedCursor change over disabled button
buttonCursorHoverallowedCursor when hovering over button
fontFamilyCSS Fontssystem-ui
fontSizeCSS Units1em
fontWeightCSS Units400
paddingCSS Units0.5em
marginCSS Units0
widthCSS Units7 rem
heightCSS Units3.5 rem

submit

Specific attributes to customize the submit button.

KeyValuesDefaultNotes
buttonTextAny StringSubmitOptional
buttonTypesubmit
order1or2or3
enabledboolean

reset

Specific attributes to customize the reset button.

KeyValuesDefaultNotes
buttonTextAny StringResetOptional
buttonTypereset
order1or2or3
enabled

cancel

Specific css to customize the cancel button.

KeyValuesDefaultNotes
buttonTextAny StringCancelOptional
buttonTypecancel
order1or2or3
enabled

insetFrame

Customize the iFrame size and background color.

KeyValuesDefaultNotes
backgroundColor#fff
minWidthString = Number + "px" or other string used in CSS to determine size.
maxWidthString = Number + "px" or other string used in CSS to determine size.
minHeightString = Number + "px" or other string used in CSS to determine size.
maxHeightString = Number + "px" or other string used in CSS to determine size.

labelStyle

Customize the form field labels.

KeyValuesDefaultNotes
placementcompact, aboveabove
textColor#000
fontFamilysystem-ui
fontSize1rem
fontWeight500
letterSpacing0
gap0.5em
invalidTextColor#e55
fontWeight500

inputStyle

Customize the form input text.

KeyValuesDefaultNotes
placeholderTextColorCSS Colors#888Text before inputting text
backgroundColorCSS Colors#fff
invalidBackgroundColorCSS Colors#fccBackground style of invalid input
borderRadiusCSS Units0
borderStyleAny CSS bordernone
borderColorCSS Colorsnone
borderFocusCSS ColorsblackBorder when actively using an input
backgroundColorFocusAny valid css variable for background-colornoneBackground style when actively using an input
boxShadowFocusnoneShadow when actively using an input
invalidBorderAny CSS border var example1px solid #e55Highlights invalid input borders
invalidBorderFocusAny CSS border var example1px solid #e55Border style when actively using an invalid input
invalidBackgroundColorFocusCSS ColorsnoneBackground style when actively using an invalid input
invalidBoxShadownoneHighlights invalid input with shadow
invalidBoxShadowFocusnoneShadow style when actively using an invalid input
fontFamilyCSS Fontsui-monospace, SF Mono, Cascadia Code, Source Code Pro', Menlo, Consolas, DejaVu Sans Mono', monospace
fontSizeCSS Units1em
letterSpacingCSS Units0.1ch
paddingCSS Units0.25rem
transposeHeightCSS Values-105%Allows the user to translate the place config holder a custom amount in the vertical direction. Can either be percentage or pixel amount.
transposeWidthCSS Values0Allows the user to translate the placeholder a custom amount in the horizontal direction. Can either be percentage or pixel amount.
transposeFontSizeCSS UnitsnoneAllows the user to specify the font size when transposing the label to a new spot.

invalidStyle

Customize error text.

KeyValuesDefaultNotes
textColorCSS Color Values'#e55'
fontFamilyCSS Font Types'system-ui'
fontSizeCSS Units'0.8rem'
fontWeightCSS Units'500'

externalFonts

Customize error text.

KeyValuesDefaultNotes
fontFamilyAny String
srcAny String
fontStyleAny String' '
fontWeightAny String' '
fontDisplayAny String' '
unicodeRangeAny String' '

eventListeners

eventListeners are JavaScript functions that wait for an event to occur, which triggers an action.

focusChange

Highlight a specific field for an interactive user experience.

KeyValuesDefaultNotes
functiona function

submit

Trigger an action when the form is submitted.

KeyValuesDefaultNotes
functiona function

cancel

Trigger an action when the form is canceled.

KeyValuesDefaultNotes
functiona function

Miscellaneous

Customize different layouts.

KeyValuesDefaultNotes
layoutdefault, separate-rowsdefault
unlimitedWidthtrue or falsefalse
formRowGapCSS Units'0.5rem'
formHorizontalGapCSS Units'1rem'
labelsAsPlaceholderstrue or falsefalse
intrinsicWidthAny Number
ToolTiptrue or falseTooltip for input boxes show up if set to true. InvalidText shows up in the text of the tooltip

Questions? Contact Sales or make a post