This guide explains the configuration methods for Dapi React-Native SDK and how to set environment, send data to your backend server and customize Dapi UI. ## Dapi Configurations You can use `DapiConfigurations` to configure the SDK as follows. ```typescript let configurations = new DapiConfigurations(['AE', 'US'], DapiEnvironment.sandbox); configurations.postSuccessfulConnectionLoadingText = 'Loading'; configurations.showTransferSuccessfulResult = true; configurations.showTransferErrorResult = true; let extraBody = {"key":"Value","key2":"Value"}; configurations.endPointExtraBody = extraBody; let extraHeaders = {"key":"Value","key2":"Value"}; configurations.endPointExtraHeaderFields = extraHeaders; let primaryColor = new Map(); primaryColor.set('lightMode', '#610903'); primaryColor.set('darkMode', '#cf1002'); configurations.theme = new DapiThemeConfigurations(DapiTheme.dark, Object.fromEntries(primaryColor)); configurations.language = DapiLanguage.ar; ``` ### Configuration Parameters

Parameter	Description
environment	The running environment for Dapi.\ Set to `DapiEnvironment.PRODUCTION` for production release and `DapiEnvironment.SANDBOX` for testing.
countries	Array of countries that you support, use the `Alpha-2` country codes from [COUNTRY CODES LIST](https://www.iban.com/country-codes)
extraHeaderFields	HashMap of header fields to send to any endpoint.
extraBody	HashMap of entries to include in any request under the key `UserExtraBody`.\ The extraBody will look like `UserExtraBody:{Key1:"Value1", "Key2": "Value2"}` included in the original request body.
postSuccessfulConnectionLoadingText	The text to show in the loader screen after a successful credentials input on Connect.
showTransferSuccessfulResult	Boolean that controls the Result Screen visibility after a successful payment attempt using Dapi UI. Set true to show Result Screen, false otherwise.
showTransferErrorResult	Boolean that controls the Result Screen visibility after a failed payment attempt using Dapi UI. Set true to show Result Screen, false otherwise.
theme	`DapiThemeConfiguration` to configure the SDK UI theme. `enforceTheme` -> enforce a specific theme `DapiTheme.light` `DapiTheme.dark` or device theme `DapiTheme.dynamic` `primaryColor` -> your primary color for Light and Dark Modes in Hex format.
language	The language of the SDK Supported languages: English `DapiLanguage.en`, Arabic `DapiLanguage.ar` Default language: `DapiLanguage.en`

## Start the SDK with your configurations ```typescript let configurations = new DapiConfigurations(['AE', 'US'], DapiEnvironment.sandbox); configurations.postSuccessfulConnectionLoadingText = 'Loading'; configurations.showTransferSuccessfulResult = true; configurations.showTransferErrorResult = true; let extraBody = new Map(); extraBody.set('key1', 'value1'); extraBody.set('key2', 'value2'); configurations.endPointExtraBody = extraBody; let extraHeaders = new Map(); extraHeaders.set('key1', 'value1'); extraHeaders.set('key2', 'value2'); configurations.endPointExtraHeaderFields = extraHeaders; let primaryColor = new Map(); primaryColor.set('lightMode', '#610903'); primaryColor.set('darkMode', '#cf1002'); configurations.theme = new DapiThemeConfigurations(DapiTheme.dark, Object.fromEntries(primaryColor)); await Dapi.instance.start( '#app_key#', '#client_user_id', configurations ) ``` > 📘 Note > > `ClientUserID` is used to distinguish between different users on the same device. The value for ClientUserID needs to be set by you. We recommend setting clientUserID to your actual user ID that you use to distinguish between users. You should update the clientUserID once the user logs out and another user logs in. ## Modify the SDK configurations You can modify the configurations after you've started the SDK successfully by using `Dapi.instance.setConfigurations()` to set your modifications ```typescript let configurations = new DapiConfigurations(['AE', 'US'], DapiEnvironment.sandbox); configurations.postSuccessfulConnectionLoadingText = 'Loading'; configurations.showTransferSuccessfulResult = true; configurations.showTransferErrorResult = true; let extraBody = {"key":"Value","key2":"Value"}; configurations.endPointExtraBody = extraBody; let extraHeaders = {"key":"Value","key2":"Value"}; configurations.endPointExtraHeaderFields = extraHeaders; Dapi.instance.setConfigurations(configurations); ``` ## Modify the clientUserID You can modify the clientUserID after you've started the SDK successfully by using `Dapi.instance. setClientUserID()` to set your modifications. ```typescript Dapi.instance.setClientUserID("clientUserID"); ``` ## Enable Network Logging Enable network logging to get full information on the requests happening inside the SDK. * For Android: 1. Open `AndroidManifest.xml`. 2. Add the following code. ```xml

``` * For iOS: 1. Open `Product` -> `Scheme` -> `Edit Scheme` -> `Arguments` 2. Add `DAPI_NETWORK_LOGGIN_ENABLED` environment variable with value `YES` ![1467](https://files.readme.io/fec98fc-34e0759-035fe46-Screen_Shot_2021-10-05_at_11.00.02_AM.png "34e0759-035fe46-Screen_Shot_2021-10-05_at_11.00.02_AM.png")