Could not find a declaration file for module 'react-credit-cards-2'

[gp-fran]

Hi guys, I'm getting this error when trying to import Cards

Any though?

[smooth-lee]

I also solved the problem as below.

However, the solution I proposed is not a good one.

react-credit-cards-2.d.ts

Create a file with the name above and create the following:

Declares module 'credit-credit-cards-2';

I hope you found it helpful. Thank you.

[felquis]

@smooth-lee how do we solve this problem in this source?

Thank you for sharing @gp-fgutierrez

[yangricardo]

I recently discovered this library, would be nice to have Typescript support

[felquis]

@yangricardo I believe we can start adding this suggestion https://github.com/felquis/react-credit-cards-2/issues/7#issuecomment-1372263106?

cc @SeanCassiere had plans to introduce typescript

[yangricardo]

@yangricardo I believe we can start adding this suggestion #7 (comment)?

cc @SeanCassiere had plans to introduce typescript

Yeah, I recently had to use it in nextjs with dynamic import and to import using typescript notation i defined something similar to this based on this props

type CardsProps = {
  name: string; //name {string}: Name on card. *
  number: string; // number {string|number}: Card number. *
  expiry: string | number; //{string|number}: Card expiry date. 10/20 or 012017 *
  cvc: string | number; //  {string|number}: Card CVC/CVV. *
  focused?: 'name'|'number'|'expiry'|'cvc' //{string}: Focused card field. name|number|expiry|cvc 
  locale: unknown; // should be defined  {object}: Localization text (e.g. { valid: 'valid thru' }).
  placeholders: unknown; // should be defined {object}: Placeholder text (e.g. { name: 'YOUR NAME HERE' }).
  preview: boolean; // {bool}: To use the card to show scrambled data (e.g. **** 4567).
  issuer: string; // {string}: Set the issuer for the preview mode (e.g. visa|mastercard|...)
  acceptedCards: string[]; // {array}: If you want to limit the accepted cards. (e.g. ['visa', 'mastercard']
  callback: (args:unknown[])=>unknown; // {func}: A callback function that will be called when the card number has changed with 2 paramaters: type ({ issuer: 'visa', maxLength: 19 }), isValid ({boolean})
}

the unkown objects i could not understand how to define, i mainly used the name, number, expiry, cvc, and focused props, but could not infer no metadata, like issuer, from this component. maybe with a better definition of the callback function this would be possible

[SeanCassiere]

@yangricardo I believe we can start adding this suggestion #7 (comment)?

cc @SeanCassiere had plans to introduce typescript

Sorry, I migrated to another country and life kind of took over.

I'd done quite a bit of the migration. Will make a PR soon.

[SeanCassiere]

PR is up. https://github.com/felquis/react-credit-cards-2/pull/10

[felquis]

Just released the PR above, try version 1.0.0 and let us know if this issue can be closed.

cc @gp-fgutierrez @smooth-lee @yangricardo

[yangricardo]

Testing right now, congrats for the work about the Typescript support, changing my old type and adopting yours =D

On the other hand, the callback data is returning some unexpected responses, not sure if is some render problem, but i expected that this callback were activated each time i update some card number... The card number i used is a common card for testing purposes, that visually, is corrected assumed to be issuered by Visa

[felquis]

@yangricardo Thank you for reporting

if you can please create a new issue regarding this problem - I'll casually mention @SeanCassiere about this https://github.com/felquis/react-credit-cards-2/issues/7#issuecomment-1496775340

[felquis]

Closing this issue because the declaration file not found is not a problem anymore.