JohnyDays / react-credit-card

React port of the display part of Card by @jessepollak
MIT License
229 stars 60 forks source link

Ability to choose accepting card types #20

Open Jafferwaffer opened 8 years ago

Jafferwaffer commented 8 years ago

The functionality to allow setting of which cards can be used already exists in Payment.js, see this commit https://github.com/jessepollak/payment/commit/d9ddf82ec82016977712f9ace21d92df25c8d111. Can we please get this exposed?

JohnyDays commented 8 years ago

You can require("payment") and call those functions yourself 😄

Jafferwaffer commented 8 years ago

This doesn't seem to work.

The Payment card array has the cards removed that I remove in the constructor, but the Card component doesn't use this Payment and so these cards still show.

Here is a snippet of my code:

import React from 'react';
import Card from 'react-credit-card';
import Payment from 'payment';

class CreditCard extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      currentFocus: null
    };

    Payment.removeFromCardArray('dinersclub');
    Payment.removeFromCardArray('laser');
    Payment.removeFromCardArray('jcb');
    Payment.removeFromCardArray('unionpay');
    Payment.removeFromCardArray('discover');
  }

  render() {
    return (
      <Card
       cvc={securityCode}
       name={name}
       number={number}
       focused={this.state.currentFocus}
       expiry={expiry}
       />
    );
  }
}

export default CreditCard;
JohnyDays commented 8 years ago

I'll test it out later, though if that doesn't work I'm not sure what can be done, since I assume Payment is a shared singleton.

Jafferwaffer commented 7 years ago

For anyone having a similar problem you can simply override the CSS for the classes of card types you do not accept. As this solved my issue feel free to close