Skip to content

Commit

Permalink
feat: add enableCopy to JS and react sdk's (#78)
Browse files Browse the repository at this point in the history
* feat: add enableCopy to web elements options

* feat: add enableCopy and validateOnChange to react elements options

* feat: add alert for enableCopy browser support

* fix: address pr feedback
  • Loading branch information
kevinperaza authored Feb 27, 2023
1 parent 8eb2440 commit a33d5a5
Show file tree
Hide file tree
Showing 2 changed files with 106 additions and 61 deletions.
10 changes: 9 additions & 1 deletion docs/sdks/web/javascript/options.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,9 @@ You can customize the behavior of your Elements using the following options:
| `password` | false | _boolean_ | true | [`text`](/docs/sdks/web/javascript/types#text-element) | Boolean used to set the text element input type as [password](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password) |
| `iconPosition` | false | _string_ | true | [`cardNumber`](/docs/sdks/web/javascript/types#card-number-element) | String used to determine the position of the card element icon. Expected values are: `left` (default), `right` or `none`. |
| `cardBrand` | false | _string_ | true | [`cardVerificationCode`](/docs/sdks/web/javascript/types#card-verification-code-element) | [Brand identifier](#card-brands) used to determine proper input format and default placeholder/aria-label |
| `validateOnChange` | false | _string_ | false | [`cardNumber`](/docs/sdks/web/javascript/types#ard-number-element)<br/>[`cardExpirationDate`](/docs/sdks/web/javascript/types#card-expiration-date-element)<br/>[`cardElement`](/docs/sdks/web/javascript/types#card-element) <br/>[`cardVerificationCode`](/docs/sdks/web/javascript/types#card-verification-code-element) | Switches from default validation `onBlur` to `onChange`. |
| `validateOnChange` | false | _boolean_ | false | [`cardNumber`](/docs/sdks/web/javascript/types#ard-number-element)<br/>[`cardExpirationDate`](/docs/sdks/web/javascript/types#card-expiration-date-element)<br/>[`cardElement`](/docs/sdks/web/javascript/types#card-element) <br/>[`cardVerificationCode`](/docs/sdks/web/javascript/types#card-verification-code-element) | Switches from default validation `onBlur` to `onChange`. |
| `value` | false | _string_ | true | All | Sets a static value for the element input. |
| `enableCopy` | false | _boolean_ | true | [`cardNumber`](/docs/sdks/web/javascript/types#ard-number-element)<br/>[`cardExpirationDate`](/docs/sdks/web/javascript/types#card-expiration-date-element)<br/>[`cardElement`](/docs/sdks/web/javascript/types#card-element) <br/>[`cardVerificationCode`](/docs/sdks/web/javascript/types#card-verification-code-element) | Renders a button to allow users to copy the value of the element to the browser's clipboard without your application ever interacting with the data. |

<Alert type={Alerts.WARNING}>
Switching the validation strategy from <code>onBlur</code> to{" "}
Expand All @@ -49,6 +50,13 @@ You can customize the behavior of your Elements using the following options:
option is set as <code>true</code>.
</Alert>

<Alert type={Alerts.WARNING}>
<code>enableCopy</code> is available for Chromium-based browsers only; we're
actively working on multi-browser support. Have feedback or questions? Feel
free to join us in our{" "}
<a href="https://community.basistheory.com">Slack community</a>.
</Alert>

<Alert>
The <code>autoComplete</code> option is turned off by default, contrary to the
default browser behavior which is on.
Expand Down
Loading

1 comment on commit a33d5a5

@vercel
Copy link

@vercel vercel bot commented on a33d5a5 Feb 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.