A better credit card form for React Native

Overview

React Native Credit Card 💳

A better credit card form for React Native

React native port of the display of Card by @jessepollak

rn-credit-card rn-ios

Demo

https://exp.host/@sonnylazuardi/react-native-credit-card-demos

Background

This is a react native port of Card. There is a react port of Card, but it still renders on browser DOM (which is not as good as native view), so this library will take advantage of both.

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 react-native-credit-card
  • In your react native script add these lines
import CreditCard from 'react-native-credit-card';


<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

Examples

todo.

Most of the credit goes to @jessepollak and @JohnyDays for creating and mantaining Card and React Credit Card, I just ported it over to React Native.

Comments
  • Add example project

    Add example project

    Hi,

    Edit: Just read through react-card project. Big thanks for the library

    Cheers, Sam

    This should close https://github.com/sonnylazuardi/react-native-credit-card/issues/1

    opened by sbycrosz 3
  • added props to change expiryBefore and expiryAfter text

    added props to change expiryBefore and expiryAfter text

    Fix https://github.com/sonnylazuardi/react-native-credit-card/issues/11

    Added option to showExpiryAfter that fix https://github.com/sonnylazuardi/react-native-credit-card/issues/4

    opened by cassianomon 2
  • Removed flex from card container which was causing items to overlap

    Removed flex from card container which was causing items to overlap

    I was having issues formatting the card. I was only able to fix it by removing the flex from the card container. I was not using any image for the card, so this may have caused the issue. Either way, it works with and without card images now.

    Before: This is a flex:1 view with a card inside. No styling is applied to the card. screen shot 2017-09-11 at 2 47 18 pm

    After: This is a flex:1 view with a card inside. No styling is applied to the card. screen shot 2017-09-11 at 2 43 23 pm

    opened by jmpridgen 2
  • Please, share sample your app

    Please, share sample your app

    Hi @sonnylazuardi,

    I would like to play with your library, can you please share your sample implementation (as shown in the gif on your README)? It would come highly in handy, nice work by the way.

    Thanks

    opened by tolu360 2
  • Is `VALID THRU` really necessary?

    Is `VALID THRU` really necessary?

    The extra space used by VALID THRU often causes the card holder name to be displayed in two lines. This don't match what is printed in the actual card.

    Given that the current design already have a self explanatory text Month\Year I recommend removing the valid thru text.

    opened by rturk 0
  • Cannnot change card labels

    Cannnot change card labels

    I'm unable to change/remove the card labels such as "FULL NAME", "MONTH/YEAR", even if I try to use a frontImage the text will still be displayed

    opened by gabsbelini 0
  • Update NPM

    Update NPM

    Hi there,

    I installed normally using yarn and noticed that the npm package is outdated. By specifically using the github repository works fine.

    It would be good to update the npm version to the latest.

    opened by ammichael 1
  • Nothing is showing

    Nothing is showing

    I tried to use it like this: <View style={styles.container}> <CreditCard style={{ marginVertical: 10, marginHorizontal: 10, marginBottom: 0, elevation: 3, alignSelf: "center" }} type={this.state.type} imageFront={require("./images/card-front.png")} imageBack={require("./images/card-back.png")} shiny={true} bar={false} focused={this.state.focused} number={this.state.number} name={this.state.name} expiry={this.state.expiry} cvc={this.state.cvc} /> But nothing is showing.

    opened by c0z0 4
react-native-card-data-input - just another credit card input package

react-native-card-data-input - just another credit card input package

Erick Estevão Riva Pramio 6 Oct 25, 2021
Easy, cross-platform credit-card input for your React Native Project! Start accepting payment 💰 in your app today!

React Native Credit Card Input Easy (and good looking) credit-card input for your React Native Project ?? ?? Code: <CreditCardInput onChange={this._on

Sam Aryasa 1.4k Sep 24, 2022
React-Native Credit Card Animated UI with information validation

rn-credit-card-ui : A Credit Card React-Native UI component, it uses react-native-flip-card to flip the UI component smoothly and creditcardutils to v

Lemine 3 Aug 8, 2022
Credit cards and other payment icons in React Native

react-native-payment-icons There wasn't a package for displaying credit cards and other payment methods icons in React Native. Wasn't! We use SVGs tha

Henrique Bruno 10 Jul 4, 2022
A react native extension which allows you to control TextInput better.

React Native TextInput Utils (iOS only) THIS PACKAGE IS NO LONGER MAINTAINED SINCE 2018 AND DOES NOT WORK WITH LATEST REACT NATIVE A react native exte

DickyT 85 Aug 19, 2020
Provides a function like transform-origin in css, anchor point in iOS, pivot point in Android. It makes3D transform animation better in React-Native.

react-native-anchor-point Provide a simple, tricky but powerful function, withAnchorPoint , like Anchor Point in iOS, Pivot Point in Android, transfor

RY Zheng 169 Sep 30, 2022
A react native card component

React Native Card View Only tested in IOS, but I think should works in Android too. Try it with Exponent Install npm install --save react-native-card-

Jack Lam 104 Nov 4, 2021
Card Media component for React Native

react-native-card-media Card Media component for React Native. Also supports multiple image layout. single & double three & four five Installation npm

Dondoko Susumu 68 Aug 9, 2021
Simple card view component for React-Native

React Native Simple Card View Easiest way to adding a card view on your screen. Hey, v0.3.0 is now released. You can use new component : CardView See

Talut TASGIRAN 27 Mar 17, 2022
A material design card component, customizable and versatile

react-native-material-cards A material design card component, customizable and versatile. See Google Material Design for more info on Cards. Installat

Swapnil Devesh 127 Sep 15, 2022
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

FuYaoDe 3.2k Sep 29, 2022
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])

React Native MarqueeLabel (remobile) A marquee label for react-native if you use js pure marquee, use remobile/react-native-marquee[ https://github.co

YunJiang.Fang 114 Jul 18, 2022
react-native-swiper2 ★86 - Swiper component for React Native. Supersede react-native-swiper

react-native-swiper2 react-native-swiper is now active again, so swiper2 will stop maintaining. Changelogs [v2.0.7] correct onPageChange index. https:

Sunny Luo 84 Feb 23, 2022
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

Shinix 62 Jul 15, 2022
A React Native module that allows you to crop photos, built with react native Animated api and react-native-gesture-handler.

react-native-image-cropview A React Native module that allows you to crop photos, built with react native Animated api and react-native-gesture-handle

Cristian Tomescu 12 Aug 30, 2022
Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share

React Native Social Share Use the built-in share view from iOS and Android to let the user share on Facebook and Twitter. It will use the user's exist

Kim Døfler 414 Aug 29, 2022
SVG library for React Native, React Native Web, and plain React web projects.

react-native-svg react-native-svg provides SVG support to React Native on iOS and Android, and a compatibility layer for the web. Check out the demo F

null 6.3k Sep 21, 2022
PicPay Application using React Native, Expo, @react-navigation/native, @react-navigation/bottom-tabs, expo-linear-gradient and styled-components

React Native - PicPay Aplicação PicPay usando React Native, Expo, @react-navigation/native, @react-navigation/bottom-tabs, expo-linear-gradient e styl

Osvaldo Kalvaitir Filho 24 Sep 30, 2022
react-native-splashscreen ★358 - A splash screen for react-native

React Native SplashScreen (remobile) A splashscreen for react-native, hide when application loaded Installation npm install @remobile/react-native-spl

YunJiang.Fang 371 Jul 25, 2022