Redirection

Simple redirection based integration

The Redirection method is the simplest way to integrate OZZOBiT into your web application. Users are redirected from your application to the OZZOBiT-hosted widget where they complete their transaction, and then redirected back to your application when finished.

Overview

Redirection integration is ideal for quick setup and works well for applications that don't need to keep users on the same page during the transaction. It requires minimal code changes and is the fastest path to going live.

Integration Steps

Create Widget URL

Construct a OZZOBiT widget URL with your API key and desired configuration parameters:

widget-url.htmlhtml

https://OZZOBiT.com/global?
  apiKey=YOUR_PUBLIC_API_KEY
  &productsAvailed=BUY
  &network=ethereum
  &defaultCryptoCurrency=ETH
  &defaultFiatCurrency=USD
  &walletAddress=0x742d35Cc6634C0532925a3b844Bc9e7595f8bD21
  &redirectURL=https://your-app.com/redirect-handler

The full list of available parameters can be found in our Query Parameters documentation.

Redirect User to Widget

Redirect the user to the widget URL. This can be done via a simple link or programmatic redirect:

tsxtsx

<!-- Simple link approach -->
<a href="https://OZZOBiT.com/global?apiKey=YOUR_KEY&...">Buy Crypto</a>

<!-- JavaScript redirect -->
window.location.href = 'https://OZZOBiT.com/global?apiKey=YOUR_KEY&...'

<!-- React/Next.js example -->
import Link from 'next/link'

export default function BuyButton() {
  const widgetUrl = new URL('https://OZZOBiT.com/global')
  widgetUrl.searchParams.set('apiKey', process.env.NEXT_PUBLIC_OZZOBiT_API_KEY!)
  widgetUrl.searchParams.set('productsAvailed', 'BUY')
  widgetUrl.searchParams.set('defaultCryptoCurrency', 'ETH')
  
  return (
    <Link href={widgetUrl.toString()}>
      Buy Crypto with OZZOBiT
    </Link>
  )
}

Handling Redirect Events

After the user completes or cancels their transaction in the OZZOBiT widget, they will be redirected back to your specified redirectURL. The following query parameters are appended to help you handle the outcome:

Parameter	Type	Description
status	string	Transaction status: 'SUCCESS' or 'FAILURE'
orderId	string	OZZOBiT order ID for reference
message	string	Optional message describing the result
partnerOrderId	string	Your partner order ID if provided

redirect-handler.tsxtsx

// Example redirect handler (Next.js App Router)
// app/redirect-handler/page.tsx

'use client'

import { useSearchParams } from 'next/navigation'
import { useEffect } from 'react'

export default function RedirectHandler() {
  const searchParams = useSearchParams()
  const status = searchParams.get('status')
  const orderId = searchParams.get('orderId')

  useEffect(() => {
    if (status === 'SUCCESS') {
      console.log('Order completed successfully:', orderId)
      // Update your UI, show success message, refresh balances
    } else if (status === 'FAILURE') {
      console.log('Order failed:', orderId)
      // Show error message to user
    }
  }, [status, orderId])

  return (
    <div style={{ padding: 40, textAlign: 'center' }}>
      <h2>{status === 'SUCCESS' ? '✅ Purchase Complete!' : 'Transaction Finished'}</h2>
      <p>Order ID: {orderId}</p>
      <a href="/">Return to Home</a>
    </div>
  )
}

ℹ️

Best Practices

Always validate the orderId by calling the Get Order API before taking action
Use HTTPS for your redirectURL
Handle edge cases like users closing the tab without completing
Consider using webhooks as a backup for reliable status updates