react-native-plaid-link-sdk

import React, { useEffect, useState } from 'react'; import { Button, View, Text, Platform, Alert } from 'react-native'; import { open, create, dismissLink, LinkSuccess, LinkExit, LinkTokenConfiguration, LinkOpenProps, LinkIOSPresentationStyle, LinkLogLevel, } from 'react-native-plaid-link-sdk'; // IMPORTANT: In a real application, 'YOUR_GENERATED_PLAID_LINK_TOKEN' // must be fetched from your backend server. This token is short-lived. // Refer to Plaid's /link/token/create documentation. const GENERATED_LINK_TOKEN = 'YOUR_GENERATED_PLAID_LINK_TOKEN'; const PlaidLinkIntegration = () => { const [linkToken, setLinkToken] = useState<string | null>(null); const [loading, setLoading] = useState(true); useEffect(() => { // Simulate fetching a link token from your backend. // Replace this with an actual API call to your server that generates the token. const fetchLinkToken = async () => { try { // Example (replace with your actual backend endpoint): // const response = await fetch('https://your-backend.com/create_plaid_link_token'); // const data = await response.json(); // setLinkToken(data.link_token); if (GENERATED_LINK_TOKEN !== 'YOUR_GENERATED_PLAID_LINK_TOKEN') { setLinkToken(GENERATED_LINK_TOKEN); } else { Alert.alert( 'Missing Link Token', "Please replace 'YOUR_GENERATED_PLAID_LINK_TOKEN' with a valid token from your backend. Link will not open without it." ); } } catch (error) { console.error('Failed to fetch link token:', error); Alert.alert('Error', 'Could not fetch Plaid Link token.'); } setLoading(false); }; fetchLinkToken(); }, []); useEffect(() => { if (linkToken) { // For SDK versions >= 11.6.0, it's recommended to preload Link. const tokenConfiguration: LinkTokenConfiguration = { token: linkToken, noLoadingState: false, // Set to true to hide the native activity indicator }; create(tokenConfiguration); } }, [linkToken]); const handleOpenLink = () => { if (!linkToken) { Alert.alert('Error', 'Plaid Link token is not available yet.'); return; } const openProps: LinkOpenProps = { onSuccess: (success: LinkSuccess) => { console.log('Plaid Link Success:', success); // Send success.public_token to your backend for exchange with an access_token Alert.alert('Link Success', `Account linked! Public Token: ${success.public_token}`); }, onExit: (linkExit: LinkExit) => { console.log('Plaid Link Exit:', linkExit); if (linkExit.error) { console.error('Plaid Link Error:', linkExit.error); Alert.alert('Link Exit Error', `Code: ${linkExit.error.error_code}, Message: ${linkExit.error.display_message}`); } dismissLink(); // Ensure Link view is dismissed, especially on iOS. }, iOSPresentationStyle: LinkIOSPresentationStyle.MODAL, // Or FULL_SCREEEN logLevel: LinkLogLevel.ERROR, }; open(openProps); }; if (loading) { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Loading Plaid Link Token...</Text> </View> ); } return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Button title="Open Plaid Link" onPress={handleOpenLink} disabled={!linkToken} /> {!linkToken && ( <Text style={{ marginTop: 10, color: 'red' }}> Please provide a valid Plaid Link token. </Text> )} </View> ); }; export default PlaidLinkIntegration;