Initialization

Start the SDK

Initialization

Two ways to launch the SDK:

Experience	Description
Standard	Opens the Home view for new transfers
Transfer	Opens Transfer Details for a specific `transferId`

Standard Experience

Definition

startSDK({
  configuration,
  fetchAccessTokenDetails,
  verifyFundsAndCreateTransfer,
  onLoad,
  onClose,
}: {
  configuration: ReadyRemitConfiguration;
  fetchAccessTokenDetails: () => Promise<ReadyRemitTokenResponse | ReadyRemitError>;
  verifyFundsAndCreateTransfer: (
    request: ReadyRemitTransferRequest,
  ) => Promise<ReadyRemitTransferResponse | ReadyRemitError>;
  onLoad?: () => Promise<void>;
  onClose?: () => Promise<void>;
}): void

Properties

Property	Type	Description
configuration	ReadyRemitConfiguration	Options for environment, UI and behavior
fetchAccessTokenDetails	`() => Promise<`ReadyRemitTokenResponse `\|` ReadyRemitError`>`	Provides authentication for API calls
verifyFundsAndCreateTransfer	`(`ReadyRemitTransferRequest`) => Promise<`ReadyRemitTransferResponse `\|` ReadyRemitError`>`	Verifies funds and creates transfer
onLoad	`() => Promise<void>`	Called when the SDK has fully launched
onClose	`() => Promise<void>`	Called when the SDK has been closed

Minimal Example

import React from 'react';
import { Button, View } from 'react-native';
import { startSDK, ReadyRemitEnvironment } from 'react-native-ready-remit-sdk';

export default function App() {
  const handleStartSDK = () => {
    startSDK({
      configuration: {
        environment: ReadyRemitEnvironment.Sandbox,
      },
      fetchAccessTokenDetails: async () => ({
        accessToken: 'your-access-token',
        expiresIn: 3600,
        scope: 'readyremit:write',
        tokenType: 'Bearer',
      }),
      verifyFundsAndCreateTransfer: async (request) => ({
        transferId: 'TXN123456789',
      }),
    });
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', padding: 24 }}>
      <Button title="Start ReadyRemit" onPress={handleStartSDK} />
    </View>
  );
}

Full Example with Theme Customization

import React from 'react';
import { Button, View, StyleSheet } from 'react-native';
import {
  startSDK,
  ReadyRemitEnvironment,
  ReadyRemitSupportedAppearance,
  ReadyRemitLocalization,
  type ReadyRemitAppearance,
  type ReadyRemitConfiguration,
  type ReadyRemitTransferRequest,
} from 'react-native-ready-remit-sdk';

// Custom theme configuration
const appearance: ReadyRemitAppearance = {
  foundations: {
    colorPrimary: { light: '#42CB91', dark: '#42CB91' },
    colorTextPrimary: { light: '#001C2A', dark: '#E3E3E3' },
    colorBackground: { light: '#F4F5F6', dark: '#111111' },
    fontFamily: 'inter',
  },
  components: {
    button: {
      buttonPrimaryBackgroundColor: { light: '#00766C', dark: '#20948A' },
      buttonRadius: 8,
      buttonTextCase: 'capitalize',
    },
    inputFields: {
      inputRadius: 8,
    },
    content: {
      contentHomepageHeadline: 'Send money internationally',
      contentHomepageDescription: 'Send funds to your recipients with convenience and flexibility.',
    },
  },
};

// SDK configuration
const sdkConfiguration: ReadyRemitConfiguration = {
  environment: ReadyRemitEnvironment.Sandbox,
  appearance: appearance,
  supportedAppearance: ReadyRemitSupportedAppearance.Device,
  localization: ReadyRemitLocalization.EN_US,
  idleTimeoutInterval: 300,
};

export default function App() {
  const fetchAccessTokenDetails = async () => {
    // Replace with your authentication logic
    const response = await fetch('https://your-api.com/auth/token');
    const data = await response.json();
    return {
      accessToken: data.access_token,
      expiresIn: data.expires_in,
      scope: data.scope,
      tokenType: data.token_type,
    };
  };

  const verifyFundsAndCreateTransfer = async (request: ReadyRemitTransferRequest) => {
    // Replace with your transfer logic
    const response = await fetch('https://your-api.com/transfers', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(request),
    });
    const data = await response.json();
    return { transferId: data.id };
  };

  const handleStartSDK = () => {
    startSDK({
      configuration: sdkConfiguration,
      fetchAccessTokenDetails,
      verifyFundsAndCreateTransfer,
      onLoad: async () => {
        console.log('SDK loaded successfully');
      },
      onClose: async () => {
        console.log('SDK closed');
      },
    });
  };

  return (
    <View style={styles.container}>
      <Button title="Start ReadyRemit" onPress={handleStartSDK} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5F5F5',
  },
});

Transfer Experience

Use this to display details for an existing transfer.

Definition

startTransferDetails({
  transferId,
  configuration,
  fetchAccessTokenDetails,
  onLoad,
  onClose,
}: {
  transferId: string;
  configuration: ReadyRemitConfiguration;
  fetchAccessTokenDetails: () => Promise<ReadyRemitTokenResponse | ReadyRemitError>;
  onLoad?: () => Promise<void>;
  onClose?: () => Promise<void>;
}): void

Properties

Property	Type	Description
transferId	`string`	Unique identifier of the transfer to display details for
configuration	ReadyRemitConfiguration	Options for environment, UI and behavior
fetchAccessTokenDetails	`() => Promise<`ReadyRemitTokenResponse `\|` ReadyRemitError`>`	Provides authentication for API calls
onLoad	`() => Promise<void>`	Called when the transfer details view has fully launched
onClose	`() => Promise<void>`	Called when the transfer details view has been closed

Sample Usage

import React from 'react';
import { Button, View } from 'react-native';
import {
  startTransferDetails,
  ReadyRemitEnvironment,
  ReadyRemitSupportedAppearance,
} from 'react-native-ready-remit-sdk';

export default function TransferDetailsScreen({ transferId }: { transferId: string }) {
  const handleViewDetails = () => {
    startTransferDetails({
      transferId: transferId,
      configuration: {
        environment: ReadyRemitEnvironment.Sandbox,
        supportedAppearance: ReadyRemitSupportedAppearance.Device,
      },
      fetchAccessTokenDetails: async () => ({
        accessToken: 'your-access-token',
        expiresIn: 3600,
        scope: 'readyremit:write',
        tokenType: 'Bearer',
      }),
      onLoad: async () => {
        console.log('Transfer details loaded');
      },
      onClose: async () => {
        console.log('Transfer details closed');
      },
    });
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', padding: 24 }}>
      <Button title="View Transfer Details" onPress={handleViewDetails} />
    </View>
  );
}

Updated 4 days ago