Browser SDK Reference

The Browser SDK (Software Development Kit) Reference lists each key and default value to customize the Custom iFrame for a seamless payment experience. The Browser SDK allows you to accept card payments from your customers by hosting your own iframe using TabaPay's provided javascript solution all without the hassle of meeting PCI-DSS requirements.

Getting Started

As you are boarding with TabaPay, you can use the following URL, a basic script, and your ClientID to get started with the browser SDK integration. This URL will allow you to call each of the following listed keys.

https://iframes.sandbox.tabapay.net/TabaPaySDK.js
📘

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.

KeyTypeValuesDefaultNotes
disableCopybooleantrue or falsefalseDisable the ability for someone to copy what is in the input boxes.
disablePastebooleantrue or falsefalseDisable the ability for someone to paste text into the input boxes.
cardLogostring, boolean for false"above", "inside", or falsefalseWhen inputting a card number, the iframe tries to display a brand logo.
hideInputbooleantrue or falsefalseHides the card number and creates an eye toggle as it is typed.
hideInputTogglestring, boolean for false"above", "inside", or falsefalseRelocates the hide input eye toggle.
hideInputToggleLeftOfCardLogobooleantrue or falsefalseRelocates the hide input eye toggle.
requiredstringAny String"Required"This is an optional field; the default value is the word: Required.
separatorstring' ', ' ', '-', or ''' 'The space between input numbers or values.
labelTextstringAny String"Card Number"Card label description.
invalidTextstringAny String"Invalid card number"Invalid card description.
invalidTextPositionstring"bottom-left", "bottom-right", "top-right""bottom "leftLocation of invalid text.
invalidLabelColorEventstring, boolean for false"input", "change", or false"change"Controls when the label (labelText) changes color: input on typing, change on blur, false disables.
labelInBorderstring"static", "transpose"falseStatic = always in border, Transpose = moves on focus; use transposeHeight/Width to adjust
customTransposebooleantrue or falsefalseAllows user-defined transposition of label on click.
invalidSpanEventstring, boolean for falsechange, input, or false"change"Controls when the invalid span appears.
toolTipTextstringAny String"Invalid card number"Message for tooltip; can be used with or instead of invalidText.
cardNumberMinDigitsintegerAny Number13Minimum card number length to validate.
cardNumberMaxDigitsintegerAny Number19Maximum card number length to validate.
allowedNetworksobjectObjectAll values set to trueControl which card networks are allowed. (e.g., MasterCard, Visa, Amex, etc.)
placeholderTextstringAny String"0000 0000 0000 0000"Display text before inputting

expirationDateInput

Customize the entry field for the expiration date.

KeyTypeValuesDefaultNotes
dropdownintegerAny NumberOptional. Contains years as the exp date.
disableCopybooleantrue or falsefalseDisable copy function from fields
disablePastebooleantrue or falsefalseDisable paste function from fields
requiredstring, boolean for falseAny String, false"Required"Label as required
labelTextstringAny String"Expires"Optional. Text label for expiration date field.
placeholderTextstringAny String, Max Length of 5"MM/YY"Optional, Max Length of 5. Text before inputting exp. date field
invalidTextstringAny String"Invalid date"Optional. Invalid expiration date description.
invalidTextPositionstringbottom-left, bottom-right, and top-right"bottom left"Location of invalid text
invalidLabelColorEventstring, boolean for false"input", "change", and false"change"input changes label color while typing, change on blur, false disables it
invalidSpanEventstring, boolean for false"change", "input", false"change"Controls when the invalid span will appear
labelInBorderstring, boolean for falsestatic, transpose, or falsefalseStatic = always in border, Transpose = moves on focus, customize with transposeHeight/Width
customTransposebooleantrue or falsefalseAllows free movement of label when clicking input
toolTipTextstringAny StringValidity message for all form validity functions and tooltip

cscInput

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

KeyTypeValuesDefaultNotes
labelTextstringAny String"CSC"Optional. Label for the CSC/CVV.
disableCopybooleantrue or falsefalseDisable copy function from fields
disablePastebooleantrue or falsefalseDisable paste function into fields
requiredstring, boolean for falseAny String, falseRequiredLabel as required
invalidTextstringAny String"Invalid Code"Text description when input is invalid
placeholderTextstringAny String000Optional. Display text before inputting.
invalidTextPositionstring"bottom-left", "bottom-right", "top-right""bottom left"Location of invalid text
invalidInputFillColorbooleantrue or falsefalseActivate invalid input color
invalidLabelColorEventstring, boolean for false"input", "change", false"change""input" changes label text color while typing, "change" on blur, false disables it
labelInBorderstring, boolean for false"static", "transpose", or falsefalseStatic = always in border, Transpose = moves on focus; use transposeHeight/Width to adjust
hideinputbooleantrue or falsefalseHides input with no eye toggle
invalidSpanEventstring, boolean for false"change", "input", false"change"Controls when the invalid span will appear
customTransposebooleantrue or falsefalseAllows repositioning of label on click; customize with transposeHeight and transposeWidth
toolTipTextstringAny StringValidity message for tooltip; works with form validity functions

buttons

KeyTypeValuesDefaultNotes
layoutstring"row", "row-reverse", "column", "column-reverse""row"Layout stack of all buttons
placementstring"start" "center", "space-between", "space-around", "space-evenly""start"Spacing of buttons
gapstring"px value""10px"Space between buttons

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.

label-style

Put each key under any specific button "

KeyTypeValuesDefaultNotes
backgroundColorEnabledstringCSS Color"#6bf"Background Color of button
backgroundColorDisabledstringCSS Color"#ccc"Background Color of disabled button
backgroundColorHoverstringCSS Color"#8cf"Color of button when hovering over
buttonOpacityDisabledstring"0.0" to "1.0"".3"Opacity of disabled buttons
textColorstringCSS Color or "inherit""inherit"Color of button text
textColorEnabledstringCSS Color or "inherit""inherit"Color of enabled text
textColorDisabledstringCSS Color or "inherit""inherit"Color of disabled text
textColorHoverstringCSS Color"#fff"Color of button text when hovering
borderRadiusstringCSS Units"1rem"Roundness of button
borderColorHoverstringCSS Color"none"Border color when hovering
borderstringCSS Units"none"Border stile
buttonBorderDisabledstringCSS"#fff"Color of disabled button
buttonCursorDisabledstring"not-allowed"Cursor change over disabled button
buttonCursorHoverstring"allowed"Cursor when hovering over button
fontFamilystringCSS Fonts"system-ui"
fontSizestringCSS Units"1em"
fontWeightstringCSS Units"400"
paddingstringCSS Units"0.5em"
marginstringCSS Units"0"
widthstringCSS Units"7 rem"
heightstringCSS Units"3.5 rem"
lineHeightstring"normal"Height of text within button
📘

Removing Buttons

To remove any of the submit, reset, or cancel buttons, do not include them in your script.

submit

Specific attributes to customize the submit button.

KeyTypeValuesDefaultNotes
buttonTextstringAny String"Submit"Optional
buttonTypestring"submit"
enabledbooleantrue-Displays the button with the color of enabled background and text.

reset

Specific attributes to customize the reset button.

KeyTypeValuesDefaultNotes
buttonTextstringAny String"Reset"Optional
buttonTypestring"reset"
enabledbooleantrue-Displays the button with the color of enabled background and text.

cancel

Specific css to customize the cancel button.

KeyTypeValuesDefaultNotes
buttonTextstringAny StringCancelOptional
buttonTypestring"cancel"
enabledbooleantrue-Displays the button with the color of enabled background and text.

insetFrame

Customize the iFrame size and background color.

KeyTypeValuesDefaultNotes
backgroundColorstringCSS Color"#fff"Background color of the iframe whitespace area.
minWidthstringString = Number + "px" or other string used in CSS to determine size.-Example: minWidth: "500px"
maxWidthstringString = Number + "px" or other string used in CSS to determine size.-Example: maxWidth: "800px"
minHeightstringString = Number + "px" or other string used in CSS to determine size.-Example: minWidth: "500px"
maxHeightstringString = Number + "px" or other string used in CSS to determine size.-Example: minWidth: "800px"

labelStyle

Customize the form field labels.

KeyTypeValuesDefaultNotes
placementstring"compact", "above""above"Display length of form fields.
textColorstringCSS Color"#000"Text color of form.
fontFamilystringCSS Fonts"system-ui"Font of text on form.
fontSizestringCSS Units"1rem"Size of text on form.
fontWeightstringCSS Units"500"Weight of text on form.
letterSpacingstringCSS Units"0"Spacing between text.
gapstringCSS Units"0.5em"Spacing between fields.
invalidTextColorstringCSS Color"#e55"Text color of invalid messages.

inputStyle

Customize the form input text.

KeyTypeValuesDefaultNotes
placeholderTextColorstringCSS Colors"#888"Text before inputting text
backgroundColorstringCSS Colors"#fff"Background color of each input field.
invalidBackgroundColorstringCSS Colors"#fcc"Background style of invalid input
borderRadiusstringCSS Units"0"Rounded field corners
borderStylestringAny CSS border"none"Style of field borders
borderColorstringCSS Colors"none"Color of field borders
borderFocusstringCSS Units"1px solid"Border when actively using an input
borderColorFocusstringCSS Colors"#000"Highlights border color when actively using an input
backgroundColorFocusstringAny valid css variable for background-color"none"Background style when actively using an input
boxShadowFocusstringCSS values"none"Shadow when actively using an input
boxShadowstringCSS values"none"Default shadow
invalidBorderstringnone"none"Highlights invalid input borders
invalidBorderFocusstringAny CSS border var example"1px solid #e55"Border style when actively using an invalid input
invalidBorderColorFocusstringCSS Colors"#e55"Border color when actively using an invalid input
invalidBorderColorstringCSS Colors"#e55"Highlights invalid input borders. Changes after you click out.
invalidBackgroundColorFocusstringCSS Colors"none"Background style when actively using an invalid input
invalidBoxShadowstringCSS Units"none"Highlights invalid input with shadow
invalidBoxShadowFocusstringCSS Units"none"Shadow style when actively using an invalid input
fontFamilystringCSS Fonts"ui-monospace", "SF Mono", "Cascadia Code", "Source Code Pro","Menlo", "Consolas", "DejaVu Sans Mono", "monospace"Font Style
fontSizestringCSS Units"1em"Size of the font text
fontWeightstringCSS UnitsWeight of the font text
letterSpacingstringCSS Units"0.1ch"
lineHeightstringCSS UnitsLine spacing
outlineFocusstringCSS UnitsOutline style when actively using an invalid input
paddingstringCSS Units"0.25rem"
transposeHeightstringCSS 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.
transposeWidthstringCSS Values"0"Allows the user to translate the placeholder a custom amount in the horizontal direction. Can either be percentage or pixel amount.
transposeFontSizestringCSS Units"none"Allows the user to specify the font size when transposing the label to a new spot.
textColorstringCSS units"# 000v"Color of the form text

invalidStyle

Customize error text.

KeyTypeValuesDefaultNotes
textColorstringCSS Color Values"#e55"Text color of invalid message
fontFamilystringCSS Font Types"system-ui"Font of invalid message
fontSizestringCSS Units"0.8rem"Font size of invalid message
fontWeightstringCSS Units"500"Font weight of invalid message

externalFonts

Customize external text.

KeyTypeValuesDefaultNotes
fontFamilystringAny String' 'External font type
srcstringAny String' 'External font source
fontStylestringAny String' 'External font style
fontWeightstringAny String' 'External font weight
fontDisplaystringAny String' 'External font loading
unicodeRangestringAny String' 'Define font characters

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

Additional values to include, or customize different layouts.

Key

Type

Values

Default

Notes

clientId

string

Any String


Required. Include your own ClientID

boxShadow

string

layout

string

"default", "separate-rows"

"default"

unlimitedWidth

boolean

true or false

false

firstSixCard

boolean

true or false

false

Modifies the return token to have four fields: firstSixCard|

Remaining three fields and default is: card-last4 | expiration-date | encrypted-card-token

formRowGap

string

CSS Units

'0.5rem'

Creates more space between the top and bottom form rows (e.g. Between card Number and bottom rows)

formHorizontalGap

string

CSS Units

'1rem'

Creates more space between the left and right form columns (e.g. Between card Exp and CVV)

labelsAsPlaceholders

boolean

true or false

false

Turns the labels of the forms as placeholder text (Card Number, Expiration Date, CVV, etc.)

lineHeight

string

Line spacing in the form

intrinsicWidth

integer

Any Number

Standard width of the iframe

order

string

order of a specific object

padding

string

CSS Units

'0.5rem'

Set the padding of the loaded body

margin

string

CSS Units

0

Set the margin of the loaded body \nNote: When creating an iframe, leave padding and margin at default. Use insetFrame, unlimitedWidth, and container sizing.

toolTip

boolean

true or false

Tooltip for input boxes. If set to true, the invalidText appears inside the tooltip.