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.
| 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 | above | When inputing 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 option field, but the default value is the word: Required |
| separator | single space ' ' , double space ' ', dash '-', or empty '' | single space ' ' | The space in 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, and top-right | bottom left | Location of invalid text |
| invalidLabelColorEvent | input, change, and false | change | input will make the label change colors while typing. change will make the label change colors when clicked away.false disables label color change. |
| labelInBorder | static and transposeorfalse | false | When 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. |
| customTranspose | true or false | false | Allows 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. |
| invalidSpanEvent | change, input false | change | Controls when the invalid span will appear. |
| placeholderText: Optional(AnyString), | Any String |
expirationDateInput
Customize the entry field for the expiration date.
| Key | Values | Default | Notes |
|---|---|---|---|
| dropdowns | Any Number | Optional | |
| 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 will make the label change colors while typing.change will make the label change colors when clicked away.false disables label color change. |
| invalidSpanEvent | change, input false | change | Controls when the invalid span will appear. |
| labelInBorder | static and transposeorfalse | false | When 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. |
| customTranspose | true or false | false | Allows 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).
| Key | Values | Default | Notes |
|---|---|---|---|
| labelText | Any String | 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, and top-right | bottom left | Location of invalid text |
| invalidInputFillColor | true or false | false | Activate invalid input color |
| invalidLabelColorEvent | input , change, and false | change | input will make the label change colors while typing.change will make the label change colors when clicked away.false disables label color change. |
| labelInBorder | static and transposeorfalse | false | When 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. |
| hideinput | true or false | false | Hides a specified input when true with no eye toggle. |
| invalidSpanEvent | change, input false | change | Controls when the invalid span will appear. |
| customTranspose | true or false | false | Allows 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
| Key | Values | Default | Notes |
|---|---|---|---|
| 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.
| 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 | |
| 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 |
submit
Specific attributes to customize the submit button.
| Key | Values | Default | Notes |
|---|---|---|---|
| buttonText | Any String | Submit | Optional |
| buttonType | submit | ||
| order | 1or2or3 | ||
| enabled | boolean |
reset
Specific attributes to customize the reset button.
| Key | Values | Default | Notes |
|---|---|---|---|
| buttonText | Any String | Reset | Optional |
| buttonType | reset | ||
| order | 1or2or3 | ||
| enabled |
cancel
Specific css to customize the cancel button.
| Key | Values | Default | Notes |
|---|---|---|---|
| buttonText | Any String | Cancel | Optional |
| buttonType | cancel | ||
| order | 1or2or3 | ||
| enabled |
insetFrame
Customize the iFrame size and background color.
| Key | Values | Default | Notes |
|---|---|---|---|
| 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 | Notes |
|---|---|---|---|
| placement | compact, above | above | |
| textColor | #000 | ||
| fontFamily | system-ui | ||
| fontSize | 1rem | ||
| fontWeight | 500 | ||
| letterSpacing | 0 | ||
| gap | 0.5em | ||
| invalidTextColor | #e55 | ||
| fontWeight | 500 |
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 Colors | black | Border 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 | |
| invalidBorder | Any CSS border var example | 1px solid #e55 | Highlights invalid input borders |
| invalidBorderFocus | Any CSS border var example | 1px solid #e55 | Border style when actively using an invalid input |
| 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 | |
| fontSize | CSS Units | 1em | |
| letterSpacing | CSS Units | 0.1ch | |
| 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. |
invalidStyle
Customize error text.
| Key | Values | Default | Notes |
|---|---|---|---|
| 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 | Notes |
|---|---|---|---|
| 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 |
|---|---|---|---|
| layout | default, separate-rows | default | |
| unlimitedWidth | true or false | false | |
| formRowGap | CSS Units | '0.5rem' | |
| formHorizontalGap | CSS Units | '1rem' | |
| labelsAsPlaceholders | true or false | false | |
| intrinsicWidth | Any Number | ||
| ToolTip | true or false | Tooltip for input boxes show up if set to true. InvalidText shows up in the text of the tooltip |