React Integration

equal-nextjs-pfm-sdk: ^1.0.0

import React, { useState, useRef } from 'react';
import PFMSDK from 'equal-nextjs-pfm-sdk';

export default function MyComponent() {
  const [token, setToken] = useState<string | null>(null);
  const pfmInstanceRef = useRef<any>(null);
  const environment = ''; // Change to 'production' for production

  const fetchToken = async () => {
    fetch('https://<your_backend_api_that_calls_sdk_init_api_and_returns_token>', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify('<API Body as per your API contracts>')
    })
    .then(response => response.json())
    .then(data => {
      setToken(data.token);
      pfmInstanceRef.current = new PFMSDK(data.token, environment);
    })
    .catch(error => console.error('Error fetching token:', error));
  };

  const openPFM = () => {
    if (pfmInstanceRef.current) {
      pfmInstanceRef.current.openPFM(
        (error: any) => console.error('PFM SDK Error:', error),
        () => console.log('PFM SDK Closed')
      );
    } else {
      console.error('PFM SDK is not initialized!');
    }
  };
}

// TO Initialize the SDK and get instance of it
pfmInstanceRef.current = new PFMSDK(token, environment);

// Launch SDK and handle onClose & onError callbacks.
pfmInstanceRef.current.openPFM(
  (error: any) => console.error('PFM SDK Error:', error), // onError(error: any) - Invoked when any error occurs.
  (reason: string) => console.log('PFM SDK Closed') // onClose() - Invokes when SDK is closed by user.
);