SAAFE SDK

A secure, lightweight, customizable React iframe SDK to redirect users to a hosted journey.

Features

• 🔒 Secure iframe communication with PostMessage API
• 🎨 Style-safe - no CSS leakage or DOM conflicts
• 📱 Supports popup modal mode with clean UI
• 🧩 Full TypeScript support
• 🪶 Lightweight (<50KB minified + gzipped)
• ⚛️ Compatible with React 16.8+ (using hooks)

Installation

npm install saafe-sdk-react
# or
yarn add saafe-sdk-react

Usage

Component API

import { RedirectSDK } from 'saafe-sdk-react';

function MyComponent() {
  const handleComplete = (data) => {
    console.log('Journey completed with data:', data);
  };

  const handleCancel = () => {
    console.log('Journey was cancelled');
  };

  return (
    <div>
      <h1>My Application</h1>
      
      <RedirectSDK 
        fi="YXBxcncdVFxEHUVUQQ=="
        reqdate="210420251005562"
        ecreq="BUAO4s74gDvweksQVC9qjlRUZdZam2XZcYs3WxBsPEkGqrNGf4Ed-94CQQUHzNaLywXJjVZ8WyeZ5oDZBC556PLUm0mjdgK2v070_Y5UEfVe8OiVBFCaXBEk-TZCG4uj-IWjN_ZcKh-UT5RwtqpbXI4GYg4UN1O5rCqnr4IYsjzpD3cH-f9SNXDlJbo579cdAOHItRBEvYPDoRBQ4WJoEZZhFjSiRXxziTGeIxPHE4z5U0NPpYoQm676FaCwz6gXWpn7ARAx7Kk9irOQ09FqfMWevGMP_O9P6hOFjxNmulygXcXnI7DZtlUGG5wf2OlG"
        mode="popup"
        width="80%" 
        height="80%"
        buttonProps={{
          text: "Start Journey",
          className: "my-button",
          style: { backgroundColor: "blue", color: "white" }
        }}
        onLoad={() => console.log('Iframe loaded')}
        onComplete={handleComplete}
        onCancel={handleCancel}
        onError={(err) => console.error('Error:', err)}
      />
    </div>
  );
}

Programmatic API

import { triggerRedirect } from 'saafe-sdk-react';

function MyComponent() {
  const startJourney = () => {
    const instance = triggerRedirect({
      fi: "YXBxcncdVFxEHUVUQQ==",
      reqdate: "210420251005562",
      ecreq: "BUAO4s74gDvweksQVC9qjlRUZdZam2XZcYs3WxBsPEkGqrNGf4Ed-94CQQUHzNaLywXJjVZ8WyeZ5oDZBC556PLUm0mjdgK2v070_Y5UEfVe8OiVBFCaXBEk-TZCG4uj-IWjN_ZcKh-UT5RwtqpbXI4GYg4UN1O5rCqnr4IYsjzpD3cH-f9SNXDlJbo579cdAOHItRBEvYPDoRBQ4WJoEZZhFjSiRXxziTGeIxPHE4z5U0NPpYoQm676FaCwz6gXWpn7ARAx7Kk9irOQ09FqfMWevGMP_O9P6hOFjxNmulygXcXnI7DZtlUGG5wf2OlG",
      mode: 'popup',
      width: '80%',
      height: '80%',
      onComplete: (data) => console.log('Journey completed with data:', data),
      onCancel: () => console.log('Journey was cancelled'),
      onError: (err) => console.error('Error:', err)
    });
    
    // You can close the journey programmatically
    // instance.close();
  };

  return (
    <div>
      <h1>My Application</h1>
      <button onClick={startJourney}>Start Journey</button>
    </div>
  );
}

URL Construction

The SDK internally constructs the URL as follows:

https://stage-redirection.saafe.in/login?fi={fi}&reqdate={reqdate}&ecreq={ecreq}

Where:

• fi: Financial institution identifier
• reqdate: Request date identifier
• ecreq: Encrypted request data

API Reference

RedirectSDK Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | fi | string | Yes | - | Financial institution identifier | | reqdate | string | Yes | - | Request date identifier | | ecreq | string | Yes | - | Encrypted request data | | mode | 'embedded' | 'popup' | No | 'popup' | Mode of the redirect | | width | string | number | No | '80%' | Width of the iframe | | height | string | number | No | '80%' | Height of the iframe | | buttonProps | ButtonProps | No | {} | Props for the trigger button | | onLoad | () => void | No | - | Callback when the iframe is loaded | | onComplete | (data: any) => void | No | - | Callback when the journey is completed | | onCancel | () => void | No | - | Callback when the journey is cancelled | | onError | (error: Error) => void | No | - | Callback when an error occurs |

ButtonProps

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | text | string | No | 'Start Journey' | Text to display on the button | | className | string | No | - | CSS class for the button | | style | CSSProperties | No | - | Inline styles for the button | | children | ReactNode | No | - | Custom content for the button |

triggerRedirect Options

Same as RedirectSDK props, but without buttonProps. Additionally:

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | container | HTMLElement | No | document.body | Container element to render the iframe in (only for embedded mode) |

Security Features

• Uses sandbox attribute on iframes with minimal required permissions
• Validates origin of incoming messages
• Passes token parameters securely
• Uses CSS modules to prevent style leakage

License

MIT