amaroteam / react-credit-cards Goto Github PK

Hello, thanks for your lib its amazing.

How can i change the the sccs values?
For example: $rccs-name-font-family: whaterver;

I try to

@import '../../../../node_modules/react-credit-cards/lib/styles.scss';

$rccs-size: 350px !default;

i tried importing the CSS styles-compiled.css file into a react app, and i got an error from webpack. while trying to bundle the app

i expected the css file to be loaded for the Card component, rather i got the following error:

bundle.js:3676 ./~/react-credit-cards/es/styles-compiled.css
Module parse failed: ~/node_modules/react-credit-cards/es/styles-compiled.css Unexpected token (3:0)
You may need an appropriate loader to handle this file type.
| /** ISSUERS **/
| /** Images **/
| .rccs {
|   margin: 0 auto;
|   -webkit-perspective: 1000px;
 @ ./src/components/Forms/AddCardForm.js 28:0-74
 @ ./src/screens/Payments.js
 @ ./src/App.js
 @ multi (webpack)-dev-server/client?http://localhost:4172 babel-polyfill ./src/App.js

react version : 16.3.1

Hello,

I like your credit card library that's very amazing. However, I've tried any ways and still can't show "**** **** **** 1234" on the card. Would you mind if you can demo how to show "*" on the card?

Thank you.

Hi,
I use Dashlane for password management. When using the component in a page with Dashlane's extension for auto-completion, the valid-thru field becomes too small.
Here is a screenshot:

Is there any piece of doc or tip that shows or explains some way to focus on a specific field? For instance, after a user types two digits on a field, automatically focus on the next field?

Too much orange and interferes with the logo colors

How to change the gradient color of a credit card?
Can this be done through styled component ?

Hello, Can you add support for Troy credit cards or i can send a PR but i am unable to reproduce the steps that specified within the Contributing.md file to get project going.

Troy credit card patterns : /^(?:9792|65\d{2}|36|2205)\d{12}$ /

I would like an example to know the operation of the callback as prop of this library

Does this support something like this?

It would be cool that we can also display a card in this way so it can be edited. Is this possible?

Hello guys,
Thank you very much for your component. It is awesome.
In IE11 the Card component is not rendered. The console is empty and a page is empty. Your deployed link also is empty.
Is it possible to use this great component in IE11?
Thank you.

Is possible to show **** **** **** 1234 on number card?

In Safari 12.0.3 on mac, the back of card was displaying like this:

I had to add this to fix it:

.rccs_card, .rccs__card--front {
  -webkit-backface-visibility: hidden;
}

Hi & thx for this amazing component.

Any chance we can use our own input tags?

I believe the component is missing a prop in order to trigger animation to the card's backside.

I am implementing this into my app and can't get it to focus on the fields. It just stays dark whenever you touch one of the fields and won't turn the card to the backside whenever you touch the CVC field.

When I follow the CONTRIBUTING.md and run npm start

npm start             
npm ERR! missing script: start

Hello,

I would like to implement onClick event on Cards component to be able to delete the cards that are displayed, Is there a way out ?

import Cards from "react-credit-cards";

<Cards
      cvc=""
      expiry="**/**"
      name={``}
      number={``}
      preview={true}
      onClick={}
 />

I have an issue when I am using the component

index.js:634 Uncaught ReferenceError: global is not defined at Object.<anonymous> (index.js:634) at Object.../../../node_modules/payment/lib/index.js (index.js:636) at __webpack_require__ (bootstrap:78) at Module.../../../node_modules/react-credit-cards/es/index.js (index.js:1) at __webpack_require__ (bootstrap:78) at Module../app/components/PersonInformation.tsx (PersonInformation.tsx:1) at __webpack_require__ (bootstrap:78) at Module../app/components/steps.ts (steps.ts:1) at __webpack_require__ (bootstrap:78) at Module../app/app.tsx (main.js:601)

In the expiry field, it not takes month properly. It takes 20 in that field as month

The component is not behaving properly when the card flips over to show the back for the user to input their CSV.

Please correct the example usage section.
The Usage Example has 'focus' state and prop, although below in the Props part the prop named as 'focused'.

Hi, Thanks for your contribution for the open world! But Please for God Sake, Add more readme! I'm totally messing my head for something like onChange method that will change the stuffs! But No luck Please. Either you open put a folder inside your code called example otherwise make the readme.md more descriptive and usable. PLEASE

Thanks.

I want to mask the credit card in the preview. I have added preview prop but still i can see the unmasked numbers. Please find the code below.

`
`import React from 'react';
import Cards from 'react-credit-cards';





export default class App extends React.Component {
  state = {
    cvc: '',
    expiry: '',
    focus: '',
    name: '',
    number: '',
    preview: true,
    issuer: 'visa'
  };
 
  handleInputFocus = (e) => {
    this.setState({ focus: e.target.name });
  }
  
  handleInputChange = (e) => {
    const { name, value } = e.target;
    
    this.setState({ [name]: value });
  }
  
  render() {
    return (
      <div id="PaymentForm">
        <Cards
          cvc={this.state.cvc}
          expiry={this.state.expiry}
          focus={this.state.focus}
          name={this.state.name}
          number={this.state.number}
          preview={this.state.preview}
          issuer={this.state.issuer}
        />
        <form>
        	<input
            type="tel"
            name="number"
            placeholder="Card Number"
            onChange={this.handleInputChange}
            onFocus={this.handleInputFocus}
          />
         
        </form>
      </div>
    );
  }
}`

it's possible hidde the 'valid thru' field ?

I am using react-credit-cards plugin, and having warnings with the latest version of react js.

build.umd.js:499 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: ReactCreditCards

The environment I am following::
"react": "16.9.0",
"react-credit-cards": "0.7.0",

How can I resolve this warning? Please suggest

Hello, you can add the ability to omit the name of the cardholder.
My payment provider does not require the cardholder's name.
Thank you!

Hi! First of all, thanks for this great component :)

I've hit an issue where the maxLength property for AMEX (15 chars + 2 spaces = 17) and DINERS (14 chars + 2 spaces = 16) doesn't count the spaces in contrast to the maxLength for MASTER and VISA (16 chars + 3 spaces = 19)

https://github.com/amarofashion/react-credit-cards/blob/fea2e002aa63b707cf697b4ae236738c237ad329/src/index.js#L185

Is this the expected behavior? Thanks 😁

I am trying to use with Stripe, but they said here it is not possible because of PCI compliance.

However, I really want to use React Credit Cards. Is there anyway to do that on Stripe? If don't, which payment gateway is allowed?

We should have a way to display, on the card, if the card is a credit or debit card.

It appears the preview prop doesn't actually scramble or hide the credit card numbers. Does something besides that property need to be set in order to make that work? I didn't see the implementation in the source code.

I am using react-credit-cards in conjunction with redux forms. I have everything working except the cvc animation. It does not flip the card over. Any suggestions on what to try?

My code is here: https://gist.github.com/jennykortina/f7481dfdf56a49290a7d5f0ae378ebb6

Awesome work thank you!

Hi, I was testing in the sandbox with the provided credit card numbers in this link, and when I paste the Amex numbers the CVC flip effect has stopped working. The other card numbers work properly.

checkout test URL. Works on Desktop Chrome

https://1800battery.com/provider-order-template

IOS renders without CVC

is there any way to mask credit card number.

I want to mask number like this "**** **** **** 4242"

I am Invoking the component like below:

<Cards number={parsedNumber} name={name} expiry={expiry} 
               cvc={cvc} focused={focused} acceptedCards={acceptedCards}
               callback={this.handleCallback} preview={true} />

Expected the number will be shown like this "**** **** **** 4242". but actual number is showing on the card

Use number type for:

• card number
• card expiry
• card cvc

Test if correct keyboard is shown on mobile.

Now that React 16 is released, is there anything that needs to be updated for compatibility?

At the very least the peerDependency for react needs to be updated.

When entering the CVC on Safari, the card does not flip to the back side of the card and mirrors all of the data on the front of the card

It is a really nice component. But the documentation could be improved (mainly about some requirement on input fields for the card number, expired date and CVC). For example, maybe it is better to specify that one would need to give their input special and fixed input name for the focus function:

<Input name="name" /> for name input: name="name" required
<Input name="number" /> for card number input: name="number" required
<Input name="expiry" /> for expired date input: name="expiry" required
<Input name="cvc" /> for cvc input: name="cvc" required

or the focus feature such as <Card focused="expiry" /> would not work.
Or maybe it would be even better to allow users to customise their input name, and set a way for <Card name="" cardNumber="" expiry="" cvc="" /> to read those custom input names, like

<Card 
    inputNames={
       name: "my input name for the card name"
       cardNumber: "my input name for the card number"
       expiry: "my input name for the expire date"
       cvc "my input name for the cvc"
    }

because <Card /> prop names like name, number seems to be pretty common?

Besides, it may also be beneficial for developers to integrate formatCreditCardNumber formatCVC formatExpirationDate and Payment plugin in your code example into this repo as API functions because similar functions are usually used together with card payment.

Do it support fully customize of the fields look and fields and fields showing seperating. how to put validations

Hello,
I try to pass data like "XXXX XXXX XXXX 0976" in the card number,
but it render only "0976 • • • • • • • • • • • •"

Can you help me ?

I am getting errors in the cards tag

this is the error=>'input' is not defined no-undef

is it possible that once I have this submitted and a card saved, to render the saved card information(card image and all) to another component?

Thanks!

Hi, it`s an awesome dependency thanks.
But preview is not working

Now there is a problem with sourceMappingURL.
I don't use sass in my project and I include .css file. So when I include styles-compiled.css, I get follow error:

css/styles-compiled.css.map for is not found

I don't want to include sourcemap, because it's overhead

Apparently there are some newer VISA cards with 19 digits. However, the card visualizer doesn't show any digits beyond 16. Can this be fixed?

• needs to handle keyframes and pseudo-elements
• can't use a library since it would add coupling and big dependencies

One option is nano-css but I'll search for newer options anyway