Changelog

SDK Configurations

Suggest Edits

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.

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<string, string>();
primaryColor.set('lightMode', '#610903');
primaryColor.set('darkMode', '#cf1002');
configurations.theme = new DapiThemeConfigurations(DapiTheme.dark, Object.fromEntries(primaryColor));
configurations.language = DapiLanguage.ar;

Configuration Parameters

ParameterDescription
environmentThe running environment for Dapi.
Set to DapiEnvironment.PRODUCTION for production release and DapiEnvironment.SANDBOX for testing.
countriesArray of countries that you support, use the Alpha-2 country codes from COUNTRY CODES LIST
extraHeaderFieldsHashMap of header fields to send to any endpoint.
extraBodyHashMap 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.
postSuccessfulConnectionLoadingTextThe text to show in the loader screen after a successful credentials input on Connect.
showTransferSuccessfulResultBoolean that controls the Result Screen visibility after a successful payment attempt using Dapi UI. Set true to show Result Screen, false otherwise.
showTransferErrorResultBoolean that controls the Result Screen visibility after a failed payment attempt using Dapi UI. Set true to show Result Screen, false otherwise.
themeDapiThemeConfiguration 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.
languageThe language of the SDK

Supported languages: English DapiLanguage.en, Arabic DapiLanguage.ar

Default language: DapiLanguage.en

Start the SDK with your configurations

let configurations = new DapiConfigurations(['AE', 'US'], DapiEnvironment.sandbox);

configurations.postSuccessfulConnectionLoadingText = 'Loading';
configurations.showTransferSuccessfulResult = true;
configurations.showTransferErrorResult = true;

let extraBody = new Map<string, any>();
extraBody.set('key1', 'value1');
extraBody.set('key2', 'value2');

configurations.endPointExtraBody = extraBody;

let extraHeaders = new Map<string, any>();
extraHeaders.set('key1', 'value1');
extraHeaders.set('key2', 'value2');

configurations.endPointExtraHeaderFields = extraHeaders;

let primaryColor = new Map<string, string>();
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

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.

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.
<application
     android:icon="@mipmap/ic_launcher"
     android:label="@string/app_name"
     android:roundIcon="@mipmap/ic_launcher_round"
     .
	 .
	 .>

      <!--enable logger-->
      <meta-data
          	android:name="co.dapi.networkLoggingEnabled"
            android:value="true" />
</application>
  • For iOS:
    1. Open Product -> Scheme -> Edit Scheme -> Arguments
    2. Add DAPI_NETWORK_LOGGIN_ENABLED environment variable with value YES
1467

Updated 5 months ago

What’s Next