To add a donation button to your React Native and Expo app, you can follow these steps:
Install Dependencies:
If you haven't already, install the necessary packages for handling donations and payments. You can use libraries like react-native-google-pay for Google Pay integration or react-native-razorpay for Razorpay integration. Install them using npm or yarn:
Receive payments using Google Pay in your React Native app, you can use the react-native-google-pay library along with the Google Pay API. Below is the code for your Donation Screen component:
npm install react-native-google-pay
# or
yarn add react-native-google-pay
# or for Razorpay
npm install react-native-razorpay
# or
yarn add react-native-razorpay
Configure Native Modules (if required):
Depending on the payment gateway you're using, you may need to configure native modules for Android and iOS. Follow the instructions provided by the respective libraries to set up these configurations.
Import and Use Donation Button Component:
In your React Native component where you want to add the donation button, import the necessary components from the installed package. For example, if you're using react-native-google-pay:
Donation Screen
import React, { useState } from 'react';
import { View, TextInput, Button, Alert } from 'react-native';
import { GooglePay } from 'react-native-google-pay';
const allowedCardNetworks = ['VISA', 'MASTERCARD'];
const allowedCardAuthMethods = ['PAN_ONLY', 'CRYPTOGRAM_3DS'];
const requestData = {
cardPaymentMethod: {
tokenizationSpecification: {
type: 'PAYMENT_GATEWAY',
// Check with your payment gateway on the parameters to pass
parameters: {
gateway: 'example',
gatewayMerchantId: 'exampleGatewayMerchantId',
},
},
allowedCardNetworks,
allowedCardAuthMethods,
},
transaction: {
totalPrice: '10',
totalPriceStatus: 'FINAL',
currencyCode: 'INR',
},
merchantName: 'Example Merchant',
};
const DonationScreen = () => {
const [customAmount, setCustomAmount] = useState('');
const handleDonation = async (amount) => {
try {
const token = await GooglePay.requestPayment({
...requestData,
transaction: {
...requestData.transaction,
totalPrice: amount,
},
});
console.log(token);
Alert.alert('Donation Successful', `Thank you for donating ${amount} INR!`);
} catch (error) {
console.error('Payment Error:', error);
Alert.alert('Payment Error', 'Failed to process donation. Please try again later.');
}
};
const handleCustomDonation = () => {
if (customAmount && !isNaN(customAmount)) {
handleDonation(parseFloat(customAmount).toFixed(2));
} else {
Alert.alert('Invalid Amount', 'Please enter a valid donation amount.');
}
};
return (
<View style={{ padding: 20 }}>
<Button title="Donate ₹10" onPress={() => handleDonation('10.00')} />
<Button title="Donate ₹30" onPress={() => handleDonation('30.00')} />
<Button title="Donate ₹50" onPress={() => handleDonation('50.00')} />
<Button title="Donate ₹100" onPress={() => handleDonation('100.00')} />
<View style={{ marginTop: 20 }}>
<TextInput
placeholder="Enter custom amount (INR)"
keyboardType="numeric"
onChangeText={(text) => setCustomAmount(text)}
value={customAmount}
style={{ borderWidth: 1, borderColor: '#ccc', padding: 10 }}
/>
<Button title="Donate Custom Amount" onPress={handleCustomDonation} />
</View>
</View>
);
};
export default DonationScreen;
This code uses the GooglePay.requestPayment method to initiate a payment request using Google Pay. Ensure that you have set up your Google Pay API integration and have the necessary configurations and credentials (e.g., gateway ID, merchant ID) in place. Adjust the requestData object according to your payment gateway's specifications.
Note: Replace 'exampleGatewayMerchantId' with your actual merchant ID provided by your payment gateway.
Make sure to test this code in a real device or emulator with Google Pay installed and configured properly for testing payments.
Comments
Post a Comment
Share with your friends :)
Thank you for your valuable comment