fix: add id prop to StripeCardInput component (#2274)

* fix: add `id` prop to StripeCardInput component * fix: add id prop to type declaration Co-authored-by: Jose Leandro Torres <jtorressicilia@gmail.com>
nexxtway · Sep 6, 2021 · 28a0578 · 28a0578
1 parent efae180
commit 28a0578
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/src/components/StripeCardInput/index.d.ts b/src/components/StripeCardInput/index.d.ts
@@ -25,6 +25,7 @@ export interface StripeCardEvent {
 }
 
 export interface StripeCardInput extends BaseProps {
+    id?: string;
     apiKey: string;
     label?: ReactNode;
     labelAlignment?: LabelAlignment;

diff --git a/src/components/StripeCardInput/index.js b/src/components/StripeCardInput/index.js
@@ -17,6 +17,7 @@ import StyledCardInput from './styled/cardInput';
  */
 const StripeCardInput = React.forwardRef((props, ref) => {
     const {
+        id,
         apiKey,
         label,
         labelAlignment,
@@ -83,6 +84,7 @@ const StripeCardInput = React.forwardRef((props, ref) => {
 
     return (
         <StyledContainer
+            id={id}
             ref={ref}
             className={className}
             style={style}
@@ -110,6 +112,8 @@ const StripeCardInput = React.forwardRef((props, ref) => {
 });
 
 StripeCardInput.propTypes = {
+    /** The id of the outer element. */
+    id: PropTypes.string,
     /** The application's API key. To use Stripe,
      * you must get an API Key. See https://dashboard.stripe.com/account/apikeys
      * to get an API Key. */
@@ -177,6 +181,7 @@ StripeCardInput.propTypes = {
 };
 
 StripeCardInput.defaultProps = {
+    id: undefined,
     label: undefined,
     labelAlignment: 'center',
     hideLabel: false,