react-credit-card icon indicating copy to clipboard operation
react-credit-card copied to clipboard

Ability to choose accepting card types

Open Jafferwaffer opened this issue 9 years ago • 4 comments

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?

Jafferwaffer avatar Nov 02 '16 12:11 Jafferwaffer

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

JohnyDays avatar Nov 03 '16 16:11 JohnyDays

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;

Jafferwaffer avatar Nov 04 '16 09:11 Jafferwaffer

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.

JohnyDays avatar Nov 04 '16 10:11 JohnyDays

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

Jafferwaffer avatar Mar 20 '17 14:03 Jafferwaffer