Animated Credit Card Input With Data Access

Introduction

• Skeuomorphic credit-card 💳
• Now you could scale the Credit Card for smaller screens
• Now you could use CardView as a Component. example use case: showing saved payment details, etc.
• Lite version for smaller screens (or if skeuomorphic is not really your thing)
• Credit-card input validations & formatting while you’re typing
• Form is fully navigatable using keypad
• Works on both Android and iOS

Installation

npm i --save react-native-credit-card-input

Example

import React, { Component } from "react";
import {
  StyleSheet,
  View,
} from "react-native";

import { CreditCardInput, LiteCreditCardInput } from "react-native-credit-card-input"; // 0.3.3

const s = StyleSheet.create({
  container: {
    backgroundColor: "#F5F5F5",
    marginTop: 60,
  },
  label: {
    color: "black",
    fontSize: 12,
  },
  input: {
    fontSize: 16,
    color: "black",
  },
});

const USE_LITE_CREDIT_CARD_INPUT = false;

export default class Example extends Component {
  _onChange = formData => {
    /* eslint no-console: 0 */
    console.log(JSON.stringify(formData, null, " "));
  };

  _onFocus = field => {
    /* eslint no-console: 0 */
    console.log(field);
  };

  render() {
    return (
      <View style={s.container}>
        { USE_LITE_CREDIT_CARD_INPUT ?
          (<LiteCreditCardInput
              autoFocus
              inputStyle={s.input}

              validColor={"black"}
              invalidColor={"red"}
              placeholderColor={"darkgray"}

              onFocus={this._onFocus}
              onChange={this._onChange} />) :
            (<CreditCardInput
                autoFocus

                requiresName
                requiresCVC
                requiresPostalCode

                labelStyle={s.label}
                inputStyle={s.input}
                validColor={"black"}
                invalidColor={"red"}
                placeholderColor={"darkgray"}

                onFocus={this._onFocus}
                onChange={this._onChange} />)
        }
      </View>
    );
  }
}

Tutorial