Pay Using Card Information
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 thepay
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
containsSecureTextField
components for each required field. - Collecting Card Data: The
collect
method fromuseSecureCardForm
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 about 1 month ago