We will use the react-native-credit-card-input library to capture the user's credit card details. For this screen to work, we will request the cart, the user, and several important actions from Redux:
/*** src/screens/Payment.js ***/
import React from 'react';
import { View } from 'react-native';
import { CreditCardInput } from 'react-native-credit-card-input';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Icon, Button, Text, Spinner, Title } from 'native-base';
import PropTypes from 'prop-types';
import * as PaymentsActions from '../reducers/payments';
import * as UserActions from '../reducers/user';
import LoginOrRegister from '../components/LoginOrRegister';
class Payment extends React.Component {
static navigationOptions = {
drawerLabel: 'MyCart',
tabBarIcon: () => <Icon name="cart" />,
};
state = {
validCardDetails: false,
cardDetails: null,
};
onCardInputChange(creditCardForm) {
this.setState...