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

expirationDateInput

Customize the entry field for the expiration date.

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

cscInput

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

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

buttons

Key	Values	Default
layout	`row`, `row-reverse`, `column`, `column-reverse`	`row`
placement	`start’` `center`, `space-between`, `space-around’`, `space-evenly`	`start`
gap	`px value`	`10px`

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
](https: //developers.tabapay.com/reference/browser-sdk#label-style).

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

submit

Specific attributes to customize the submit button.

Key	Values	Default	Notes
buttonText	Any String	`Submit`	Optional
buttonType	`submit`
enabled	`true` or `false`	`false`

reset

Specific attributes to customize the reset button.

Key	Values	Default	Notes
buttonText	Any String	`Reset`	Optional
buttonType	`reset`
enabled	`true` or `false`	`false`

cancel

Specific css to customize the cancel button.

Key	Values	Default	Notes
buttonText	Any String	`Cancel`	Optional
buttonType	`cancel`
enabled	`true` or `false`	`false`

insetFrame

Customize the iFrame size and background color.

Key	Values	Default
backgroundColor		`#fff`
minWidth	String = Number + "px" or other string used in CSS to determine size.
maxWidth	String = Number + "px" or other string used in CSS to determine size.
minHeight	String = Number + "px" or other string used in CSS to determine size.
maxHeight	String = Number + "px" or other string used in CSS to determine size.

labelStyle

Customize the form field labels.

Key	Values	Default
placement	`compact`, `above`	`above`
textColor		`#000`
fontFamily		`system-ui`
fontSize		`1rem`
fontWeight		`500`
letterSpacing		`0`
gap		`0.5em`
invalidTextColor		`#e55`

inputStyle

Customize the form input text.

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

invalidStyle

Customize error text.

Key	Values	Default
textColor	CSS Color Values	`'#e55'`
fontFamily	CSS Font Types	`'system-ui'`
fontSize	CSS Units	`'0.8rem'`
fontWeight	CSS Units	`'500'`

externalFonts

Customize error text.

Key	Values	Default
fontFamily	Any String	`' '`
src	Any String	`' '`
fontStyle	Any String	`' '`
fontWeight	Any String	`' '`
fontDisplay	Any String	`' '`
unicodeRange	Any 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.

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

Customize different layouts.

Key	Values	Default	Notes
clientid	Any String
boxShadow
layout	`default`, `separate-rows`	`default`
unlimitedWidth	`true` or `false`	`false`
firstSixCard	`true` or `false`	`false`	Modifies the return token to have four fields: `"firstSixCard\	card-last4\	expiration-date\	encrypted-card-token"`
formRowGap	CSS Units	`'0.5rem'`
formHorizontalGap	CSS Units	`'1rem'`
labelsAsPlaceholders	`true` or `false`	`false`
lineHeight
intrinsicWidth	Any Number
order
padding	CSS Units	`'0.5rem'`	Set the padding of the loaded body
margin	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	`true` or `false`		Tooltip for input boxes. If set to `true`, the `invalidText` appears inside the tooltip.

Browser SDK Reference

Getting Started

📘
Testing Configurations

cardNumberInput

expirationDateInput

cscInput

buttons

Button Styling

submit

reset

cancel

insetFrame

labelStyle

inputStyle

000

invalidStyle

externalFonts

eventListeners

focusChange

submit

cancel

Miscellaneous

Getting Started

📘Testing Configurations

cardNumberInput

expirationDateInput

cscInput

buttons

Button Styling

submit

reset

cancel

insetFrame

labelStyle

inputStyle

000

invalidStyle

externalFonts

eventListeners

focusChange

submit

cancel

Miscellaneous

📘
Testing Configurations