JavaScript SDK

Integrate OZZOBiT into your application using the OZZOBiT JavaScript SDK

The OZZOBiT JavaScript SDK provides a programmatic way to integrate the OZZOBiT widget into your web application. It offers full control over initialization, event handling, and lifecycle management with a clean, promise-based API.

Installation

Install the SDK

bashbash

npm install @OZZOBiT/OZZOBiT-sdk

bashbash

yarn add @OZZOBiT/OZZOBiT-sdk

htmlhtml

<script src="https://OZZOBiT.com/cdn/sdk/v1.3/OZZOBiTSDK.js"></script>

Integrate Using SDK

sdk-v2-example.tsxtsx

// components/OZZOBiTWidget.tsx
'use client'

import { useEffect, useCallback } from 'react'

interface OZZOBiTConfig {
  apiKey: string
  environment: 'STAGING' | 'PRODUCTION'
  productsAvailed?: string
  network?: string
  defaultCryptoCurrency?: string
  defaultFiatCurrency?: string
  walletAddress?: string
  fiatAmount?: number
  cryptoAmount?: number
  email?: string
  hostURL?: string
  hostLogoURL?: string
  themeColor?: string
  redirectURL?: string
}

export default function useOZZOBiT(config: OZZOBiTConfig) {
  let OZZOBiTSdk: any = null

  const initOZZOBiT = useCallback(() => {
    // Dynamic import for SDK v2
    import('@OZZOBiT/OZZOBiT-sdk').then((OZZOBiTSDK) => {
      OZZOBiTSdk = new OZZOBiTSDK.default({
        ...config,
        eventListeners: {
          // Widget events
          'INITIALIZED': () => console.log('OZZOBiT initialized'),
          
          // Order events
          'ORDER_CREATED': (data: any) => console.log('Order created:', data),
          'ORDER_PROCESSING': (data: any) => console.log('Processing:', data),
          'ORDER_SUCCESSFUL': (data: any) => {
            console.log('Success:', data)
            OZZOBiTSdk?.close()
          },
          'ORDER_FAILED': (data: any) => {
            console.log('Failed:', data)
            OZZOBiTSdk?.close()
          },
          'ORDER_CANCELLED': (data: any) => console.log('Cancelled:', data),
          
          // Market data
          'MARKET_QUOTE': (data: any) => console.log('Quote:', data),
          
          // Lifecycle
          'CLOSE_WIDGET': () => console.log('Widget closed'),
        },
        onClose: () => {
          console.log('Widget closed by user')
          OZZOBiTSdk?.cleanup()
        }
      })

      OZZOBiTSdk.init()
    })
  }, [config])

  return { initOZZOBiT, close: () => OZZOBiTSdk?.close() }
}

// Usage in component:
export default function BuyCryptoButton() {
  const { initOZZOBiT } = useOZZOBiT({
    apiKey: process.env.NEXT_PUBLIC_OZZOBiT_API_KEY!,
    environment: process.env.NODE_ENV === 'development' ? 'STAGING' : 'PRODUCTION',
    productsAvailed: 'BUY',
    network: 'ethereum',
    defaultCryptoCurrency: 'ETH',
    defaultFiatCurrency: 'USD',
    walletAddress: '0x742d35Cc6634C0532925a3b844Bc9e7595f8bD21',
    themeColor: '#1461db',
    hostLogoURL: 'https://your-app.com/logo.png',
  })

  return (
    <button onClick={initOZZOBiT} style={{
      padding: '12px 24px',
      background: '#1461db',
      color: '#fff',
      border: 'none',
      borderRadius: 8,
      fontSize: 16,
      fontWeight: 600,
      cursor: 'pointer',
    }}>
      Buy Crypto
    </button>
  )
}

sdk-v1-example.htmlhtml

<!-- Include the SDK via CDN -->
<script src="https://OZZOBiT.com/cdn/sdk/v1.3/OZZOBiTSDK.js"></script>

<script>
function openOZZOBiT() {
  const OZZOBiT = new OZZOBiTSDK.default({
    apiKey: 'YOUR_PUBLIC_API_KEY',     // Required
    environment: 'PRODUCTION',         // Required: STAGING/PRODUCTION
    productsAvailed: 'BUY',

    // Appearance
    themeColor: '#1461db',             // Widget accent color
    hostLogoURL: 'https://your-logo.png',
    
    // Default values
    defaultCryptoCurrency: 'ETH',
    defaultFiatCurrency: 'USD',
    network: 'ethereum',
    walletAddress: '0x742d35Cc6634C0532925a3b844Bc9e7595f8bD21',
    fiatAmount: 100,

    // Redirect URL after completion
    redirectURL: 'https://your-app.com/callback',

    // Event handlers
    eventListeners: {
      'INITIALIZED': function() {
        console.log('OZZOBiT is ready!')
      },

      'ORDER_CREATED': function(orderData) {
        console.log('Order:', orderData)
      },

      'ORDER_SUCCESSFUL': function(orderData) {
        console.log('Success! Order ID:', orderData.id)
        OZZOBiT.close()
      },

      'ORDER_FAILED': function(orderData) {
        console.log('Failed:', orderData)
        OZZOBiT.close()
      },

      'CLOSE_WIDGET': function() {
        console.log('Widget closed')
        OZZOBiT.cleanup()
      }
    },

    // Cleanup on close
    onClose: function() {
      OZZOBiT.cleanup()
    }
  })

  // Open the widget
  OZZOBiT.init()
}
</script>

<button onclick="openOZZOBiT()">Buy Crypto</button>

Create Widget URL Programmatically

You can also generate a widget URL using curl or your backend:

bashbash

curl -X GET "https://OZZOBiT.com/global?apiKey=YOUR_PUBLIC_API_KEY\
&productsAvail=BUY\
&network=ethereum\
&defaultCryptoCurrency=ETH\
&defaultFiatCurrency=USD\
&walletAddress=0x742d35Cc6634C0532925a3b844Bc9e7595f8bD21\
&themeColor=%231461db\
&redirectURL=https://your-app.com/callback"

SDK Events Reference

Event Name	Description	When Fired
INITIALIZED	Widget has loaded and is ready	On successful load
ORDER_CREATED	User initiated an order	When order is created
ORDER_PROCESSING	Payment is being processed	During payment flow
ORDER_SUCCESSFUL	Transaction completed successfully	On final success
ORDER_FAILED	Transaction failed	On failure
ORDER_CANCELLED	User cancelled the transaction	On user cancellation
MARKET_QUOTE	Exchange rate quote received	When quote updates
CLOSE_WIDGET	Widget was closed	On close action

ℹ️

SDK Methods

init() - Opens and initializes the widget
close() - Closes the widget programmatically
cleanup() - Removes all event listeners and DOM elements