Simple, self-contained payment form component for react-native apps.

Installation

npm install pier-react-native-payment-form

or

yarn add pier-react-native-payment-form

Usage

import React from 'react';
import PaymentForm from 'pier-react-native-payment-form';
import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  input: {
    borderWidth: 0,
    borderBottomWidth: 1,
  },
  errorInputStyles: {},
  formGroupStyles: {},
});

function App() {
  const [formData, setFormData] = React.useState({
    valid: false,
    number: '',
    date: '',
    cvv: '',
    name: '',
  });

  const onChange = (data) => {
    setFormData(data);
  };

  return (
    <PaymentForm
      onChange={onChange}
      inputStyles={styles.input}
      errorInputStyles={styles.errorInputStyles}
      formGroupStyles={styles.formGroupStyles}
    />
  );
}

Required Properties

• onChange: function to handle form values

onChange will receive an object with the form's values as a parameter:

{
  valid: boolean; // displays if the values are valid
  number: string; // Credit Card number
  date: string; // Expiration Date
  cvv: string; //  CVC/CVV code
  name: string; //cardholder's name
}

Optional Properties

• inputStyles: style object for the inputs in the form
• errorInputStyles: style object for the error messages
• formGroupStyles: style object for groups of inputs

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT