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: PayMittoConfiguration;
  fetchAccessTokenDetails: () => Promise<PayMittoTokenResponse | PayMittoError>;
  verifyFundsAndCreateTransfer: (
    request: PayMittoTransferRequest,
  ) => Promise<PayMittoTransferResponse | PayMittoError>;
  onLoad?: () => Promise<void>;
  onClose?: () => Promise<void>;
}): void

Properties

Property	Type	Description
configuration	PayMittoConfiguration	Options for environment, UI and behavior
fetchAccessTokenDetails	`() => Promise<`PayMittoTokenResponse `\|` PayMittoError`>`	Provides authentication for API calls
verifyFundsAndCreateTransfer	`(`PayMittoTransferRequest`) => Promise<`PayMittoTransferResponse `\|` PayMittoError`>`	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, PayMittoEnvironment } from 'react-native-paymitto-sdk';

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

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

Full Example with Theme Customization

import React from 'react';
import { Button, View, StyleSheet } from 'react-native';
import {
  startSDK,
  PayMittoEnvironment,
  PayMittoSupportedAppearance,
  PayMittoLocalization,
  type PayMittoAppearance,
  type PayMittoConfiguration,
  type PayMittoTransferRequest,
} from 'react-native-paymitto-sdk';

// Custom theme configuration
const appearance: PayMittoAppearance = {
  foundations: {
    colorPrimary: { light: '#4451F6', dark: '#7B86FF' },
    colorTextPrimary: { light: '#120F0D', dark: '#F5F3F0' },
    colorBackground: { light: '#F8F6F3', dark: '#121110' },
    fontFamily: 'sf pro',
  },
  components: {
    button: {
      buttonPrimaryBackgroundColor: { light: '#1F1093', dark: '#5C68FF' },
      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: PayMittoConfiguration = {
  environment: PayMittoEnvironment.Sandbox,
  appearance: appearance,
  supportedAppearance: PayMittoSupportedAppearance.Device,
  localization: PayMittoLocalization.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: PayMittoTransferRequest) => {
    // 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 PayMitto" 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: PayMittoConfiguration;
  fetchAccessTokenDetails: () => Promise<PayMittoTokenResponse | PayMittoError>;
  onLoad?: () => Promise<void>;
  onClose?: () => Promise<void>;
}): void

Properties

Property	Type	Description
transferId	`string`	Unique identifier of the transfer to display details for
configuration	PayMittoConfiguration	Options for environment, UI and behavior
fetchAccessTokenDetails	`() => Promise<`PayMittoTokenResponse `\|` PayMittoError`>`	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,
  PayMittoEnvironment,
  PayMittoSupportedAppearance,
} from 'react-native-paymitto-sdk';

export default function TransferDetailsScreen({ transferId }: { transferId: string }) {
  const handleViewDetails = () => {
    startTransferDetails({
      transferId: transferId,
      configuration: {
        environment: PayMittoEnvironment.Sandbox,
        supportedAppearance: PayMittoSupportedAppearance.Device,
      },
      fetchAccessTokenDetails: async () => ({
        accessToken: 'your-access-token',
        expiresIn: 3600,
        scope: 'paymitto: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>
  );
}