Guides
Dashboard

Pay Using Card Information

Suggest Edits

🚧

Make sure your card method connection is set to Server to Server.

Using your account Public API Key on the MoneyHashSDK class instance, you can access the functionality of collecting card data and processing payments.

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 using the collect method from the useSecureCardForm hook:

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.

Pay

Once you've collected the card data, you can proceed with the payment using the pay method from the useSecureCardForm hook:

const { pay } = useSecureCardForm();

// ...

const intentDetails = await pay({
  intentId: '<intent_id>',  // Intent ID
  cardData,                 // Collected card data from collect()
  saveCard: true,           // Optional: Set to `true` to save the card for future use
  billingData: {            // Optional: Billing data (object)
    address: '123 Main St',
    city: 'New York',
  },
  shippingData: {           // Optional: Shipping data (object)
    address: '456 Elm St',
    city: 'Boston',
  },
});

Refer to the Billing and Shipping Schema if billing and shipping data need to be collected.

📘

Note: saveCard

If you pass saveCard: true in the pay method, MoneyHash will tokenize and save the card for future use. This requires the intent to be created with the option "allow_tokenize_card": true for tokenization to work.

Example Usage

Below is an example of how you might integrate the payment process into your React Native app:

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

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

const PaymentComponent = () => {
  const { collect, pay, isValid, onFormValidityChange} = useSecureCardForm();
  const cardFormRef = useRef(null);

  const handlePayment = async () => {
    if (isValid) {
      try {
        const cardData = await collect();

        const intentDetails = await pay({
          intentId: '<intent_id>',
          cardData,
          saveCard: true, // Set to true to save the card (optional)
          billingData: { address: '123 Main St', city: 'New York' }, // Optional
          shippingData: { address: '456 Elm St', city: 'Boston' },   // Optional
        });

        console.log('Payment Successful:', intentDetails);
      } catch (error) {
        console.error('Payment Error:', error);
      }
    } else {
      console.log('Card form is not valid.');
    }
  };

  return (
    <View style={styles.container}>
      <SecureCardForm
        ref={cardFormRef}         
        onFormValidityChange={onFormValidityChange}>
        <SecureTextField
          name="cardHolderName"
          placeholder="Cardholder Name"
          style={styles.input}
        />
        <SecureTextField
          name="cardNumber"
          placeholder="#### #### #### ####"
          style={styles.input}
        />
        <View style={styles.row}>
          <SecureTextField
            name="expiryMonth"
            placeholder="MM"
            style={[styles.input, styles.smallInput]}
          />
          <SecureTextField
            name="expiryYear"
            placeholder="YY"
            style={[styles.input, styles.smallInput]}
          />
          <SecureTextField
            name="cvv"
            placeholder="***"
            style={[styles.input, styles.smallInput]}
          />
        </View>
      </SecureCardForm>
      <Button title="Pay" onPress={handlePayment} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  input: {
    borderColor: '#ccc',
    borderWidth: 1,
    padding: 10,
    marginVertical: 5,
  },
  smallInput: {
    flex: 1,
    marginRight: 5,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
});

export default PaymentComponent;

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.
  • Processing Payment: The pay method is used to process the payment with the collected card data and intent ID.

By following these steps, you can securely collect card information and process payments using the MoneyHash Payment SDK in your React Native application.

Please ensure that your card method connection is set to Server to Server in your MoneyHash dashboard to use these functionalities.

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

Updated 2 months ago