Jump to Content

Getting Started

Get up and running with the Oobit Plug & Pay SDK in your React Native or Expo app

The Oobit React Native SDK allows you to embed the Oobit SDK 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 to deposit from
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 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 1 day ago