rncv

React native credit card input component

Usage no npm install needed!

<script type="module">
  import rncv from 'https://cdn.skypack.dev/rncv';
</script>

README

React Native Credit Card 💳

A better credit card form for React Native

React native port of the display of Card by @hebertcisco

rn-credit-card rn-ios

Demo

https://exp.host/@hebertcisco/rncv-demos

Goals

  • Look like Card.
  • Provide a react interface for displaying credit card information.

Design Resources

I got the design resources from the Ramakrishna V's dribbble

design

Usage

  • npm install --save rncv
  • In your react native script add these lines
import CreditCard from 'rncv';


<CreditCard
    type={this.state.type}
    imageFront={require('./images/card-front.png')}
    imageBack={require('./images/card-back.png')}
    shiny={false}
    bar={false}
    focused={this.state.focused}
    number={this.state.number}
    name={this.state.name}
    expiry={this.state.expiry}
    cvc={this.state.cvc}/>

Available props

  • cvc: number(max 4 characters, will cut the rest)(The "/" will be automatically added)
  • name: string (max 2 lines)
  • number: credit card number(max 16 characters, will cut the rest)
  • expiry: number(max 4 characters, will cut the rest)
  • imageFront: image(image file for the card front card background -- with require)
  • imageBack: image(image file for the card back card background -- with require)
  • shiny: boolean(show sticker)
  • bar: boolean(show bar on the back)
  • focused: one of the above fields
    • type
    • name
    • number
    • expiry
    • cvc (Upon focusing cvc, the form will be rotated until this is changed.)
    • null
  • type: Available in case you need to explicitly specify the card type. In most cases this will be inferred for you as the user fills the form, so you won't need to use it. One of the following:
    • dankort
    • discover
    • mastercard
    • visa
    • amex -fullNameText: Change the default text for FULL NAME -showExpiryBeforeLabel: boolean(show the MONTH/YEAR text) -showExpiryAfterLabel: boolean(show the VALID THRU text) -expiryBeforeText: Change the default text for MONTH/YEAR -expiryAfterText: Change the default text for VALID THRU

Todo

  • Automated test
  • More credit card type variations