OnyeSync Patient Access SDK

A JavaScript/TypeScript SDK for integrating healthcare provider connections and patient data access into your applications.

Installation

npm install onyesync-patient-access

Quick Start

import { OnyeSync, Provider } from 'onyesync-patient-access';

// Initialize the SDK
OnyeSync.init({
  publicKey: 'your-public-key',
  connectionId: 'your-connection-id'.
  apiBaseUrl: 'https://sandbox.onyeone.com/api',
  onConnectionResult: (result) => {
      console.log('Result:', result.status);
  }
});

// Render the patient access button
OnyeSync.renderPatientAccessButton({
  container: '#connect-button',
  buttonText: 'Patient Access'
});

Configuration

Initialize the SDK

OnyeSync.init({
  publicKey: string;           // Required: Your OnyeSync public key
  apiBaseUrl: string;           // Required: Your OnyeSync api base url
  connectionId: string;       
  // Event handlers
  onLoad?: () => void;
  onError?: (error: Error) => void;
  onRedirect?: (provider: Provider) => void;
  onConnectionResult?: (result: ConnectionResult) => void;
});

Render Patient Access Button

OnyeSync.renderPatientAccessButton({
  container: string | HTMLElement;  // CSS selector or DOM element
  buttonText?: string;              // Custom button text
  buttonStyle?: ButtonStyle;        // Custom button styling
});

// ButtonStyle interface
interface ButtonStyle {
  textColor?: string;               // Button text color
  backgroundColor?: string;         // Button background color
  fontSize?: string;                // Font size (e.g., '16px', '1rem')
  fontFamily?: string;              // Font family
  borderRadius?: string;            // Border radius for rounded corners
  padding?: string;                 // Button padding
  hoverBackgroundColor?: string;    // Background color on hover
  hoverTextColor?: string;          // Text color on hover
  hoverShadow?: string;             // Box shadow on hover
  border?: string;                  // Button border
  fontWeight?: string;              // Font weight
}

Event Handling

Connection Results

Handle successful or failed patient data connections:

OnyeSync.init({
  publicKey: 'your-key',
  apiBaseUrl: 'https://sandbox.onyeone.com/api',
  connectionId: 'your-connection-id',
  onConnectionResult: (result) => {
    switch (result.status) {
      case 'success':
        console.log('Connection ID:', result.connection_id);
        break;
      case 'error':
        console.error('Connection failed:', result.error);
        break;
    }
  }
});

Error Handling

OnyeSync.init({
  publicKey: 'your-key',
  apiBaseUrl: 'https://sandbox.onyeone.com/api',
  connectionId: 'your-connection-id',
  onError: (error) => {
    console.error('SDK Error:', error.message);
    // Handle error appropriately
  }
});

API Reference

Methods

OnyeSync.init(config: OnyeSyncConfig)

Initialize the SDK with configuration options.

OnyeSync.renderPatientAccessButton(options: RenderOptions)

Render the patient access button and provider search modal.

OnyeSync.checkForRedirect(): Promise<boolean>

Manually check for redirect parameters (useful for handling OAuth returns).

OnyeSync.destroy()

Clean up all SDK resources and unmount components.

OnyeSync.isInitialized(): boolean

Check if the SDK has been initialized.

Types

Provider

interface Provider {
  id: string;
  name: string;
  tenant_id: string;
  ehr_type: string;
  base_url: string;
}

ConnectionResult

interface ConnectionResult {
  status: 'success' | 'error';
  connection_id?: string;
  error?: string;
}

ButtonStyle

interface ButtonStyle {
  textColor?: string;
  backgroundColor?: string;
  fontSize?: string;
  fontFamily?: string;
  borderRadius?: string;
  padding?: string;
  hoverBackgroundColor?: string;
  hoverTextColor?: string;
  hoverShadow?: string;
  border?: string;
  fontWeight?: string;
}

Styling

The SDK includes built-in Tailwind CSS styles scoped to .onyesync-sdk class. You can customize the button appearance in multiple ways:

Custom Button Styling with ButtonStyle

OnyeSync.renderPatientAccessButton({
  container: '#my-button',
  buttonText: 'Connect to Provider',
  buttonStyle: {
    textColor: '#ffffff',
    backgroundColor: '#3b82f6',
    fontSize: '16px',
    fontFamily: 'Arial, sans-serif',
    borderRadius: '8px',
    padding: '12px 24px',
    fontWeight: 'bold',
    hoverBackgroundColor: '#2563eb',
    hoverTextColor: '#ffffff',
    hoverShadow: '0 8px 16px rgba(59, 130, 246, 0.3)',
    border: '2px solid #1d4ed8'
  }
});

Button Style Examples

Modern Blue Button

buttonStyle: {
  backgroundColor: '#3b82f6',
  textColor: '#ffffff',
  borderRadius: '12px',
  padding: '14px 28px',
  fontSize: '16px',
  fontWeight: '600',
  hoverBackgroundColor: '#2563eb',
  hoverShadow: '0 10px 25px rgba(59, 130, 246, 0.4)'
}

Minimal Outline Button

buttonStyle: {
  backgroundColor: 'transparent',
  textColor: '#374151',
  border: '2px solid #d1d5db',
  borderRadius: '8px',
  padding: '10px 20px',
  fontSize: '14px',
  hoverBackgroundColor: '#f9fafb',
  hoverTextColor: '#111827'
}

Examples

React/NextJS Integration

import React, { useEffect, useState } from 'react';
import { OnyeSync, Provider, ConnectionResult } from 'onyesync-patient-access';

function MyComponent() {
  const [connectionResult, setConnectionResult] = useState<ConnectionResult | null>(null);

  useEffect(() => {
    OnyeSync.init({
      publicKey: process.env.REACT_APP_ONYESYNC_PUBLIC_KEY!,
      apiBaseUrl: 'https://sandbox.onyeone.com/api',
      connectionId: 'your-connection-id',
      onConnectionResult: setConnectionResult,
      onError: (error) => console.error('SDK Error:', error)
    });

    OnyeSync.renderPatientAccessButton({
      container: '#connect-button',
      buttonText: 'Connect to Provider',
      buttonStyle: {
        backgroundColor: '#10b981',
        textColor: '#ffffff',
        borderRadius: '12px',
        padding: '14px 28px',
        fontSize: '16px',
        fontWeight: '600',
        hoverBackgroundColor: '#059669',
        hoverShadow: '0 8px 20px rgba(16, 185, 129, 0.4)'
      }
    });

    return () => OnyeSync.destroy();
  }, []);

  return (
    <div>
      <div id="connect-button"></div>
      {connectionResult?.status === 'success' && (
        <div>
          <h3>Connection Successful!</h3>
          <p>Connection ID: {connectionResult.connection_id}</p>
        </div>
      )}
    </div>
  );
}

Vanilla JavaScript

<!DOCTYPE html>
<html>
<head>
  <title>OnyeSync Integration</title>
</head>
<body>
  <div id="connect-button"></div>
  // Load SDK via CDN
  <script src="https://unpkg.com/[email protected]/dist/onyesync-patient-access.umd.cjs"></script>
  <script>
    OnyeSync.init({
      publicKey: 'your-public-key',
      apiBaseUrl: 'https://sandbox.onyeone.com/api',
      connectionId: 'your-connection-id',
      onConnectionResult: (result) => {
        if (result.status === 'success') {
          alert('Connected successfully!');
        }
      }
    });
    
    OnyeSync.renderPatientAccessButton({
      container: '#connect-button'
    });
  </script>
</body>
</html>

Support

For support and questions:

• Documentation: onyeone.apidog.io
• Email: [email protected]