Skip to main content

Installation and Initialization

Add the Metric SDK Package to Your Project​

Before you can initialize the SDK and perform verifications, you need to add the Metric SDK package to your project. Use one of the following commands depending on your package manager:

yarn add react-native-metric-sdk
Package details

NPM Package.

Usage​

Initialization​

To use the SDK, initialize it with your client ID and secret key:

import MetricSDK from "react-native-metric-sdk";

const metric = new MetricSDK({
  clientId: "your-client-id",
  secretKey: "your-secret-key",
});

Example​

import { useState } from "react";
import { View, Button, Text, TextInput } from "react-native";
import MetricSDK, { type VerificationData } from "react-native-metric-sdk";

const metric = new MetricSDK({
  clientId: "your-client-id",
  secretKey: "your-secret-key",
});

const App = () => {
  const [modalComponent, setModalComponent] = useState<JSX.Element | null>(null);
  const [token, setToken] = useState("");
  const [userData, setUserData] = useState<VerificationData>();

  const handleVerifyToken = async () => {
    try {
      const { VerificationModal } = await metric.initiateTokenVerification(
        token,
        (data) => {
          if (data) {
            setUserData(data);
          }
          setModalComponent(null);
        } // Callback to close the modal
      );

      setModalComponent(VerificationModal);
    } catch (err) {
      console.error("Error:", err instanceof Error ? err.message : err);
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <View style={{}}>
        <Text>Token:</Text>
        <TextInput
          style={{
            width: 200,
            height: 40,
            paddingHorizontal: 8,
            borderColor: "#000",
            borderWidth: 1.5,
          }}
          value={token}
          onChangeText={setToken}
        />
      </View>
      <Button title="Verify Token" onPress={handleVerifyToken} />
      {userData && (
        <>
          <Text>name: {userData?.customer_name}</Text>
          <Text>sid: {userData?.suid}</Text>
        </>
      )}
      {ModalComponent}
    </View>
  );
};

export default App;