finik-rn-sdk

The Finik React Native SDK is a React Native package that helps your app retrieve QR codes from the Finik server. It also includes a pre-made QR screen widget for easy and fast integration into your app.

Installation

npm install finik-rn-sdk

iOS setup

Note: Run on a real device (simulator is not supported with Flutter release xcframework)

cd ios && pod install && cd ..

Android setup

1.Add the following lines in android/app/build.gradle

android {
    // ...rest code

    repositories {
        google()
        mavenCentral()
        maven {
        url "https://storage.googleapis.com/download.flutter.io"
        }
    }

    // ...rest code
}

2.Add the following lines in android/app/src/main/java/com/projectname/MainApplication.kt

import com.finikrnsdk.FinikRnSdkPackage

class MainApplication : Application(), ReactApplication {

  override val reactNativeHost: ReactNativeHost =
      object : DefaultReactNativeHost(this) {
        override fun getPackages(): List<ReactPackage> =
            PackageList(this).packages.apply {
              // Packages that cannot be autolinked yet can be added manually here, for example:
              // add(MyReactNativePackage())
              add(FinikRnSdkPackage())

              // ..rest code
            }

        // ...rest code
      }

  // ..rest code
}

Usage

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import {
  StatusBar,
  StyleSheet,
  useColorScheme,
  View,
  Button,
} from 'react-native';
import {
  SafeAreaProvider,
} from 'react-native-safe-area-context';

import type {
  ICreateItemWidget,
  //  IGetItemWidget
} from 'finik-rn-sdk';
import FinikSdk from 'finik-rn-sdk';

function App() {
  const isDarkMode = useColorScheme() === 'dark';

  const handlePress = () => {
    const widgetCreateItem: ICreateItemWidget = {
      accountId: 'YOUR_ACCOUNT_ID',
      nameEn: 'YOUR_ITEM_NAME',
      amount: {
        value: 123,

        /// Note: android doesn't support
        // max: 23,
        // min: 2341
      },
    };

    // const widgetGetItem: IGetItemWidget = {
    //   itemId: 'YOUR_ITEM_ID',
    // };

    FinikSdk.openItem(
      {
        apiKey: 'YOUR_API_KEY',
        locale: 'ky',
        isBeta: true,
        // textScenario: 'REPLENISHMENT',
        // paymentMethods: ['ALL'],
        // enableShare: true,
        // enableShimmer: true,
        // tapableSupportButtons: true,

        widget: widgetCreateItem,
        // widget: widgetGetItem,
      },
      () => {
        console.log('onBackPressed ');
      },
      (data: any) => {
        console.log('onPayment => data: ', data);

        // Example output:
        // onPayment => data: {accountId: test_account_id, amount: 77.95, fields: {amount: 77.77, YOU_FIELD_ID:
        // YOUR_FIELD_VALUE}, id: 692910201_97ab0bec-69c5-419d-8cfa-4b7963r98b82_DEBIT, requestDate: 1737537122065,
        // status: SUCCEEDED, transactionDate: 1737537124659, transactionId: 97ab0bec-69c5-419d-8cfa-4b7963b98b82,
        // transactionType: DEBIT, item: {id: 3667229233_e3b98d14-ffd3-4cf8-b520-e1be9079c3f0}}
      }
    );
  };

  return (
    <SafeAreaProvider>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <View style={styles.container}>
        <Button title="open item" onPress={handlePress} />
      </View>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

Parameters Explained

• apiKey: API client key provided by Finik.
• isBeta: Whether to use the beta server.
• locale: The language used for UI translations. Supported options: FinikSdkLocale.KY, FinikSdkLocale.EN, FinikSdkLocale.RU.
• textScenario: Defines the context for displayed UI text. Accepted values: TextScenario.PAYMENT, TextScenario.REPLENISHMENT.
• paymentMethods: Defines which payment options are shown to users:
  • [ALL] - Shows all available methods (APP + QR)
  • [APP] - Mobile application payment only
  • [QR] - QR code payment only
• enableShimmer: Controls the visibility of the shimmer animations in the app.
• enableShare: Controls the visibility of the share button in the app.
• tapableSupportButtons: Controls whether support buttons are interactive.
• onBackPressed: A function triggered when the back button is pressed. Useful for custom navigation or showing dialogs.
• onPayment: A function triggered when the payment is done. Returns the payment status and other payment data.
• widget: on object managed by ICreateItemWidget or IGetItemWidget

🧩 Widgets

1. ICreateItemWidget

Use this widget to create a new payment item and generate a QR code.

Parameters

• accountId (required): This is the Finik account where the funds will be deposited, acquired from the merchant's clients. Reach out to Finik representatives to receive your corporate accountId along with the x-api-key.
• nameEn (required): A field used as a QR name that will be displayed to the merchant's clients on their devices upon payment.
• requestId (optional): A field to control the uniqueness of a request. For each request, it must be unique so that Finik ensures no duplicate QR items are created.
• amount (optional): Defines the payment configuration. Supported types:
  • [FixedAmount] - A predefined, non-editable payment amount.
  • [MinMaxAmount] - Allows users to enter an amount within a specified minimum and maximum range.
  • [FreeAmount] - Fully flexible; users can input any amount.
• description (optional): A short description of the item. Displayed in the payment UI.
• callbackUrl (optional): A field used as a webhook. When specified, Finik will send a POST request to your server with the payment details in its JSON body, including its final status (either SUCCEEDED or FAILED), as well as requiredFields in the form of a fields object attribute.
• maxAvailableQuantity (optional): Maximum number of times this item can be purchased. Prevents over-selling.
• maxAvailableAmount (optional): Maximum total payable amount allowed across all purchases of this item.
• startDate (optional): The start date and time from which the item becomes available for payment.
• endDate (optional): The end date and time after which the item is no longer available for payment.
• visibilityType (optional): Determines whether the item is public or private.
• requiredFields (optional): When specified, Finik will proxy the provided key:value in the fields field when sending the payment details to the callbackUrl, if configured.

2. IGetItemWidget

Use this widget to retrieve an existing item by its ID and display its details.

Parameters

• itemId: A required field. It is the unique ID for the item to fetch.

👨‍💻 Author

• Finik — [email protected]