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 ConfigurationsClients 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 |
|
| |
unlimitedWidth | boolean |
|
| |
firstSixCard | boolean |
|
| Modifies the return token to have four fields: Remaining three fields and default is:
|
formRowGap | string | CSS Units |
| Creates more space between the top and bottom form rows (e.g. Between card Number and bottom rows) |
formHorizontalGap | string | CSS Units |
| Creates more space between the left and right form columns (e.g. Between card Exp and CVV) |
labelsAsPlaceholders | boolean |
|
| 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 |
| Set the padding of the loaded body |
margin | string | CSS Units |
| Set the margin of the loaded body \nNote: When creating an iframe, leave padding and margin at default. Use |
toolTip | boolean |
| Tooltip for input boxes. If set to |