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 through a TabaPay hosted page without the hassle of meeting PCI-DSS requirements.
Getting Started
As you are boarding with TabaPay, you will receive a script, iframe URL, and ClientID to use along with your browser SDK integration. This URL will allow you to call each of the following listed keys.
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 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 transpose | 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. |
| toolTipText | Any String | Invalid card number | Optional. Validity message for all form validity functions which also affect tool tip message. This can now be used instead of or alongside invalidText. |
| cardNumberMinDigits | Any Number | 13 | Optional. This will set the minimum card number length to validate. |
| cardNumberMaxDigits | Any Number | 19 | This will set the maximum card number length to validate. |
| allowedNetworks | Object | all values set to true | This will disable/enable cards on specific networks to be validated. If a network is set to false no cards of that detected network can be submitted. Other may include international or regional networks.MasterCardVisaAmexDiscoverOther |
| 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 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. |
| toolTipText | Any String | Validity message for all form validity functions which also affect tool tip message. |
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, 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. |
| tooltip | Any String | Validity message for all form validity functions which also affect tool tip message |
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 | |
| 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 | 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 |
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 | 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 |
|---|---|---|---|
| clientid | Any String | ||
| boxShadow | |||
| layout | default, separate-rows | default | |
| unlimitedWidth | true or false | false | |
| firstSixCard | true or false | false | Modifies the return token to now have four fields instead of three to include the following: "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 loaded body Note: For best practice when creating an iframe, leave padding and margin to their defaults and prioritize sizing through insetFrame, unlimitedWidth, and the parent container. |
| toolTip | true or false | Tooltip for input boxes show up if set to true. InvalidText shows up in the text of the tooltip |