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 embeds the Plug & Pay widget in your React web app, enabling crypto-to-card payment experiences for your users.

Installation

Latest version: 1.3.2

npm install @oobit/react-web

Or with yarn:

yarn add @oobit/react-web

Choose Your Integration

Plug & Pay supports two integration modes for funding the card. Which one you use is configured on your partner account — if you're not sure, check with your Oobit account manager.

	Widget-Managed Flow (default)	Standalone Flow
Who builds the deposit transaction	The widget — your app receives a ready-to-sign `TransactionRequest` and broadcasts it	Your app — using Oobit's Partner API to fetch the user's deposit address
What you pass the SDK	`userWalletAddress` + `onTransactionRequested`	`onDepositRequested` (+ optional `email` / `externalUserId`)
Deep dive	Widget-Managed Deposits	API-Managed Deposits

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");
      }}
    />
  );
}

import { WidgetSDK, type StandaloneConfig } from "@oobit/react-web";

function MyPage() {
  return (
    <WidgetSDK
      accessToken={accessToken}
      email="[email protected]" // optional - prefills onboarding
      externalUserId="your-internal-user-id" // optional
      onDepositRequested={(email) => {
        // `email` is the user's verified email — pass it to your backend
        // so it can call Oobit's Partner API on their behalf.
        router.push(`/deposit?email=${encodeURIComponent(email)}`);
      }}
    />
  );
}

Props Reference

Shared

Prop	Type	Required	Description
`accessToken`	`string`	Yes	JWT token from your backend (Authentication Guide)
`onClose`	`() => void`	No	Called when the user requests to close the widget. Required to show back/close buttons — if omitted, the widget's navigation buttons are hidden and users have no in-widget way to dismiss it.

Widget-Managed Flow (`WidgetSDKConfig`)

Prop	Type	Required	Description
`userWalletAddress`	`string`	Yes	The user's crypto wallet address — the widget uses it to build the deposit transaction
`onTransactionRequested`	(transaction: ``TransactionRequest``) => void	Yes	Called when the user initiates a transaction. See Widget-Managed Deposits

Standalone Flow (`StandaloneConfig`)

Prop	Type	Required	Description
`email`	`string`	No	The user's email. If provided, the widget skips email entry. If omitted, the user enters and verifies it inside the widget's onboarding flow
`externalUserId`	`string`	No	Your internal user ID. Alternative identifier for Partner API calls
`onDepositRequested`	`(email: string) => void`	Yes	Called when the user taps "Add Funds". Receives the user's verified email so your backend can identify them (API-Managed Deposits)

See Also

Deposit Flow — Overview of both integration modes
Widget-Managed Deposits — Handling onTransactionRequested
API-Managed Deposits — Deep dive on the standalone flow

Updated 6 days ago