MoneyHash SDK - CardForm Documentation

Introduction

The SecureCardForm component is designed to securely collect card information from users, tokenize the card data, and process payments. It interacts with the MoneyHashSDK and depends on certain configurations and data to function correctly.

Dependencies Overview

• No Dependencies: Some methods do not require any additional setup or dependencies.
• Public Key: Requires the public API key to be set in the MoneyHashSDK before they can be used.
• Payment Intent ID: The method pay requires a valid payment intent ID to process transactions.
• Card Intent ID: The method createCardToken requires a valid card intent ID to create a token for the card data.

Component: SecureCardForm

import {
  SecureCardForm,
  SecureTextField,
  useSecureCardForm,
} from '@moneyhash/reactnative-sdk';

const {
  collect,
  pay,
  createCardToken,
  isValid,
} = useSecureCardForm();

Methods That Do Not Require Any Dependencies

These methods can be used without setting any additional configurations or dependencies.

1. isValid

isValid: boolean;

• Purpose: Checks if the card data collected is valid.
• Returns: A boolean indicating whether the card data is valid (true if valid, false otherwise).
• Example:

const { isValid } = useSecureCardForm();

console.log(`Is card data valid? ${isValid}`);

Methods That Require Public Key

These methods depend on the public API key being set in the MoneyHashSDK using the setPublicKey method.

To obtain your public API key, please refer to the MoneyHash Authentication Documentation.

Prerequisite

Before using these methods, ensure that the public key is set:

moneyHashSDK.setPublicKey('your_public_api_key');

2. collect

collect(options?: { accessToken: string }): Promise<VaultData>

• Purpose: Collects card data from the user using the public API key.
• Parameters:
  • options (optional):
    • accessToken: Optional access token for additional security.
• Returns: A Promise that resolves to VaultData containing the collected card information.
• Throws: An error if failed to collect card data.
• Example:

try {
  const cardData = await collect();

  console.log('Card data collected:', cardData);
  
} catch (e) {
  console.error('Error collecting card data:', e);
}

Methods That Require Payment Intent ID

These methods require a valid payment intent ID to process transactions. Ensure you have a payment intent ID before using these methods.

3. pay

pay({
  intentId: string,
  saveCard?: boolean,
  cardData: VaultData,
  billingData?: Record<string, string>,
  shippingData?: Record<string, string>,
}): Promise<IntentDetails>

• Purpose: Processes a payment using the provided card data and payment intent.
• Parameters:
  • intentId: The unique identifier of the payment intent.
  • saveCard (optional): A boolean indicating whether to save the card for future transactions (default is false).
  • cardData: The card data collected (from the collect method).
  • billingData (optional): A record containing billing information.
  • shippingData (optional): A record containing shipping information.
• Returns: A Promise that resolves to IntentDetails if the payment is processed successfully.
• Throws: An error if the payment fails.
• Example:

try {
  const cardData = await collect();

  const intentDetails = await pay({
    intentId: 'payment_intent_id',
    saveCard: true, // Save the card
    cardData,
    billingData: { address: '123 Main St', city: 'New York' }, // Billing data
    shippingData: { address: '456 Elm St', city: 'Boston' },    // Shipping data
  });

  console.log('Payment processed successfully:', intentDetails);
} catch (e) {
  console.error('Error processing payment:', e);
}

Methods That Require Card Intent ID

The following method requires a valid card intent ID to create a token for the card data.

4. createCardToken

createCardToken({
  cardIntentId: string,
  cardData: VaultData,
}): Promise<IntentStateDetails>

• Purpose: Creates a token for the card data provided, which can be used for subsequent transactions.
• Parameters:
  • cardIntentId: The unique identifier of the card intent.
  • cardData: The card data collected.
• Returns: A Promise that resolves to IntentStateDetails containing the state of the intent after token creation.
• Throws: An error if token creation fails.
• Example:

try {
  const cardData = await collect();

  const stateDetails = await createCardToken({
    cardIntentId: 'card_intent_id',
    cardData,
  });

  console.log('Card token created:', stateDetails);
} catch (e) {
  console.error('Error creating card token:', e);
}

Usage of SecureTextField

To initialize a SecureTextField, you can use the following code:

<SecureTextField
  ref={cardNumberRef}
  name="cardNumber"
  style={({ isFocused, isError }) => [
    styles.input,
    isFocused && styles.inputFocused,
    isError && styles.inputError,
  ]}
  placeholder="#### #### #### ####"
  onCardBrandChange={(cardInfo) => {
    console.log('cardBrand', cardInfo);
  }}
  onChange={({ isValid, length }) => {}}
/>

• Props:
  • ref: A reference to the SecureTextField, useful for focusing or blurring programmatically.
  • name: The name of the field, must be one of the valid SecureFieldType values ("cardNumber", "cardHolderName", "expiryMonth", "expiryYear", "cvv").
  • style: A function or object that returns styles based on the field's state (isFocused, isError).
  • placeholder: Placeholder text for the input field.
  • onCardBrandChange: A callback function that receives the card brand information when the card number is entered.
  • onChange: A callback function that receives validation information (isValid, length) when the field's value changes.

Additional Notes on SecureTextField

• The name prop must be one of the valid field names: "cardNumber", "cardHolderName", "expiryMonth", "expiryYear", or "cvv".
• The onChange prop provides validation feedback, including whether the field's current value is valid and the length of the input.
• The onErrorChange prop can be used to receive updates when the field's error state changes.
• The onFocus and onBlur props can be used to handle focus and blur events.
• The style prop can be a function that receives the field's state and returns a style object or array.