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.

Key	Type	Values	Default	Notes
disableCopy	boolean	`true` or `false`	`false`	Disable the ability for someone to copy what is in the input boxes.
disablePaste	boolean	`true` or `false`	`false`	Disable the ability for someone to paste text into the input boxes.
cardLogo	string, boolean for `false`	`"above"`, `"inside"`, or `false`	`false`	When inputting a card number, the iframe tries to display a brand logo.
hideInput	boolean	`true` or `false`	`false`	Hides the card number and creates an eye toggle as it is typed.
hideInputToggle	string, boolean for `false`	`"above"`, `"inside"`, or `false`	`false`	Relocates the hide input eye toggle.
hideInputToggleLeftOfCardLogo	boolean	`true` or `false`	`false`	Relocates the hide input eye toggle.
required	string	Any String	`"Required"`	This is an optional field; the default value is the word: `Required`.
separator	string	`' '`, `' '`, `'-'`, or `''`	`' '`	The space between input numbers or values.
labelText	string	Any String	`"Card Number"`	Card label description.
invalidText	string	Any String	`"Invalid card number"`	Invalid card description.
invalidTextPosition	string	`"bottom-left"`, `"bottom-right"`, `"top-right"`	`"bottom "left`	Location of invalid text.
invalidLabelColorEvent	string, boolean for `false`	`"input"`, `"change"`, or `false`	`"change"`	Controls when the label (`labelText`) changes color: `input` on typing, `change` on blur, `false` disables.
labelInBorder	string	`"static"`, `"transpose"`	`false`	Static = always in border, Transpose = moves on focus; use transposeHeight/Width to adjust
customTranspose	boolean	`true` or `false`	`false`	Allows user-defined transposition of label on click.
invalidSpanEvent	string, boolean for `false`	`change`, `input`, or `false`	`"change"`	Controls when the invalid span appears.
toolTipText	string	Any String	`"Invalid card number"`	Message for tooltip; can be used with or instead of `invalidText`.
cardNumberMinDigits	integer	Any Number	`13`	Minimum card number length to validate.
cardNumberMaxDigits	integer	Any Number	`19`	Maximum card number length to validate.
allowedNetworks	object	Object	All values set to `true`	Control which card networks are allowed. (e.g., `MasterCard`, `Visa`, `Amex`, etc.)
placeholderText	string	Any String	`"0000 0000 0000 0000"`	Display text before inputting

expirationDateInput

Customize the entry field for the expiration date.

Key	Type	Values	Default	Notes
dropdown	integer	Any Number		Optional. Contains years as the exp date.
disableCopy	boolean	`true` or `false`	`false`	Disable copy function from fields
disablePaste	boolean	`true` or `false`	`false`	Disable paste function from fields
required	string, boolean for `false`	Any String, `false`	`"Required"`	Label as required
labelText	string	Any String	`"Expires"`	Optional. Text label for expiration date field.
placeholderText	string	Any String, Max Length of 5	`"MM/YY"`	Optional, Max Length of 5. Text before inputting exp. date field
invalidText	string	Any String	`"Invalid date"`	Optional. Invalid expiration date description.
invalidTextPosition	string	`bottom-left`, `bottom-right`, and `top-right`	`"bottom left"`	Location of invalid text
invalidLabelColorEvent	string, boolean for `false`	`"input"`, `"change"`, and `false`	`"change"`	`input` changes label color while typing, `change` on blur, `false` disables it
invalidSpanEvent	string, boolean for `false`	`"change"`, `"input"`, `false`	`"change"`	Controls when the invalid span will appear
labelInBorder	string, boolean for `false`	`static`, `transpose`, or `false`	`false`	Static = always in border, Transpose = moves on focus, customize with transposeHeight/Width
customTranspose	boolean	`true` or `false`	`false`	Allows free movement of label when clicking input
toolTipText	string	Any String		Validity message for all form validity functions and tooltip

cscInput

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

Key	Type	Values	Default	Notes
labelText	string	Any String	`"CSC"`	Optional. Label for the CSC/CVV.
disableCopy	boolean	`true` or `false`	`false`	Disable copy function from fields
disablePaste	boolean	`true` or `false`	`false`	Disable paste function into fields
required	string, boolean for `false`	Any String, `false`	`Required`	Label as required
invalidText	string	Any String	`"Invalid Code"`	Text description when input is invalid
placeholderText	string	Any String	`000`	Optional. Display text before inputting.
invalidTextPosition	string	`"bottom-left"`, `"bottom-right"`, `"top-right"`	`"bottom left"`	Location of invalid text
invalidInputFillColor	boolean	`true` or `false`	`false`	Activate invalid input color
invalidLabelColorEvent	string, boolean for `false`	`"input"`, `"change"`, `false`	`"change"`	`"input"` changes label text color while typing, `"change"` on blur, `false` disables it
labelInBorder	string, boolean for `false`	`"static"`, `"transpose"`, or `false`	`false`	Static = always in border, Transpose = moves on focus; use transposeHeight/Width to adjust
hideinput	boolean	`true` or `false`	`false`	Hides input with no eye toggle
invalidSpanEvent	string, boolean for `false`	`"change"`, `"input"`, `false`	`"change"`	Controls when the invalid span will appear
customTranspose	boolean	`true` or `false`	`false`	Allows repositioning of label on click; customize with transposeHeight and transposeWidth
toolTipText	string	Any String		Validity message for tooltip; works with form validity functions

buttons

Key	Type	Values	Default	Notes
layout	string	`"row"`, `"row-reverse"`, `"column"`, `"column-reverse"`	`"row"`	Layout stack of all buttons
placement	string	`"start"` `"center"`, `"space-between"`, `"space-around"`, `"space-evenly"`	`"start"`	Spacing of buttons
gap	string	`"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 "

Key	Type	Values	Default	Notes
backgroundColorEnabled	string	CSS Color	`"#6bf"`	Background Color of button
backgroundColorDisabled	string	CSS Color	`"#ccc"`	Background Color of disabled button
backgroundColorHover	string	CSS Color	`"#8cf"`	Color of button when hovering over
buttonOpacityDisabled	string	`"0.0"` to `"1.0"`	`".3"`	Opacity of disabled buttons
textColor	string	CSS Color or `"inherit"`	`"inherit"`	Color of button text
textColorEnabled	string	CSS Color or `"inherit"`	`"inherit"`	Color of enabled text
textColorDisabled	string	CSS Color or `"inherit"`	`"inherit"`	Color of disabled text
textColorHover	string	CSS Color	`"#fff"`	Color of button text when hovering
borderRadius	string	CSS Units	`"1rem"`	Roundness of button
borderColorHover	string	CSS Color	`"none"`	Border color when hovering
border	string	CSS Units	`"none"`	Border stile
buttonBorderDisabled	string	CSS	`"#fff"`	Color of disabled button
buttonCursorDisabled	string		`"not-allowed"`	Cursor change over disabled button
buttonCursorHover	string		`"allowed"`	Cursor when hovering over button
fontFamily	string	CSS Fonts	`"system-ui"`
fontSize	string	CSS Units	`"1em"`
fontWeight	string	CSS Units	`"400"`
padding	string	CSS Units	`"0.5em"`
margin	string	CSS Units	`"0"`
width	string	CSS Units	`"7 rem"`
height	string	CSS Units	`"3.5 rem"`
lineHeight	string		`"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.

Key	Type	Values	Default	Notes
buttonText	string	Any String	`"Submit"`	Optional
buttonType	string	`"submit"`
enabled	boolean	`true`	-	Displays the button with the color of enabled background and text.

reset

Specific attributes to customize the reset button.

Key	Type	Values	Default	Notes
buttonText	string	Any String	`"Reset"`	Optional
buttonType	string	`"reset"`
enabled	boolean	`true`	-	Displays the button with the color of enabled background and text.

cancel

Specific css to customize the cancel button.

Key	Type	Values	Default	Notes
buttonText	string	Any String	`Cancel`	Optional
buttonType	string	`"cancel"`
enabled	boolean	`true`	-	Displays the button with the color of enabled background and text.

insetFrame

Customize the iFrame size and background color.

Key	Type	Values	Default	Notes
backgroundColor	string	CSS Color	`"#fff"`	Background color of the iframe whitespace area.
minWidth	string	String = Number + "px" or other string used in CSS to determine size.	-	Example: `minWidth: "500px"`
maxWidth	string	String = Number + "px" or other string used in CSS to determine size.	-	Example: `maxWidth: "800px"`
minHeight	string	String = Number + "px" or other string used in CSS to determine size.	-	Example: `minWidth: "500px"`
maxHeight	string	String = Number + "px" or other string used in CSS to determine size.	-	Example: `minWidth: "800px"`

labelStyle

Customize the form field labels.

Key	Type	Values	Default	Notes
placement	string	`"compact"`, `"above"`	`"above"`	Display length of form fields.
textColor	string	CSS Color	`"#000"`	Text color of form.
fontFamily	string	CSS Fonts	`"system-ui"`	Font of text on form.
fontSize	string	CSS Units	`"1rem"`	Size of text on form.
fontWeight	string	CSS Units	`"500"`	Weight of text on form.
letterSpacing	string	CSS Units	`"0"`	Spacing between text.
gap	string	CSS Units	`"0.5em"`	Spacing between fields.
invalidTextColor	string	CSS Color	`"#e55"`	Text color of invalid messages.

inputStyle

Customize the form input text.

Key	Type	Values	Default	Notes
placeholderTextColor	string	CSS Colors	`"#888"`	Text before inputting text
backgroundColor	string	CSS Colors	`"#fff"`	Background color of each input field.
invalidBackgroundColor	string	CSS Colors	`"#fcc"`	Background style of invalid input
borderRadius	string	CSS Units	`"0"`	Rounded field corners
borderStyle	string	Any CSS border	`"none"`	Style of field borders
borderColor	string	CSS Colors	`"none"`	Color of field borders
borderFocus	string	CSS Units	`"1px solid"`	Border when actively using an input
borderColorFocus	string	CSS Colors	`"#000"`	Highlights border color when actively using an input
backgroundColorFocus	string	Any valid css variable for background-color	`"none"`	Background style when actively using an input
boxShadowFocus	string	CSS values	`"none"`	Shadow when actively using an input
boxShadow	string	CSS values	`"none"`	Default shadow
invalidBorder	string	none	`"none"`	Highlights invalid input borders
invalidBorderFocus	string	Any CSS border var example	`"1px solid #e55"`	Border style when actively using an invalid input
invalidBorderColorFocus	string	CSS Colors	`"#e55"`	Border color when actively using an invalid input
invalidBorderColor	string	CSS Colors	`"#e55"`	Highlights invalid input borders. Changes after you click out.
invalidBackgroundColorFocus	string	CSS Colors	`"none"`	Background style when actively using an invalid input
invalidBoxShadow	string	CSS Units	`"none"`	Highlights invalid input with shadow
invalidBoxShadowFocus	string	CSS Units	`"none"`	Shadow style when actively using an invalid input
fontFamily	string	CSS Fonts	`"ui-monospace"`, `"SF Mono"`, `"Cascadia Code"`, `"Source Code Pro"`,`"Menlo"`, `"Consolas"`, `"DejaVu Sans Mono"`, `"monospace"`	Font Style
fontSize	string	CSS Units	`"1em"`	Size of the font text
fontWeight	string	CSS Units		Weight of the font text
letterSpacing	string	CSS Units	`"0.1ch"`
lineHeight	string	CSS Units		Line spacing
outlineFocus	string	CSS Units		Outline style when actively using an invalid input
padding	string	CSS Units	`"0.25rem"`
transposeHeight	string	CSS 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.
transposeWidth	string	CSS Values	`"0"`	Allows the user to translate the placeholder a custom amount in the horizontal direction. Can either be percentage or pixel amount.
transposeFontSize	string	CSS Units	`"none"`	Allows the user to specify the font size when transposing the label to a new spot.
textColor	string	CSS units	`"# 000v"`	Color of the form text

invalidStyle

Customize error text.

Key	Type	Values	Default	Notes
textColor	string	CSS Color Values	`"#e55"`	Text color of invalid message
fontFamily	string	CSS Font Types	`"system-ui"`	Font of invalid message
fontSize	string	CSS Units	`"0.8rem"`	Font size of invalid message
fontWeight	string	CSS Units	`"500"`	Font weight of invalid message

externalFonts

Customize external text.

Key	Type	Values	Default	Notes
fontFamily	string	Any String	`' '`	External font type
src	string	Any String	`' '`	External font source
fontStyle	string	Any String	`' '`	External font style
fontWeight	string	Any String	`' '`	External font weight
fontDisplay	string	Any String	`' '`	External font loading
unicodeRange	string	Any 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.

Key	Values	Default	Notes
function	a function

submit

Trigger an action when the form is submitted.

Key	Values	Default	Notes
function	a function

cancel

Trigger an action when the form is canceled.

Key	Values	Default	Notes
function	a 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.