Jump to Content

Getting Started

Get up and running with the Oobit Plug & Pay SDK in your React Web application

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

Installation

npm install @oobit/react-web

Or with yarn:

yarn add @oobit/react-web

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-web";

function MyPage() {
  return (
    <WidgetSDK
      accessToken={accessToken}
      userWalletAddress="0x1234567890abcdef..."
      onTransactionRequested={(transaction) => {
        // Navigate to your transaction confirmation screen
        router.push("/confirm-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 { WidgetSDK, TransactionRequest } from "@oobit/react-web";

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

    if (confirm(`Send ${amount} ${symbol}?`)) {
      // Navigate to your signing flow
      router.push({ pathname: "/sign-transaction", query: { transaction } });
    }
  };

  return (
    <div style={{ width: "100%", height: "100vh" }}>
      <WidgetSDK
        accessToken={accessToken}
        userWalletAddress={walletAddress}
        onTransactionRequested={handleTransactionRequested}
        onClose={onDismiss}
      />
    </div>
  );
}

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 15 hours ago