Oobit Plug & Pay SDK

https://docs.oobit.com/docs
Admin
Oobit Plug & Pay SDK is a white-labeled wallet-native payments solution that enables crypto wallets...
Tokens:6,924
Snippets:74
Trust Score:8.9
Update:7 months ago
Show doc for...
Tokens:
Raw
### Install Oobit React Web SDK

Source: https://docs.oobit.com/docs/react-web-getting-started

Install the Oobit React Web SDK using npm or yarn. This package provides the necessary components to integrate Oobit's payment solutions into your React application.

```bash
npm install @oobit/react-web
```

```bash
yarn add @oobit/react-web
```

--------------------------------

### Full Oobit Widget Example with Event Handling

Source: https://docs.oobit.com/docs/react-web-getting-started

A comprehensive example of the Oobit WidgetSDK in a React component, demonstrating how to handle transaction requests and widget closure. It includes type definitions for clarity.

```tsx
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>
  );
}
```

--------------------------------

### Install Oobit SDK and Dependencies

Source: https://docs.oobit.com/docs/getting-started

Instructions for installing the Oobit SDK package and its required peer dependency, react-native-webview, using npm or yarn.

```bash
npm install @oobit/react-native-sdk
yarn add @oobit/react-native-sdk
npm install react-native-webview
```

--------------------------------

### WidgetSDK Example with Callbacks in React

Source: https://docs.oobit.com/docs/react-web-sdk-component

Provides a more detailed example of the WidgetSDK component, including how to handle transaction requests by navigating to a confirmation screen and how to close the widget by navigating back.

```tsx
<WidgetSDK
  accessToken={tokenFromBackend}
  userWalletAddress="0x742d35Cc6634C0532925a3b844Bc9e7595f..."
  onTransactionRequested={(transaction) => {
    const { symbol, amount } = transaction.tokenMetadata;
    router.push({ pathname: "/confirm", query: { transaction } });
  }}
  onClose={() => router.back()}
/>
```

--------------------------------

### Basic Oobit Widget Integration in React

Source: https://docs.oobit.com/docs/react-web-getting-started

Embed the Oobit WidgetSDK component in your React page. This requires an access token, the user's wallet address, and a callback for transaction requests.

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

--------------------------------

### Implement WidgetSDK Component

Source: https://docs.oobit.com/docs/component

Provides examples for integrating the WidgetSDK component. It demonstrates passing required props like accessToken and userWalletAddress, and handling transaction callbacks.

```tsx
<WidgetSDK
  accessToken="your-jwt-token"
  userWalletAddress="0x1234..."
  onTransactionRequested={(transaction) => {
    navigation.navigate('ConfirmTransaction', { transaction });
  }}
/>
```

```tsx
<WidgetSDK
  accessToken={tokenFromBackend}
  userWalletAddress="0x742d35Cc6634C0532925a3b844Bc9e7595f..."
  onTransactionRequested={(transaction) => {
    const { symbol, amount } = transaction.tokenMetadata;
    navigation.navigate('ConfirmTransaction', { transaction });
  }}
  onClose={() => navigation.goBack()}
/>
```

--------------------------------

### WidgetSDK Component

Source: https://docs.oobit.com/docs/react-web-getting-started

The primary component for embedding the Oobit payment widget into a React application.

```APIDOC
## Component: <WidgetSDK />

### Description
The WidgetSDK component renders the Oobit payment interface, allowing users to perform crypto-to-card transactions directly within your React application.

### Props
- **accessToken** (string) - Required - A JWT token generated from your backend for authentication.
- **userWalletAddress** (string) - Required - The user's crypto wallet address used for initiating deposits.
- **onTransactionRequested** (function) - Required - Callback triggered when a user initiates a transaction. Receives a TransactionRequest object.
- **onClose** (function) - Optional - Callback triggered when the user closes the widget interface.

### Usage Example
```tsx
import { WidgetSDK } from "@oobit/react-web";

function MyPage() {
  return (
    <WidgetSDK
      accessToken="your-jwt-token"
      userWalletAddress="0x1234567890abcdef..."
      onTransactionRequested={(transaction) => {
        console.log("Transaction requested:", transaction);
      }}
      onClose={() => console.log("Widget closed")}
    />
  );
}
```
```

--------------------------------

### Advanced Widget Integration with Event Handling

Source: https://docs.oobit.com/docs/getting-started

A comprehensive example showing how to handle transaction requests and widget closure events within a React Native component.

```tsx
import React from "react";
import { View, Alert, StyleSheet } from "react-native";
import { WidgetSDK, 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: () => 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 },
});
```

--------------------------------

### onTransactionRequested Callback - React Web

Source: https://docs.oobit.com/docs/transactions

Example of how to implement the `onTransactionRequested` callback in a React Web application to handle incoming transaction requests from the Oobit widget.

```APIDOC
## `onTransactionRequested` Callback - React Web

### Description
This example demonstrates how to use the `WidgetSDK` component in React Web and handle the `onTransactionRequested` event to navigate the user to a transaction confirmation page.

### Method
Callback function provided to `WidgetSDK`

### Endpoint
N/A (Client-side SDK integration)

### Parameters
#### Props for `WidgetSDK`
- **accessToken** (string) - Required - The access token for authentication.
- **userWalletAddress** (string) - Required - The user's wallet address.
- **onTransactionRequested** (function) - Required - Callback function that receives a `TransactionRequest` object.
- **onClose** (function) - Required - Callback function to handle the widget closing.

#### `TransactionRequest` Object (Callback Parameter)
- **type** (string) - Required - Discriminates between 'evm' and 'solana' transactions.
- **chainId** (number) - Required (for EVM) - The chain ID of the EVM network.
- **transaction** (object | string) - Required - The transaction details (EVM data or Solana serialized string).
- **tokenMetadata** (object) - Required - Metadata for the token involved in the transaction.

### Request Example
```typescript
import { WidgetSDK, TransactionRequest } from '@oobit/react-web';

function WidgetPage() {
  const router = useRouter();

  const handleTransactionRequested = (transaction: TransactionRequest) => {
    // Navigate to your transaction confirmation screen
    router.push({ pathname: '/confirm', query: { transaction } });
  };

  return (
    <WidgetSDK
      accessToken={accessToken}
      userWalletAddress={walletAddress}
      onTransactionRequested={handleTransactionRequested}
      onClose={() => router.back()}
    />
  );
}
```

### Response
N/A (This is a callback, not an API endpoint response)

```

--------------------------------

### onTransactionRequested Callback - React Native

Source: https://docs.oobit.com/docs/transactions

Example of how to implement the `onTransactionRequested` callback in a React Native application to handle incoming transaction requests from the Oobit widget.

```APIDOC
## `onTransactionRequested` Callback - React Native

### Description
This example demonstrates how to use the `WidgetSDK` component in React Native and handle the `onTransactionRequested` event to navigate the user to a transaction confirmation screen.

### Method
Callback function provided to `WidgetSDK`

### Endpoint
N/A (Client-side SDK integration)

### Parameters
#### Props for `WidgetSDK`
- **accessToken** (string) - Required - The access token for authentication.
- **userWalletAddress** (string) - Required - The user's wallet address.
- **onTransactionRequested** (function) - Required - Callback function that receives a `TransactionRequest` object.
- **onClose** (function) - Required - Callback function to handle the widget closing.

#### `TransactionRequest` Object (Callback Parameter)
- **type** (string) - Required - Discriminates between 'evm' and 'solana' transactions.
- **chainId** (number) - Required (for EVM) - The chain ID of the EVM network.
- **transaction** (object | string) - Required - The transaction details (EVM data or Solana serialized string).
- **tokenMetadata** (object) - Required - Metadata for the token involved in the transaction.

### Request Example
```typescript
import { WidgetSDK, TransactionRequest } from '@oobit/react-native-sdk';

function WidgetScreen() {
  const navigation = useNavigation();

  const handleTransactionRequested = (transaction: TransactionRequest) => {
    // Navigate to your transaction confirmation screen
    navigation.navigate('TransactionConfirmation', { transaction });
  };

  return (
    <WidgetSDK
      accessToken={accessToken}
      userWalletAddress={walletAddress}
      onTransactionRequested={handleTransactionRequested}
      onClose={() => navigation.goBack()}
    />
  );
}
```

### Response
N/A (This is a callback, not an API endpoint response)

```

--------------------------------

### Implement Oobit WidgetSDK in React Native

Source: https://docs.oobit.com/docs/getting-started

Demonstrates the basic implementation of the WidgetSDK component, requiring an access token, user wallet address, and a transaction callback.

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

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

--------------------------------

### POST /v1/widget/auth/create-token

Source: https://docs.oobit.com/docs/create-token

Generates a JWT access token for authenticating the widget by providing a valid API key in the request header.

```APIDOC
## POST /v1/widget/auth/create-token

### Description
Generates a JWT access token for authenticating the widget. This token is required for subsequent widget operations.

### Method
POST

### Endpoint
{BASE_URL}/v1/widget/auth/create-token

### Parameters
#### Headers
- **x-api-key** (string) - Required - Your unique API key for authentication.

### Request Example
```bash
curl -X POST {BASE_URL}/v1/widget/auth/create-token \
  -H "x-api-key: your-api-key"
```

### Response
#### Success Response (200)
- **success** (boolean) - Indicates whether the token was created successfully.
- **message** (string) - Human-readable status message.
- **token** (string) - The generated JWT access token.
- **expiresAt** (string) - ISO 8601 timestamp indicating token expiration.

#### Response Example
{
  "success": true,
  "message": "Token created successfully",
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
  "expiresAt": "2025-12-23T12:00:00.000Z"
}

### Error Responses
- **401 Unauthorized**: Invalid API key.
- **403 Forbidden**: Provider not authorized for this operation.
- **429 Too Many Requests**: Rate limit exceeded.
- **500 Internal Server Error**: An unexpected error occurred on the server.
```

--------------------------------

### Basic WidgetSDK Usage in React

Source: https://docs.oobit.com/docs/react-web-sdk-component

Shows the fundamental way to use the WidgetSDK component in a React application. It requires an access token, a user's wallet address, and a callback for transaction requests.

```tsx
<WidgetSDK
  accessToken="your-jwt-token"
  userWalletAddress="0x1234..."
  onTransactionRequested={(transaction) => {
    // Navigate user to transaction confirmation screen
  }}
/>
```

--------------------------------

### Import WidgetSDK Component

Source: https://docs.oobit.com/docs/component

Shows how to import the WidgetSDK component from the @oobit/react-native-sdk package.

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

--------------------------------

### Import WidgetSDK in React

Source: https://docs.oobit.com/docs/react-web-sdk-component

Demonstrates how to import the WidgetSDK component from the '@oobit/react-web' package into a React application. This is the first step to using the Oobit Widget.

```tsx
import { WidgetSDK } from "@oobit/react-web";
```

--------------------------------

### Defining Widget SDK Configuration (TypeScript)

Source: https://docs.oobit.com/docs/types

Defines the `WidgetSDKConfig` interface, specifying the configuration options for the `WidgetSDK` component. It includes required properties like `accessToken` and `userWalletAddress`, and optional callbacks for transaction requests and widget closure.

```typescript
interface WidgetSDKConfig {
  accessToken: string;
  userWalletAddress: string;
  onTransactionRequested: (transaction: TransactionRequest) => void;
  onClose?: () => void;
}
```

--------------------------------

### Solana Transactions

Source: https://docs.oobit.com/docs/transactions

Defines the structure of a Solana transaction request, including the serialized transaction and token metadata.

```APIDOC
## Solana Transactions

### Description
Solana transactions are used for interacting with the Solana blockchain. This section details the structure of the `SolanaTransactionRequest` object.

### Interface Definition
```typescript
interface SolanaTransactionRequest {
  type: 'solana';
  transaction: string;
  tokenMetadata: TransactionTokenMetadata;
}
```

### Fields
- **type** (`'solana'`) - Required - Identifies this as a Solana transaction.
- **transaction** (`string`) - Required - The serialized transaction, base64 encoded.
- **tokenMetadata** (`TransactionTokenMetadata`) - Required - Information about the token involved in the transaction.

```

--------------------------------

### Handling Transaction Requests (TypeScript)

Source: https://docs.oobit.com/docs/types

Demonstrates how to handle a `TransactionRequest`, which is a union type that can represent either an EVM or Solana transaction. It shows how to use the `type` field to discriminate between the two chain types and access chain-specific properties.

```typescript
type TransactionRequest = EvmTransactionRequest | SolanaTransactionRequest;

function handleTransaction(tx: TransactionRequest) {
  if (tx.type === 'evm') {
    // Handle EVM transaction
    console.log('Chain ID:', tx.chainId);
  } else {
    // Handle Solana transaction
    console.log('Solana transaction');
  }
}
```

--------------------------------

### EVM Transactions

Source: https://docs.oobit.com/docs/transactions

Defines the structure of an EVM transaction request, including chain ID, transaction data, and token metadata.

```APIDOC
## EVM Transactions

### Description
EVM transactions are used for interacting with Ethereum-compatible blockchains. This section details the structure of the `EvmTransactionRequest` object.

### Interface Definition
```typescript
interface EvmTransactionRequest {
  type: 'evm';
  chainId: number;
  transaction: EvmTransactionData;
  tokenMetadata: TransactionTokenMetadata;
}

interface EvmTransactionData {
  to: string;
  data: string;
  value: string;
}
```

### Fields
- **type** (`'evm'`) - Required - Identifies this as an EVM transaction.
- **chainId** (`number`) - Required - The network identifier (e.g., 1 for Ethereum, 137 for Polygon).
- **transaction.to** (`string`) - Required - The destination address for the transaction.
- **transaction.data** (`string`) - Required - The encoded transaction data in hexadecimal format.
- **transaction.value** (`string`) - Required - The amount of native token to send, in wei (hexadecimal format).
- **tokenMetadata** (`TransactionTokenMetadata`) - Required - Information about the token involved in the transaction.

```

--------------------------------

### Discriminate Between EVM and Solana Transaction Types

Source: https://docs.oobit.com/docs/transactions

Handle different blockchain transaction types by checking the `type` field of the `TransactionRequest` object. This allows for specific logic for EVM and Solana transactions.

```typescript
type TransactionRequest = EvmTransactionRequest | SolanaTransactionRequest;

function handleTransaction(transaction: TransactionRequest) {
  switch (transaction.type) {
    case 'evm':
      // Handle EVM transaction (Ethereum, Polygon, BSC, etc.)
      handleEvmTransaction(transaction);
      break;
    case 'solana':
      // Handle Solana transaction
      handleSolanaTransaction(transaction);
      break;
  }
}
```

--------------------------------

### Handle Transaction Requests in React Web

Source: https://docs.oobit.com/docs/transactions

Implement the `onTransactionRequested` callback in React Web to redirect users to a transaction confirmation page. This function takes a `TransactionRequest` object and uses the router to navigate.

```typescript
import { WidgetSDK, TransactionRequest } from '@oobit/react-web';

function WidgetPage() {
  const router = useRouter();

  const handleTransactionRequested = (transaction: TransactionRequest) => {
    // Navigate to your transaction confirmation screen
    router.push({ pathname: '/confirm', query: { transaction } });
  };

  return (
    <WidgetSDK
      accessToken={accessToken}
      userWalletAddress={walletAddress}
      onTransactionRequested={handleTransactionRequested}
      onClose={() => router.back()}
    />
  );
}
```

--------------------------------

### TransactionRequest Type

Source: https://docs.oobit.com/docs/transactions

Details on the `TransactionRequest` type, which is a union of EVM and Solana transaction requests, and how to discriminate between them.

```APIDOC
## `TransactionRequest` Type

### Description
The `TransactionRequest` type is a union that can represent either an EVM or a Solana transaction. The `type` field is used to determine which kind of transaction is being processed.

### Type Definition
```typescript
type TransactionRequest = EvmTransactionRequest | SolanaTransactionRequest;
```

### Discriminating by Chain
This code snippet shows how to use a switch statement on the `transaction.type` field to handle different transaction types.

```typescript
function handleTransaction(transaction: TransactionRequest) {
  switch (transaction.type) {
    case 'evm':
      // Handle EVM transaction (Ethereum, Polygon, BSC, etc.)
      handleEvmTransaction(transaction);
      break;
    case 'solana':
      // Handle Solana transaction
      handleSolanaTransaction(transaction);
      break;
  }
}
```

### Parameters
- **type** (string) - Required - Discriminates between 'evm' and 'solana' transactions.
- **chainId** (number) - Required (for EVM) - The chain ID of the EVM network.
- **transaction** (object | string) - Required - The transaction details (EVM data or Solana serialized string).
- **tokenMetadata** (object) - Required - Metadata for the token involved in the transaction.

```

--------------------------------

### Importing SDK Types for React Web

Source: https://docs.oobit.com/docs/types

Imports key TypeScript types and interfaces for using the Oobit SDK within a React web application. These imports ensure type safety when working with SDK configurations and transaction objects.

```typescript
import type {
  WidgetSDKConfig,
  WidgetSDKRef,
  TransactionRequest,
  EvmTransactionRequest,
  SolanaTransactionRequest,
  EvmTransactionData,
  TransactionTokenMetadata,
} from '@oobit/react-web';
```

--------------------------------

### Handle Transaction Requests in React Native

Source: https://docs.oobit.com/docs/transactions

Implement the `onTransactionRequested` callback in React Native to navigate users to a transaction confirmation screen. This function receives a `TransactionRequest` object and uses the navigation prop to direct the user.

```typescript
import { WidgetSDK, TransactionRequest } from '@oobit/react-native-sdk';

function WidgetScreen() {
  const navigation = useNavigation();

  const handleTransactionRequested = (transaction: TransactionRequest) => {
    // Navigate to your transaction confirmation screen
    navigation.navigate('TransactionConfirmation', { transaction });
  };

  return (
    <WidgetSDK
      accessToken={accessToken}
      userWalletAddress={walletAddress}
      onTransactionRequested={handleTransactionRequested}
      onClose={() => navigation.goBack()}
    />
  );
}
```

--------------------------------

### Importing SDK Types for React Native

Source: https://docs.oobit.com/docs/types

Imports essential TypeScript types and interfaces for integrating the Oobit SDK in a React Native environment. These types facilitate type-safe handling of configurations and transaction requests.

```typescript
import type {
  WidgetSDKConfig,
  WidgetSDKRef,
  TransactionRequest,
  EvmTransactionRequest,
  SolanaTransactionRequest,
  EvmTransactionData,
  TransactionTokenMetadata,
} from '@oobit/react-native-sdk';
```

--------------------------------

### Defining Solana Transaction Request (TypeScript)

Source: https://docs.oobit.com/docs/types

Defines the `SolanaTransactionRequest` interface for Solana blockchain transactions. This structure includes the transaction type, the serialized transaction in base64 format, and associated token metadata.

```typescript
interface SolanaTransactionRequest {
  type: 'solana';
  transaction: string;
  tokenMetadata: TransactionTokenMetadata;
}
```

--------------------------------

### Defining EVM Transaction Data (TypeScript)

Source: https://docs.oobit.com/docs/types

Defines the `EvmTransactionData` interface, which holds the raw data for an EVM transaction. It includes the destination address, encoded transaction data in hexadecimal format, and the native token value in wei, also in hexadecimal.

```typescript
interface EvmTransactionData {
  to: string;
  data: string;
  value: string;
}
```

--------------------------------

### Define TransactionTokenMetadata Interface (TypeScript)

Source: https://docs.oobit.com/docs/types

Defines the structure for token metadata used in transaction displays. It includes the token symbol, human-readable amount, and the number of decimal places for accurate representation. This interface is crucial for ensuring consistent and clear display of token information to users.

```typescript
interface TransactionTokenMetadata {
  symbol: string;
  amount: string;
  decimals: number;
}
```

--------------------------------

### Defining EVM Transaction Request (TypeScript)

Source: https://docs.oobit.com/docs/types

Defines the `EvmTransactionRequest` interface for EVM-compatible blockchain transactions. This interface includes the transaction type, chain ID, transaction data, and token metadata required for processing.

```typescript
interface EvmTransactionRequest {
  type: 'evm';
  chainId: number;
  transaction: EvmTransactionData;
  tokenMetadata: TransactionTokenMetadata;
}
```
Tokens:
Raw