# React Native Integration
# General Information
# Support
If you require any help during the integration or have any questions, don’t hesitate to reach out to us!
# Getting Started
# Resolving the SDK
To resolve the SDK with scoped access from the anybill-npm registry:
- Add a
.npmrcfile to the root directory of your project containing the following:
@anybill:registry=anybill.jfrog.io/artifactory/api/npm/anybill_react_native_sdk/
//anybill.jfrog.io/artifactory/api/npm/anybill_react_native_sdk/:_password=<your_password>
//anybill.jfrog.io/artifactory/api/npm/anybill_react_native_sdk/:username=<your_username>
Then include the SDK in your project by executing the install command of your package manager
npm install @anybill/react-native
# Initialization
# Importing the SDK
After installing, import the AnybillReactNSDK:
import { AnybillReactNSDK } from '@anybill/anybill_react_native_sdk';
# Initialization
Initilize the anybill SDK, ideally in the earliest entry point of your application (e.g. index.js)
AnybillReactNSDK
.init(
apiEnv: "<API_ENV>",
clientId: "<CLIENT_ID>",
);
Wrap your application's root component with the AnybillProvider context provider. This pattern ensures that state and methods managed by the Auth- and ReceiptProvider are accessible throughout your component tree via React Context.
import { AnybillProvider } from "@anybill/react-native";
const App = () => {
return (
<AnybillProvider>
{/* Your app components go here */}
</AnybillProvider>
);
};
# SDK functionality
The SDK exposes two main hooks:
- useAuth() → authentication and user-related methods
- useReceipts() → receipt retrieval and management
# Authentication
The anybill SDK handles authentication seamlessly within its internal processes. Once a user successfully authenticates, an Access Token and a Refresh Token are securely stored in the device's local keystore:
Access Token: Valid for 24 hours and used to authorize user requests to the anybill API.
Refresh Token: Valid for 90 days and used to renew the Access Token upon expiration. When the Refresh Token expires, the user will need to reauthenticate.
This automated process minimizes the need for manual token handling, ensuring a smooth and secure experience for both users and developers.
# Authenticate User
Use token information obtained from the Partner Platform API to initialize the SDK and authenticate the user without requiring credentials.
For detailed instructions on how to retrieve the token from the Partner Platform API, refer to the Partner Platform API documentation.
- Get a token from the anybill Partner API by linking your account system to an anybill id.
- Create an instance of
TokenUserwith the received token-information - Login the TokenUser with the anybill sdk
const { loginWithToken } = useAuth();
const result = await YourApi.getTokenForUser()
const tokenUser: TokenUser = {
accessToken: result.accessToken,
refreshToken: result.refreshToken,
expiresIn: result.expiresIn,
};
const loginResult = await loginWithToken(tokenUser);
if (loginResult.isSuccess()) {
// Continue
} else {
// Handle error
showErrorSnackbar(loginResult.error.title)
}
# Retrieve user information
Once a user is authenticated, you can retrieve information about the anybill user using the anybill SDK.
const { getUser } = useAuth();
const [user, setUser] = React.useState<UserInformationDto | null>(null);
const userResult = await getUser();
if (res.isSuccess()) {
setUser(userResult.data);
} else {
// Handle error
showErrorSnackbar(userResult.error.title)
}
# Logout
Logging out an user deletes all of user's app data including cached receipts, authentication information and app settings (of the anybill sdk).
const { logout } = useAuth();
const res = await logout();
if (res.isSuccess()) {
console.log("User logged out");
}
# Receipts
# Retrieving receipts
The anybill SDK offers two distinct approaches for fetching user receipts:
Direct API Access: Use the
const { getReceipts } = useReceipts();method to directly access the API. This approach allows you to implement custom fetching and pagination logic based on your specific requirements.Optimized SDK Caching Process: Leverage the SDK's built-in caching and optimized pagination for efficient receipt retrieval by using the
initiateReceiptQuery()andcontinueReceiptQuery()methods in combination with an exposed observable receipt list. This approach simplifies the retrieval process and reduces the need for manual pagination handling.
Detailed information about both approaches is provided below:
Direct API Access
The getReceipts() method allows you to retrieve user receipts with pagination support. The result includes the receipts, the total count of available receipts, and a continuation token that can be used to fetch subsequent batches.
You can customize the request with the following parameters:
take: Specifies the number of receipts to fetch in each batch. The default and maximum value is 100.
continuationToken: A nullable token used for paginating through the query results. If
null, a new query is initiated. To continue fetching from the previous result, use thecontinuationTokenprovided in the last response.orderBy: Specifies the field used for ordering the receipts. Currently, only
Dateis available.orderDirection: Defines the sort direction for the receipts, either
AscendingorDescending.
TIP
Important:
Due to database restrictions, you must specify the orderBy and orderDirection parameters for every page of the query.
Also, remember to reset the continuationToken if you modify any query parameters.
Example implementation:
const { getReceipts } = useReceipts();
const [receipts, setReceipts] = useState<ReceiptDto[]>([]);
const [loading, setLoading] = useState(false);
const [hasMore, setHasMore] = useState(true);
const [continuationToken, setContinuationToken] = useState<string | null>(null);
async function getInitialReceipts() {
setRefreshing(true);
setContinuationToken(null);
const result: AnybillResult<ContinuationReceiptList> = await getReceipts(50, OrderBy.Date, OrderByDirection.Ascending);
if (result.isSuccess()) {
setReceipts(result.data.receipts);
setContinuationToken(result.data.continuationToken ?? null);
if (result.data.continuationToken === "finished") {
setHasMore(false);
}
}
setRefreshing(false);
}
useEffect(() => {
getInitialReceipts();
}, []);
async function getMoreReceipts() {
if (!hasMore || !continuationToken || continuationToken === "finished") return;
setLoading(true);
const result: AnybillResult<ContinuationReceiptList> = await getReceipts(
20,
OrderBy.Date,
OrderByDirection.Ascending,
continuationToken
);
if (result.isSuccess()) {
setReceipts((prev) => [...prev, ...result.data.receipts]);
setContinuationToken(result.data.continuationToken ?? null);
if (result.data.continuationToken === "finished") {
setHasMore(false);
}
}
setLoading(false);
}
Optimized SDK Caching Process
The anybill SDK offers an optimized receipt pagination process with automatic caching, providing efficient querying and display of receipts. This feature stores receipts in a local database, allowing for quicker access and better performance. Receipt actions such as deletion, edits, or marking receipts as favorites are automatically updated in the cached receipt list, making it easy to integrate receipt-related features without manual updates to the displayed list.
To enable this, the ReceiptProvider exposes a state object, observableReceipts, which represents a live, up-to-date view of the cached receipts. The initiateReceiptQuery and continueReceiptsQuery methods allow you to refresh or extend the receipt list with new data as needed.
Similar to direct API access, you can customize the query with the following parameters:
- take: Specifies the number of receipts to retrieve in each batch, with a maximum of 100 by default.
- orderBy: Specifies the field for ordering receipts. Currently, only
Dateis supported. - orderDirection: Defines the sort direction for receipts, either
AscendingorDescending.
TIP
Note on Pagination and Sorting
The continuation token and query management are handled internally by the SDK, so there is no need for manual handling to load additional pages.
If you wish to change the sorting or direction of the receipt list, use the initiateReceiptQuery() method again. This will reset the locally cached receipts and update the state object accordingly.
Fetch first page / Update receipt list
The initiateReceiptQuery method resets any existing query and caches the newly fetched receipts in the local database. We recommend calling this method in the following scenarios to ensure an up-to-date receipt list:
Initial Display of Receipt List
When the receipt list is displayed for the first time in a session (e.g., when the user navigates to the receipt list view), this method should be called to display the latest receipt data. Note that this call is unnecessary after actions such as editing, deleting, or marking a receipt as favorite, as these are automatically handled within the SDK.New Receipt Received
If a new receipt is issued while the user is in the app, the list should be refreshed upon notification of the new receipt (e.g., triggered by a webhook event). This ensures the receipt list reflects the latest transactions.Manual User Update
For scenarios where a user manually refreshes the list, such as through a "pull-to-refresh" gesture or a refresh button, use this method to re-fetch the latest data for the first page.Change in Sort Order
When changing the sorting parameters of the receipt list (e.g., switching the sort order), call this method with the new parameters. This will reset the cache to reflect the updated sorting criteria.
WARNING
Cache Reset Consideration
As this method resets the cache and fills it with a new first page, any previously cached pages will be cleared and must be re-fetched. Avoid calling this method when navigating back to the receipt list from a single receipt view to prevent unnecessary reloading.
Fetch next page
To retrieve the next batch of receipts in the existing query, use continueReceiptQuery(). This method automatically applies the previously retrieved continuation token to fetch the subsequent set of receipts, seamlessly updating both the cached receipt list and the associated state object.
To easily combine the caching function with filtering and querying of the receipt we recommending displaying the receipts in one unified list and not implementing actual pages with this method. To automatically fetch new receipts when the user scrolls to the end of the list we can use the following implementation:
Example Implementation
const { observableReceipts, initiateReceiptQuery, continueReceiptQuery } = useReceipts();
const [refreshing, setRefreshing] = useState(false);
const [loadingMore, setLoadingMore] = useState(false);
const [error, setError] = useState<string | null>(null);
// On component mount load initial receipts
useEffect(() => {
loadInitialReceipts();
}, []);
const loadInitialReceipts = async () => {
setError(null);
const result = await initiateReceiptQuery();
if (result.isFailure()) {
setError(result.error?.message || 'Failed to load receipts');
}
};
// Loading more receipts, when scrolled to the bottom.
const onEndReached = async () => {
if (loadingMore) return;
setLoadingMore(true);
const result = await continueReceiptQuery();
if (result.isFailure()) {
console.error('Failed to load more receipts:', result.error?.message);
}
setLoadingMore(false);
};
// Pull to refresh
const onRefresh = async () => {
setRefreshing(true);
setError(null);
const result = await initiateReceiptQuery();
if (result.isFailure()) {
setError(result.error?.message || 'Failed to refresh receipts');
}
setRefreshing(false);
};
return (
<ThemedView style={styles.container}>
<SafeAreaView style={styles.safeArea} edges={['top']}>
<ThemedView style={styles.header}>
<ThemedText type="title" style={styles.headerTitle}>Receipts</ThemedText>
<ThemedText type="subtitle" style={styles.headerSubtitle}>
Your digital receipts
</ThemedText>
</ThemedView>
<FlatList
data={observableReceipts || []}
renderItem={renderReceiptItem}
keyExtractor={(item, index) => item.id || index.toString()}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
tintColor="#007AFF"
colors={['#007AFF']}
/>
}
onEndReached={onEndReached}
onEndReachedThreshold={0.5}
ListFooterComponent={renderListFooter}
ListEmptyComponent={!refreshing ? renderEmptyState : null}
contentContainerStyle={[
styles.listContent,
(!observableReceipts || observableReceipts.length === 0) && styles.emptyListContent
]}
showsVerticalScrollIndicator={false}
bounces={true}
/>
</SafeAreaView>
</ThemedView>
);
# Marking Receipts
The anybill SDK provides following methods to edit or mark receipts:
Mark a receipt as favourite
Allowing to mark a receipt as favourite toggling the Receipt.Misc.isFavouite flag.
const { toggleIsFavourite } = useReceipts();
async function toggleFavourite(receiptId: string) {
const response = await toggleIsFavourite(receiptId);
if (response.isSuccess()) {
// Continue
} else {
// Handle error
}
}
Set custom note for receipt
Using the updateReceiptNote() method, a custom note can be set for a receipt which can be retrieved in the Receipt.Misc.Note field.
This field can later on be used for querying and filtering the receipt list.
const { updateReceiptNote } = useReceipts();
async function updateNote(receiptId: string, note?: string) {
const response = await updateReceiptNote(receiptId, note);
if (response.isSuccess()) {
// Continue
} else {
// Handle error
}
}
TIP
When implementing with the Optimized SDK Caching Process of the sdk, the receipt list does not have to be updated when editing the receipt. This is handled internally in the SDK.
# Export as PDF
To ensure legally compliant receipts, the original receipt must be retrievable as a PDF file. The structured data provided by the anybill SDK does not represent the original receipt but serves to display relevant receipt information.
To access the original receipt, the anybill SDK offers the method getReceiptPdf(), which generates the PDF on our system and returns it as a Uint8Array object.
Parameters for Customization:
isPrintedVersion:
Generates a multi-page DIN A4 PDF version of the receipt, making it easier for end users to print a physical copy of the receipt, such as for return processes that require paper receipts.
includeReturnReceipts:
Includes all return receipts linked in Receipt.Misc.ReceiptReferences within the generated PDF. Note that this option can significantly increase the duration of the API call, as multiple PDFs must be generated and merged.
Example implementation using react-native-pdf
import Pdf from 'react-native-pdf';
const [pdfData, setPdfData] = useState<string | null>(null);
const [showPdfModal, setShowPdfModal] = useState(false);
const [pdfError, setPdfError] = useState<string | null>(null);
const handleDisplayPDF = () => {
if (!receiptId.trim()) {
setResult('Please enter a receipt ID');
return;
}
handleApiCall(async () => {
const response = await getReceiptPdf(
receiptId.trim(),
false,
false
);
if (response.isSuccess()) {
setResult('PDF loaded for display');
// Convert Uint8Array to base64 string for display
const uint8Array = response.data as Uint8Array;
const pdfBase64 = Buffer.from(uint8Array).toString('base64');
setPdfData(pdfBase64);
setPdfError(null);
setShowPdfModal(true);
} else {
console.log("Error loading PDF: ", response.error);
setPdfError('Failed to load PDF');
}
return response;
});
};
return (
<ScrollView>
<View>
...
<Modal
visible={showPdfModal}
animationType="slide"
presentationStyle="pageSheet"
onRequestClose={() => setShowPdfModal(false)}
>
<View style={styles.modalContainer}>
<View style={styles.modalHeader}>
<Text style={styles.modalTitle}>Receipt PDF</Text>
<TouchableOpacity
style={styles.closeButton}
onPress={() => setShowPdfModal(false)}
>
<Text style={styles.closeButtonText}>✕</Text>
</TouchableOpacity>
</View>
{pdfData && !pdfError ? (
<Pdf
source={{ uri: `data:application/pdf;base64,${pdfData}` }}
style={styles.pdfViewer}
onError={(error) => {
console.log('PDF Error:', error);
setPdfError('Error displaying PDF');
}}
/>
) : pdfError ? (
<View style={styles.errorContainer}>
<Text style={styles.errorText}>{pdfError}</Text>
<TouchableOpacity
style={styles.retryButton}
onPress={() => {
setPdfError(null);
if (receiptId.trim()) {
handleDisplayPDF();
}
}}
>
<Text style={styles.retryButtonText}>Retry</Text>
</TouchableOpacity>
</View>
) : (
<View style={styles.loadingContainer}>
<Text style={styles.loadingText}>Loading PDF...</Text>
</View>
)}
</View>
</Modal>
</View>
</ScrollView>
);
# Add Receipt
The addReceipt method allows you to add a receipt to the currently authenticated user's account.
const { addReceipt } = useReceipts();
async function addReceiptById(receiptId: string) {
if (receiptIds.length === 0) return;
const response = await addReceipt(receiptId);
if (response.isSuccess()) {
// Continue
} else {
// Handle error
}
return response;
};
# App Link
Anybill Applink is our way to enable linking into mobile apps from our receipt website by directly opening the app or redirecting to the app stores while persisting data. If you are integrating our sdk and want to make use of this feature, please contact us beforehand.
# Integrate app link and automatically add the new receipt
To automatically add a receipt and open the app, that integrates the anybill sdk, you have to set up universal links/android variant.
iOS:
Enable the capability 'Associated Domains' and register the domain "applinks:applink.anybill.de". Additionally the bundle identifier of your application has to be in the apple-app-site-association file of our server hosting the app link web page (If that is not the case please contact us).
Android:
- Acquire Applink URL provided by anybill with your unique path pattern by contacting us beforehand:
<intent-filter android:label="@string/app_name" android:autoVerify="true">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<!-- Add your unique path pattern provided by anybill -->
<data android:scheme="https" android:host="applink.anybill.de"
android:pathPattern="/${your_path_pattern}" />
</intent-filter>
- Generate Digital Asset Links file using the Android Link Assistant:
Android Link Assistant (opens new window)
- Provide the returned file to anybill:
[
{
"relation": [
"delegate_permission/common.handle_all_urls"
],
"target": {
"namespace": "android_app",
"package_name": "de.anybill.ui_react_native_integration_example",
"sha256_cert_fingerprints": [
"5D:78:62:8E:4B:6A:E8:33:BE:9A:94:0B:7D:24:30:4E:79:DF:D3:8B:E7:0C:42:8B:FD:72:3F:1D:36:BC:F6:C3"
]
}
}
]
⚠️ To enable anybill AppLink for your debug and release version, you'll have to generate multiple files and provide anybill both of them!
Next you have to get the link that opened your application. The anybill SDK provides a utility class, that helps with parsing and persisting the link.
// Initialize the SDK
useEffect(() => {
const sdk = new AnybillReactNSDK();
sdk.init(ApiEnv.Test, '4d8b1eb1-a1c6-45da-a271-5ab1167d6018');
}, []);
// Register app link listener
useEffect(() => {
const handleAppLinkData = async (url?: string) => {
if (url) {
// Checks if the url is a valid anybill app link URL. This method returns the AnybillURLData and also caches it (accessible via `AnybillAppLink.getCachedAppLinkData()`).
await AnybillAppLink.checkForAnybillAppLink(url);
} else {
// Checks if its the first app start and if so, validates if the clipboard contains an anybill app link, that was persisted over the app store/play store install. This method also returns and caches the AnybillURLData.
await AnybillAppLink.checkForAnybillAppLinkData();
}
};
// Register app link listener
useEffect(() => {
const handleAppLinkData = async (url?: string) => {
let appLinkData: AnybillURLData | null = null;
if (url) {
// Checks if the url is a valid anybill app link URL. This method returns the AnybillURLData and also caches it (accessible via `AnybillAppLink.getCachedAppLinkData()`).
appLinkData = await AnybillAppLink.checkForAnybillAppLink(url);
}
// React native might return an initialURL on first app start, so this makes sure the clipboard is checked anyways.
if (url && !appLinkData) {
// Checks if its the first app start and if so, validates if the clipboard contains an anybill app link, that was persisted over the app store/play store install. This method also returns and caches the AnybillURLData.
await AnybillAppLink.checkForAnybillAppLinkData();
}
};
(async () => {
// Handler when the app is closed
const initial = await Linking.getInitialURL();
await handleAppLinkData(initial || undefined);
})();
// Handler when the app is open or in background.
const sub = Linking.addEventListener('url', async ({ url }) => {
await handleAppLinkData(url);
});
return () => sub.remove();
}, []);
If you are in the context of the AnybillProvider, you can add the receipt directly with the returned AnybillURLData. In the example above the listeners are outside of the AnybillProvider context. Therefore we check on mounting the root page, if there is cached app link information avaialable.
const checkCachedAppLinkData = async () => {
const cachedData = await AnybillAppLink.getCachedAppLinkData();
const receiptId = cachedData?.receiptId;
if (receiptId) {
const addReceiptResult = await addReceipt(receiptId);
if (addReceiptResult.isFailure()) {
// Handle error
} else {
// If the receipt is added, make sure to clear the cached information.
await AnybillAppLink.clearCachedAppLinkData();
}
} else {
console.log('No cached app link data');
}
};
useEffect(() => {
loadInitialReceipts();
checkCachedAppLinkData();
}, []);
TIP
By using the cached variant, you can add the receipt to the user account, when the loginWithToken call succeedes or if the user is already logged in.
# Deleting receipts
The anybill SDK provides functionality to delete either a single receipt or a batch of receipts. When utilizing the optimized caching process, receipts are automatically removed from the local cache, ensuring the observable data is kept up-to-date without requiring manual intervention.
Methods for Deleting Receipts
deleteReceipt():
Deletes a single receipt from the user’s receipt list. This method can be used for operations where only one specific receipt needs to be removed.
deleteReceipts():
Deletes multiple receipts (up to 100) from the user’s receipt list in a single operation.
Example implememtation
async function handleDeleteReceipts(receiptIds: string[]) {
if (receiptIds.length === 0) return;
const response = await deleteReceipts(receiptIds);
if (response.isSuccess()) {
// Continue
} else {
// Handle error
}
return response;
};
# Filtering receipt list
The anybill SDK delivers receipts as structured data, enabling you to filter by any receipt field seamlessly. This allows you to display all relevant results dynamically, without the need to explicitly initiate API calls with query parameters.
Common use cases include filtering the receipt list for favorites or searching for specific string values.
For an easy query of the receipt list the anybill SDK provides an function called searchReceipts(receipts: ReceiptDto[], search: string). The method filters store name, address, amount, note, and line and discount descriptions.
Example implementation of allowing to simultaneously query for a string value
const { observableReceipts } = useReceipts();
const [searchQuery, setSearchQuery] = useState('');
const filteredReceipts = useMemo(() => {
if (!observableReceipts) return [];
return searchReceipts(observableReceipts, searchQuery);
}, [observableReceipts, searchQuery]);
return (
<ThemedView style={styles.container}>
<SafeAreaView style={styles.safeArea} edges={['top']}>
<ThemedView style={styles.header}>
<ThemedText type="title" style={styles.headerTitle}>Receipts</ThemedText>
<ThemedText type="subtitle" style={styles.headerSubtitle}>
Your digital receipts
</ThemedText>
<TextInput
style={styles.searchInput}
placeholder="Search receipts..."
value={searchQuery}
onChangeText={setSearchQuery}
clearButtonMode="while-editing"
returnKeyType="search"
/>
</ThemedView>
<FlatList
data={filteredReceipts}
renderItem={renderReceiptItem}
keyExtractor={(item, index) => item.id || index.toString()}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
tintColor="#007AFF"
colors={['#007AFF']}
/>
}
onEndReached={onEndReached}
onEndReachedThreshold={0.5}
ListFooterComponent={renderListFooter}
ListEmptyComponent={!refreshing ? renderEmptyState : null}
contentContainerStyle={[
styles.listContent,
filteredReceipts.length === 0 && styles.emptyListContent
]}
showsVerticalScrollIndicator={false}
bounces={true}
/>
</SafeAreaView>
</ThemedView>
);