Save Card For Future Use

First, create a card intent with the Card intent endpoint. This step does not use MoneyHash's React Native SDK and is standard for all MoneyHash's integrations, except for HPP. This endpoint requires authentication to be executed properly. You need to provide the Account API Key as a header and send the required data in the request body. Check the Create a Card Intent page for further explanation.

Don't forget to include "card_token_type": "UNIVERSAL" while creating the card intent.

To enable the functionality of saving a card for future use in your React Native application, follow these steps using the MoneyHashSDK and the SecureCardForm to correctly build the card form.

Initialize MoneyHashSDK

Before starting, initialize the MoneyHash SDK with your Public API Key:

import { MoneyHashSDKBuilder } from '@moneyhash/reactnative-sdk';

const moneyHashSDK = MoneyHashSDKBuilder.build();
moneyHashSDK.setPublicKey('<account_public_api_key>');

Collect Card Data

After setting up the card form as mentioned here, you can collect the card data:

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

// Inside your component
const { collect } = useSecureCardForm();

// ...

const cardData = await collect();

You will need to render card form fields to be able to collect customer card information.

Create Card Token

Once the card data is collected, you can create a card token for future use by calling the createCardToken() method from the useSecureCardForm hook:

try {
  const { createCardToken } = useSecureCardForm();
  const cardIntentId = '<card_intent_id>'; // Your card intent ID

  // Create card token
  const intentStateDetails = await createCardToken({
    cardIntentId,
    cardData, // Collected card data
  });

  if (intentStateDetails.type === 'card_intent_successful') {
    console.log('Card token created successfully:', intentStateDetails);
  } else if (intentStateDetails.type === 'url_to_render') {
    console.log(
      'Card token creation pending extra action. Open the returned URL to complete the flow.'
    );
    // You can navigate to the URL provided in intentStateDetails.url
  } else {
    console.log('Card token creation failed.');
  }
} catch (error) {
  console.error('Error creating card token:', error);
}

📘
You can run any business logic needed between collecting card data and tokenizing it.

This guide demonstrates how to save a card for future use in a React Native app using the MoneyHash SDK by initializing the SDK, building the card form, collecting card data, and creating a card token.

Note: Replace '<account_public_api_key>' and '<card_intent_id>' with your actual Public API Key and Card Intent ID provided by MoneyHash.

Complete Example

Here's how you might integrate all the steps into your React Native application:

import React, { useRef } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import {
  MoneyHashSDKBuilder,
  SecureCardForm,
  SecureTextField,
  useSecureCardForm,
  type SecureTextFieldRef,
} from '@moneyhash/reactnative-sdk';

const moneyHashSDK = MoneyHashSDKBuilder.build();
moneyHashSDK.setPublicKey('<account_public_api_key>');

const SaveCardComponent = () => {
  const {
    collect,
    isValid,
    createCardToken,
    onFormValidityChange,
  } = useSecureCardForm();

  const cardFormRef = useRef(null);

  const handleSaveCard = async () => {
    if (isValid) {
      try {
        // Collect card data
        const cardData = await collect();

        const cardIntentId = '<card_intent_id>'; // Your card intent ID

        // Create card token
        const intentStateDetails = await createCardToken({
          cardIntentId,
          cardData,
        });

        if (intentStateDetails.type === 'card_intent_successful') {
          console.log('Card token created successfully:', intentStateDetails);
        } else if (intentStateDetails.type === 'url_to_render') {
          console.log(
            'Card token creation pending extra action. Open the returned URL to complete the flow.'
          );
          // You can navigate to the URL provided in intentStateDetails.url
        } else {
          console.log('Card token creation failed.');
        }
      } catch (error) {
        console.error('Error creating card token:', error);
      }
    } else {
      console.log('Card form is not valid.');
    }
  };

  return (
    <View style={styles.container}>
      <SecureCardForm
        ref={cardFormRef}
        onFormValidityChange={onFormValidityChange}
      >
        <SecureTextField
          name="cardHolderName"
          placeholder="Enter cardholder name"
          style={styles.input}
        />
        <SecureTextField
          name="cardNumber"
          placeholder="Enter card number"
          style={styles.input}
        />
        <View style={styles.row}>
          <SecureTextField
            name="expiryMonth"
            placeholder="MM"
            style={[styles.input, styles.inputHalf]}
          />
          <SecureTextField
            name="expiryYear"
            placeholder="YY"
            style={[styles.input, styles.inputHalf]}
          />
        </View>
        <SecureTextField
          name="cvv"
          placeholder="Enter CVV"
          style={styles.input}
        />
      </SecureCardForm>
      <Button title="Save Card" onPress={handleSaveCard} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  input: {
    borderColor: 'rgba(0,0,0,0.3)',
    borderWidth: 1,
    padding: 8,
    borderRadius: 4,
    marginBottom: 10,
  },
  inputHalf: {
    width: '48%',
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
});

export default SaveCardComponent;

By following these steps, you can enable the functionality of saving a card for future use in your React Native application using the MoneyHash SDK.

Important: Ensure that you include "card_token_type": "UNIVERSAL" when creating the card intent on your backend or through the MoneyHash API, so that the card can be tokenized and saved for future transactions.

Note: Replace '<account_public_api_key>' and '<card_intent_id>' with your actual Public API Key and Card Intent ID provided by MoneyHash.

In this example:

Initialization: The MoneyHashSDK is initialized with your Public API Key.
Card Form Setup: The SecureCardForm contains SecureTextField components for each required field.
Collecting Card Data: The collect method from useSecureCardForm is used to collect card data.
Creating Card Token: The createCardToken method from useSecureCardForm is used to create a card token with the collected card data and card intent ID.

By carefully following these instructions, you can integrate card tokenization into your React Native app, allowing your users to save their card details securely for future transactions.

Remember to handle errors appropriately and ensure that all sensitive data is managed securely in compliance with relevant regulations and best practices.

Let me know if you need any further assistance!

Initialize MoneyHashSDK

Collect Card Data

Create Card Token

📘You can run any business logic needed between collecting card data and tokenizing it.

Complete Example

📘
You can run any business logic needed between collecting card data and tokenizing it.