Collect Card Information
Getting Started
To create a Card Form using the MoneyHash Payment SDK for React Native, you will use the SecureCardForm
component along with the useSecureCardForm
hook. This setup allows you to configure the card form's fields—such as the card number, CVV, cardholder name, expiry month, and expiry year—while setting up listeners to monitor changes in their states.
The SecureTextField
components within the SecureCardForm
allow you to define listeners for each field. These listeners are functions that will be called every time the user updates the respective field. The listener function receives a CardFieldState
object, which contains information about the field’s validity, error message (if any), and the current input length.
CardFieldState
Each time the user updates a field, the corresponding listener will be invoked with a CardFieldState
object. The CardFieldState
provides the following details:
- isValid: A boolean that indicates whether the field is valid or not.
- errorMessage: An optional string containing an error message if the field is invalid.
- length: The current length of the input in the field.
interface CardFieldState {
isValid: boolean;
errorMessage?: string;
length: number;
}
Creating the Card Form
Here's an example of how to use SecureCardForm
and SecureTextField
to create a card form with listeners for each field:
import React, { useRef } from 'react';
import { View, StyleSheet } from 'react-native';
import {
SecureCardForm,
SecureTextField,
useSecureCardForm,
type SecureTextFieldRef,
} from '@moneyhash/reactnative-sdk';
const CardFormComponent = () => {
const cardFormRef = useRef(null);
const cardNumberRef = useRef<SecureTextFieldRef>(null);
const expiryMonthRef = useRef<SecureTextFieldRef>(null);
const expiryYearRef = useRef<SecureTextFieldRef>(null);
const cvvRef = useRef<SecureTextFieldRef>(null);
const cardHolderNameRef = useRef<SecureTextFieldRef>(null);
const { isValid, collect, pay, onFormValidityChange } = useSecureCardForm();
return (
<SecureCardForm
ref={cardFormRef}
onFormValidityChange={(valid) => {
console.log(`Form is valid: ${valid}`);
}}
>
<SecureTextField
ref={cardHolderNameRef}
name="cardHolderName"
placeholder="Enter cardholder name"
style={({ isFocused, isError }) => [
styles.input,
isFocused && styles.inputFocused,
isError && styles.inputError,
]}
onChange={({ isValid, length, errorMessage }) => {
console.log('Card Holder Name changed:', {isValid, length, errorMessage});
}}
/>
<SecureTextField
ref={cardNumberRef}
name="cardNumber"
placeholder="#### #### #### ####"
style={({ isFocused, isError }) => [
styles.input,
isFocused && styles.inputFocused,
isError && styles.inputError,
]}
onCardBrandChange={(cardInfo) => {
console.log('Card Brand Info:', cardInfo);
}}
onChange={({ isValid, length, errorMessage }) => {
console.log('Card Number changed:', {isValid, length, errorMessage});
}}
/>
<View style={styles.row}>
<SecureTextField
ref={expiryMonthRef}
name="expiryMonth"
placeholder="MM"
style={({ isFocused, isError }) => [
styles.input,
isFocused && styles.inputFocused,
isError && styles.inputError,
{ flex: 1, marginRight: 5 },
]}
onChange={({ isValid, length, errorMessage }) => {
console.log('Expiry Month changed:', {isValid, length, errorMessage});
}}
/>
<SecureTextField
ref={expiryYearRef}
name="expiryYear"
placeholder="YY"
style={({ isFocused, isError }) => [
styles.input,
isFocused && styles.inputFocused,
isError && styles.inputError,
{ flex: 1, marginRight: 5 },
]}
onChange={({ isValid, length, errorMessage }) => {
console.log('Expiry Year changed:', {isValid, length, errorMessage});
}}
/>
<SecureTextField
ref={cvvRef}
name="cvv"
placeholder="***"
style={({ isFocused, isError }) => [
styles.input,
isFocused && styles.inputFocused,
isError && styles.inputError,
{ flex: 1 },
]}
onChange={({ isValid, length, errorMessage }) => {
console.log('CVV changed:', {isValid, length, errorMessage});
}}
/>
</View>
</SecureCardForm>
);
};
const styles = StyleSheet.create({
input: {
borderColor: '#ccc',
borderWidth: 1,
padding: 10,
marginVertical: 5,
},
inputFocused: {
borderColor: 'blue',
},
inputError: {
borderColor: 'red',
},
row: {
flexDirection: 'row',
justifyContent: 'space-between',
},
});
Explanation
Each SecureTextField
component, such as name="cardNumber"
, takes a function (listener) through the onChange
prop that will be invoked every time the corresponding field is updated by the user. This listener function receives a CardFieldState
object, which contains:
- isValid: Whether the current input is valid.
- length: The current length of the input.
- errorMessage: Any error message if the input is invalid.
For example, in the SecureTextField
for the card number, when the user updates the card number, the listener will print whether the card number is valid and the current length of the input.
Note: MoneyHash considers a card number valid based on its length and Luhn algorithm. Card numbers with lengths from 13 to 19 and passing the Luhn check are considered valid.
With this setup, you can easily track the user's input and handle any validation errors or updates as needed.
Updated about 1 month ago