Jump to Content

Getting Started

Get up and running with the Oobit Widget SDK in your React Native or Expo app

The Oobit React Native SDK allows you to embed the Oobit Widget in your mobile app, enabling crypto-to-card payment experiences for your users.

Installation

npm install @oobit/react-native-sdk

Or with yarn:

yarn add @oobit/react-native-sdk

Peer Dependencies

Install dependencies

npm install react-native-webview

Prerequisites

Before using the SDK, you need:

Access Token - A JWT token from your backend (learn more)
User Wallet Address - The user's crypto wallet address for deposits
onTransactionRequested - A callback function that navigates the user to a transaction confirmation screen

Basic Usage

import { WidgetSDK } from "@oobit/react-native-sdk";

function MyScreen() {
  return (
    <WidgetSDK
      accessToken={accessToken}
      userWalletAddress="0x1234567890abcdef..."
      onTransactionRequested={(transaction) => {
        // Navigate to your transaction confirmation screen
        navigation.navigate("ConfirmTransaction", { transaction });
      }}
    />
  );
}

Handling Events

The SDK provides callbacks for important widget events:

Callback	Parameters	Required	Description
`onTransactionRequested`	transaction: TransactionRequest	Yes	User initiated a crypto transaction
`onClose`	-	No	User requested to close the widget

Full Example

import React, { useRef, useState, useEffect } from "react";
import { View, Alert, StyleSheet } from "react-native";
import {
  WidgetSDK,
  WidgetSDKRef,
  TransactionRequest,
} from "@oobit/react-native-sdk";

export function WidgetScreen({ accessToken, walletAddress, onDismiss }) {
  const handleTransactionRequested = (transaction: TransactionRequest) => {
    const { symbol, amount } = transaction.tokenMetadata;

    Alert.alert("Confirm Transaction", `Send ${amount} ${symbol}?`, [
      { text: "Cancel", style: "cancel" },
      {
        text: "Confirm",
        onPress: () => {
          // Navigate to your signing flow
          navigation.navigate("SignTransaction", { transaction });
        },
      },
    ]);
  };

  return (
    <View style={styles.container}>
      <WidgetSDK
        accessToken={accessToken}
        userWalletAddress={walletAddress}
        onTransactionRequested={handleTransactionRequested}
        onClose={onDismiss}
      />
    </View>
  );
}

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

Props Reference

Prop	Type	Required	Description
`accessToken`	`string`	Yes	JWT token from your backend
`userWalletAddress`	`string`	Yes	User's crypto wallet address
`onTransactionRequested`	(transaction: TransactionRequest ) => void	Yes	Called when transaction requested
`onClose`	`() => void`	No	Called when widget closes

See Also

Component Reference - Complete component documentation
TypeScript Types - All exported type definitions
Handling Transactions - Transaction handling guide

Updated about 3 hours ago